• ? Github Star: 19.4k^[1]

• ? 文檔^[2]

Mock.js 是什么？

Mock.js 是一款流行的前端數(shù)據(jù)模擬工具，允許開(kāi)發(fā)者在不依賴(lài)后端接口的情況下，模擬后端數(shù)據(jù)，從而加快前端開(kāi)發(fā)的速度。Mock.js 可以攔截 Ajax 請(qǐng)求，并返回預(yù)先定義好的模擬數(shù)據(jù)，對(duì)前后端分離開(kāi)發(fā)特別有用，可以使得前端開(kāi)發(fā)在后端未開(kāi)發(fā)好時(shí)能夠進(jìn)行接口請(qǐng)求。

快速開(kāi)始

Mock.js 可以通過(guò) npm 或 yarn 進(jìn)行安裝：

npm install mockjs --save-dev
# 或者
yarn add mockjs --dev

安裝完成后，可以在項(xiàng)目引入 Mock.js，并定義模擬數(shù)據(jù)：

// 定義模擬數(shù)據(jù)
Mock.mock('/api/user', 'get', {
  code: 200,
  data: {
    id: '@id',
    name: '@name',
    age: '@integer(20, 50)'
  }
})

// 發(fā)生網(wǎng)絡(luò)請(qǐng)求
axios.get('/api/user').then(res => {
  console.log(res.data)
})

以上代碼，當(dāng)發(fā)起 GET 請(qǐng)求到 /api/user 時(shí)，Mock.js 將返回一個(gè)帶有模擬數(shù)據(jù)的響應(yīng)。

生成規(guī)則

Mock.js 支持的數(shù)據(jù)類(lèi)型相當(dāng)豐富，主要包括文本、數(shù)字、布爾值、日期、郵箱、鏈接、圖片和顏色等。

文本數(shù)據(jù)

Mock.js 支持多種文本數(shù)據(jù)的生成，例如：

• ? @cname: 生成隨機(jī)中文名，如：張三、李四等；@name 生成隨機(jī)英文名。

• ? @ctitle: 生成隨機(jī)中文標(biāo)題，可以指定長(zhǎng)度范圍；@title 生成隨機(jī)英文名。

• ? @paragraph: 生成隨機(jī)段落，通常用于模擬文章內(nèi)容。

• ? @city: 生成隨機(jī)城市名，適合模擬地址信息。

• ? @country: 生成隨機(jī)縣級(jí)行政區(qū)名稱(chēng)。

數(shù)字?jǐn)?shù)據(jù)

數(shù)字?jǐn)?shù)據(jù)的生成同樣多樣，包括：

• ? @integer: 隨機(jī)生成整數(shù)。

• ? @float: 隨機(jī)生成浮點(diǎn)書(shū)，可以指定小數(shù)位數(shù)。

• ? @increment: 從某個(gè)數(shù)值開(kāi)始，每次遞增固定值。

• ? @between: 在兩個(gè)數(shù)之間生成隨機(jī)數(shù)。

日期和時(shí)間

日期和時(shí)間的模擬也非常重要，Mock.js 提供了：

• ? @date: 隨機(jī)生成日期，支持多種格式。

• ? @time: 隨機(jī)生成時(shí)間，支持多種格式。

特殊數(shù)據(jù)

還有一些特殊的數(shù)據(jù)類(lèi)型，如：

• ? @email: 生成隨機(jī)郵箱地址。

• ? @url: 生成隨機(jī)URL鏈接。

• ? @dataImage: 生成隨機(jī)圖片URL，可以指定大小。

• ? @color: 生成隨機(jī)顏色，支持多種顏色格式。

• ? @image: 生成隨機(jī)圖片 URL

另外，Mock.js 同樣支持自定義函數(shù)和正則表達(dá)式來(lái)生成特定的數(shù)據(jù)。

與 Vue.js 集成

在 Vue 項(xiàng)目中使用 Mock.js 只需在入口文件 main.js 中引入，并定義接口的模擬數(shù)據(jù)即可。

import Mock from 'mockjs';
import './mock'; // 引入Mock.js配置文件

if (process.env.NODE_ENV === 'development') {
  Mock.start(); // 在開(kāi)發(fā)環(huán)境中啟用Mock.js
}

在 mock 文件夾下創(chuàng)建文件，定義接口的模擬數(shù)據(jù)即可。

總結(jié)

Mock.js 支持的數(shù)據(jù)類(lèi)型涵蓋了前端開(kāi)發(fā)中常見(jiàn)的各類(lèi)數(shù)據(jù)，并且提供了自定義規(guī)則的功能，使得它可以滿(mǎn)足絕大多數(shù)的前端數(shù)據(jù)模擬需求。需要注意的是，Mock.js 主要用于開(kāi)發(fā)和調(diào)試階段，不應(yīng)在生產(chǎn)環(huán)境中使用。

祝好！

引用鏈接

[1] Github Star: 19.4k: https://github.com/nuysoft/Mock
[2] 文檔: http://mockjs.com/