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):


    Yapi平台之Mock服务_第1张图片
    image.png
  2. 【编辑】中请求参数,返回参数可以编辑mock数据,可以写死或者使用mock占位符:


    Yapi平台之Mock服务_第2张图片
    image.png

    可以预览返回数据效果(其中的mock占位符被随机数据替换):


    Yapi平台之Mock服务_第3张图片
    image.png
  3. 【运行】页面可以看到里面已经为我们创建好了随机请求参数:


    Yapi平台之Mock服务_第4张图片
    image.png

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


    Yapi平台之Mock服务_第5张图片
    image.png

    Yapi平台之Mock服务_第6张图片
    image.png
  4. 选择配置的mock环境,点击【发送】


    Yapi平台之Mock服务_第7张图片
    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=哈哈。


    Yapi平台之Mock服务_第8张图片
    image.png

    Yapi平台之Mock服务_第9张图片
    image.png

    (2)再次添加一个期望:联合登陆-未开户


    Yapi平台之Mock服务_第10张图片
    image.png

    Yapi平台之Mock服务_第11张图片
    image.png

    编辑后,使列表中的mock记录开启状态
    Yapi平台之Mock服务_第12张图片
    image.png

    此时回到【运行】页面,模拟发送两种不同的请求,可看到返回不同的响应:

    联合登陆-已开户:


    Yapi平台之Mock服务_第13张图片
    image.png

    联合登陆-未登陆:
    Yapi平台之Mock服务_第14张图片
    image.png
  1. 自定义脚本
    请求
  • header 请求的 HTTP 头
  • params 请求参数,包括 Body、Query 中所有参数
  • cookie 请求带的 Cookies
    响应
  • mockJson 接口定义的响应数据 Mock 模板
  • resHeader 响应的 HTTP 头
  • httpCode 响应的 HTTP 状态码
  • delay Mock 响应延时,单位为 ms
  • Random Mock.Random 方法,可以添加自定义占位符
    选择【脚本】,开启脚本,如下配置等同于期望中的配置


    Yapi平台之Mock服务_第15张图片
    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/)

    Yapi平台之Mock服务_第16张图片
    image.png

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

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


    Yapi平台之Mock服务_第17张图片
    image.png
  3. 点击【存入/取出】按钮,跳转联合登陆页面,输入姓名和身份证号,点击【下一步】区分三种情况:
    (1) 当前用户已开户,跳转到指定链接;
    (2) 输入另外一个已开户用户信息,提示报错信息;
    (3) 未开户,跳转到开户页面
    根据不同情况编辑三种期望,实现不同逻辑跳转:


    Yapi平台之Mock服务_第18张图片
    image.png

    页面根据不同的参数请求响应,结果如下:
    (1)第一种情况,mock数据如下:


    Yapi平台之Mock服务_第19张图片
    image.png

    前端操作:
    Yapi平台之Mock服务_第20张图片
    image.png

    Yapi平台之Mock服务_第21张图片
    image.png

    (2)第二种情况,mock数据如下:
    Yapi平台之Mock服务_第22张图片
    image.png

    前端操作:
    Yapi平台之Mock服务_第23张图片
    image.png

    Yapi平台之Mock服务_第24张图片
    image.png

    (3)第三种情况,mock数据如下:


    Yapi平台之Mock服务_第25张图片
    image.png

    前端操作如下:
    Yapi平台之Mock服务_第26张图片
    image.png

    Yapi平台之Mock服务_第27张图片
    image.png
  4. 其他接口同样根据不同参数配置不同响应,不再详述,下面mock整个开户流程(正常流程):


    Yapi平台之Mock服务_第28张图片
    image.png

    Yapi平台之Mock服务_第29张图片
    image.png

    Yapi平台之Mock服务_第30张图片
    image.png

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

你可能感兴趣的:(Yapi平台之Mock服务)