vue2中使用mock进行后端数据模拟

前言

使用mockjs之前，先介绍一下mockjs。
mockjs相关参考文档链接：http://mockjs.com/examples.html

mockjs：是模拟后端数据的第三方库。在现在前后端分离的情况下，前端不需要等待后端开发出相关接口的前提下，根据接口文件进行模拟生成数据，然后完成前端开发过程。

正文

在前端项目中，我们以vue2项目为例。

1.首先使用vue-cli脚手架搭建开发的前端项目。

全局安装vue-cli以后使用以下命令创建自己的前端项目
vue create xxx

2.安装axios mockjs相关依赖

cnpm i -d axios
cnpm i -d mockjs

3.对axios的封装，获取后端数据

http文件夹下index.js是对axios的封装，status.js是http请求状态码。
index.js

import axios from 'axios'
import { getAxiosStatus } from './status'
import { Message } from 'element-ui'

// 创建实例
const instance = axios.create({
  baseURL: process.env.VUE_APP_IS_MOCK ? process.env.VUE_APP_MOCK_BASEURL : process.env.VUE_APP_API_BASEURL,
  timeOut: 5000
})

//添加返回数据拦截 如果返回成功（200）直接resolve，否则使用el-ui的message给客户弹相关错误
instance.interceptors.response.use(
  response => {
    if (response.data.status === 200) {
      return Promise.resolve(response)
    } else {
      Message({
        message: getAxiosStatus(response.data.status),
        type: 'error'
      })
      return Promise.reject(response)
    }
  },
  err => {
    const { response } = err
    Message({
      message: getAxiosStatus(response.data.status),
      type: 'error'
    })
    return Promise.reject(err)
  }
)

status.js

export const getAxiosStatus = (code) => {
  let msg = ''
  switch (Number(code)) {
    case 400:
      msg = '请求错误（400）'
      break
    case 403:
      msg = '拒绝访问（403）'
      break
    case 401:
      msg = '未授权（401）'
      break
    case 500:
      msg = '服务端错误（500）'
      break
    case 503:
      msg = '服务不可用（503）'
      break
    default:
      msg = `其他错误`
  }
  return msg
}

4.在src目录中创建mock文件夹以及相关的index.js文件引用mock

index.js模拟获取用户数据内容如下：

import * as Mock from 'mockjs'
Mock.mock('/mock/api/user-data', 'post', {
  'status|1': [200, 401, 400, 404, 501], // 200 和 400 选一个
  message: '@cword(4, 8)', // 模拟一个4到8的中文消息
  data: {
    id: '@guid'
  }
})

5.配置env.local文件设置参数

通过配置env文件来控制开发环境和部署环境，确定是使用前端mock模拟出来的数据还是使用真实后端返回数据。

VUE_APP_API_BASEURL=http://127.0.0.1:8080 //正式环境后端服务地址
VUE_APP_IS_MOCK=1 //是否使用mock 使用为1 不使用为0
VUE_APP_MOCK_BASEURL=/mock/api //使用mock访问的接口地址自动配置 /mock/api

6.配置main.js

//在main.js文件动态引入mock文件夹下的index.js文件，只有是开发环境 并且VUE_APP_IS_MOCK为rue的情况下才是动态引入mock进行测试
if (process.env.NODE_ENV === 'development' && process.env.VUE_APP_IS_MOCK) {
  require('@/mock')
}