前端數據模擬利器 Mock.js 深度解析

一、Mock.js 核心價值

1.1 為何需要數據模擬

• 前后端并行開發加速
• 接口文檔驅動開發
• 異常場景模擬測試
• 演示環境數據構造

1.2 Mock.js 核心能力

// 典型數據生成示例
Mock.mock('/api/user', {"users|5-10": [{"id|+1": 1,"name": "@cname","age|18-60": 1,"email": "@email","address": "@county(true)"}]
})

---

二、快速入門指南

2.1 安裝與引入

# NPM 安裝
npm install mockjs --save-dev# 瀏覽器直接引入
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>

2.2 基礎使用模式

// 1. 定義模擬規則
const mockData = Mock.mock({"list|10": [{"id": "@guid","title": "@ctitle(15,25)","content": "@cparagraph(500)","createTime": "@datetime"}]
})// 2. 攔截Ajax請求
Mock.mock(/\/api\/articles/, 'get', () => {return mockData.list
})// 3. 發起真實請求
fetch('/api/articles').then(res => res.json()).then(console.log)

---

三、數據模板語法詳解

3.1 基礎占位符

占位符	說明	示例輸出
@boolean	布爾值	true
@natural(1,100)	自然數	57
@float(0,100,2,2)	浮點數	36.58
@string(5)	隨機字符串	“k8d9a”
@cname	中文姓名	“王偉”
@province	省份	“廣東省”
@image(‘200x100’)	占位圖URL	“http://dummyimage.com/200x100”

3.2 復雜數據結構

Mock.mock({"order": {"id": "@guid","createTime": "@datetime","price|100-500.2": 1,"products|2-5": [{"sku": "@string(8).toUpperCase()","name": "@ctitle(6)","spec": "@natural(1,5)XL"}],"user": {"name": "@cname","vip|1-3": true}}
})

---

四、高級應用技巧

4.1 RESTful API 模擬

// 用戶資源接口模擬
Mock.mock(/\/users\/\d+/, 'get', (options) => {const id = options.url.split('/').pop()return Mock.mock({id,name: '@cname',age: '@natural(18,60)'})
})Mock.mock(/\/users/, 'post', (options) => {const body = JSON.parse(options.body)return Mock.mock({id: '@guid',...body})
})

4.2 動態響應處理

// 分頁查詢模擬
Mock.mock(/\/api\/records/, (options) => {const params = new URLSearchParams(options.url.split('?')[1])const page = parseInt(params.get('page')) || 1const size = parseInt(params.get('size')) || 10return {total: 100,data: Mock.mock({[`list|${size}`]: [{id: '@guid',name: '@ctitle','status|1': ['pending', 'done', 'failed']}]}).list,page,size}
})

4.3 數據驗證規則

// 注冊接口參數校驗
Mock.mock('/register', 'post', (options) => {const { username, password } = JSON.parse(options.body)if (!username || username.length < 6) {return Mock.mock({code: 400,message: '用戶名至少6個字符'})}if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(password)) {return Mock.mock({code: 400,message: '密碼需包含字母和數字，至少8位'})}return Mock.mock({code: 200,data: {userId: '@guid',token: '@string(32)'}})
})

---

五、工程化實踐方案

5.1 目錄結構組織

src/mock/modules/user.jsproduct.jsindex.js   # 統一導出utils.js   # 工具函數

5.2 生產環境隔離

// webpack.config.js
const isDev = process.env.NODE_ENV === 'development'if (isDev) {require('./src/mock')
}// 或者使用環境變量
if (process.env.USE_MOCK) {require('./mock')
}

5.3 真實接口切換

// 配置示例
const API_BASE = process.env.USE_MOCK ? '/mock-api' : 'https://real.api.com'// 請求封裝示例
function request(url, options) {return fetch(`${API_BASE}${url}`, options)
}

---

六、常見問題解決方案

Q1：如何模擬網絡延遲？

Mock.setup({timeout: '200-600' // 隨機延遲200-600ms
})// 指定接口單獨設置
Mock.mock('/slow-api', {// ...數據模板
}, { delay: 1000 })

Q2：如何生成關聯數據？

// 保持城市與區號關聯
const cityMap = {北京: '010',上海: '021',廣州: '020'
}Mock.mock({"city": "@city","areaCode": function() {return cityMap[this.city] || '0755'}
})

Q3：如何處理文件上傳？

Mock.mock('/upload', 'post', () => {return Mock.mock({code: 200,data: {url: "@image('300x250')",size: "@natural(1024, 5120)"}})
})

---

七、最佳實踐總結

1. 分層設計：按業務模塊組織Mock數據
2. 文檔同步：使用Swagger生成Mock規則
3. 類型安全：結合TypeScript定義接口
4. 異常覆蓋：模擬各類HTTP狀態碼
5. 性能監控：記錄Mock請求耗時

---

八、擴展生態推薦

• easy-mock：可視化Mock平臺
• json-server：快速搭建REST API
• faker.js：增強數據生成能力
• apifox：接口管理工具整合

通過合理運用Mock.js，開發團隊可以實現：

• 開發效率提升40%+
• 接口異常測試覆蓋率100%
• 前后端聯調成本降低60%

建議結合具體業務場景靈活選擇Mock策略，在保證開發效率的同時，建立可靠的前端數據模擬體系。