其实，我们都知道前后端分离已经逐渐成为业界项目开发标准方式。在Web开发前后端不分离的时代，开发人员既要开发前端，还得开发后端，而且视图和业务逻辑混合在一起，这时候一般我们一个完整的开发流程是这样的：前端根据UI设计稿设计html界面，然后后端实现服务接口，等服务接口实现完毕后，后端将前端的html改成jsp并集成后端开发的服务接口，最终测试进行上线。这种方式缺点很明显，前端无法单独进行调试而且前端jsp代码混杂后端业务逻辑，而且前端工作严重依赖于后端。
所以慢慢衍生出以重新的架构模式，在开发阶段前后端约定好Restful API的返回格式，然后后端业务逻辑设计Restful API，前端按照约定好的返回格式协同开发前端并独立完成测试工作。等前后端工作都完成后，前后端一起进行联调测试。这样做的优点在于将前后端进行分离，代码可维护性变强，而且前后端可以协同开发，开发效率更是可以大大提高。而刚才也说到了前后端可以协同开发，那前端如果开发完成如何在API还没有完成的情况下机型模拟数据测试呢？所以本篇文章介绍一个前端开发利器---mockJS模拟Restful API 返回数据。
简介
MochJS实际上就是一个模拟数据生成工具，可以模拟各种业务场景返回不同格式的数据。支持生成随机文本、数字、日期、邮箱、颜色、图片等。而且使用非常简单，我们使用MockJS就可以实现后端Restful API还未提供的情况下前端完成模拟测试。
安装
MockJS安装其实很简单，我们使用npm安装下依赖就可以，使用命令：
npm install mockjs --saveMockJS基本语法其实很简单，我们可以使用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"] //工作是数组中的一个}]})]
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_projectexpress demo_project//进入项目安装依赖cd demo_project && npm install
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{"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);
https://github.com/nuysoft/Mock/wiki/Getting-Started
本文分享自微信公众号 - 程序猿周先森（zhanyue_org）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。