了解 Mock.js 的语法规范

数据模板定义规范 DTD

'name|rule': value

name 是属性名、rule 是生成规则、value 是属性值。

注意：生成规则的含义是属性值类型有关。也就是说，同一条生成规则，对于不同的属性值类型，含义可能是不同的。

下面，我们结合不同的属性值类型来介绍该规范。

属性值是字符串

1、'name|min-max': string

通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。例如，生成重复 2 ～ 5 次的 star 字符串：

Mock.mock({
  'content|2-5': 'star'
})
// => {content: 'starstarstar'}

2、'name|count': string

通过重复 string 生成一个字符串，重复次数等于 count。例如，生成重复 5 次的 star 字符串：

Mock.mock({
  'content|5': 'star'
})
// => {content: 'starstarstarstarstar'}

属性值是数字

1、'name|+1': number

属性值自动加 1，初始值为 number。这个要配合生成列表数据使用。例如，生成 id 自增的数组：

Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        'id|+1': 1, // id 从 1 开始自增。
    }]
})
// => [{id: 1, {id: 2}, {id: 3}]

2、'name|min-max': number

生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。例如，生成 10 ～ 100 的整数：

Mock.mock({
  'count|10-100': 1 
})
// => {count: 72}

3、'name|min-max.dmin-dmax': number

生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。例如，生成 10 ～ 100，小数保留 1 ～ 2 位的浮点数：

Mock.mock({
  'count|10-100.1-2': 1.1
})
// => {count: 13.18}

属性值是布尔型

1、'name|1': boolean

随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。例如：

Mock.mock({
  'value|1': true
})
// => {value: true}

2、'name|min-max': value

随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。例如，生成 20% 是 true 的值：

Mock.mock({
  'value|1-4': true
})
// => {value: false}

属性值是对象

1、'name|count': object

从属性值 object 中随机选取 count 个属性。例如：

Mock.mock({
  'info|1': {id: 1, name: 'Joel', phone: '138xxxx', email: 'joel@xx.com'}
})
// => {info: {phone: '138xxxx'}}

2、'name|min-max': object

从属性值 object 中随机选取 min 到 max 个属性。例如：

Mock.mock({
  'info|1-3': {id: 1, name: 'Joel', phone: '138xxxx', email: 'joel@xx.com'}
})
// => {info: {phone: '138xxxx', name: 'Joel' }}

属性值是数组

1、'name|1': array

从属性值 array 中随机选取 1 个元素，作为最终值。例如：

Mock.mock({
  'info|1': [1, 2, 3, 4, 5]
})
// => {info: 2}

2、'name|+1': array

从属性值 array 中顺序选取 1 个元素，作为最终值。例如：

const arr = [1, 2, 3, 4, 5]
Mock.mock({
    'list|1-3': [{
        'value|+1': arr, // id 从 1 开始自增。
    }]
})
// => {list: [{value: 1}, {value: 2}]}

3、'name|min-max': array

通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。例如：

const arr = [1, 2, 3]
Mock.mock({
    'list|1-6': arr
})
// => {list: [1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3]}

4、'name|count': array

通过重复属性值 array 生成一个新数组，重复次数为 count。例如：

const arr = [1, 2, 3]
Mock.mock({
    'list|2': arr
})
// => {list: [1, 2, 3, 1, 2, 3]}

属性值是函数

'name': function

执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。例如：

Mock.mock({
    'name': () => 'Joel'
})

// => {name: 'Joel'}

属性值是正则表达式

'name': regexp

根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。例如，生成长度是 6 的随机包含数字或字母的字符串：

Mock.mock({
    'str': /[0-9a-zA-Z]{6}/
})

// => {str: 'p2otzf'}

数据占位符定义规范 DPD

占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。

占位符的格式为：

@占位符
@占位符(参数 [, 参数])

占位符引用的是 Mock.Random 中的方法或数据模版中的属性。如果数据模版中的属性和Mock.Random 中的方法重名，优先引用数据模版中的属性。例如：

Mock.mock({
    name: {
        first: '@FIRST',
        last: '@LAST',
        full: '@first @last'
    }
})
// => {name: {first: 'Cynthia', last: 'Williams', full: 'Cynthia Williams'}}

上面的代码中，属性 first 和 last 分别引用的是：Mock.Random.first() 和 Mock.Random.last()。full 引用是数据模版中的属性。

以上就是是 Mock.js 所有的语法规范了～想进阶成为一位 Mock 高手？ Apifox 是一个强大的接口文档管理工具，用 Apifox 可以让 Mock 变得更容易。Apifox 语法完全兼容 Mock.js， 并扩展了一些 Mock 没有的语法（如国内手机号 @phone）。

通过 Apifox 进行 Mock 测试/数据

Apifox 具有出色的 Mock 功能，不仅兼容 Mock.js 语法，同时提供 Nunjucks 和自定义脚本支持，满足不同场景需求，为前端接口调试提供了高效便捷的解决方案。

其简单易用的操作界面使得定义字段名和字段类型成为轻松之举，Apifox 可以智能生成符合数据结构的 JSON 数据，为接口调试提供了直观可观的支持。

立即体验 Apifox

在面对处理数百、上千甚至上万条列表数据的挑战时，Apifox 以其卓越性能脱颖而出，无需手动逐一编写，仅通过简单的 for 循环即可轻松完成重复操作，为开发者提供了高效的工作流程。

针对分页数据的需求，Apifox 更是提供了强大的模拟功能，用户可自定义总记录数和每页容量，实现灵活而精准的数据模拟。

而 Apifox 的 Mock 功能远不仅止于此，其还支持模拟延迟、加载状态以及错误状态，使其成为一款集 Mock、测试、接口管理于一身的多功能神器。现在就赶紧体验吧，让你的开发工作更加轻松愉悦！

免费使用 Apifox

扩展：如何使用 Apifox 的 Mock 功能来模拟常见业务数据

知识扩展：