Yapi平台之Mock服务

一．Mock介绍

YApi的 Mock 功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、返回数据（返回数据）生成 Mock 接口，这些接口会自动生成模拟数据，创建者可以自由构造需要的数据。mock模拟数据基于mock.js。

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

l 根据数据模板生成模拟数据

l 模拟 Ajax 请求，生成并返回模拟数据

l 基于 HTML 模板生成模拟数据

二．简单mock一下

进入项目，选择并点击某接口

1. 【预览】中可看到该接口的mock地址（mock地址解析：YApi平台网址 + mock + 您的项目id + 接口实际请求path）：

   
   
   

   image.png

2. 【编辑】中请求参数，返回参数可以编辑mock数据，可以写死或者使用mock占位符：

   
   
   

   image.png
   
   

   可以预览返回数据效果（其中的mock占位符被随机数据替换）：

   
   
   

   image.png

3. 【运行】页面可以看到里面已经为我们创建好了随机请求参数：

   
   
   

   image.png
   
   

   点击POST后面的下拉框添加环境配置，将mock地址配置到环境中

   
   
   

   image.png
   
   
   

   image.png

4. 选择配置的mock环境，点击【发送】

   
   
   

   image.png
   
   

   此时的返回数据中的值就是接口编辑页面中设置的mock数据，其中mock占位符被随机数替代。

三．高级Mock

很多时候需要根据不同的请求参数返回不同的响应数据，可以使用高级Mock中的期望或自定义脚本来实现。
以新网项目中的联合登陆接口为例。后台逻辑为如果用户已开户则返回数据中"openAccount": true，如果未开户"openAccount": false。
接口的输入参数有：mobile，idCard，userRealName。可以设置输入userRealName=’哈哈’时为已开户条件，返回"openAccount": true。为其他值时均为未开户的情况，返回"openAccount": false。下面分别用期望和脚本两种方式实现：

1. 期望
   基本信息

• 期望名称：给此条期望命名
• IP 过滤：请求的 IP 是设置的地址才可能返回期望。默认 IP 过滤关闭，任何 IP 地址都可能返回期望。
• 参数过滤：请求必须包含设置的参数，并且值相等才可能返回期望。参数可以在 Body 或 Query 中。
  响应
• HTTP Code：期望响应的 HTTP 状态码
• 延时：期望响应的延迟时间
• HTTP 头：期望响应带有的 HTTP 头

• 返回 JSON：期望返回的 JSON 数据
  （1）添加期望：联合登陆-已开户，参数过滤userRealName=哈哈。

  
  
  

  image.png
  
  
  

  image.png
  
  

  （2）再次添加一个期望：联合登陆-未开户

  
  
  

  image.png
  
  
  

  image.png
  
  编辑后，使列表中的mock记录开启状态
  
  

  image.png
  
  此时回到【运行】页面，模拟发送两种不同的请求，可看到返回不同的响应：
  

  联合登陆-已开户：

  
  
  

  image.png
  
  联合登陆-未登陆：
  
  

  image.png

2. 自定义脚本
   请求

• header 请求的 HTTP 头
• params 请求参数，包括 Body、Query 中所有参数
• cookie 请求带的 Cookies
  响应
• mockJson 接口定义的响应数据 Mock 模板
• resHeader 响应的 HTTP 头
• httpCode 响应的 HTTP 状态码
• delay Mock 响应延时，单位为 ms

• Random Mock.Random 方法，可以添加自定义占位符
  选择【脚本】，开启脚本，如下配置等同于期望中的配置

  
  
  

  image.png
  
  

  同样可以在运行中测试一下返回值。在这里要注意的是当期望和脚本同时生效的时候，期望的优先级>脚本，即参数条件一致的情况下优先返回期望中配置的响应数据。

四．Mock服务实际演练

还是以新网银行项目为例，结合app中的H5页面来演示一下。

1. 修改nginx配置
   148服务，vim /usr/local/nginx/conf/conf.d/test-callback.jianlc.com443.conf
   修改/xw的proxy_pass为mock服务url。（原配置为：http://10.103.27.56:9302/）
   

   

   image.png
   
   配置完成后，进入nginx的sbin目录，执行./nginx -s reload 重新加载配置文件。

2. 此时即可登陆app，点击季得利产品进入已投资或未投资首页，即可看到页面上显示返回的mock数据，下面是已投资首页展示：

   
   
   

   image.png

3. 点击【存入/取出】按钮，跳转联合登陆页面，输入姓名和身份证号，点击【下一步】区分三种情况：
   (1) 当前用户已开户，跳转到指定链接；
   (2) 输入另外一个已开户用户信息，提示报错信息；
   (3) 未开户，跳转到开户页面
   根据不同情况编辑三种期望，实现不同逻辑跳转：

   
   
   

   image.png
   
   

   页面根据不同的参数请求响应，结果如下：
   （1）第一种情况，mock数据如下：

   
   
   

   image.png
   
   前端操作：
   
   

   image.png
   
   
   

   image.png
   
   （2）第二种情况，mock数据如下：
   
   

   image.png
   
   前端操作：
   
   

   image.png
   
   
   

   image.png
   
   

   （3）第三种情况，mock数据如下：

   
   
   

   image.png
   
   前端操作如下：
   
   

   image.png
   
   
   

   image.png

4. 其他接口同样根据不同参数配置不同响应，不再详述，下面mock整个开户流程（正常流程）：

   
   
   

   image.png
   
   
   

   image.png
   
   
   

   image.png

参考：
yapi官网教程：https://hellosean1025.github.io/yapi/documents/index.html
Mock.js的详细内容参考：http://mockjs.com/0.1/#natural