一、引入、封装 mock

1、简介

项目开发的时候，有时候后端接口不给力，要是必须从后端获取数据，没有其他方式获取数据，那就很蛋疼了（只能等后端接口正常，才可以继续开发前端）。
mock 是一个数据模拟生成器，用于帮助前端独立于后端进行开发，其模拟 ajax 并返回相应的数据，从而使前端不必依赖于后端接口，方便开发。

2、封装要求

定义不同的模块，用于响应不同组件的请求。
可以方便、快捷的关闭某个模块、或者某个请求的处理（关闭请求处理后，可以直接访问后端接口）。

3、安装并引入mock

1》安装

npm install mockjs -S

 2》引入

引入 mock
　　定义一个 mock 文件夹以及统一处理入口 index.js。
　　定义一个 fnCreate 方法 用来处理 mock。
其中：
　　第一个参数为 模块名，需要通过 import 引入。
　　第二个参数为 是否开启 mock ，true 为开启，false 为关闭。

import Mock from 'mockjs'
import * as login from './modules/login.js'

// 可以通过 isOpen 参数设置是否拦截整个模块的 mock 功能
fnCreate(login, true)

/**
 * 创建mock模拟数据
 * @param {*} mod 模块
 * @param {*} isOpen 是否开启?
 */
function fnCreate(mod, isOpen = true) {
    if (isOpen) {
        for (var key in mod) {
            ((res) => {
                if (res.isOpen !== false) {
                    Mock.mock(new RegExp(res.url), res.type, (opts) => {
                        opts['data'] = opts.body ? JSON.parse(opts.body) : null
                        delete opts.body
                        console.log('\n')
                        console.log('%cmock拦截, 请求: ', 'color:blue', opts)
                        console.log('%cmock拦截, 响应: ', 'color:blue', res.data)
                        return res.data
                    })
                }
            })(mod[key]() || {})
        }
    }
}

3》定义功能子模块
　　给不同的组件定义不同的模块，用于区分不同的操作。
        比如创建一个 login.js 用来处理 登录、登出操作。

import Mock from 'mockjs'
// 登录
export function getToken() {
  return {
    url: 'api/auth/token',
    type: 'post',
    data: {
      'msg': 'success',
      'code': 0,
      'expire': Mock.Random.natural(60 * 60 * 1, 60 * 60 * 12),
      'token': Mock.Random.string('abcdefghijklmnopqrstuvwxyz0123456789', 32)
    }
  }
}

 4》全局引入 mock 文件
　　在 main.js 中引入，可以控制引入时机，比如只在开发环境下生效。

// 非生产环境, 适配mockjs模拟数据
if (process.env.NODE_ENV !== 'production') {
    require('@/mock')
}

5》修改login.vue文件登录事件

// 提交表单
    submitForm() {
      // 登录
      this.$request({
        url: '/auth/token',
        method: 'post',
        data: this.loginForm,
      }).then((res) => {
        if (res.data.code === 0) {
          this.$message({ message: '登录成功', type: 'success' });
          this.$router.push({
            name: 'About',
          });
        }
      });
    },

（6）页面测试 点击登录