[TOC]
一、为什么要mock数据？
VUE项目开发过程中，前后端是完全分离，后端负责提供数据，前端负责数据展示，因此就会存在这种情况：前端需要用到数据接口的时候，后端还没开发出来，此时前端就要挂起吗？当然不是了，我们要解决的就是如何给前端模拟数据？从而实现前后端完全独立开发。
二、如何mock数据？
mock数据交互
在团队协作过程中，在人员角色分工明确的情况下，我们可以先根据产品功能文档，定义好一份前后端交互的api文档，开发人员可根据api文档独立编码；后端比较简单，按api文档实现相应的接口，并为接口编写单元测试，mock前端请求参数即可；而前端可以引入第三者，mock接口返回结果。
如何搭建Mock API:
- 本地json文件
这是最原始的方法了，直接将接口返回的结果，写死在本地文本文件中，如user.json，这种方式也是可以，只是会污染到我们的代码，到了项目上线的，需要修改代码请求接口； - 本地mock api或远程mock api
本地用mockjs，远程用easymock，这两种都可以，可以非常灵活的模拟真实api请求交互，如：http://mockapi/user模拟http://restapi/user，前后端开发完成后，可以通过修改api host一键切换至我们的api。
三、webpack本地代理配置
我们在本地开发的时候，调用远程api，存在ajax跨域请求的问题，此时可通过webpack proxy配置，实现本地请求转发至远程，解决跨域问题。
找到config/index.js修改proxyTable，如下：
proxyTable: {
'/refundApi': {
target: 'https://easy-mock.com/mock/5af0f80305d45458a763bc65', // 接口的域名
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: {
'^/refundApi': ''
}
}
},
假如vue的启动端口是8081，即http://localhost:8081，此时请求http://localhost:8081/refundApi/user会转发至https://easy-mock.com/mock/5af0f80305d45458a763bc65/user。
四、mockjs使用
Mock.js is a simulation data generator to help the front-end to develop and prototype separate from the back-end progress and reduce some monotony particularly while writing automated tests.
The official site: http://mockjs.com
- vue安装mockjs
npm install mockjs
- vue中使用mockjs
示例：http://mockjs.com/examples.html
数据模板格式:
'name|rule': value
属性名|生成规则: 属性值
定义mock api：
// mock/user.js
import Mock from 'mockjs';//es6语法引入mock模块
Mock.mock('/test/', {
// 属性 list 的值是一个数组，其中含有5个元素
'list|5': [{
'url': '@url'
}]
});
调用mock api：
// use in test.vue
import axios from 'axios'
import data from '../mock/user.js'
axios.get('/test/').then(function(res){
var data = res.data;
console.log(JSON.stringify(data));
}).catch(function(err){
console.log(err);
});
请求成功，输出结果：
{
"list": [
{
"url": "http://pqibpj.gt/tqreffku"
},
{
"url": "tn3270://huqptk.tv/wejcc"
},
{
"url": "mid://kncn.bt/hpjutggpn"
}
]
}
五、easymock使用
mockjs确实可以满足我的需求，不过在无意间发现了easymock，就喜欢上这个工具了，easymock其实就是一个在线的mockjs，提供可视化管理界面，能快速配置api地址，生成模拟数据，而其实接触mockjs那会我就有想基于mockjs自己搭建一个专门的mock api服务，没想到早就有人这么干了。
并且easymock还基于GPL3.0开放了源码，企业或个人可下载源码进行私有化部署。
github地址：https://github.com/easy-mock/easy-mock
在线服务：https://easy-mock.com
网友评论