mock.js是前端开发中实现前后端分离所必不可少的，上次我们讲了简单的使用mock.js，那么这次我们来介绍一下mock.js的语法规范。
Mock.js的语法规范包括两部分：
- 数据模板定义（Data Temaplate Definition，简称DTD）
- 数据占位符定义（Data Placeholder Definition，简称DPD）
本次主要讲述mock.js的数据模板定义。
数据模板中的每个属性由三部分构成：属性名、生产规则、属性值
// 格式：
'name|rule:value'
// 属性名：name
// 生成规则：rule
// 属性值：value
// 注意事项：
属性名 和 生成规则 之间用 | 分隔
生成规则 是可选的
生成规则有7中格式：
1、'name|min-max': value
2、'name|count': value
3、'name|min-max.dmin-dmax': value
4、'name|min-max.dcount': value
5、'name|count.dmin-dmax': value
6、'name|count.dcount': value
7、'name|+step': value
生成规则 的 含义 需要依赖 属性值 才能确定
属性值 中可以含有占位符
属性值 还指定了最终值得初始值和类型
生成规则和具体案例：
- 属性值是字符串String
'name|min-max':'value' ：通过重复‘value’生成一个字符串，重复次数大于等于min,小于等于max
// eg:生成一个随机1-10位的‘★’字符串
// 代码：
Mock.mock({
"demo1|1-10": "★"
})
// 结果：
{
"demo1": "★★★"
}
'name|count': 'value' ：通过重复 'value' 生成一个字符串，重复次数等于 count
// eg:生成一个固定5位的“★”字符串
// 代码：
Mock.mock({
"demo2|5": "★"
})
// 结果：
{
"demo2": "★★★★★"
}
- 属性值是数字Number
'name|min-max':value ：生成一个大于等于min，小于等于max的整数，属性值value只用来确定类型
// eg：生成一个大于等于1，小于等于100的整数，属性值100只用来确定类型
// 代码：
Mock.mock({
"demo3|1-100":100
})
// 结果：
{
"demo3": 86
}
'name|+step':value ：属性值自动加step，初始值为value
// eg：属性值自动加1，初始值为100(用于多次请求，这里我请求了三次)
// 代码：
Mock.mock({
"demo4|+1":100
})
// 结果：
{
"demo4": 100
}
{
"demo4": 101
}
{
"demo4": 102
}
'name|min-max.dmin-dmax':value ：生成一个浮点数，整数部分大于等于min,小于等于max,小数部分保留dmin-dmax
// eg：生成一个浮点数，整数部分大于等于1,小于等于100,小数部分保留1-10位
// 代码：
Mock.mock({
"demo5|1-100.1-10":100
})
// 结果：
{
"demo5": 89.7116
}
'name|min-max.dcount':value ：生成一个浮点数，整数部分大于等于min，小于等于max，小数部分保留dcount位
// eg：生成一个浮点数，整数部分大于等于1，小于等于100，小数部分保留4位
// 代码：
Mock.mock({
"demo6|1-100.4"
})
// 结果：
{
"demo6": 89.4175
}
'name|count.dmin-dmax':value ：生成一个浮点数，整数部分为count，小数部分保留dmin-dmax位
// eg：生成一个浮点数，整数部分为23，小数部分保留1-10位
// 代码：
Mock.mock({
"demo7|23.1-10":100
})
// 结果：
{
"demo7": 23.9523016888
}
'name|count.dcount':value ：生成一个浮点数，整数部分为count，小数部分保留dcount位
// eg：生成一个浮点数，整数部分为23，小数部分保留5位
// 代码：
Mock.mock({
"demo8|23.5":100
})
// 结果：
{
"demo8": 23.32552
}
- 属性值是布尔型Boolean
'name|count':value ：随机生成一个布尔值，值为value的概率为count/(1+count)，值不为value的概率为1/(1+count)
// eg：随机生成一个布尔值，值为true的概率为3/4，值为false的概率为1/4
// 代码：
Mock.mock({
"demo9|3":true
})
// 结果：
{
"demo9": true
}
'name|min-max':value ：随机生成一个布尔值，值为value的概率是min/(min+max)，值不为value的概率是max/(min+max)
// eg:随机生成一个布尔值，值为true的概率是1/11，值为false的概率是10/11
// 代码：
Mock.mock({
"demo10|1-10":true
})
// 结果：
{
"demo10": false
}
- 属性值是对象Object
'name|min-max':{} ：从属性值 { } 中随机选取min-max个属性
// eg：从对象中随机选取2-4个属性
// 代码：
Mock.mock({
"demo11|2-4": {
"110000": "北京市",
"120000": "天津市",
"130000": "河北省",
"140000": "山西省",
"150000": "宁夏省",
"160000": "陕西省"
}
})
// 结果：
{
"demo11": {
"120000": "天津市",
"130000": "河北省",
"140000": "山西省"
}
}
'name|count':{} ：从属性值 { } 中随机选取count个属性
// eg：从对象中随机选取3个属性
// 代码：
Mock.mock({
"demo12|2": {
"姓名": "张三",
"性别": "男",
"年龄": "32",
"爱好": "敲代码"
}
})
// 结果：
{
"demo12": {
"姓名": "张三",
"爱好": "敲代码"
}
}
- 属性值是数组Array
'name|1':[' ', ' ' ...] 或 'name|1':[{}, {} ...]
从属性值 [ ] 中随机选取1个元素，作为最终值
// eg：从 [] 中随机选取一个元素
// 代码：
Mock.mock({
"demo13|1": [
"AMD",
"CMD",
"UMD"
]
})
// 结果：
{
"demo13": "CMD"
}
// eg：对象数组中随机选取一个元素
// 代码：
Mock.mock({
"demo14|1": [
{
"1":"一",
"2":"二",
"3":"三"
},
{
"4":"四",
"5":"五",
},
{
"6":"六",
"7":"七"
}
]
});
// 结果：
{
"demo14": {
"6": "六",
"7": "七"
}
}
'name|count': [' ', ' ' ...] 或 'name|count': [{}, {} ...]
通过重复属性值 [ ] 生成一个新数组，重复次数为count次
// eg：生成一个重复3次的新数组
// 代码：
Mock.mock({
"demo15|3": [
"AMD",
"CMD",
"UMD"
]
})
// 结果：
{
"demo15": [
"AMD",
"CMD",
"UMD",
"AMD",
"CMD",
"UMD",
"AMD",
"CMD",
"UMD"
]
}
'name|min-max':[' ', ' ' ...] 或 'name|min-max':[{}, {} ...]
通过重复属性值 [ ] 生成一个新数组，重复次数为min-max次
// eg：生成一个重复1-5次的新数组
// 代码：
Mock.mock({
"demo16|1-5": [
"AMD",
"CMD",
"UMD"
]
})
// 结果：
{
"demo16": [
"AMD",
"CMD",
"UMD",
"AMD",
"CMD",
"UMD"
]
}
- 属性值是函数Function
'name': function( ){ } ：执行函数function(){}，取其返回值作为最终的属性值，上下文为'name'所在的对象
// eg：执行函数，返回当前this所在的对象的foo属性
// 代码：
Mock.mock({
'foo': 'Demo',
'demo17': function(){
return this.foo
}
})
// 结果：
{
"foo": "Demo",
"demo17": "Demo"
}
- 属性值是正则（RegExp）
'name':regexp
// eg：匹配三位字符串，分别为a-z、A-Z、0-9
// 代码：
Mock.mock({
'demo18': /[a-z][A-Z][0-9]/
})
// 结果：
{
"demo18": "cR8"
}
// eg：匹配3个以 - 结尾连接的随机5-10位的数字组成的字符串
// 代码：
Mock.mock({
'demo19|3': /\d{5,10}\-/
})
// 结果：
{
"demo19": "225818-737250564-534282-"
}
// eg：匹配1-5个以 - 结尾连接的1-3位的数字组成的字符串
// 代码：
Mock.mock({
'demo20|1-5': /\d{1,3}\-/
})
// 结果：
{
"demo20": "3-1-24-577-"
}
- 属性值是路径（Path）
Absolute Path（绝对路径）：匹配当前元素的上下文所在的绝对路径，返回对应值
// 代码：
Mock.mock({
'foo': 'hello',
'nested': {
'a': {
'b': {
'c': 'Mock.js'
}
}
},
'demo21': '@/foo @/nested/a/b/c'
})
// 结果：
{
"foo": "hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"demo21": "hello Mock.js"
}
Relative Path（相对路径）：匹配当前元素相对于上一级元素的相对路径，返回对应值
// 代码：
Mock.mock({
'foo': 'hello',
'nested': {
'a': {
'b': {
'c': 'Mock.js'
}
}
},
'demo22': {
'a': {
'b': {
'c': '@../../../foo @../../../nested/a/b/c'
}
}
}
})
// 结果：
{
"foo": "hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"demo22": {
"a": {
"b": {
"c": "hello Mock.js"
}
}
}
}
好了，以上就是数据模板的一些代码案例了，都是博主自己敲的，亲测有效。
希望对大家有帮助。
如有问题，请指出，接受批评。
个人微信公众号：
image.png
网友评论