乐趣区

如何使用-Mock

jiezi

Mock 能做什么？

1.API 没开发好，使用 Mock 快速对接

在产品经理发布需求后，前后端同学先根据功能需求出一份 API 文档，然后再按照 API 文档并行开发。

不依赖后端提供数据的情况下，如何让前端独立于后端进行开发呢？

使用 Mock, 你可以在开发环境代码内置 Mock，拦截请求，模拟真实 API 返回。如果公司使用了接口管理平台，文档发布的时候可以还通过平台生成 Mock API 直接对接。

2. 为测试提供数据

使用 Mock 假数据替代我们想控制但控制困难的部分

例如

  • 某些 API 依赖其他 API 的返回值，使用 Mock 方便的对返回值进行改变，测试不同场景下 API 的表现。
  • 某个 API 特别慢，可以暂时用 Mock 代替它，快速调通整个场景测试流程。

3. 方便快速建立功能原型

敏捷开发过程中，调整需求是很常见的。通过 Mock 可以快速建立功能原型，直观的看到业务逻辑，方便产品调整需求，还可以使用假数据对系统进行演示。

Mock 部署

记录以下三种方案，各有千秋。

1. 将 Mock 写到代码变量中，哪里需要写哪里

例如


优点

  • 成本低，使用简单，只需要学习 Mock.js 模板语法。
  • 不受网络影响。
  • 改动 Mock 能够快速看到效果。

缺点

  • Mock 代码与业务代码耦合高，上线容易遗漏测试代码，为代码偷偷埋下一颗地雷。
  • 无法快速响应文档改动，保持 Mock 返回数据与文档一致。
  • 只有前端开发人员能用到 Mock，无法与其他部门人员协同工作。
  • 没有 API 请求，不够真实。

2. Mock.js 拦截请求

使用 Mock.mock 函数拦截请求

var data = Mock.mock("https://www.baidu.com", {"string|1-10": "★", // 随机生成 1-10 个字符串 "★"})
var request = new XMLHttpRequest();
request.open("GET", "https://www.baidu.com", true);
request.send();
request.onreadystatechange = function () {if (request.readyState === 4 && request.status === 200) {console.log(request.responseText)
    }
}

控制台输出

优点

  • 成本低，使用简单，学习 Mock.js 模板语法、Mock.mock 函数。
  • 不受网络影响。
  • 改动 Mock 能够快速看到效果。

缺点

  • 对于 RESTful 风格的 API，需要写正则匹配请求地址。
  • Mock 代码与业务代码仍存在耦合，可以独立一个 Mock 文件夹，上线构建时不打包进业务代码。
  • 无法快速响应文档改动，保持 Mock 返回数据与文档一致；
  • API 请求被 Mock 拦截，没有实际发送，不够真实。
  • 只有前端开发人员能用到 Mock，无法与其他部门人员协同工作。

3. Mock Server

和实际请求 HTTP API 没有区别，API 的响应值不是真实从数据库获取的数据，而是 Mock 生成的假数据。

一般是后端人员维护 Mock Server，他们改动 API 的时候同步改动 mock，前端不用考虑 Mock，只需要变更请求地址。

优点

  • 维护文档的人员可以维护 Mock，文档改动同时改动 Mock，响应迅速！
  • 协同方便，测试人员可以利用开发建立的 Mock 提前建立单元测试。
  • 使用工具的话可以通过用户界面管理 Mock 数据。

缺点

  • 需要花钱（部署服务器的钱或者 Sass 付费）
  • 需要选择靠谱的工具，否则使用工具的提高的效率跟不上你帮工具找 Bug 的速率
  • 额外管理 Mock Server，前端无法快速改变 Mock 值。

自己搭建

针对各种语言的部署方案教程丰富，例子不举了，自个儿搜。

平台部署

Eolinker

在线网站，无需部署。免费版本支持 3 人协作，超过 3 人需要开通付费版。

可以管理 API 文档，系统提供的 Mock 功能通过 API 文档返回值信息快速生成随机数据。支持设置触发条件（请求头、请求体），根据不同的触发条件得到不同的返回值。

Easy Mock

没使用过，支持在线（在线版本可能不够稳定），也支持本地部署。

Mock 数据生成规范

可以通过两种方式告诉 Mock 如何生成数据，一种是自定义规则的数据模板，一种是占位符，提供一些常见的随机值，例如·图片、邮箱、人名 等。

1. 数据模板定义规范（Data Template Definition，DTD）

先看一个示例，Mock.mock 函数根据相应的数据模板生成相应 JSON。

Mock.mock({
 "string|1-10": "★",// 随机生成 1-10 个字符串 "★"
 "string2|3": "★",// 固定生成 3 个字符串 "★"
 "number|+1": 202,// 每次请求自增 1, 初始值为 202
 "number2|1-100.1-10": 1,// 生成一个浮点数，整数部分 1 -100，小数部分保留 1 -10 位。。"boolean|1-2": true,// 值为 true 的概率是 1/(1+2)，值为 false 的概率同样是 2/3。"regexp": /[a-z][A-Z][0-9]/,// 随机生成满足正则的字符串
 "object|2": {
   "310000": "上海市",
   "320000": "江苏省",
   "440000":"广东省"
 },// 对象中随机选取 2 个属性，生成对象
 "array|1": ["AMD","CMD"],// 数组中随机选取 1 个元素，最终生成值
 "arrayRepeat|3": ["AMD","CMD"],// 重复数组元素 3 次，最终生成数组
 "date":"@date"// 生成随机日期
})

生成结果

{
 "string": "★★",
 "string2": "★★★",
 "number": 202,
 "number2": 71.73566,
 "boolean":true,
 "regexp": "qS8",
 "absolutePath": "★★ demo",
 "object": {
   "310000": "上海市",
   "440000": "广东省"
 },
 "array": "AMD",
 "arrayRepeat": ["AMD","CMD", "AMD","CMD",AMD","CMD"],"date":"1980-12-19"
}


数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

// '属性名 | 生成规则': 属性值
'name|rule': value

针对不同的属性值，生成规则的意义也不一样，有的生成规则是概率（Boolean），有的生成规则是重复。具体的意义可以查阅 Mock.js 官方文档

2. 数据占位符定义规范（Data Placeholder Definition，DPD）

占位符是 mock 提供一些常用的随机数据例如随机生成的 图片、邮箱、人名 等。

用法 1: 直接使用

Mock.mock('@date')//1982-10-15
Mock.Random.date()//1997-12-31

用法 2: 在数据模板中使用

 Mock.mock({
  "date":"@date",// 随机日期
  "float":"@float",// 随机浮点数
  "name":"xxxx",// 固定值
  "quoteStrin1": "@name",// 引用其他属性
  "user": {"name": "demo"},// 固定值
  "quoteString": "@user/name",// 引用其他属性
 })
{
    "date":"2020-06-29",
    "float":2202285915843574.5,
    "name":"xxxx",
    "quoteStrin1":"xxxx",
    "user":{"name":"demo"},
    "quoteString":"demo"
}

需要注意，如果引用的属性名和 Mock 占位符名称一样（上面例子中的 quoteStrin1），引用值优先级比占位符高，所以最后 quoteStrin1 属性值与属性 name 的属性值一致, 而不是占位符生成的值(Paul Miller)。

Mock 函数

1.Mock.mock

拦截请求，生成模拟数据

var data = Mock.mock("https://www.baidu.com", {"string|1-10": "★", // 随机生成 1-10 个字符串 "★"})
var request = new XMLHttpRequest();
request.open("GET", "https://www.baidu.com", true);
request.send();
request.onreadystatechange = function () {if (request.readyState === 4 && request.status === 200) {console.log(request.responseText)
    }
}

直接生成模拟数据

var data = Mock.mock("https://www.baidu.com", {"string|1-10": "★", // 随机生成 1-10 个字符串 "★"})
//{"string":"★★"}

2.Mock.Random

Mock.Random 是一个工具类，用于生成各种随机数据。
Mock.Random 提供的完整方法如下:

类型 方法 备注
Basic boolean, natural, integer, float, character, string, range
Date date,time, datetime, now
Image image, dataImage 生成图片地址
Color color,hex,rgb,rgba,hsl
Text paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name first, last, name, cfirst, clast, cname
Web url, domain,protocol, email, ip, tld
Address region,province,city,county,zip
Helper capitalize, upper, lower, pick, shuffle 方法，Mock.mock(‘@lower(“HELLO”)’)->hello
Miscellaneous uuid,guid, id,increment

还可以使用 Random.extend 拓展占位符，官网示例：

Random.extend({constellation: function(date) {var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
        return this.pick(constellations)
    }
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({constellation: '@CONSTELLATION'})
// => {constellation: "射手座"}

参考资料

  • Mock.js 文档
  • No API? No Problem! Rapid Development via Mock APIs-Cory House
  • 莫池宇 - 你是如何构建 Web 前端 Mock Server 的？
退出移动版