博客

ok，我们需要的mock终于来了，开心吗？我反正很开心，因为之前我不会，现在由我分享，哈哈哈，不多说，next

mock是啥玩意？

• 生成随机数据，拦截 Ajax 请求

为什么需要mock这玩意？

前端的页面编写速度要快于后台的接口编写速率，为了减小联调时间，把重要的流程走完，之后之间换一个接口，进行小范围的修改即可，之前的时候，我们也是用假的数据，json文件的形式，这种数据假的不能再假，太不灵活了，而且还需要切换url。后来，前端工程师终于受不了，自己编写了mock，拦截客户端的ajax请求，直接给自己传数据。

—》你看，用户量还行吧

安装mock

• 如果是写原生页面，直接在bootcdn找

https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock.js

• 如果是组件开发或其他直接可以下载插件

npm install mockjs --save-dev

//  第一步：引入mockjs

import Mock from 'mockjs'


//第二步，引入全局的main.js中

import  './assets/js/mock'


//第三步 制作mockjs模拟数据
Mock.mock('/userList',{

"userList|10":[
        {

            "id":"@id",
            
            "name":"@name(true)",  //英文名，中文是cname  first是名，last是姓
            
            "age":"@integer(20,30)",
            
            "image":"@image(100x100,red,Mark)",
            
            "email":"@email",
            
            "birthday":"@date",
            
            "city":"@city(true)",
            
            "gender":"@integer(0,1)",
            
            "image":"@image(100x100,#232323,Mark)"

        }

       ]

    })

Mark：如果我们看不懂@XX表示啥意思，别急，后面会讲到，如果你很着急，

我现在先给你show一下，进入mockjs的原生代码，走起


// 第四步：使用此接口数据

getUserList(){

      this.$axios.get( '/userList' )

        .then(response => {

          console.log(response)

        })

        .catch(error => {
          
        })

    }

• 如果是post的方法怎么办？ 见下图

This 编写的接口数据

This is调用的数据

Mock 设置延时请求事件

不设置延时很有可能遇到坑，这里需要留意，因为真实的请求是需要时间的，mock不设置延时则是马上拿到数据返回，这两个情况不同可能导致在接口联调时出现问题。所以最好要先设置延时请求到数据。为了更加的模拟这个操作，所以可以手动设置延时。

//延时400s请求到数据
Mock.setup({
    timeout: 400
})
//延时200-600毫秒请求到数据
Mock.setup({
    timeout: '200-600'
})

Mock.random

很多的人说，我需要自己设置根据具体的情况设置数据，行，满足你，Math.radom来了。当然它有自己的语法，一起了解一下。Mock.Random 是一个工具类，用于生成各种随机数据。Mock.Random 的方法在数据模板中称为『占位符』，书写格式为

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

。

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

• 如果上面的属性还是满足不了你的话，你可以直接去自己写，然后就可以为之所用了。更详细内容请参考
  
  github of mock
  

Mock语法规则

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. 
"ame|count": array


   通过重复属性值
   
array

   生成一个新数组，重复次数为
   
count

   。

6. 属性值是函数

Function

1. 
"name": function


   执行函数
   
function

   ，取其
   
return

   返回值作为最终的属性值，函数的上下文为属性
   
name

   所在的对象。

7. 属性值是正则表达式

RegExp

1. 
"name": regexp


   根据正则表达式
   
regexp

   反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

Mock.mock({
     "regexp1": /[a-z][A-Z][0-9]/,
     "egexp2": /\w\W\s\S\d\D/,
     "egexp3": /\d{5,10}/
})
// =>
{
    "regexp1": "pJ7",
    "regexp2": "F)\fp1G",
    "regexp3": "561659409"
}
注意：次出也可以使用'',不受影响，建议双引号 

Mock.valid()

• Mock.valid( template, data )

校验真实数据

data

是否与数据模板

template

匹配。

参数一： template

必选。

表示数据模板，可以是对象或字符串。例如

{ 'list|1-10':[{}] }

、

'@EMAIL'

。

参数二 ：data

必选。

表示真实数据。

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

。

template

必选。

表示数据模板，可以是对象或字符串。例如

{ 'list|1-10':[{}] }

、

'@EMAIL'

。

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