前端请求接口数据需要后端提供支持,但在项目前期,会遇到没有接口给前端人员测试的尴尬。
这时候mock.js就能起到关键作用,它能启动一个模拟返回接口数据的服务。
只需几步就能搭建一个mock.js服务:
1.全局安装mock-server
npm i @shymean/mock-server -g
- 创建并配置mock.js文件
在电脑上创建一个mock.js文件,如D:/mock/mock.js,在文件中填入如下内容:
// _mock.js
// 对应的rurl会被中间件拦截,并返回mock数据
// 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,
})
// 默认回调名称 callback
Mock.mock("/test2", {
code: 0,
msg: "hello from mock jsonp2",
data:[
{
"id|1000-9999": 1,
"score|1-800": 800,//随机生成1-800的数字
"rank|1-100": 100,//随机生成1-100的数字
"stars|1-5": 5,//随机生成1-5的数字
"nickname": "@cname"//随机生成中文名字
},
{
"id|1000-9999": 1,
"score|1-800": 800,//随机生成1-800的数字
"rank|1-100": 100,//随机生成1-100的数字
"stars|1-5": 5,//随机生成1-5的数字
"nickname": "@cname"//随机生成中文名字
}
]
});
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.启动服务
mock -p 8888 -f D:/mock/mock.js
4.大功告成
一切准备就绪,打开浏览器,输入地址 http://localhost:8888 ,就能看到返回的数据了。
http://localhost:8888
如果你有服务器,可以按以上方式配置一套,还可以分享给你的小伙伴们一起使用。
有关mock的配置,请查阅官网http://mockjs.com/