Element（Vue）+Express（Node）模擬服務器獲取本地json數據

網上很多教程說需要在build目錄下的dev-server.js文件中配置，但目前最新的vue-cli是沒有dev-server.js這個文件的，因為已經被合並到webpack.dev.conf.js文件中，所以直接在該文件中配置即可。

下面進入正題：

1、在根目錄新建一個mock文件夾存放所有用於數據測試的.json文件。

users.json：

2、在build目錄下找到webpack.dev.conf.js文件，編寫以下代碼：

// mock code
const express = require('express')
const app = express()

const users = require('../mock/users.json') // 用戶列表數據源
const routes = express.Router()
app.use('/api', routes)

// 如果是post請求，那么將get改為post即可
devServer: {
 ...
 before(app){
      app.get('/api/users', (req, res) => {
        res.json({
          errno:0,
          data:users
        })
      })
    }
}

測試：瀏覽器輸入http://localhost:8080/api/users

3、使用第三方http請求庫axios進行ajax請求

Webstrom中命令行安裝，然后在/src/main.js使用axios

npm install axios --save-dev

main.js中加入以下代碼：

import axios from 'axios'
Vue.prototype.$http = axios

模擬請求代碼（以Element的Table表格組件為例，在需要數據請求的組件文件中的<script></script>中請求）：

export default {
        name: "dataList",
        data() {
            return {
                tableData: [],
                multipleSelection: []
            }
        },
        methods: {
          addUser(){
    　　　　　this.$http.get("http://127.0.0.1:8080/api/users").then(res=> {
              if(!res.errno){
                this.tableData=res.data.data.users;
                console.log(this.tableData)
              }
            })
              .catch(function(error){
                console.log(error);
              });
          },
        },
      mounted:function(){
        this.addUser();
      }
    }

HTML代碼：

<template>
    <div>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年齡"
                    width="120">
            </el-table-column>
 　　　　</el-table>
    </div>
</template>