Mock 是生成随机数据,拦截 Ajax 请求的 JavaScript 库。
本文来介绍下 Mock 的常用语法。
模拟数据
生成随机数据
Mock.Random.boolean()
生成一个随机的布尔值。例如:
返回值为 true
或 false
。
Mock.Random.integer(min, max)
生成一个随机的整数,可以指定范围。例如:
返回值为 0
到 10
之间的整数。
Mock.Random.float(min, max, dmin, dmax)
生成一个随机的浮点数,可以指定范围和精度。例如:
返回值为 0.00
到 100.00000
之间的浮点数,精度为 2
到 5
位小数。
Mock.Random.string(length)
生成一个随机的字符串,可以指定长度。例如:
返回值为长度为 10
的随机字符串。
Mock.Random.date()
生成一个随机的日期。例如:
返回值为随机日期的字符串表示,例如 "1977-07-03"
。
Mock.Random.time()
生成一个随机的时间。例如:
返回值为随机时间的字符串表示,例如 "05:38:02"
。
Mock.Random.datetime()
生成一个随机的日期时间。例如:
返回值为随机日期时间的字符串表示,例如 "2007-06-29T22:03:06.140Z"
。
Mock.Random.image(size, background, foreground, format, text)
生成一个随机的图片,可以指定大小、背景色、前景色、格式和文字。例如:
返回值为图片的 Base64 编码字符串。
生成数据模板指定的数据
Mock.mock(template)
根据数据模板生成模拟数据。数据模版可以生成复杂的数据结构。
数据模版的语法如下:
- 属性名和属性值之间用
:
分隔。 - 属性与属性之间用
,
分隔。 - 属性值是字符串类型,可以使用
@
来表示占位符。 - 属性值是对象类型,可以使用
name|rule
来表示生成规则。
示例:
代码语言:txt复制const Mock = require('mockjs')
代码语言:txt复制const data = Mock.mock({
代码语言:txt复制 'list|1-10': [{
代码语言:txt复制 'id| 1': 1, // 从 1 开始,每次加 1
代码语言:txt复制 'name': '@cname', // 随机中文名字
代码语言:txt复制 'age|18-60': 1, // 18 到 60 岁之间的整数
代码语言:txt复制 'gender|1': ['男', '女'], // 男或女
代码语言:txt复制 'email': '@email' // 随机电子邮件地址
代码语言:txt复制 }]
代码语言:txt复制})
代码语言:txt复制console.log(data)
输出:
代码语言:txt复制{
代码语言:txt复制 "list": [
代码语言:txt复制 {
代码语言:txt复制 "id": 1,
代码语言:txt复制 "name": "林志玲",
代码语言:txt复制 "age": 32,
代码语言:txt复制 "gender": "女",
代码语言:txt复制 "email": "kbsc@pmpuaaq.pk"
代码语言:txt复制 },
代码语言:txt复制 {
代码语言:txt复制 "id": 2,
代码语言:txt复制 "name": "周杰伦",
代码语言:txt复制 "age": 55,
代码语言:txt复制 "gender": "男",
代码语言:txt复制 "email": "whq@zjfwq.uz"
代码语言:txt复制 },
代码语言:txt复制 ...
代码语言:txt复制 ]
代码语言:txt复制}
模拟接口
Mock.mock(url, template)
根据接口地址和数据模板模拟接口请求。Mock.mock(method, url, template)
根据请求方法、接口地址和数据模板模拟接口请求。
以上是 Mock 中常用的语法,更多语法请查阅官方文档。想进阶成为一位 Mock 高手?Apifox 是一个强大的接口文档管理工具,用 Apifox 可以让 Mock 变得更容易。Apifox 语法完全兼容 Mock, 并扩展了一些 Mock 没有的语法(如国内手机号 @phone)。小伙伴们可以去体验下。
知识扩展:
更多 Mock 相关知识可点击下方链接查看。
- 了解 Mock.js 的语法规范
- Mock.js 生成模拟数据教程