Vue中使用mock模拟数据

前后端开发分离。在后端没有写好接口之前，我们可以使用mock进行数据模拟，实现真正的前后端分离。
mock据相当于一个跑在本地的服务器，用来回传数据。

mock在Vue-cli中应用

1. 安装mock依赖

//使用axios发送  ajax
	cnpm install axios --save
//使用mockjs产生随机数据
	cnpm install mockjs --save-dev
//使用json5解决json文件,无法添加注释问题
	cnpm install json5 --save-dev

2. 新建mock文件夹,新建testMockjs.js

const Mock = require('mockjs');//mockjs 导入依赖模块
var id = Mock.mock('@id')//得到随机的id,字符串
console.log(Mock.mock('@id'), typeof id)

var obj = Mock.mock({
    id: "@id()",//得到随机的id,对象
    username: "@cname()",//随机生成中文名字
    date: "@date()",//随机生成日期
    avatar: "@image('200x200','red','#fff','avatar')",//生成图片,参数:size, background, foreground, text
    description: "@paragraph()",//描述
    ip: "@ip()",//IP地址
    email: "@email()"//email
})
console.log(obj)

3. 在mock文件夹下,新建index.js

const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');//mockjs 导入依赖模块
const JSON5 = require('json5');
//读取json文件
function getJsonFile(filePath) {
    //读取指定json文件
    var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
    //解析并返回
    return JSON5.parse(json);
}

//返回一个函数
module.exports = function(app){
    //监听http请求
    app.get('/user/userinfo', function (rep, res) {
        //每次响应请求时读取mock data的json文件
        //getJsonFile方法定义了如何读取json文件并解析成数据对象
        var json = getJsonFile('./userInfo.json5');
        //将json传入 Mock.mock 方法中，生成的数据返回给浏览器
        res.json(Mock.mock(json));
    });
}

4. 在vue.config.js添加依赖

module.exports = {
    devServer: {
        before: require('./mock/index.js')//引入mock/index.js
    }
}

5. 发送AJAX请求

import axios from 'axios'
	export default {
	  name: 'HelloWorld',
	  props: {
	    msg: String
	  },
	  mounted() {
	    axios.get('/user/userinfo')
	    .then(res => {
	      console.log(res)
	    })
	    .catch(err => {
	      console.error(err); 
	    })
	  }
	} 

出现问题：

1. 随机数据规则参照mock.js官网
2. 我使用得项目组件为Ant-design-vue，其中表格得dataSouce必须为数组，所以声明生成随机数据时需要数组。

[{
  'id|1-100': 100,
  'station|1-100': 100,
  'date': '@date',
  'session|1-2': 2,
  'direction|1-2': 2,
  'totalPackages|1-100': 100,
  'receivePackages|1-100': 100,
  'payPackets|1-100': 100
}]

3. 数组数据直接渲染到界面时，需添加数组下标。

<a-col :md="2" :sm="6">
  <a-form-item
    label="交换方向">{{dataSource[0].direction}}
  </a-form-item>
</a-col>