【Mockjs】一文讲透mockjs语法规则（附注意点）

路漫漫
4,236 阅读8分钟

前言

这边文章给大家讲清楚mockjs生成的数据的语法规则，同时会说明一些使用mockjs时需注意的点。之前每次使用mockjs都会去看官方文档，看的我头疼，之前也自己写了mockjs 零基础、零门槛、一看就会使用指南，里面有全部的mock的语法和API，想看mock完整文档的可以去看看。本篇文章总结归纳mockjs使用方法，同时记录实际使用过程中遇到的问题和心得。

项目背景介绍

这段时间在工作中使用mockjs开发一个模块，用于提供给公司运维人员生成数据给客户演示，功能主要包括字段的增删改查、数据模板的增删改查。目前没有后台开发提供接口，所有数据都存在前台localstorage中。

这次使用mockjs和以往使用不一样，之前使用都是在已知具体数据后照着接口相应的数据来写mock规则，这次是基于用户自己新建的字段、选择的字段组成一个模板来生成规则，总体的基本方法肯定还是基于mock，但是这次所有的规则都是动态的，是变量，不是已知的键名、同时对部分字段有自定义字段池的要求。其中就遇到了一些问题，比如：

  1. 使用Random生成多条数据，为什么最终数据都是一样
  2. Random和@占位符的区别
  3. 怎么样写一个自己的Random方法
  4. 基于用户定义的数据条数生成数据，条数如何写

项目中使用mockjs总结

下面介绍mockjs的用法和需要注意的点，希望大家看完后不用再去找其他文章了。

一、mock 数据生成

mock数据是怎么生成的？

1. Mock.mock()

mock数据是使用 Mock.mock() 方法生成的。

Mock.mock()中接收3个参数，rurl、rtype、template

Mock.mock( rurl?, rtype?, template|function( options ) )
  • rurl： 带问号，为可选参数。 拦截Ajax请求的rurl地址基于template生成数据。
  • rtype： 可选，发送请求的方式。即 get、post等
  • template： 和 function 二选一。数据模板。数据模板可使用两种语法规范，这两种语法规范，在下面详细介绍。
  • function： 和 template 二选一。使用函数生成模板，函数参数为option，option有三个参数url、type 和 body 三个属性，参见 XMLHttpRequest 规范。

1.1 只使用 template 参数

在不需要拦截ajax url时，可以直接只使用template参数生成数据。

Mock.mock(template)

template 是对象，对象就是键值对，在模板中要为每个键的值设置数据的生成规则，在mockjs中数据生成规则有两种语法规则。

1.1.1 数据模板定义规范

属性名、生成规则、属性值：

// 属性名   name
// 生成规则 rule
// 属性值   value
​
// 属性名 和 生成规则 之间用竖线 | 分隔。
'name|rule': value

属性名就是需要生成的数据对象里的键名。

生成规则生成规则有6种规则，具体规则的含义需要结合 属性值 来确定。这句话怎么理解，看下面代码就会理解。

1.使用count，重复属性值的次数或者出现布尔值的概率。

  • 属性值为字符串，重复 count 次字符串生成新数据。
  • 属性值为数字，直接生成 count 作为新数据。
  • 属性值为布尔值，生成true的概率为1/2，生成flase的概率同为1/2。
  • 属性值是对象，从属性值 object 中随机选取 count 个属性。
  • 属性值为数组，重复 count 次属性值生成新数组。
let res=Mock.mock({
    'name|5':'a',  //属性值是字符串，重复生成 5个a  
    'number|3':1, // 属性值数字，直接生成 3
    'booleanVal|1':true, // 属性值布尔值，生成true的概率为1/2，生成flase的概率同为1/2
    'array|1':['one,two,three'], // 属性值数字，重复属性值生成一个新数组，1为重复次数，如果2则重复2次。[['one,two,three'],['one,two,three']]
    'obj|1':{'prop1':'属性1','prop2':'属性2'} //从对象种随机选取1个属性
})
console.log(res);

image-20220224155408527.png

  1. 使用 min-max。
  • 属性值是数字，则限定数字的范围，生成一个大于等于min、小于等于max的整数。
  • 属性值是字符串，重复该字符串次数大于等于min、小于等于max。
  • 属性值是布尔值，则生成属性值的 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
  • 属性值是对象，从属性值 object 中随机选取 min-max 个属性。
  • 属性值为数组，重复大于等于 min，小于等于 max次属性值生成新数组。
let res=Mock.mock({
    'name|3-5':'a', // aaa. 属性值为字符串，重复大于等于3次小于等于5次的 a。 
    'number|3-10':1,  // 9. 属性值为数字，就是重复生成大于等于7次小于等于10的整数。1用于确定属性值类型
    'booleanVal|1-5':true, // false. 这里生成true的概率位 1/(1+5)=1/6,生成false的概率为5/6
    'array|2-3':['one,two,three'], // 这里重复数值次大于等于2次小于等于3次生成新数组
    'obj|1-2':{'prop1':'属性1','prop2':'属性2'} // 从对象种随机选取1~2个属性
})
console.log(res);

image-20220224160818051.png

  1. min-max.dmin-dmax，这个规则只适用于数字类型的属性值。min-max，表示浮点数整数部分的大小范围，dmin-dmax表示小数部分的位数
let res=Mock.mock({
    'money|1000-3000.2-5':1   //money: 1236.546;表示浮点数，整数部分大于等于1000，小于等于3000，小数部分位数为2到5位。
})
  1. +1 。这种规则适用于生成多条数据。 属性值可为数字和数组。
  • 属性值为数字时，属性值为数字，每次+1，生成新数据
  • 属性值为数组时，属性值为数组时，每次从属性值 array 中顺序选取 1 个元素，作为最终值。
let res=Mock.mock({
    'id|+1':1,   //1;属性值位数字，每次+1，生成新数据
    'type|+1':['first','second','third']  //"first";属性值为数组时，每次从属性值 `array` 中顺序选取 1 个元素，作为最终值。
})
console.log(res);
​
let list=Mock.mock({
    'list|10':[
        {
            'id|+1':1,   //1;属性值位数字，每次+1，生成新数据
            'type|+1':['first','second','third']  //"first";属性值为数组时，每次从属性值 `array` 中顺序选取 1 个元素，作为最终值。
        }
    ]
}) 
console.log(list);

image-20220224162206446.png

5.function。 生成的值取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。

let fnres=Mock.mock({
    'fnVal':function (params) {
        return '123'
    }
})
console.log(fnres);  // {fnVal: "123"}

6.属性值是正则表达式 RegExp

根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

let reg=Mock.mock({
    'regexp1': /[a-z][A-Z][0-9]/,
    'regexp2': /\w\W\s\S\d\D/,
    'regexp3': /\d{5,10}/
})
console.log(reg);

image-20220224164758525.png

1.1.2 数据占位符定义规范

数据占位符就是 @，@的方法和同名的Mock.Random()方法生成的数据一样，只是两者有略微不同，下面主要说明 @ 和 Random 的不同：

  1. Mock.Random() 可直接生成数据，不需要使用 Mock.mock()方法去生成。@ 占位符，必须使用Mock.mock()方法去生成数据。

下面代码为例：

从使用上就可以看出来，@占位符 必须使用引号引起来，就是字符串的形式使用，但是Random.cname()可直接使用。

const Random=Mock.Random
let name=Random.cname()
let name1='@cname'
​
console.log(name);  //易强
console.log(name1); //@cname

上下代码对比可发现，在mock方法里的template中分别使用Random.cname()和@cname。在Mock.mock()方法里，Random.cname()和@cname都可以正常生成随机姓名，Random.cname()可直接生成数据，@cname必须使用Mock.mock()方法去生成数据。

    const Random=Mock.Random
​
    let mockRandom=Mock.mock({
      randName:Random.cname(),
      name:'@cname'
    })
​
    console.log(mockRandom);  //{randName: '徐娟', name: '方磊'}

  1. Mock.mock()的数据模板里使用Mock.Random时候，在mock()方法执行前，Mock.Random已经执行完成生成了数据，所以如果在需要生成多条数据的模板中生成数据时一定要注意不要使用Random，要使用占位符@。

    看下面例子，生成10条数据，使用Random.cname()生产的数据全部相同，但使用'@cname'生成的数据不同。所以，切记，在生成多条数据时使用占位符！！！

    const Random=Mock.Random
    let mockRandom=Mock.mock({ 'list|10':[{
      randName:Random.cname(),
      name:'@cname'
    }]})
​
    console.log(mockRandom);

image-20220224170556931.png

二、生成列表数量为变量时如何写

Mock.mock(template)，template为对象，数据条数为变量即需要使用变量给template做键名。

使用变量给对象做键名，必须使用中括号来设置，像下面使用 ['list|'+len]字符串拼接即可。

    const Random=Mock.Random
    
    let len=10
    let template={
      randName:Random.cname(),
      name:'@cname'
    }
    let listTemplate={}
    listTemplate['list|'+len]=[template]
    let mockRandom=Mock.mock(listTemplate)
    console.log(mockRandom);

三、扩展自己的Random方法

Random.extend({
    constellation: function(date) {
        var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
        return this.pick(constellations)
    }
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({
    constellation: '@CONSTELLATION'
})

总结：

  1. 数据模板规则可以生成数字、字符串、数组、对象、布尔值这几类数据，但是需要自己写规则，且生成的数据一定程度上依赖于自己写的属性值，灵活度高、但工作量大。同时数据模板生成一些特定的数据需要自己去写数属性值，如果需要生成类似与名称、地址、邮箱等特定的数据直接使用占位符，即random中的方法。

  2. random的数据在mock之前已经生成，切记在生成多条数数据时使用占位符。

  3. 可以自己扩展random实现各类需求。

avatar
文章
阅读
粉丝