mockjs语法规范、设置mockjs拦截响应时间、Mock.Random占位符生成随机数据

你的名字 2021-10-01 06:56 937阅读 0赞

首先回顾vue-cli项目中使用mockjs步骤：

1、安装mockjs、axios（http请求库）；

cnpm install mockjs axios --save

2、在项目中新建一个mock.js文件，用于定义接口返回的数据；

3、在main.js引入mock.js；

import Mock from './mock' // 刚刚手写的mock.js文件
    import axios from 'axios' // axios http请求库
    
    axios.defaults.baseURL = 'http://mockjs.com/api' // 设置默认请求的url
    Vue.prototype.$http = axios

4、组件内ajax请求

this.$http.get("/posts").then(res => {
      console.log(res);
    });

# 一、语法规范 #

> 语法规范包括两部分：
> 
>  *  数据模板定义规范（Data Template Definition，DTD），可以根据属性值的不同类型及规则生成数据。
>  *  数据占位符定义规范（Data Placeholder Definition，DPD），指使'@占位符' 引用`Mock.Random()方法生成随机数据。`

## ##

### **数据模板定义规范 DTD** ###

数据模板中的每个属性由 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`
 *  ***生成规则* 的 含义 需要依赖 *属性值的类型* 才能确定。**
 *  *属性值* 中可以含有 `@占位符`。
 *  *属性值* 还指定了最终值的初始值和类型。

**生成规则和示例：**

## ##

### **1. 属性值是字符串 String** ###

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

## ##

### **2. 属性值是数字 Number** ###

1.  `'name|+1': number`
    
    **属性值自动加 1，**初始值为 `number`。
2.  `'name|min-max': number`
    
    生成一个大于等于 `min`、小于等于 `max` 的整数，属性值 `number` 只是用来确定类型。
3.  `'name|min-max.dmin-dmax': number`
    
    **生成一个浮点数**，整数部分大于等于 `min`、小于等于 `max`，小数部分保留 `dmin` 到 `dmax` 位。

Mock.mock({
        'number1|1-100.1-10': 1,
        'number2|123.1-10': 1,
        'number3|123.3': 1,
        'number4|123.10': 1.123
    })
    // =>
    {
        "number1": 12.92,
        "number2": 123.51,
        "number3": 123.777,
        "number4": 123.1231091814
    }

## ##

### 3. 属性值是布尔型 **Boolean** ###

1.  `'name|1': boolean`
    
    随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
2.  `'name|min-max': value`
    
    随机**生成一个布尔值，值为 `value` 的概率**是 `min / (min + max)`，值为 `!value` 的概率是 `max / (min + max)`。

## ##

### 4. 属性值是对象 **Object** ###

1.  `'name|count': object`
    
    从属性值 `object` 中随机选取 `count` 个属性。
2.  `'name|min-max': object`
    
    从属性值 `object` 中随机选取 `min` 到 `max` 个属性。

## ##

### 5. 属性值是数组 **Array** ###

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`。

## ##

### 6. 属性值是函数 **Function** ###

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

## ##

### 7. 属性值是正则表达式 **RegExp** ###

1.  `'name': regexp`
    
    根据正则表达式 `regexp` 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
    
        Mock.mock({
            'regexp1': /[a-z][A-Z][0-9]/,
            'regexp2': /\w\W\s\S\d\D/,
            'regexp3': /\d{5,10}/
        })
        // =>
        {
            "regexp1": "pJ7",
            "regexp2": "F)\fp1G",
            "regexp3": "561659409"
        }

# #

## 数据占位符定义规范 DPD ##

*占位符* 只是在属性值字符串中占个位置，并不出现在最终的属性值中。

*占位符* 的格式为：

@占位符
    @占位符(参数 [, 参数])

**注意：**

1.  用 `@` 来标识其后的字符串是 *占位符*。
2.  *占位符* 引用的是 `Mock.Random` 中的方法。
3.  通过 `Mock.Random.extend()` 来扩展自定义占位符。
4.  *占位符* 也可以引用 *数据模板* 中的属性。
5.  *占位符* 会优先引用 *数据模板* 中的属性。
6.  *占位符* 支持 *相对路径* 和 *绝对路径*。

Mock.mock({
        name: {
            first: '@FIRST',
            middle: '@FIRST',
            last: '@LAST',
            full: '@first @middle @last'
        }
    })
    // =>
    {
        "name": {
            "first": "Charles",
            "middle": "Brenda",
            "last": "Lopez",
            "full": "Charles Brenda Lopez"
        }
    }

## 二、Mock.mock( rurl?, rtype?, template|function( options ) ) ##

方法解释：当拦截到匹配 `rurl` 和 `rtype` 的 Ajax 请求时，函数 `function(options)` 将被执行，并把执行结果作为响应数据返回。

> 注意事项：从 1.0 开始，Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求，不再依赖于第三方 Ajax 工具库（例如 jQuery、Zepto 等）。

### rurl ###

可选。

表示需要拦截的 URL，**可以是 URL 字符串或 URL 正则**。例如 `/\/domain\/list\.json/`、`'/domian/list.json'`。

### rtype ###

可选。

表示需要拦截的 Ajax 请求类型。例如 `GET`、`POST`、`PUT`、`DELETE` 等。

### template ###

可选。

表示数据模板，可以是对象或字符串。例如 `{ 'data|1-10':[{}] }`、`'@EMAIL'`。

### function(options) ###

可选。

表示用于生成响应数据的函数。

options

指向本次请求的 Ajax 选项集，含有 `url`、`type` 和 `body` 三个属性

/*模拟删除数据的方式*/
    var arr=[
        {name:'fei',age:20,id:1},
        {name:'liang',age:30,id:2},
        {name:'jun',age:40,id:3},
        {name:'ming',age:50,id:4}
    ]
     
    Mock.mock('http://www.bai.com','delete',function(options){
        var id = parseInt(options.body.split("=")[1])//获取body中删除的id
        var index;
        for(var i in arr){
            if(arr[i].id===id){//在数组arr里找到这个id
                index=i
                break;
            }
        }
        arr.splice(index,1)//把这个id对应的对象从数组里删除
        return arr;//返回这个数组,也就是返回处理后的假数据
    })
    $.ajax({
        url:'http://www.bai.com',
        type:"DELETE",
        data:{
            id:1//假设需要删除id=1的数据
        },
        dataType:'json',
        success:function(e){
            console.log(e)
        }
    })

### **三、Mock.setup( settings )可以配置拦截 Ajax 请求时的响应时间** ###

Mock.setup({ //表示 400 毫秒 后才会返回响应内容；
        timeout: 400
    })
    Mock.setup({
        timeout: '200-600' //表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'。
    })

### 四、Mock.Random 是一个工具类，用于生成各种随机数据。 ###

注意：Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 `@占位符(参数 [, 参数])` 。

var Random = Mock.Random //引入Random方法集
    Random.email()
    // => "n.clark@miller.io"
    Mock.mock('@email')
    // => "y.lee@lewis.org"
    Mock.mock( { email: '@email' } )
    // => { email: "v.lewis@hall.gov" }

## ##

Mock.Random 提供的完整方法（占位符）如下：

<table> 
 <thead> 
  <tr> 
   <th>Type</th> 
   <th>Method</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Basic</td> 
   <td>boolean, natural, integer, float, character, string, range, date, time, datetime, now</td> 
  </tr> 
  <tr> 
   <td>Image</td> 
   <td>image, dataImage</td> 
  </tr> 
  <tr> 
   <td>Color</td> 
   <td>color</td> 
  </tr> 
  <tr> 
   <td>Text</td> 
   <td>paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle</td> 
  </tr> 
  <tr> 
   <td>Name</td> 
   <td>first, last, name, cfirst, clast, cname</td> 
  </tr> 
  <tr> 
   <td>Web</td> 
   <td>url, domain, email, ip, tld</td> 
  </tr> 
  <tr> 
   <td>Address</td> 
   <td>area, region</td> 
  </tr> 
  <tr> 
   <td>Helper</td> 
   <td>capitalize, upper, lower, pick, shuffle</td> 
  </tr> 
  <tr> 
   <td>Miscellaneous</td> 
   <td>guid, id</td> 
  </tr> 
 </tbody> 
</table>

方法与数据模板的 `@占位符` 一一对应，使用如下：

//1. Random.boolean( min?, max?, current? )
     
            // Random.boolean( min?, max?, current? )
            'boolean1': Random.boolean(1,5,true), // 指示参数 true 出现的概率。概率计算公式为 1 / (1 + 5)。该参数的默认值为 1，即有 50% 的概率返回参数 true
            'boolean2': '@boolean(1,5,true)',
     
     
            //2. Random.natural( min?, max? )
     
            'natural': Random.natural(), // 返回一个大于0的自然数
            'natura2': Random.natural(0,500), // 返回一个0-500的自然数
     
     
            //3. Random.integer( min?, max? )
            
            'integer1': '@integer',
            'integer1': Random.integer(-500,500), // 返回-500 - 500的随机整数
     
            //4. Random.float( min?, max?, dmin?, dmax? )
            
            'float1': '@float(0,50,12,1000)', // 36.216873636235
            'float2': Random.float(), // -8349164373254657
     
            //5. Random.character( pool? )
            
            'character1': '@character', // H 如果未传入该参数，则从 lower + upper + number + symbol 中随机选取一个字符返回
            'character2': Random.character('lowercase,youknow!'), // a
     
     
            //6. Random.string( pool?, min?, max? )
            
            'string1': '@string', // Etns)d  注：未传入该参数，则从 lower + upper + number + symbol 中随机选取73-个字符返回
            'string2': Random.string('upper',5,10), // ADLZQLPC 返回字符串长度为5-10 
     
     
            //7. Random.range( start?, stop, step? )
            
            'range1': '@range()', // []
            'range2': Random.range(3,7) // [3, 4, 5, 6]

自定义扩展占位符：在需要时还可以为 Mock.Random 扩展方法，然后在数据模板中通过 `@扩展方法` 引用。例如：

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

### 五、Mock.valid( template, data ) 校验真实数据 `data` 是否与数据模板 `template` 匹配。 ###

var template = {
        name: 'value1'
    }
    var data = {
        name: 'value2'
    }
    Mock.valid(template, data)
    
    // 结果相等
    [
        {
            "path": [
                "data",
                "name"
            ],
            "type": "value",
            "actual": "value2", //实际值
            "expected": "value1", //预期值
            "action": "equal to",
            "message": "[VALUE] Expect ROOT.name'value is equal to value1, but is value2"
        }
    ]

### 六、Mock.toJSONSchema( template ) 把 Mock.js 风格的数据模板 `template` 转换成 [JSON Schema][]。 ###

var template = {
        'key|1-10': '★'
    }
    Mock.toJSONSchema(template)
    // =>
    {
        "name": undefined,
        "path": [
            "ROOT"
        ],
        "type": "object",
        "template": {
            "key|1-10": "★"
        },
        "rule": {},
        "properties": [{
            "name": "key",
            "path": [
                "ROOT",
                "key"
            ],
            "type": "string",
            "template": "★",
            "rule": {
                "parameters": ["key|1-10", "key", null, "1-10", null],
                "range": ["1-10", "1", "10"],
                "min": 1,
                "max": 10,
                "count": 3,
                "decimal": undefined,
                "dmin": undefined,
                "dmax": undefined,
                "dcount": undefined
            }
        }]
    }

更多参考Mockjs官网 [https://github.com/nuysoft/Mock/wiki/Syntax-Specification][https_github.com_nuysoft_Mock_wiki_Syntax-Specification]

[https://www.jianshu.com/p/aea89b5e6d33][https_www.jianshu.com_p_aea89b5e6d33]

[JSON Schema]: http://json-schema.org/
[https_github.com_nuysoft_Mock_wiki_Syntax-Specification]: https://github.com/nuysoft/Mock/wiki/Syntax-Specification
[https_www.jianshu.com_p_aea89b5e6d33]: https://www.jianshu.com/p/aea89b5e6d33