前端介面模擬工具Mock.js上手實踐
- 2019 年 11 月 2 日
- 筆記
前端介面模擬工具Mock.js上手實踐
[toc]
Write By CS逍遙劍仙 我的主頁: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: [email protected]
1. 概念
在前後端開發過程中，常常會遇到前後端進度不一致的情況，如果前端停下來等後端介面調試完再繼續開發會大大降低前端的開發效率。Mock.js 是一款成熟強大的介面模擬工具，能夠生成隨機數據，攔截 Ajax 請求並返回，真正做到前後端分離。
2. vue 工程引入 mock.js
在前端工程項目中引入 mock.js 是非常方便的，以 vue-cli 構建的工程為例，首先安裝 axios 和 mockjs
$ yarn add axios mockjs
可以在項目 src 目錄下建立 data 文件夾用於統一存放 ajax 請求，例如在 data/api.js 中建立一個測試用的請求：
import axios from 'axios' const apiTable = { log: '/test/log' // get } const log = (data = '') => { return new Promise((resolve, reject) => { axios.get(apiTable.log, { params: { data: data } }).then(res => { resolve(res) }).catch(err => { console.log(err) reject(err) }) }) } export { log }可以在同級目錄下的 data/apiMock.js 中建立 mock 請求：
import Mock from 'mockjs' // 使用mockjs模擬數據 Mock.mock(//test/log/, 'get', (req, res) => { const data = Mock.mock({ 'code': 0, 'msg': 'success', 'data|1-10': [{ 'name': '@cname', 'id|+1': 1, 'age|10-60': 0, // 10-60以內的隨機數，0用來確定類型 'birthday': '@date("yyyy-MM-dd")', // 年月日 'city': '@city(true)' // 中國城市 }] }) return data }) export default Mock然後，在入口文件 main.js 中引用這個 mock 文件就實現了介面的mock：
// ... import axios from 'axios' Vue.prototype.$axios = axios if (process.env.NODE_ENV === 'development') { require('@/data/apiMock') } // ...此時，在 dev server 下，組件中發起 ajax 請求，瀏覽器的開發者工具中已經抓不到對應的請求，而組件中對請求的調用和原來無異：
import { log } from '@/data/api' export default { created () { log('csxiaoyao').then(res => { console.log(res) }).catch(err => { console.log('err: ', err) }) } }至此，mockjs 的引入大功告成。
3. mockjs 基礎語法
Mock.js 提供了豐富的隨機數據模擬，非常實用，語法規範包括兩部分：
- 數據模板定義規範（Data Template Definition，DTD）
- 數據佔位符定義規範（Data Placeholder Definition，DPD）
官方文檔有詳細的介紹 https://github.com/nuysoft/Mock/wiki，還提供了豐富的樣例 http://mockjs.com/examples.html，此處不再贅述。
