Mockjs使用指南(1)｜8月更文挑战

皮皮克
863 阅读4分钟

Mock语法

mock.js介绍

mock.js是一款模拟数据生成器，它的宗旨是帮助前端工程师甩开后端，咱们自己去创造数据，以后妈妈再也不用担心你追着后端的小伙伴要接口了。
那是不是说，前端就不需要后端了，当然不是啦。mock.js它仅仅是能帮我们提供一些后端要给我们传输的数据，而这些数据其实是一些模拟的数据，用于给我们前端测试。平常开发中我们有时候要等后端给接口才能做，这个时候就显的比较被动，如果需求不复杂的情况下，我们可以手动模拟一些后台数据，但是这种方法局限性比较大，如果数据量比较庞大，交互比较复杂时，就太低效了，这个时时候你可以通过mock.js模拟你需要的后台数据，能轻松帮你解决问题。
mock.js总共有两大功能，第一个就是我们可以根据数据的模板，生成丰富的模拟数据。第二个功能是它能拦截Ajax请求。mock.js能不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

Mock.js官网

Mock语法

数据模板定义

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

// 属性名   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
  • 生成规则 的 含义 需要依赖 属性值 才能确定。
  • 属性值 中可以含有 @占位符。
  • 属性值 还指定了最终值的初始值和类型。

以上定义引用官网文档，下面我们通过示例来了解一下mock数据模板

1.属性值是字符串 String

  1. 'name|min-max': 'value' 通过重复 'value' 生成一个字符串，重复次数大于等于 min，小于等于 max。
  2. 'name|count': 'value' 通过重复 'value' 生成一个字符串，重复次数等于 count image.png

image.png

2.属性值是数字 Number

  //2.属性值是数字 Number
        console.log( 
            Mock.mock({
                'number1|+1':100,
                'number2|1-100':12,
                'number3|1-100.5':12,
                'number4|1-100.1-10':12,
                'number5|123.1-10':12,
                'number6|123.10':12,
            }) 
        );
  1. 'name|+1': 100 属性值自动加 1，初始值为 100，这条数据每累加1次，属性值自动加1。
  2. 'name|1-100': 12 生成一个大于等于 1、小于等于 100 的整数，属性值 12 只用来确定类型是number。
  3. 'name|1-100.5': 12 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留5 位。属性值 12 只用来确定类型是number。
  4. 'name|1-100.1-10':12 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位。属性值 12 只用来确定类型是number。
  5. 'name|123.1-10':12 生成一个浮点数，整数部分为123，小数部分保留 1 到 10 位。属性值 12 只用来确定类型是number。
  6. 'name|123.10':12 生成一个浮点数，整数部分为123，小数部分保留 10 位。12 只用来确定类型是number。

image.png

3.属性值是布尔型 Boolean

 //3.属性值是布尔型 Boolean
        console.log( 
            Mock.mock({
                'b1|1':false,
                'b2|0':false,
                'b3|1-5':false,
            }) 
        );

  1. 'name|1': boolean

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

  2. 'name|0': boolean

    随机生成一个布尔值，值为 true 的概率是 100%，值为 false 的概率是 0。

  3. 'name|min-max': value

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

image.png

4. 属性值是对象 Object

 //4. 属性值是对象 Object
        console.log( 
            Mock.mock({
                'num1|1-3':{a:10,b:20,c:30,d:40},
                'num2|2':{a:10,b:20,c:30,d:40},
            }) 
        );

  1. 'name|min-max': object

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

  2. 'name|count': object

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

image.png

5. 属性值是数组 Array

  //5. 属性值是数组 Array
        console.log( 
            Mock.mock({
                'arr1|1':['a','b','c','d','e'],
                'arr2|+1':['a','b','c','d','e'],
                'arr3|1-5':['a','b','c','d','e'],
                'arr4|2':['a','b','c','d','e'],
            }) 
        );

  1. 'name|1': array

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

  2. 'name|+1': array

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

  3. 'name|min-max': array

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

  4. 'name|count': array

    通过重复属性值 array 生成一个新数组，重复次数为 count image.png

6. 属性值是函数 Function

 <script>
        //6. 属性值是函数 Function
        console.log( 
            Mock.mock({
             'result' : function () {return 1+2}
            }) 
  </script>

  1. 'name': function

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

avatar
文章
阅读
粉丝