I have a task to write a file manager on vue.js - frontend and on php - backend. I roughly understand that php needs to write an API that will work with the database and generate a json file, and then feed it to vue, but could not find anything useful on the Internet how this can be implemented and linked backend and frontend. If there are any good examples or advice I will be very grateful. (Webpack assembler)

Closed due to the fact that the issue is too general for the user207618, D-side , 0xdb , Twiss , MSDN.WhiteKnight participants on Apr 13 '18 at 10:03 .

Please correct the question so that it describes the specific problem with sufficient detail to determine the appropriate answer. Do not ask a few questions at once. See “How to ask a good question?” For clarification. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • I do not understand something? Do you work with the database or FS? You have the same task - file manager. - yarkov_aleksei
  • With bd, I need to get a list of files located there and the ability to work with them (delete, upload, download). On vue, just a representation of what is there. If I'm wrong, can you explain how to? - RaudByorn
  • Yes, what have the "rights, not rights"? Just why do you need to store data on the file system in the database, - yarkov_aleksei

2 answers 2

It's simple:
We make a request to the server for a list of files, shove the resulting data property and rejoice.
If necessary, just edit the data property.

 Vue.config.productionTip = false; Vue.config.devtools = false; Vue.component('dir-view', { props: ['dir'], template: ` <div class="dir"> <label> {{ dir.name }} <input type='checkbox' /> <div class='content'> <div class='children' v-for="child in dir.children"> <dir-view v-if="child.children.length" :dir="child"></dir-view> <span v-else>{{ child.name }}</span> </div> </div> </label> </div>` }); new Vue({ el: '#demo', data: { items: [ { name: "L4D2.exe", children: [] }, { name: "System", children: [ { name: "kernel32.dll", children: [] }, { name: "Porn", children: [ { name: "Hot.mkv", children: [] } ] }, { name: "Calc.exe", children: [] } ] }, { name: "Referats", children: [ { name: "Quantum mechanics.pdf", children: [] } ] } ] } }) 
 .content, input[type='checkbox'] { display: none; } .content { padding-left: 10px; } input[type='checkbox']:checked ~ .content { display: block; } label:before { content: '> '; } 
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <div id="demo"> <div class='item' v-for="item in items"> <dir-view v-if="item.children.length" :dir="item"></dir-view> <span v-else>{{ item.name }}</span> </div> </div>

    The other day I did a similar job at React. I recommend not to reinvent the wheel, but to take Yandex as the basis for API documentation

    • Thanks, I will pick. - RaudByorn