前言
我们做前端开发，必然要用测试数据进行测试，有两种情况：
- 有的时候我们需要的测试数据比较简单，这时候，我们自行写一个test.json可以模拟测试数据。
- 如果需要比较复杂的测试数据，通常我们就寄希望于后端同事，请求后端开发同事为你写测试用的接口，或者自己在本机架设服务器实现接口，无形中就增大了自己和他人的工作量，况且，有可能后端同事懒得给你写测试接口。
能否在test.json中写复杂数据呢？比如，我想在json中实时计算new Date('2018-09-21 10:00:00').getTime()或者new Date().getTime()，实际上在.json文件中，这种表达式是非法的，因为JSON的格式非常严苛，根据JSON数据格式规定，值不能是这样的表达式。
同理，在.json文件里面使用Math.random()随机一个数值也是不可能的。
还有一些其他问题，都不是.json文件能解决的。
怎么解决这些问题？
本文就介绍在Vue-Cli内使用mock.js模拟数据的入门，网上的相关教程虽然很多但都过于繁复，本文试图以最简单的方式讲述。
前提
本文只讨论mock.js在Vue-Cli中的使用方法。
假定读者已经掌握了Vue-Cli的基础用法。
假定读者已经安装Axios。
简介和原理
mock.js就是一个模拟服务器端数据的js库，mock这个词来自于一个编程术语，百度百科有：
mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试的测试方法。
mock.js的原理是，改写XMLHttpRequest对象，拦截正常请求，然后用模拟的数据取代真实数据。当使用mock.js的时候，就可以模拟数据，当不使用mock.js的时候，就可以无缝切换到真实数据源。
安装
注意，这个库并不是生产环境需要的库，所以以-dev形式安装即可。
npm install mockjs --save-dev
编写mockdata.js文件
我们需要在项目src目录创建一个js文件，比如叫mockdata.js。内容范例代码：
// 加载mockjs库
import Mock from 'mockjs'
// 构建一个函数对象，返回mock数据
const mockData = function () {
const data;
// 此处省略对data的一系列运算
return {data: data}
}
// url是真实的url，第二个参数是post和get都管，第三个参数就是传入函数对象
Mock.mock('url', /post|get/i, mockData);
这段代码的原理很简单，根据上面注释就可以看懂，最关键的是最后一句，其中url参数，必须是真实的url参数，因为mock.js就是要根据真实url来拦截。
在main.js中引入mockdata.js
这一步简单：require('./mockdata.js')
当我们的项目上线的时候，注释掉这一句即可。
测试
我们需要在项目中使用Axios来get一个接口，比如有一个方法是：
getServerTimestamp () {
this.$axios({
method:'get',
url: '/mock/serverTimestamp'
}).then((response) => {
if (response.status === 200) {
this.serverTimestamp = response.data.serverTimestamp
}
}).catch(() => {
})
}
这段代码的作用你无需关注，只需知道它是get了一个json即可，那么，mockdata.js应该怎么改改？
- url就应该是
./mock/serverTimestamp - 下面这段应该是这样：
const mockData = function () {
const data;
data = new Date('2018-09-21 10:00:00').getTime();
return {data: data}
}
看到了吧？表达式也可以正常运算了。
然后你可以去试试看，尽管./mock/serverTimestamp是不存在的文件，但却得到了想要的数据。
进阶
请耐心的阅读官网：http://mockjs.com/的文档。它的功能强大到超出你的想象。
网友评论