-
介紹
Mock.js
生成隨機(jī)數(shù)據(jù)送挑，攔截 Ajax 請求
前端使用mockjs后柿祈，對后端接口進(jìn)行請求時(shí)哈误，mockjs會攔截Ajax請求，并返回隨機(jī)數(shù)據(jù)躏嚎，模擬后端的響應(yīng)蜜自。這樣，無需等到后端接口開發(fā)完畢卢佣，前端就可以對獲取數(shù)據(jù)部分進(jìn)行開發(fā)重荠、測試，做到前后端分離虚茶。當(dāng)后端開發(fā)完畢后戈鲁，只要關(guān)閉mock即可，無需修改代碼邏輯嘹叫，提高了開發(fā)效率婆殿。
前提（正確的做法）是，已經(jīng)和后端確定好接口格式罩扇，各自按照文檔進(jìn)行開發(fā)婆芦。當(dāng)然，也有不太理想的情況→后端有自己的想法暮蹂。寞缝。。那就不太適合使用mock數(shù)據(jù)了仰泻。
-
使用方法
- 安裝mock
npm install mockjs
-
在src下新建mock文件夾，新建index.js文件
index.js
在index.js中導(dǎo)入所有mock服務(wù)滩届，并進(jìn)行通用配置
import Mock from 'mockjs'
import './queryBusList'
Mock.setup({
timeout: '200-600'
});
- 注冊mock服務(wù)
在mock文件夾下為每個(gè)接口建立一個(gè)js文件集侯，注冊mock數(shù)據(jù)
//queryBusList.js
import Mock from 'mockjs'
let path = 'xxxx/xxx/xx';
//Mock.mock(rurl, rtype, template)
Mock.mock(new RegExp( '^' + path), 'post', { //需要正則被啼，否則無法攔截
header: {
status: 200,
message: 'success',
errcode: '0',
},
body: {
'busLinesList|1-10':[ //隨機(jī)生成1-10項(xiàng)長度的列表
{stops:
[{
BusStopName: '@cword(2,5)', //隨機(jī)生成2-5個(gè)中文字符的詞
BusStopTime: '@time("HH:mm")', //隨機(jī)生成時(shí)間
},{
BusStopName: '@cword(2,5)',
BusStopTime: '7:30',
}]
}
]
}
})
- 在main.js中導(dǎo)入
//main.js
import './mock/index.js' //使用mockjs模擬數(shù)據(jù)`
