mock js语法规范—数据模板定义

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"
            }
        }
    }
}

 

好了，以上就是数据模板的一些代码案例了，都是博主自己敲的，亲测有效。

希望对大家有帮助。

如有问题，请指出，接受批评。

个人微信公众号：