共计 1879 个字符，预计需要花费 5 分钟才能阅读完成。
今天在做 vue 项目的 mock 功能，刚刚查了下网络上的文档，但令我感到以外的是，无论是官方文档还是网上的小例子，很难找到一个能从头到尾说明白 mock 的最基本用法的文章，大部分都是对接口的说明。拜托，对于一个刚刚接触 mock 的人来说，最需要的是一个能够运行的小例子，从头到尾给出一个简单的说明，这样能让开发人员最开始对 mock 的规范有一个很全面的理解。
因为最近做前端项目的缘故，查了很多前端技术的官方文档，很遗憾，大部分文档在我看来写的都是一坨屎。能够像国外的开源文档（比如 spring boot，hibernate 等）写的清晰有条理的很少很少（说很少都是客气了，基本上没有）。
先说一下我对 mockjs 的理解。
定义上的东西不用多说，通俗解释，mockjs 实际上是假数据 + 访问假数据的接口的集合，再说通俗点，就像一个水池和输传输水的管道，想要从这个水池抽水，首先管道要插进水池里，其次是水池里要有水。
对于具体的项目来说，axios 提供了管道，并将管道插进 mock 水池，mock.js 就是实际的 mock 水池。
无论项目写的有多复杂，本质上这种概念是不会变的。
废话不多说，直接看 demo
首先需要安装 axios 和 mockjs 的依赖。
命令如以下所示（顺序不重要）
npm i mockjs --save
npm install axios安装成功后，在项目根路径下的 package.json 的 dependencies 中会有这两个依赖的版本说明：
"axios": "^0.19.0",
"mockjs": "^1.0.1-beta3",下面就是核心的 code 了：
首先, 声明 vue 文件中的 template 文件。我在这里用的是 ElementUI 自带的 table 组件。
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>注意其中的 :data="tableData" 这一行，这里指定了 table 中使用的数据对象。
第二步, 写假数据
在项目 src 目录下新建 mock.js 文件，在其中加入以下内容：（此处注意一个知识点，大型项目里会创建 mock 文件夹，并将 index.js 及各个功能放在其中，本质上这是一样的，mock.js=mock/index.js）
// 引入 mockjs
const Mock = require('mockjs')
// 使用 mockjs 模拟数据
Mock.mock('/route1', (req, res) => { // 当 post 或 get 请求到 /api/data 路由时 Mock 会拦截请求并返回上面的数据
let list = [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
return {tableData: list}
})
第三步，将数据声明放到 vue 文件中（第一步涉及的 vue 文件）
<script>
import axios from 'axios'
export default {data () {
return {tableData: []
}
},
mounted: function () {axios.get('/route1').then(res => { // get()中的参数要与 mock.js 文件中的 Mock.mock()配置的路由保持一致
this.tableData = res.data.tableData
console.log(res.data) // 在 console 中看到数据
}).catch(res => {alert('wrong')
})
},
methods: {}}
</script>
这样，一个最简单的 mock+axios 的 vue 项目便做好了
