关于项目实战中如何使用mock.js模拟数据 |
您所在的位置：网站首页 › moke数据是什么 › 关于项目实战中如何使用mock.js模拟数据 |
关于项目实战中如何使用mock.js模拟数据
|
前言：
在我们实际项目开发中，会通过调用接口来获取数据，然后进行渲染，但是往往在开发中后端需要写接口文档，所以在等待接口的过程中导致前端会比较被动，这个时候我们就可以通过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.路径不能写完整,只能写部分路径（这是坑） step3:使用图示 |
【本文地址】
今日新闻 |
推荐新闻 |