1 前言
mockjs是前后端分离开发时用来给前台模拟数据的,很厉害的一个神器,把数据模版定好,然后就可以看它根据模版返回随机数据了。今天不说mockjs,官网上写的甚明白,所以贴上官网的链接:http://mockjs.com
然后光有mock也不行啊,前后端分离要实现的就是前端请求随意发,但是不能发送到真正的后台,得发送到一个可以接收请求并且可以使用mockjs模拟出数据然后返回给客户端才行…….这就是为什么需要一个mockserver
这时候出现这个puermock的一个自称mockserver的东西,然后他要做什么:
- 可以配置不同请求的不同的数据模版
- 拦截 Ajax 请求
- 根据配置的数据模版生成模拟数据
- 返回模拟数据
如下图所示:
2 安装
- 同样是基于node的,所以还是先安装node(也可以装在本地)
全局安装puer(建议装在本地,方便对插件源码进行修改)
npm install -g pure
安装puer-mock
npm install —saved-dev puer-mock
3 结合平台的使用场景
主要使用在前后台分离开发的时候,用来模拟后台的接口,使用在平台的时候主要应用在测试环境中,结合nginx代理,如下图所示
4 使用
它最重要的两个文件:_mockserver.js 和 _mockserver.json
_mockserver.json是配置文件,用来配置拦截的Ajax接口以及该接口返回数据的的数据模版的,使用的时候主要配置这个文件。
而_mockserver.js,就是用来指出_mockserver.json文件在哪的......
最好的教程就是puermock自己给出的示例文件,在安装好的puermock包中(就是在安装的本地目录下的node_modules中的puer-mock文件夹中)有这两个文件的具体示例和讲解,注释很详细,在这就不赘述了。
- _mockserver.js
根据上图设置要读取的json的位置,路径是相对于“puer -a“指令(详情请见第三步)的执行位置。
_mockserver.json
启动指令
puer -a [_mockserver.js相对于当前位置的路径]
例如_mockserver.js在当前目录下的pmock中,运行:puer -a pmock/_mockserver.js
5 改造
Puermock有缺点,就是模拟的返回值只能是一个json对象,当根据需求要返回一个随机个数的数组或者一个随机字符串,以及puermock启动时只能加载一个json文件,如果把所有的配置都写在一个文件里比较不方便,
5.1 完善返回数据多格式
解决方案:增加三个特殊配置项——specialArray,specialString,specialNumber,分别代表返回随机数组、随机字符串、随机数字
具体实现方法:在node_modules中找到”/puer-mock/src/route-config.js”文件,在大约48行左右找到sendMockData方法,在其中“var mockResponseData = Mock.mock(mockResponse);”的代码后边添加下面代码即可:
//增加返回数据格式,可自行配置
if(mockResponseData.specialArray){
mockResponseData = mockResponseData.specialArray;
}else if(mockResponseData.specialString){
mockResponseData = mockResponseData.specialString;
}else if(mockResponseData.specialNumber){
mockResponseData = mockResponseData.specialNumber
}
以上可以看出几个特殊字段的优先级,specialArray > specialString > specialNumber > 无,就是当出现specialArrray的时候会优先返回spacialArray中模拟出来的数据,其他模拟的数据将被覆盖不返回。
示例如下图所示
1.当没有特殊字段的时候
2.当有特殊字段的时候
因为有specialArray的缘故,string字段就被覆盖了,只返回specialArray产生的随机数组(只是一个随机数组,不是一个键值对了)
再比如说有specialNumber的时候,就返回一个随机数
3.当有多个特殊字段的时候
当配置了多个特殊字段的时候,按照上边介绍的优先级去返回,因此上边的配置返回的是specialArray模拟出的随机数组