MockJs：前端模拟数据生成器

一、背景介绍

在前端开发过程中，一般需要向后端请求接口获取数据。但是在项目初期或者后端接口尚未开发完毕的情况下，前端开发过程中会面临无法获取数据的问题。此时，我们可以使用Mockjs来模拟数据生成，以便于前端开发调试。

二、基本使用

Mockjs提供了非常简单易用的API，只需传入数据模板，即可生成随机数据。以下是一个简单的示例：

// 导入Mockjs
import Mock from 'mockjs'

// 定义模板
const template = {
  // 生成1~10之间的随机整数
  'number|1-10': 1,
  // 生成一个随机字符串
  'string|5-10': 'a'
}

// 生成随机数据
const data = Mock.mock(template)

console.log(data)
// 输出： { "number": 10, "string": "aaaaaaa" }

在上面的示例中，我们使用了Mock.mock()方法来生成随机数据。首先定义了一个数据模板template，其中包含两个key/value，分别表示生成随机的整数和字符串。其中整数的取值范围在1~10之间，字符串长度在5~10之间。Mockjs会根据这个模板来生成数据，并返回给我们。

三、数据模板语法

Mockjs提供了非常丰富的数据模板语法，可以满足不同场景下的数据需求。下面我们来介绍一些常用的数据模板语法。

3.1 Basic

基础语法，用于生成基础类型的随机数据。

// 生成布尔值
"boolean": true

// 生成整数
"integer": 123

// 生成浮点数
"float": 1.23

// 生成字符串
"string": "Hello, world!"

// 生成日期字符串
"date": "2018-07-27"

// 生成时间戳
"timestamp": 1532666067889

3.2 Object

用于生成对象类型的随机数据。

// 生成对象
"object|2": {
  "key1": "value1",
  "key2": "value2",
  "key3": "value3",
}

// 对象属性值为字符串的模板
"object": {
  "key1|1-10": "value1",
  "key2|3": "value2"
}

// 对象属性值为其他类型的模板
"object": {
  "key1": {
    "nestedKey1|1-10": "nestedValue1",
    "nestedKey2": "nestedValue2"
  },
  "key2": [
    "arrayItem1",
    {
      "nestedKey1|1-10": "nestedValue1",
      "nestedKey2": "nestedValue2"
    },
    "arrayItem3"
  ]
}

3.3 Array

用于生成数组类型的随机数据。

// 生成数组
"array|2": ["value1", "value2", "value3"]

// 生成数组对象
"array": [
  {
    "key1": "value1",
    "key2|1-10": "value2"
  },
  {
    "key1": "value1",
    "key2|1-10": "value2"
  }
]

3.4 RegExp

用于生成符合正则表达式的随机字符串。

// 生成符合正则表达式的随机字符串
"regexp": /[a-z][A-Z][0-9]/

3.5 Function

用于生成符合自定义规则的数据。

// 生成对象属性值根据函数返回值
"function": {
  "key1": function() {
    return 'I am function.';
  },
  "key2": function() {
    return this.key1;
  }
}

四、截获AJAX请求

在前端开发过程中，我们需要和后端进行接口对接。但是在接口尚未完成或出现问题的时候，我们可以使用Mockjs模拟数据。为了方便测试，我们还可以使用Mockjs截获AJAX请求，以便快速替代后端接口。以下是一个简单的示例：

// 引入依赖
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
import Mock from 'mockjs'

// 创建 MockAdapter 实例
const mockAdapter = new MockAdapter(axios)

// 注册截获请求，并返回随机数据
mockAdapter.onGet('/test').reply(config => {
  const template = {
    'id|+1': 1,
    'name': '@cname',
  }
  const data = Mock.mock(template)

  return [200, data]
})

// 发送请求，获取随机数据
axios.get('/test').then(response => {
  console.log(response.data)
  // 输出： { "id": 1, "name": "陈清华" }
})

在上面的示例中，我们使用axios来发送请求，将请求发送到`/test`。而Mockjs截获了这个请求，随机生成数据，并返回给我们。

五、生成随机图片

除了生成随机的文本数据之外，Mockjs还可以生成随机的图片，为前端界面设计提供更加完整的测试数据。下面是一个简单的示例：

// 生成随机图片
const dataUrl = Mock.Random.dataImage('200x100', 'Hello Word!')
console.log(dataUrl)
// 输出：

在上面的示例中，我们使用了Mock.Random.dataImage()方法来生成随机图片，其中`200×100`表示图片的尺寸，`Hello World!`表示图片中的文本内容。Mockjs会根据这些参数，生成一张随机的图片并返回数据URL。

六、总结

本文介绍了Mockjs的基本使用、数据模板语法、截获AJAX请求、生成随机图片等方面。Mockjs为前端开发提供了非常强大的工具支持，可以有效提高开发效率。