目录

前言

正文

一、Mock 介绍

1、Mock 的原理

2、Mock.mock()

3、Mock 的语法规范

4、Mock.setup()

5、更多方法

二、Mock 使用

1、安装

2、创建

3、使用

三、注意事项

总结

---

前言

在日常开发过程中，一个必不可少的阶段就是与后端进行联调，通过后端返回的数据，查看页面渲染效果与交互模拟。但是，经常会出现一个尴尬的场景：前端页面开发完了，后端接口还在开发中或是接口文档还在撰写中，这时，前端便只能等后端开发结束才能与之联调。试想一下，如果后端接口过多，且我们需要等所有的接口都开发完才能一起联调，这会造成等待真空期过长，最后会压缩我们联调接口的时间，在短时间内同时联调多个接口，时间压力大，既容易混乱，又容易出bug，整个人心态也受到影响。

那么，有没有什么方式，可以让前端一开发完了立马联调呢？试想一下，只要我们开发完一个页面就立马进行联调然后进行调整，不仅时间充足，还能减少bug的产生，整个人在一个轻松的状态下开发，代码质量也提高了。今天的主角 Mock 就可以帮助我们解决这个窘境。

正文

一、Mock 介绍

1、Mock 的原理

Mock 其实就是 Mock.js，它可以拦截所有的请求并代理到本地模拟数据，模拟请求接口返回数据的这么一个过程，且 network 中没有发出任何的请求，降低频繁发请求给服务器造成的压力。用一句话概括就是：生成随机数据，拦截 Ajax 请求。

2、Mock.mock()

该方法根据数据模板生成模拟数据。

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

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 三个属性，参见 XMLHttpRequest 规范。

3、Mock 的语法规范

我们主要从两大块内容了解 Mock，一个是它的使用方式，另一个是它的语法规范。在使用之前，我们有必要了解一下它的语法规范，不要求全都掌握，至少简单的语法要能看懂并能自己实现。切记，磨刀不误砍柴工，当然你也可以直接跳到使用部分，再来参照语法规范。

Mock 的语法规范主要分为：数据模板定义规范、数据占位符定义规范。

（1）数据模板定义规范（Data Template Definition，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
• 生成规则 的 含义 需要依赖 属性值的类型 才能确定。
• 属性值 中可以含有 @占位符。
• 属性值 还指定了最终值的初始值和类型。

生成规则与示例：

① 属性值是字符串 String

a、'name|min-max': string

通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

Mock.mock({
  'star|1-5': '*'
})
=>
{
  'star': '***'   // * 的数量在1-5之间
}

b、'name|count': string

通过重复 string 生成一个字符串，重复次数等于 count。

Mock.mock({
  'star|2': '*'
})
=>
{
  'star': '**'   // * 的数量为2
}

② 属性值是数字 Number

a、'name|+1': number

属性值自动加 1，初始值为 number。

b、'name|min-max': number

生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。

Mock.mock({
  'num|1-100': 66   // 66用来指定类型为number而不是string
})
=>
{
  'num': 88   // 1-100的随机数
}

c、'name|min-max.dmin-dmax': number

生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

Mock.mock({
  'floatNum|50-100.2-4': 66.66
})
=>
{
  'floatNum': 88.5839   // 整数部分50-100，小数位数2-4
}

③ 属性值是布尔型 Boolean

a、'name|1': boolean

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

b、'name|min-max': value

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

④ 属性值是对象 Object

a、'name|count': object

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

Mock.mock({
  'obj|2': {
    'star|2':'*',
    'num|1-100': 66,
    'floatNum|50-100.2-4': 66.66
  }
})
=>
{
  'obj': {             // 随机取出2个属性
    'star':'**',
    'floatNum': 59.376
  }
}

b、'name|min-max': object

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

Mock.mock({
  'obj|2-3': {
    'star|2':'*',
    'num|1-100': 66,
    'floatNum|50-100.2-4': 66.66
  }
})
=>
{
  'obj': {             // 随机取出2-3个属性
    'star':'**',
    'floatNum': 76.86
    'num': 32,
  }
}

⑤ 属性值是数组 Array

a、'name|1': array

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

Mock.mock({
  'list|1': ["leo","lion"]
})
=> 
{
  'list': "lion"   // 取数组中的某个元素
}

b、'name|+1': array

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

c、'name|min-max': array

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

d、'name|count': array

通过重复属性值 array 中元素生成一个新数组，重复次数为 count。

Mock.mock({
  'list|2': [{
    'id|+1': 1,
    'star|2':'*',
    'num|1-100': 66,
    'floatNum|50-100.2-4': 66.66,
    'listItem|+1': ["leo","lion"]
  }],
})
=>
{
  "list": [
     {
       "id": 1,
       "star": "**",
       "num": 83,
       "floatNum": 94.6645,
       "listItem": "leo"
     },
     {
       "id": 2,
       "star": "**",
       "num": 54,
       "floatNum": 76.6692,
       "listItem": "lion"
     }
  ]
}

⑥ 属性值是函数 Function

a、'name': function

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

⑦ 属性值是正则表达式 RegExp

a、'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"
}

（2）数据占位符定义规范（Data Placeholder Definition，DPD） 

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

占位符 的格式为：

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

注意：

a、用 @ 来标识其后的字符串是 占位符。

b、占位符 引用的是 Mock.Random 中的方法。

c、通过 Mock.Random.extend() 来扩展自定义占位符。

d、占位符 也可以引用 数据模板 中的属性。

e、占位符 会优先引用 数据模板 中的属性。

f、占位符 支持 相对路径 和 绝对路径。

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.Random 提供的完整方法（占位符）如下： 

更多细节请前往：https://github.com/nuysoft/Mock/wiki/Mock.Random

4、Mock.setup()

配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。

Mock.setup( settings )

settings

必选。

配置项集合。

timeout

可选。

指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400，表示 400 毫秒 后才会返回响应内容；也可以是横杠 '-' 风格的字符串，例如 '200-600'，表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'。

Mock.setup({
  timeout: 400
})
Mock.setup({
  timeout: '200-600'
})

目前，接口 Mock.setup( settings ) 仅用于配置 Ajax 请求，将来可能用于配置 Mock 的其他行为。 

5、更多方法

• Mock.valid()
• Mock.toJSONSchema() 

二、Mock 使用

了解了 Mock 的基本语法之后，我们可以开始使用 Mock 了。

准备工作：Vue项目、安装 axios（用于发送 Ajax 请求）。

1、安装

npm install mockjs

2、创建

在 src 目录下新建一个目录 mock，里面新建一个文件 index.js。

index.js

// 使用 Mock
import Mock from 'mockjs'
Mock.mock('/test/getData',{
  'list|2': [{
      'id|+1': 1,
      'star|2':'*',
      'num|1-100': 66,
      'floatNum|50-100.2-4': 66.66,
      'listItem|+1': ["leo","lion"]
  }],
})
export default Mock

3、使用

以上步骤完成之后，在 mian.js 中引入 Mock。

import './mock'

我们对 ur l为 “/test/getData” 请求拦截设置已完成，接下来，发请求验证。

刷新页面，控制台打印

弄懂了语法规范，我们也不难理解数据的生成原理。并且，Network 中并没有该请求，因为我们设置了拦截，只要拦截到指定的 url，便返回我们本地 Mock 随机生成的模拟数据，起到请求接口与后端联调的这么一个效果。

这个时候可能会有人问，直接本地写好一个 json 文件，在需要的页面导入从而得到数据不就好了，何必这么麻烦？ 这时候问题就来了，如果数据量很大，上千上万条甚至更多，并且数据具有某种规则与随机性，这时候该怎么办？难不成要我们写个 for，然后判断数据的规则吗？还有不同的接口使用不同的数据与规则，这时候又该你头疼了。而 Mock 很好地帮助我们解决了这个问题，我们拿到后端事先定好的数据结构，制定规则，只待其自动生成即可，大大提高了我们的开发效率。

打下基础之后，便可以进行更复杂的用法，如分接口（路由），分规则、自定义占位符，大数据量等，此处不展开，留给大家自行探索。

三、注意事项

开篇曾说过，Mock 仅适合用于本地模拟后端联调获取数据，缩短前后端联调的时间，但在真正的测试环境或生产环境，我们并不需要它。因此，在真正向后端发送请求时（本地调后端接口、测试环境、生产环境等），应该把 Mock 去掉，将 mian.js 中的 import 部分去掉，在其他组件去掉引入 Mock 的部分，避免出现拦截请求而出现生产bug。

总结

Mock 是一种用于本地模拟发请求进行前后端交互的方案，可以帮助我们在开发中提前与“后端”联调，提前查看页面与交互等效果从而进行调整，缩短前后端联调时间，提高开发效率。当然，如果接口数量少且数据简单亦或是后端人员接口准备完毕，那它便没有使用的必要了。

除了 Mock 方式，我们还可以使用 express、koa2 等框架来进行本地前后端联调交互等效果。总之，随着场景的改变而调整，使用合适的方案，可以提升效率，减少工作量。