zhigu

  项目开发的时候,有时候后端接口不给力,要是必须从后端获取数据,没有其他方式获取数据,那就很蛋疼了(只能等后端接口正常,才可以继续开发前端)。
  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...

分类:

技术点:

相关文章: