Vue secondary package element-ui tree component (a)

1. Create a folder

2.

1) Elevation init s  

2）安装 npm i express axios element-ui loadsh -S

3. Create server.js file: Write Interface

let express = require('express')
let app = express();


//解决跨域问题
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); //允许任何语言跨域
  if (req.method === 'OPTIONS') {
    return res.send();
  }
  next();
})

app.get('/getTreeList', (req, res) => {
  res.json({
    code: 0,
    parent: [{
        name: '文件夹',
        pid: 0,
        id: 1
      },
      {
        name: '文件夹2',
        pid: 0,
        id: 2
      },
      {
        name: '文件夹3',
        pid: 0,
        id: 3
      },
      {
        name: '文件夹1-1',
        pid: 1,
        id: 4
      },
      {
        name: '文件夹2-1',
        pid: 2,
        id: 5
      }
    ],
    child: [{
        name: '文件1',
        pid: 1,
        id: 10001
      },
      {
        name: '文件2',
        pid: 1,
        id: 10002
      },
      {
        name: '文件2-1',
        pid: 2,
        id: 10003
      },
      {
        name: '文件2-2',
        pid: 2,
        id: 10004
      },
      {
        name: '文件1-1-1',
        pid: 4,
        id: 10005
      },
      {
        name: '文件2-1-1',
        pid: 5,
        id: 10006
      }
    ]
  })
})
app.listen(3040); //node server.js

run code run code, visit lcalhost: 304 / getTreeList path can see myself write json data

 

4. main.js new file, and file App.vue, api.js file (for a secondary package Axios)

main.js

import Vue from 'vue';
import App from './App.vue'
import ElementUI from 'element-ui'; //引入
import 'element-ui/lib/theme-chalk/index.css'; //引入样式
Vue.use(ElementUI); //注册使用

export default new Vue({
  el: '#app',
  render: h => h(App)
})

api.js

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:3040'

export const getTreeList = () => {
  return axios.get('/getTreeList')
}

  App.vue

<template>
  <div>

  </div>
</template>
<script>
import { getTreeList } from './api'
export default {
  async mounted () {
    let { data } = await getTreeList();
    console.log(data);
  }

}
</script>

Use vue serve to:

Visit the link above you can see the console print data:

The total file directory: