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

心已赠人 2021-09-18 15:30 493阅读 0赞

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

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

希望对大家有帮助。

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

个人微信公众号：

![20200824120126108.png][]

[20200824120126108.png]: /images/20210812/118a1f358b8a4b4483b3cfa73db7ac9a.png