数据模拟

有时候页面中需要调用一个接口来获取数据，但是实际的业务接口还没有开发完毕，不过前后端交互的数据格式已经约定好，那么可以通过拦截ajax请求来模拟接口的响应

这个手段就是mock数据的过程，模拟出来的数据可以是通过一些规则随机生成的，也可以是写好固定格式和内容的

可以拦截get、post等任意类型的ajax请求，也能够接受传递参数

有多种方式生成模拟数据，能够模拟数组、对象、数值、字符串等类型的数据

具体的配置方式和生成规则以及相关语法可参照mockjs的官网 mockjs 文档

集成mockjs的功能主要是通过编写代码来实现，但是通过系统我们可以进行可视化的配置

输入要生成数据的名称，回车即可

操作

点击生成数据名称可以进行修改，点击空白处即可自动更新

配置

可视化配置要mock的数据

删除

删除该mock，并有删除前的信息确认。

查询

在列表页使用【空格】键，唤起模糊搜索

可以通过名称和ID进行查询，支持模糊查询。

点击空格即可唤出查询窗口，输入条件后按回车键执行查询。

可以多个条件同时输入，支持清空条件。

配置

点击一条数据的配置按钮，即可弹出该配置面板

操作按钮

顶部左边的三个按钮分别表示：完成本次配置、关闭当前配置、刷新配置生成的数据

顶部最右边的按钮会给出一些配置的说明信息

下方的区域又分为左右两个部分

右边部分是配置mock之后实时回显的效果展示

左边部分就是主要的配置区域，其中

占位符

是mock内置的数据生成函数，点击之后会在上方展示出所有的方法，再次点击即隐藏

点击对应的占位符名称，即可复制该函数，可在相应的地方进行粘贴，并且上方会出现该函数的用法示例和说明

生成

能够查看配置的原始mock对象，也可以对其直接进行手动修改和设置

{
  // 属性 data 的值是一个数组，数组内随机含有 1 到 10 个元素
  'data|1-10': [{
    // 属性 id 是一个自增数，起始值为 1，每次增 1
    'id|+1': 1
  }]
}

根据上面的配置，将会生成下面的数据，并且每次刷新都会随机成不同的数据

属性类型

指定mock数据字段值的类型，值可以是字符、数字、布尔、对象、数组、函数、正则这七种形式

• 字符：可以是任意指定的字符，也可以是由占位符生成的值，能够指定重复的次数

• 数字：可以是手动指定的数值，也可以由占位符生成，能够指定整数位和小数位的位数

• 布尔：表明该值是一个布尔值，能够设定出现真值的概率

• 对象：属性值为对象，对象内又可以有任意其他类型的属性，可以指定从对象中取几个属性对

• 数组：属性值为数组，数组内可放置任意值，也可以指定数组内元素的重复次数以及取元素的规则

• 函数：属性值为一个函数，通过函数执行的返回值来设定属性的值，返回的值可以是任意拼装的数据结构，函数体内的 this 对象指向当前的mock数据对象，也就是该属性所在的对象

• 正则：根据设定的正则表达式反向生成可以匹配它的字符串

通过这些数据类型的组合和嵌套就可以生成我们想要的数据结构，关于更多说明详见 mock文档

注：属性值生成方式其实还有一种，就是路径path

可以写成绝对路径 @/a/b/c 的形式

也可以写成相对路径 @../../ 的形式

这种方式可以手动书写，不过还是建议通过函数的方式来实现

生成方式

不同的属性类型有不同的生成方式，

字符

对于字符串可以指定它的最少和最多重复次数，会根据设定的值重复相应的次数

如果这两个值都不设定，那么将直接生成指定的字符串

如果只设定了最少重复次数，或者最少和最多的重复次数相同，那么将固定重复最少重复次数指定的数值

如：设定data的属性值为一个字符串🌙，然后指定最少重复次数为2，那么实际mock出来的数据就是两个🌙

如果最少和最少重复次数不相同，那么将会随机重复这两个数区间某一个值的次数

数字

如果设置了步进，那么属性值将按照指定的值自动增加

比如属性值设定为0，步进设定为2，那么将会按照0、2、4、6、8、10 ··· 来生成

也可以设定整数部分的范围和小数部分的范围

如：设定data的属性值为一个数字，然后指定整数部分大于等于50，小于等于100，小数部分最少2位，最多5位，那么将生成如下数据，并且每次刷新都会随机生成一个符合这个方式的数字

布尔

可以设定属性值为 true 或 false 的概率，如果不设定将直接生成指定的值

生成的概率为所设定的值相对于总和的百分比

如果为true的概率为1，为false的概率也为1，那么将有50%的概率生成true和false

如果为true的概率为4，为false的概率为1，那么将有80%的概率生成true和20%的概率生成false

对象

可以设定从给定对象中取多少个属性

如：设定data的属性值为一个对象，然后给它指定四个属性，再设置最少属性个数为2，那么它将生成具有两个属性的对象，这两个属性都是随机从指定的四个属性中选取

数组

可以根据给定的数组随机选取一个元素作为生成数据的最终值

比如有一个包含四个字符串的数组，随机选取一个元素来生成属性值

也可以根据给定的数组按照步进的方式选取一个元素做成生成数据的最终值

假设步进设为1，针对上面的例子，那么将会按照AMD、CMD、UMD、AMD、CMD ··· 来生成

上面这两种方式都是通过数组的形式来生成字符串的值，也就是最终的属性值是一个字符串

还能够设定数组内元素重复的次数，这种方式生成的元素值还是一个数组

如：设定data的属性值为一个数组，数组中有一个元素为字符串lecen，指定将数组元素最少重复1次，最多重复10次

当然了，数组内的元素类型可以是任意的

函数

如果设定一个属性类型为函数，那么实际的属性值将通过这个函数的返回值来获取，点击编写代码即可打开代码编辑器

函数内部能够访问到this，this的值指向当前属性所在的对象，也就是我们配置的这个对象

function _() {
  return {
    name: 'mock',
    type: 'function'
  }
}

我们给data的属性值设置为上面的自定义函数，那么会自动根据返回值生成数据

正则

设定字段的属性值通过正则表达式来生成，随机生成一个符合该正则表达式的字符串

如：设定data的属性值为一个正则 /\d{5,10}/，表示想要生成一个5到10个数字的字符串

生成规则

从上面的示例中也看到了，在属性类型和生成方式的下方有一个表格，它的每一行都代表一个属性字段，其中也包含着该字段的属性类型以及生成方式和初始值等信息

下面我们针对表格中各种不同的输入框的功能做示例讲解

表格默认有两行，第一行是空的，可以输入字段名称，第二行有个默认属性 data，可以输入规则和字段值

这时默认生成的数据就是一个对象，里面只有一个属性data，它的值为空字符串

表格的每行最前方有一个单选按钮，表示着当前选中的行，也就是当前正在操作的行，可以对该行设置一些属性

第一行

是一直存在的行，并且不会发生变化，主要是用来新增属性，可以在输入框中输入自定义的属性名

输入完成之后按回车或者点击空白处即可完成属性的新增

新增之后会默认选中该行，可以直接对新增的行进行编辑

第二行

该行只是默认设定了一个属性data，没有特殊含义，可以随意修改该属性名，后面有两个输入框

第一个输入框表示该属性的生成规则，可以由上面的生成方式来指定，会自动进行填充，也可以手动修改，第二个输入框表示字段值，也就是设定的属性的值

---

先看一下字段值输入框的作用：

比如我们指定刚才的 total 字段属性的属性类型为数值，并在该行的第二个输入框(请指定字段值输入框)中输入500

然后我们再选中data属性，并将它设置为数组类型

可以看到，data行的第一个输入框已经被自动填充了值，跟生成方式中的设定保持同步

然后它的下方又出现了一行，也是可以输入字段名称，并且data行变成了可折叠的行，这表示data有子行，类似于树表格结构，它下面的每一行属性都是data的属性，而且下面的行自动会有缩进， 同样我们输入属性名，给它增加属性，由于这是一个数组，那么添加的属性应该是数组下标，我们输入一个0，并给这个属性设定为字符类型，然后指定它的字段值为lecen

这样就生成了data的值，它是一个数组，有一个元素，值为lecen，随机重复它的元素1-10次

我们也可以把数组的第一个元素设置为对象类型，同样该元素也会变成一个折叠行，并可以任意添加属性，我们试着多设置几种类型

这次生成的数据中，既有字符串类型，又有数字、布尔、对象、数组、正则等类型，还用到了上面说的占位符，同样函数类型也可以任意添加和指定

其中对象类型和数组类型都是可以任意嵌套或者存放其他类型的

注：

对于数值类型，它的字段值是一个数值输入框

对于布尔类型，它的字段值是一个按钮，点击可以切换true和false