Mock Data

Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发更加独立自主，不会被服务端的开发所阻塞。

查看 mock.js文档

提示

mock-server 服务器只会在开发环境中使用，线上生产环境和预发布不提供数据MOCK能力

参考示列： @/mock/modules/dept.js

新增

新增前端API

如果你想添加 mock 数据，只要在目录 @mock/modules/ 下找到mock文件，添加对应的路由，对其进行拦截和模拟数据即可。

比如我现在在 @/api/system 中需要添加一个模拟查询统一权限部门列表接口 listAdpDept，首先新建接口：

export function listAdpDept(query) {
  return request({
    url: '/notoken/orgdepartment',
    method: 'get',
    params: query,
    baseURL: process.env.VUE_APP_MOCK_API
  })
}

新增模拟接口

声明完接口之后，我们需要找到对应的 mock 文件夹 @/mock/modules/dept.js，在下面创建一个能拦截路由的 mock 接口

请注意，mock 拦截是基于路由来做的，请确 mock 数据一定能匹配你的 api 保路由，支持正则

// listAdpDept 的 mock
{
  // url 必须能匹配你的接口路由
  // 比如 listAdpDept 对应的路由可能是 /notoken/orgdepartment/id1 或者 /notoken/orgdepartment/id2
  // 所以你需要通过正则来进行匹配
  url: '/notoken/orgdepartment/.+',
  type: 'get',
  response: config => {
    const items = data.items
    return {
      code: 200,
      data: items,
      msg:"操作成功"
    }
  }
}

data 为模拟数据

创建接口引用

创建完模拟路由后，我们还需要将新创建的路由引入MOCK服务器

在文件@/mock/index.js内增加相应代码。

import dept from './modules/dept'

const mocks = [
  ...dept
]

如需要引用其他路由，继续拓展即可，如我们新增加一个 @/mock/modules/login.js

import dept from './modules/dept'
+ import login from './modules/login'

const mocks = [
  ...dept
+ ...login
]

删除

最常见的操作就是：你本地模拟了了一些数据，待后端完成接口后，逐步替换掉原先 mock 的接口。

删除模拟数据只需要去除模拟接口中的 baseURL: process.env.VUE_APP_MOCK_API 即可

export function listAdpDept(query) {
  return request({
    url: '/notoken/orgdepartment',
    method: 'get',
    params: query
  })
}