mockjs在vue项目中如果优雅的使用

mockjs模拟数据可实现前后端分离，如果后端接口不能使用，你的项目也可以轻而易举的跑起来。

首先安装mockjs

npm install mockjs --save-dev

在src下创建mock文件夹，里面存放index.js、user.js等

index.js负责遍历mock其他所有分块存放的数据，其他js的代码结构如下

export default [
  {
    url: '/hws/system-time',
    type: 'get',
    response: () => {
      return {
        code: 0,
        message: '成功',
        data: '2020-11-09 09:55:02'
      }
    }
  },
  ...
]

index.js的代码结构如下：

import Mock from 'mockjs'

import user from './user'
import homeworkCorrection from './homework-correction'
import homeworkNewPublish from './homework-new-publish'
import homeworkPublish from './homework-publish'
import homeworkWatch from './homework-watch'
import qiniu from './qiniu'
import weixin from './weixin'

const mocks = [
  ...user,
  ...homeworkCorrection,
  ...homeworkNewPublish,
  ...homeworkPublish,
  ...homeworkWatch,
  ...qiniu,
  ...weixin
]

for (const i of mocks) {
  Mock.mock('https://mock.com/api' + i.url, i.type || 'get', i.response())
}
export default mocks

mock数据做好之后，接下来在main.js里面引用

import '@/mock/index.js'

以上已经mock好了数据，使用的时候调用接口 https:// mock.com/api/hws/system-time 即可使用，为了方便我们mock和开发来回切换，mock的接口名称都对应接口文档来写。如果涉及到接口url带参数的可以使用正则匹配来写mock的url。

export default [
  {
    url: RegExp('/hws/homework/.*/delayed'),
    type: 'put',
    response: () => {
      return {}
    }
  },
  ...
]

为了方便切换开发环境和mock环境，我们现在在pageage.json增加运行命令，

"serve:mock": "vue-cli-service serve --mode mock",

增加环境配置文件.env.mock，将.env.development的配置全部复制过来，改变请求接口的地址前缀为 https:// mock.com ，然后我们运行 npm run serve:mock 就可以使用mock数据来访问项目了。