前端在早期jQuery时代时，前端功能和后端工程基本上都是合在一起，典型的就是常见的maven工程下面的webapp目录包含前端各类静态资源文件。
这个时候，我们总是会遇到这些问题：
老大，接口文档还没输出，我的好多活干不下去啊！
后端小哥，接口写好了没，我要测试啊！
测试时间不够啊，就要发版了，今天难道我有看明天的太阳升起？
诸如种种，就是一句话：劳资，再也不要指望你们了！
node出现之后，准确的说是前后端分离之后，前端迫切需要一种机制，不在需要依赖后端接口开发。经过这几年的发展，有好多大牛在这方面进行了研究。
现在我们终于可以实现真实模拟测试啦。如今天的主角 mockjs
使用详解
1.首先在 src 目录创建 mock 文件夹，定义 mock 主文件 index.js ，在该文件中定义拦截路由配置；
/** * 定义本地测试接口，最好与正式接口一致，避免联调阶段修改工作量 */ // 引入mockjs import Mock from 'mockjs'; // 引入模板函数类 import record from './presc-record-api'; Mock.setup({ timeout: 800, // 设置延迟响应，模拟向后端请求数据 }); // Mock.mock( url, post/get , 返回的数据)； Mock.mock(/\/api\/healthPlat\/getRecipe\/\w*\/\w*/, 'get', record.getRecipe);
2.在指定的文件中定义模板函数类，示例：
// 获取 mock.Random 对象 // 引入mockjs import { Random } from 'mockjs'; import Utils from './Utils'; function getRecipe(req) { // mock一组数据 const data = []; for (let i = 0; i < 10; i += 1) { const o = { recipeId: Random.guid(), billId: Random.string(10), orgId: Random.string('number', 8, 10), viewName: Random.cword(4, 16), // 随机生成任意名称 personName: Random.cname(), reason: Random.csentence(10, 32), }; data.push(o); } // 返回响应数据对象 return Utils.setRes(req, { data: { idCard: Random.id(), // 随机 details: data, }, totalCount: 20, }); } export default { getRecipe, };
3.在 main.js 中引入 mock/index.js 文件；
// 引入mock文件 import './mock/index'; // mock 方式，正式发布时，注释掉该处即可
接下来的工作就是配置你的 mock 路由以及模板函数啦。Have Fun!
踩的坑
这里我介绍一下在 vue-cli 中使用 Mockjs 踩到的坑：
1.请求路径包含变量，我该怎么办？
使用过 router 码友知道，我们经常要处理地址中包含参数的路由，此时我们只需要在 Mockjs 中使用正则表达式去匹配路径即可完成，示例：
复制代码 代码如下:
Mock.mock(/\/api\/healthPlat\/getRecipeDetail\/\w*\/\w*/, 'get', record.getRecipeDetail);
即我们只在变量的地方使用正则字符集合去匹配我们的变量。
2.为什么在控制台里面的 network 中没有看到我的请求？
刚开始测试时，我查看 network 没有看到请求，感到很奇怪！就自问自己几个问题：
为什么在 main.js 入口文件中引入 mockjs 的相关配置文件？
入口文件不都是在 webpack 中被编译，然后在浏览器中执行的吗？
控制台没有拦截到请求，那就是没有拦截到发送到服务器的请求了，对吧？
带着这些问题，阅读源码和文档，发现：
源码中首先查找是否在 Mockjs 中定义了该请求，有则进行拦截，然后使用其模拟请求对象 MockXMLHttpRequest 进行响应，即此时不发送 XHR 请求；
否则使用本地标准 XHR 对象进行请求，此时可以在控制台 network 中看到请求信息
因此，在 main.js 入口文件中引入 mockjs 的相关配置文件，即是在前端代码中加入了 Mockjs 的模拟方式，它将在浏览器中被执行，而不是真正的发送请求，不过我们可以将其打印到控制台进行查看。
网友评论可以在服务器中使用 mockjs ，此时就是真是的请求，可以在控制台中查看到请求信息，此处本人未进行相应实践，有兴趣的可以参看mock-server:
3.使用模板语法，返回的数据里面包含规则“|rules”，导致解析或取值失败，我该怎么办？
刚开始的时候，我按照文档上说的模板语法进行配置，如：
看到属性 code 居然带着规则一起返回了，我说我请求为啥没有解析成功啊，原来 res.code 一直是 undefined ，这是坑啊。
查看源码和可以搜到的网上示例发现：没有使用模板规则的现象，而是使用 mockjs 提供的内置函数来实现，如 .id() .cname() 等等方法。
于是我将mock相关文件中 code 定义改成下面这样：