前端請求接口數(shù)據(jù)需要后端提供支持隅津，但在項(xiàng)目前期揩尸，會遇到?jīng)]有接口給前端人員測試的尷尬界斜。
這時(shí)候mock.js就能起到關(guān)鍵作用，它能啟動一個(gè)模擬返回接口數(shù)據(jù)的服務(wù)眯搭。
只需幾步就能搭建一個(gè)mock.js服務(wù)：
1.全局安裝mock-server
npm i @shymean/mock-server -g
- 創(chuàng)建并配置mock.js文件
在電腦上創(chuàng)建一個(gè)mock.js文件窥翩，如D:/mock/mock.js，在文件中填入如下內(nèi)容：
// _mock.js
// 對應(yīng)的rurl會被中間件攔截鳞仙，并返回mock數(shù)據(jù)
// ANY localhost:8888/
Mock.mock('/', {
data: [],
msg: "hello mock",
"code|1-4": 1,
})
// 可以mock指定的請求方法
// POST localhost:8888/test
Mock.mock('/test', 'POST', {
data: [],
msg: "hello mock",
"code|1-4": 1,
})
// 默認(rèn)回調(diào)名稱 callback
Mock.mock("/test2", {
code: 0,
msg: "hello from mock jsonp2",
data:[
{
"id|1000-9999": 1,
"score|1-800": 800,//隨機(jī)生成1-800的數(shù)字
"rank|1-100": 100,//隨機(jī)生成1-100的數(shù)字
"stars|1-5": 5,//隨機(jī)生成1-5的數(shù)字
"nickname": "@cname"http://隨機(jī)生成中文名字
},
{
"id|1000-9999": 1,
"score|1-800": 800,//隨機(jī)生成1-800的數(shù)字
"rank|1-100": 100,//隨機(jī)生成1-100的數(shù)字
"stars|1-5": 5,//隨機(jī)生成1-5的數(shù)字
"nickname": "@cname"http://隨機(jī)生成中文名字
}
]
});
Mock.mock(/auth/, (ctx) => {
let {uid} = ctx.query
if (uid) {
return {
code: 200,
msg: 'success',
data: {
uid,
"name": 'haiyan'
}
}
} else {
return {
code: 401,
msg: 'no uid',
}
}
})
3.啟動服務(wù)
mock -p 8888 -f D:/mock/mock.js
4.大功告成
一切準(zhǔn)備就緒寇蚊，打開瀏覽器，輸入地址 http://localhost:8888 棍好，就能看到返回的數(shù)據(jù)了仗岸。
http://localhost:8888
如果你有服務(wù)器，可以按以上方式配置一套借笙，還可以分享給你的小伙伴們一起使用扒怖。
有關(guān)mock的配置，請查閱官網(wǎng)http://mockjs.com/
