mockjs简单易懂

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

npm 安装 mock

npm install mockjs

项目引入 mock

mian.js

if (process.env.NODE_ENV !== 'production') {
    require('@/mock')
}     // 非生产模式引入mock

 新建mock文件夹index为mock的入口文件

index

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

// 可以通过 isOpen 参数设置是否拦截整个模块的 mock 功能
fnCreate(admin, 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]() || {})
        }
    }
}

admin.js

import Mock from 'mockjs'

// 登录
export function getAuditPrj() {
    return {
        // isOpen: false,
        url: '/api/resources/project/audit',
        type: 'get',
        data: {
            'msg': 'success',
            'code': 0,
            'expire': Mock.Random.natural(60 * 60 * 1, 60 * 60 * 12),
            'token': Mock.Random.string('abcdefghijklmnopqrstuvwxyz0123456789', 32)
        }
    }
}

接口文件

/**
     * @brief 查询待审核工程
     * */
    getAuditProject(){
        return request({
            url: '/api/resources/project/audit',
            method: 'get'
        })
    }

取消mock的方式是注释main,js中的代码或者是把fnCreate中参数改为false

oooooooook...