Файловый менеджер на vue.js

183

17 марта 2018, 18:33

У меня есть задание написать файловый менеджер на vue.js - frontend и на php - backend. Я примерно понимаю, что на php нужно написать API, которая будет работать с БД и генерировать json файл, а затем скармливать его vue, но не смог в интернете найти ничего полезного как это конкретно можно реализовать и связать backend и frontend. Если есть какие либо годные примеры или советы буду очень благодарен.(сборщик webpack)

Answer 1

Всё просто:
Делаем запрос к серверу за списком файлов, пихаем полученное в свойство data и радуемся.
При необходимости просто редактируем свойство data.

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>