Yapi Mock Server

Mock基本概念

对于前端来说Mock是在后端给出接口但没有书写实现的时候，可以按照后端给的入参和返回参数模拟出数据，前端发起请求，前端不必等着后端实现了接口再去对接数据，前端工作能够提前一部分。

语法：
// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value
示例Mock：
Mock.mock({//代码书写
  "object|2": {
    "310000": "上海市",
    "320000": "江苏省",
    "330000": "浙江省",
    "340000": "安徽省"
  }
})

语法：

{
  "object": {
    "310000": "上海市",
    "330000": "浙江省"
  }
}

更多语法及示例请移步Mockjs官网

Yapi Mock

在yapi中的Mock和Mock官网给出的语法及用法没有太大的出入，基本Mock的语法及规则在yapi中也是可以使用的。不过有一些较特殊的地方需要注意：yapi对Mock进行了一些处理，有一些其特有的用法。

Mock 优先级

在yapi中请求 Mock 数据时，规则匹配优先级：Mock 期望 > 自定义 Mock 脚本 > 项目全局 Mock 脚本 > 普通 Mock。

普通Mock
  1. 支持获取请求的 query, body 参数并返回
{
  "name": "${query.name}", //请求的url是/path?name=xiaoming, 返回的name字段是xiaoming
  "type": "${body.type}",   //请求的requestBody type=1,返回的type字段是1
  
}
  1. 创造多条数据
{
  "data": {
    "content|10": [
      {
        "asnQty": 50,//预出货数量
        "companyCode": "@string(4)",
        "companyPartNo":  "@string(4)",
        "materialDescription":  "@string(4)",
        "poId":  "@string(4)",
        "poLine":  "@string(4)",
        "poLineId":  "@string(4)",
        "poNo":  "@string(4)",
        "poTotalQty": 80,
        "receivedQty": 20,
        "requestDate": "@timestamp",
        "sccpBalanceQty": 50,//SCCP剩余数量
        "sccpLockQty": 10,
        "countUnit":"@string(4)",
        "vendorCode": "@string(4)",
        "vendorPartNo": "@string(4)"
      }
    ],
    "pageIndex": 1,
    "pageSize": 10,
    "paged": true,
    "totalCount": 25,
    "totalPages": 3
  },
  "errorCode": "sunt do in commodo",
  "errorData": {},
  "message": "nulla dolor Ut sed",
  "success": false
}
json-schema

一种基于 JSON 格式定义 JSON 数据结构的规范。

  • 在将swagger的json导入到yapi中，会自动根据swagger生成对应的数据类型自动生成mock数据，但多数数据不是我们想要的，可在接口的编辑页面对具体某个数据mock栏位对其修改。mock栏位的书写方式是mock的数据占位符。例：@id可生成一串数字，@timestamp可生成随机时间戳。更多数据占位符请参考Mockjs官网
Mock期望

如有需要根据不同的请求参数、IP 返回不同的 HTTP Code、HTTP 头和 JSON 数据。Mock期望就是根据设置的请求过滤规则，返回期望json数据。

Mock自定义脚本

根据用户请求的参数修改返回内容。(js脚本)

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

多数数据的返回结构，前端拿到之后可以继续进行下一步的操作，有一部分的数据mock出来的数据太大，会导致页面达不到理想的效果，需要对其进行特殊处理

  • 分页信息返回，默认mock出来的数据，数字会出现负数，在json-schema中对分页信息的mock栏位给一个默认的初始化可完成{pageIndex:1,pageSize:10,totalCount:20}。
  • 时间戳，默认后端给出的时间戳的字段是经过yapi的自动mock之后，可能是一串字母，前端对接到日期为字母的再前端页面上会报错，需要对日期做处理。在具体的日期栏位的mock处填入数据占位符@timestamp。
  • 后端导入swagger，前端所做的mock数据全没了，接口有时候也改了，前端也会报错，后端更新yapi的时候细小的变化，直接在yapi上更改，一个controller的更改只更新当前yapi controller的更改。