Mock.js的簡單使用
簡述
Mock.js 是一款 模擬資料生成器，旨在幫助前端攻城師獨立于后端進行開發，幫助撰寫單元測驗，
功能
- 根據資料模板生成模擬資料，
- 模擬 Ajax 請求，生成并回傳模擬資料，
- 基于 HTML 模板生成模擬資料，
使用場景
- 開發期間前端非常依賴后端的介面，總會苦苦等待后端介面出來才能繼續開發，
- 開發純前端并具備CURD功能的demo專案，
- ...
好處
- 只要前后端約定好資料結構，前端便可不受后端開發進度影響，
- 可攔截ajax請求，模擬回傳資料，后期無須再修改ajax請求引數，
- 配置簡單，拿來即用，
- ...
演示
Mockjs 模擬資料 demo
Vue專案中使用
安裝
npm install --save-dev mockjs
引入
為了方便后期維護，建議將Mock.js單獨配置
// main.js
... 省略Vue的參考
import './mock/mock.js'
配置
方式一：直接使用
// helloWorld.vue
import Mock from 'mockjs'
...
let data = https://www.cnblogs.com/zh1q1/archive/2021/10/27/Mock.mock({'list|1-10': [{
'id|+1': 1
}]
})
console.log(JSON.stringify(data))
方式二：攔截ajax請求
檔案路徑: /src/mock/mock.js
// mock.js
// 引入mockjs
import Mock from 'mockjs'
//延時200-600毫秒請求到資料
Mock.setup({
// timeout: '300', // 延時300ms
timeout: '200-600'
})
// 配置請求路徑
const url = {
tableDataOne: 'mock/mode1/tableDataOne'
}
// 配置請求攔截
Mock.mock(url.tableDataOne, {
"data": {
"mtime": "@datetime", // 隨機生成日期時間
"score|1-800": 800, // 隨機生成1-800的數字
"rank|1-100": 100, // 隨機生成1-100的數字
"stars|1-5": 5, // 隨機生成1-5的數字
"nickname": "@cname" // 隨機生成中文名字
}
})
// 攔截URL可以使用正則
Mock.mock(/\/mock\/mode1/, { ... })
/* Mock獲取請求引數 */
// GET url傳參，必須使用正則，否則無法匹配
// axios.get(`/mock/mode1/get?name=123`)
Mock.mock(/\/mock\/mode1\/get/, option => {
console.log(option) // { "url": "/mock/mode1/get?name=123", "type": "GET", "body": null }
...
})
// POST body傳參
// axios.post('/mock/model/post', { name: 11 })
Mock.mock(/\/mock\/mode1\/post/, option => {
console.log(option) // { "url": "/mock/mode1/post", "type": "POST", "body": "{name: 11}" }
// 這里回傳模擬資料時需要回傳Mock物件，直接回傳會原封不動輸出，不會觸發Mock語法
return Mock.mock({
msg: 'successful',
outData: {
"name": "@cname" // 隨機生成中文名字
}
})
}
語法規范
網上很多，很詳細，我就不重復贅述了
Mock.js官方檔案
mock.js語法規范 | 清湯餃子-簡書
本文來自博客園，作者：吳知木，轉載請注明原文鏈接：https://www.cnblogs.com/zh1q1/p/15470596.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/338961.html
標籤：其他