前后端分离–MockJS模拟API返回数据
- 2019 年 12 月 10 日
- 筆記
其实，我们都知道前后端分离已经逐渐成为业界项目开发标准方式。在Web开发前后端不分离的时代，开发人员既要开发前端，还得开发后端，而且视图和业务逻辑混合在一起，这时候一般我们一个完整的开发流程是这样的：前端根据UI设计稿设计html界面，然后后端实现服务接口，等服务接口实现完毕后，后端将前端的html改成jsp并集成后端开发的服务接口，最终测试进行上线。这种方式缺点很明显，前端无法单独进行调试而且前端jsp代码混杂后端业务逻辑，而且前端工作严重依赖于后端。
所以慢慢衍生出以重新的架构模式，在开发阶段前后端约定好Restful API的返回格式，然后后端业务逻辑设计Restful API，前端按照约定好的返回格式协同开发前端并独立完成测试工作。等前后端工作都完成后，前后端一起进行联调测试。这样做的优点在于将前后端进行分离，代码可维护性变强，而且前后端可以协同开发，开发效率更是可以大大提高。而刚才也说到了前后端可以协同开发，那前端如果开发完成如何在API还没有完成的情况下机型模拟数据测试呢？所以本篇文章介绍一个前端开发利器—mockJS模拟Restful API 返回数据。
简介
MochJS实际上就是一个模拟数据生成工具，可以模拟各种业务场景返回不同格式的数据。支持生成随机文本、数字、日期、邮箱、颜色、图片等。而且使用非常简单，我们使用MockJS就可以实现后端Restful API还未提供的情况下前端完成模拟测试。
安装
MockJS安装其实很简单，我们使用npm安装下依赖就可以，使用命令：
npm install mockjs --save
MockJS语法规则
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
