PuerMock的搭建和优化

1 前言

mockjs是前后端分离开发时用来给前台模拟数据的，很厉害的一个神器，把数据模版定好，然后就可以看它根据模版返回随机数据了。今天不说mockjs，官网上写的甚明白，所以贴上官网的链接：http://mockjs.com

然后光有mock也不行啊，前后端分离要实现的就是前端请求随意发，但是不能发送到真正的后台，得发送到一个可以接收请求并且可以使用mockjs模拟出数据然后返回给客户端才行…….这就是为什么需要一个mockserver

这时候出现这个puermock的一个自称mockserver的东西，然后他要做什么：

• 可以配置不同请求的不同的数据模版
• 拦截 Ajax 请求
• 根据配置的数据模版生成模拟数据
• 返回模拟数据

如下图所示：

2 安装

1. 同样是基于node的，所以还是先安装node(也可以装在本地)

2. 全局安装puer（建议装在本地，方便对插件源码进行修改）

   npm install -g pure 

3. 安装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模拟出的随机数组