Mock.js的使用

一.介绍

Mock.js是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url，mockjs可以拦截ajax请求，返回设定好的数据。

1. 安装

npm install mockjs -D

2. 新建mockjs文件

新建mock文件夹，在index.js中定义userData数据

index.js

// 引用 Mock
const Mock = require('mockjs')
 
export const userData = Mock.mock("/data/list", "get", {
  // 属性 list 的值是一个数组，随机生成 1 到 10 个元素
  "list|1-10": [
    {
      // 随机生成1-10个★
      "string|1-10": "★",
      // 随机生成1-100之间的任意整数
      "number|1-100": 1,
      // 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位。
      "floatNumber|1-100.1-10": 1,
      // 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
      "boolean|1": true,
      // 随机生成一个布尔值，值为 false 的概率是 2 / (2 + 5)，值为 true 的概率是 5 / (2 + 5)。
      'bool|2-5': false,
      // 从属性值 object 中随机选取 2-4 个属性
      "object|2-4": {
        "310000": "上海市",
        "320000": "江苏省",
        "330000": "浙江省",
        "340000": "安徽省"
      },
      // 通过重复属性值 array 生成一个新数组，重复次数为 2
      "array|2": [
        "AMD",
        "CMD",
        "UMD"
      ],
      // 执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。
      'foo': '哇哈哈哈哈',
      'name': function () {
        return this.foo
      },
      // 根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
      'regexp': /\d{5,10}/,
    },
  ],
  code: 200,
  message: 'ok',
});

3. 使用mockjs虚拟数据

如果需要使用虚拟数据，就在main.js入口文件中导入mockjs文件。

// 导入mockjs
import './mock/index.js'

使用getData方法获取数据

	getData() {
          axios.get("/data/list").then(res => {
            console.log("res",res);
          }).catch(error => {
            console.log(error);
          })
		},

控制台打印数据：

二、建立虚拟数据（mockjs文件）

1、导入mockjs

import Mock from "mockjs";

2、设置请求延迟时间

Mock.setup( settings )：配置拦截 Ajax 请求时的行为。

3、生成随机数据

下面介绍Mock.js中常用的 API。
生成随机数据

● Mock.Random对象包含了Mock.js中的所有随机数据生成方法。下面是一些常用的方法：
● Mock.Random.boolean()：生成一个随机的布尔值。
● Mock.Random.integer(min, max)：生成一个随机的整数，可以指定范围。
● Mock.Random.float(min, max, dmin, dmax)：生成一个随机的浮点数，可以指定范围和精度。
● Mock.Random.string(length)：生成一个随机的字符串，可以指定长度。
● Mock.Random.name(middle?)：生成一个随机的常见英文姓名。
● Mock.Random.cname()：生成一个随机的常见中文姓名。
● Mock.Random.date()：生成一个随机的日期。
● Mock.Random.time()：生成一个随机的时间。
● Mock.Random.datetime()：生成一个随机的日期时间。
● Mock.Random.image(size, background, foreground, format, text)：生成一个随机的图片，可以指定大小、背景色、前景色、格式和文字。

生成数据模板指定的数据
Mock.mock(template) 根据数据模板生成模拟数据。
Mock.mock( template )：根据数据模板生成模拟数据. template表示数据模板，可以是对象或字符串。数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值。
● ‘name|rule’: value ：属性名 name、生成规则 rule、属性值 value。属性名 和 生成规则 之间用竖线 | 分隔。
● ‘name|min-max’: array：当属性值是数组 Array。通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
● ‘name|+1’: number：当属性值是数字 Number。属性值自动加 1，初始值为 number。
● 占位符：用 @ 来标识其后的字符串是 占位符。占位符 引用的是 Mock.Random 中的方法。
● @cname：随机生成一个常见的中文姓名。
● @ctitle( min, max )：随机生成一句中文标题。默认值为 3 到 7 之间的随机数。
● @integer( min, max )：返回一个随机的整数。min是最小值，max是最大值。
常用语法
● “id”:“@id”
● “star|1-2”:“★” 字符串重复一道2次
● “price|100-200.2-3” 小数点2-3位
● “data|10”:[{name:“名称”}] 数组的内容重复10遍
● “live|1”:true,随机返回true,false
● “tel”:/13 \d{9}/,
● “des”:function(){ return this.start+this.price}
● “name”:“@cname” 表示中文名称
● “address”:“@country(true)” 地址
● “ip”:“@ip”,
● “description”:“@cparagraph(1, 3)” 随机段落2-3行
● “pic”:@dataImage(‘200x100’,‘色块图片’)`
数据模版可以生成复杂的数据结构。下面是一个示例：

const data = Mock.mock({ 'name': '@cname', 'age|15-25': 0, 'email': /[a-z]{5}@163.com/, 'phone': /1[35789]\d{9}/ }) console.log(data)

运行上面的代码，可能会得到如下的输出结果：

{ name: '杜浩', age: 15, email: '[email protected]', phone: '13940684653' }

4、模拟接口请求

Mock.mock(url, template)和Mock.mock(method, url, template)用于根据接口地址和数据模板模拟接口请求，支持GET、POST、PUT、DELETE等请求方法。示例如下：

Mock.mock('/user', 'get', { 'name': '@cname', 'age|15-25': 0, 'email': /[a-z]{5}@163.com/, 'phone': /1[35789]\d{9}/ }) Mock.mock('/user', 'post', { 'result': 'success' })

设置Ajax请求响应时间
Mock.setup({timeout: 400}) 指定被拦截的Ajax请求的响应时间，表示400毫秒后才会返回响应内容。示例如下：

Mock.setup({timeout: '200-600'}) Mock.mock('/user', { 'name': '@cname', 'age|15-25': 0, 'email': /[a-z]{5}@163.com/, 'phone': /1[35789]\d{9}/ })

上面的代码表示，响应时间介于200到600毫秒之间。

5.总结

本文介绍了Mock.js的基础用法，包括随机生成用户信息、随机生成用户信息数组、Mock.js API的常用方法、生成数据模板和模拟接口请求。Mock.js是一个非常实用的数据模拟和接口测试工具，能够大大提高前端开发效率。小伙伴快去试试看吧~