前言:
在我们实际项目开发中,会通过调用接口来获取数据,然后进行渲染,但是往往在开发中后端需要写接口文档,所以在等待接口的过程中导致前端会比较被动,这个时候我们就可以通过mock.js来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发,使项目可以正常进行,节约了宝贵时间,等到后端接口编写完毕后,再替换成真正的接口就大功告成。
一.什么是mock.js?
官方文档:mockjs.com/
作用: 生成随机数据,用于拦截 Ajax 请求避免后端接口数据变化,前端数据独立
step1:安装mock.js
npm install mock.js -save
step2:引入mock.js
两种方式:
1.可以创建新的mock文件夹
2.可以在自己项目中utils文件夹中引入moke.js
//1.引入moke.js
import mockjs from 'mockjs'
//2.拦截ajax请求,模拟数据
//路径不能写完整,只能写部分路径(这是坑)
//mock()方法传递三个参数,分别是拦截接口 请求类型 模板方法
mockjs.mock('/api/sys/profile', 'post', function() {
拦截接口 请求类型 模板方法
//3.自己模拟数据
return {
success: true,
code: 10000,
data: {
userId: '604f764971f93f3ac8f365c2',
mobile: '13800000002',
username: '1111',
roles: {
//菜单权限
menus: [
'employees',
'settings',
'permissions',
'social_securitys',
'approvals',
'attendances',
'salarys',
'departments'
// '人事'
],
points: [
'add-dept'
],
apis: []
},
companyId: '1',
company: '花开蝶自来'
},
message: '获取资料成功'
}
})
温馨提醒:
1.mock()方法传递三个参数,分别是拦截接口 请求类型 模板方法。
2.路径不能写完整,只能写部分路径(这是坑)