前后端分离--MockJS模拟API返回数据
其实，我们都知道前后端分离已经逐渐成为业界项目开发标准方式。在Web开发前后端不分离的时代，开发人员既要开发前端，还得开发后端，而且视图和业务逻辑混合在一起，这时候一般我们一个完整的开发流程是这样的：前端根据UI设计稿设计html界面，然后后端实现服务接口，等服务接口实现完毕后，后端将前端的html改成jsp并集成后端开发的服务接口，最终测试进行上线。这种方式缺点很明显，前端无法单独进行调试而且前端jsp代码混杂后端业务逻辑，而且前端工作严重依赖于后端。
所以慢慢衍生出以重新的架构模式，在开发阶段前后端约定好Restful API的返回格式，然后后端业务逻辑设计Restful API，前端按照约定好的返回格式协同开发前端并独立完成测试工作。等前后端工作都完成后，前后端一起进行联调测试。这样做的优点在于将前后端进行分离，代码可维护性变强，而且前后端可以协同开发，开发效率更是可以大大提高。而刚才也说到了前后端可以协同开发，那前端如果开发完成如何在API还没有完成的情况下机型模拟数据测试呢？所以本篇文章介绍一个前端开发利器---mockJS模拟Restful API 返回数据。
简介
MochJS实际上就是一个模拟数据生成工具，可以模拟各种业务场景返回不同格式的数据。支持生成随机文本、数字、日期、邮箱、颜色、图片等。而且使用非常简单，我们使用MockJS就可以实现后端Restful API还未提供的情况下前端完成模拟测试。
安装
MockJS安装其实很简单，我们使用npm安装下依赖就可以，使用命令：
npm install mockjs --saveMockJS语法规则
MockJS基本语法其实很简单，我们可以使用Mock.mock()指定一个测试url，然后指定返回格式的模板，格式模板按照和后端返回的格式去设计。同时我们还可以使用Mock.setup()设置配置信息如超时时间等,目前Mock.setup()仅能用于配置ajax请求。
Mock.mock(url, template);
Mock.setup(setting);MockJS简单使用
其实使用Mock一般有两种方案，前端直接使用Mock以及使用Node搭建一个可停止服务的Mock服务。这两种方案有什么区别呢？我们先来看看第一种方案，在前端项目中直接引用Mock。首先我们先创建一个api.js用于配置Mock的基本配置信息：
import Mock from 'mockjs';
const url = {
testUrl: 'http://api.niyueling.cn/test/testOne',
}
module.exports = [
Mock.mock(url.testUrl, {
"userInfo|4": [{ //生成num个userInfo的数据
"id|+1": 1, //数字从1开始后续依次加一
"name": "@cname", //名字为随机中文名字
"ago|18-28": 25, //年龄为18-28之间的随机数字
"sex|1": ["男", "女"], //性别是数组中的一个，随机的
"job|1": ["web", "UI", "python", "php"] //工作是数组中的一个
}]
})
]然后接下来我们去页面组件中调用我们刚才配置的url。看看有什么效果：
var that = this;
this.$req({
method: "get",
url: 'http://api.niyueling.cn/test/testOne',
data: {
}
}).then(function(res) {
console.log(res);
}).catch(function(e) {
_this.$message.error('服务器可能出现异常!');
});然后我们可以看看控制台打印的信息：
{
userInfo: [
{ id: 1, name: '阎杰', ago: 24, sex: '男', job: 'python' },
{ id: 2, name: '杜军', ago: 18, sex: '男', job: 'UI' },
{ id: 3, name: '秦秀兰', ago: 24, sex: '男', job: 'php' },
{ id: 4, name: '周刚', ago: 26, sex: '女', job: 'python' }
]
}按照我们想要的效果返回数据了，可以发现mock的使用很简单，但是这种集成在前端项目里面存在一个问题：如果后端Restful API实现完毕，前端需要将这部分调用mock的代码注释掉，不然真正的API调用会被mock拦截掉。这样前端会改动来改动去工作量大还不好维护。所以我们可以使用第二种方案：使用Node搭建一个简单的可停止运行的Mock服务。考虑到一部分人没使用过Node，不知道什么是express，什么是路由，所以我们可以直接使用express构建器快速搭建一个小型express项目，express项目里面项目路由都是配置成功的，我们可以直接实现Mock接口服务：
//全局安装express-genetator项目构建器
npm install -g express-generator
//使用全局构建器创建一个express项目，名称为demo_project
express demo_project
//进入项目安装依赖
cd demo_project && npm install接着我们就可以开始设计Mock服务，express项目默认给我们配置好两个路由，我们可以打开routes/users.js实现第一个Mock路由：
var Mock = require('mockjs')
xlsMallRouters.testMock = function (req, res) {
var par = paramAll(req);
return res.json(new PKG(Mock.mock({
"userInfo|4": [{ //生成|num个如下格式名字的数据
"id|+1": 1, //数字从当前数开始后续依次加一
"name": "@cname", //名字为随机中文名字
"ago|18-28": 25, //年龄为18-28之间的随机数字
"sex|1": ["男", "女"], //性别是数组中的一个，随机的
"job|1": ["web", "UI", "python", "php"] //工作是数组中的一个
}]
})));
}
router.post('/testMock', xlsMallRouters.testMock);然后通过app.js文件，我们可以定位到项目运行于9000端口，routes/users.js这个路由文件对应路由为users, 上面代码使用router.post表示应该是post请求，所以这个Mock服务的完整url应该如下：
http://127.0.0.1:9000/users/testMock POST我们可以调用Mock服务地址测试返回结果：
{
"status": 200,
"payload": {
"userInfo": [
{
"id": 1,
"name": "叶洋",
"ago": 22,
"sex": "女",
"job": "web"
},
{
"id": 2,
"name": "秦超",
"ago": 22,
"sex": "男",
"job": "python"
},
{
"id": 3,
"name": "程杰",
"ago": 27,
"sex": "男",
"job": "php"
},
{
"id": 4,
"name": "潘娟",
"ago": 22,
"sex": "女",
"job": "UI"
}
]
}
}数据格式返回和刚才完全一致，但是多了一个优点在于后端Restful API还未实现，而前端需要测试，我们就可以使用npm run start命令你个启动这个Mock服务获取返回数据进行测试，当后端API实现完成，我们就停止这个Mock服务的运行，就不需要频繁改动前端的代码。比如我们需要实现登录功能，我们可以略微改动返回格式，将返回格式改为返回用户信息即可：
xlsMallRouters.testMock = function (req, res) {
var par = paramAll(req);
return res.json(new PKG(Mock.mock({
"userInfo|1": [{ //登录成功返回用户信息
"id|+1": 1, //数字从当前数开始后续依次加一
"name": "@cname", //名字为随机中文名字
"ago|18-28": 25, //年龄为18-28之间的随机数字
"sex|1": ["男", "女"], //性别是数组中的一个，随机的
"job|1": ["web", "UI", "python", "php"], //工作是数组中的一个
token: "TKN:R:r:D:QZtyGm5HDZAxi:lxy" //用户登录凭证
}]
})));
}
router.post('/testMock', xlsMallRouters.testMock);关于Mock的基本使用有很多封装好的随机数方法，不过语法都比较简单，有需要的自己查看官方文档，贴下官方文档地址：
https://github.com/nuysoft/Mock/wiki/Getting-Started腾讯云开发者
