关于项目实战中如何使用mock.js模拟数据

708 阅读1分钟

前言:

在我们实际项目开发中,会通过调用接口来获取数据,然后进行渲染,但是往往在开发中后端需要写接口文档,所以在等待接口的过程中导致前端会比较被动,这个时候我们就可以通过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:使用图示

引入moke.js.png