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為前端開發提供了非常強大的工具支持，可以有效提高開發效率。