一．Mock介绍
YApi的 Mock 功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、返回数据（返回数据）生成 Mock 接口，这些接口会自动生成模拟数据，创建者可以自由构造需要的数据。mock模拟数据基于mock.js。
Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：
l 根据数据模板生成模拟数据
l 模拟 Ajax 请求，生成并返回模拟数据
l 基于 HTML 模板生成模拟数据
二．简单mock一下
进入项目，选择并点击某接口
-
【预览】中可看到该接口的mock地址（mock地址解析：YApi平台网址 + mock + 您的项目id + 接口实际请求path）：
image.png -
【编辑】中请求参数，返回参数可以编辑mock数据，可以写死或者使用mock占位符：
image.png
可以预览返回数据效果（其中的mock占位符被随机数据替换）：
image.png -
【运行】页面可以看到里面已经为我们创建好了随机请求参数：
image.png
点击POST后面的下拉框添加环境配置，将mock地址配置到环境中
image.png
image.png -
选择配置的mock环境，点击【发送】
image.png
此时的返回数据中的值就是接口编辑页面中设置的mock数据，其中mock占位符被随机数替代。
三．高级Mock
很多时候需要根据不同的请求参数返回不同的响应数据，可以使用高级Mock中的期望或自定义脚本来实现。
以新网项目中的联合登陆接口为例。后台逻辑为如果用户已开户则返回数据中"openAccount": true，如果未开户"openAccount": false。
接口的输入参数有：mobile，idCard，userRealName。可以设置输入userRealName=’哈哈’时为已开户条件，返回"openAccount": true。为其他值时均为未开户的情况，返回"openAccount": false。下面分别用期望和脚本两种方式实现：
- 期望
基本信息
- 期望名称：给此条期望命名
- 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
- 自定义脚本
请求
- header 请求的 HTTP 头
- params 请求参数，包括 Body、Query 中所有参数
- cookie 请求带的 Cookies
响应 - mockJson 接口定义的响应数据 Mock 模板
- resHeader 响应的 HTTP 头
- httpCode 响应的 HTTP 状态码
- delay Mock 响应延时，单位为 ms
-
Random Mock.Random 方法，可以添加自定义占位符
选择【脚本】，开启脚本，如下配置等同于期望中的配置
image.png
同样可以在运行中测试一下返回值。在这里要注意的是当期望和脚本同时生效的时候，期望的优先级>脚本，即参数条件一致的情况下优先返回期望中配置的响应数据。
四．Mock服务实际演练
还是以新网银行项目为例，结合app中的H5页面来演示一下。
-
修改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 重新加载配置文件。 -
此时即可登陆app，点击季得利产品进入已投资或未投资首页，即可看到页面上显示返回的mock数据，下面是已投资首页展示：
image.png -
点击【存入/取出】按钮，跳转联合登陆页面，输入姓名和身份证号，点击【下一步】区分三种情况：
(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 -
其他接口同样根据不同参数配置不同响应，不再详述，下面mock整个开户流程（正常流程）：
image.png
image.png
image.png
参考：
yapi官网教程：<u>https://hellosean1025.github.io/yapi/documents/index.html</u>
Mock.js的详细内容参考：<u>http://mockjs.com/0.1/#natural</u>
