如何使用 Mock

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 的？