定义
Mock 是在测试过程中,对于一些不容易构造/获取的对象,创建一个 Mock 对象来模拟对象的行为。一般多用于前后端分离的开发环境中,前端工程师用来模拟后端的 API 接口进行数据传递的工具。
Mock.js
- 前后端分离:让前端攻城师独立于后端进行开发;
- 增加单元测试的真实性:通过随机数据,模拟各种场景;
- 开发无侵入:不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据;
- 用法简单:符合直觉的接口;
- 数据类型丰富:支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等;
- 方便扩展:支持支持扩展更多数据类型,支持自定义函数和正则。
免费开源工具:Fast Mock
官网:https://www.fastmock.site/#/
Fast Mock 可以让你在没有后端程序的情况下能真实地在线模拟 Ajax 请求,可以用 Fast Mock 实现项目初期纯前端的效果演示,也可以用 Fast Mock 实现开发中的数据模拟从而实现前后端分离。
一个例子:验证登录信息
{
"code": "0000",
"data": {
"verifySuccess": function({_req, Mock}) {
let body = _req.body;
return body.username === 'admin' && body.password === '123456';
},
"userInfo": function({_req, Mock}) {
let body = _req.body;
if (body.username === 'admin' && body.password === '123456') {
return Mock.mock({
username: "admin",
email: "@email",
address: "@address"
});
} else {
return null;
}
},
},
"desc": "成功"
}
引入 Mock 基本语法支持
基础随机内容的生成
{
"string|1-10": "=", // 随机生成1到10个等号
"string2|3": "=", // 随机生成2个或者三个等号
"number|+1": 0, // 从0开始自增
"number2|1-00.1-3": 1, // 生成一个小数,小数点前面1到10,小数点后1到3位
"boolean": "@boolean( 1, 2, true )", // 生成boolean值 三个参数,1表示第三个参数true出现的概率,2表示false出现的概率
"name": "@cname", // 随机生成中文姓名
"firstname": "@cfirst", // 随机生成中文姓
"int": "@integer(1, 10)", // 随机生成1-10的整数
"float": "@float(1,2,3,4)", // 随机生成浮点数,四个参数分别为,整数部分的最大最小值和小数部分的最大最小值
"range": "@range(1,100,10)", // 随机生成整数数组,三个参数为,最大最小值和加的步长
"natural": "@natural(60, 100)", // 随机生成自然数(大于零的数)
"email": "@email", // 邮箱
"ip": "@ip" ,// ip
"datatime": "@date('yy-MM-dd hh:mm:ss')" // 随机生成指定格式的时间
// ......
}
列表数据
{
"code": "0000",
"data": {
"pageNo": "@integer(1, 100)",
"totalRecord": "@integer(100, 1000)",
"pageSize": 10,
"list|10": [{
"id|+1": 1,
"name": "@cword(10)",
"title": "@cword(20)",
"descript": "@csentence(20,50)",
"price": "@float(10,100,10,100)"
}]
},
"desc": "成功"
}
图片
mock.js 可以生成任意大小,任意颜色块,且用文字填充内容的图片,使我们不用到处找图片资源就能轻松实现图片的模拟展示.
{
"code": "0000",
"data": {
"pageNo": "@integer(1, 100)",
"totalRecord": "@integer(100, 1000)",
"pageSize": 10,
"list|10": [{
// 参数从左到右依次为,图片尺寸,背景色,前景色(及文字颜色),图片格式,图片中间的填充文字内容
"image": "@image('200x100', '#ffcc33', '#FFF', 'png', 'Fast Mock')"
}]
},
"desc": "成功"
}