vue 中 mockjs 搭建使用说明

vue中mockjs 搭建使用说明

前言

​ 前后端分离的开发模式，前端需要向后端请求数据（ajax请求），但实际开发过程中，前后端会约定一份 接口文档，但前后端开发进度并不一致，当后端没有完善接口功能时，前端需要在本地模拟数据返回，此时需要使用到mockjs。

​ 也就是说，在后端接口还未开发时，前端人员却需要调用接口进行测试前端程序，前端人员就可以使用mockjs来模拟后端接口的返回数据。

使用mockjs，我们希望实现目的：

1、能够模拟出表记录对象数据

2、能够实现模拟出增删改查接口操作

3、能够配置只对手动配置的接口实现拦截

4、只在开发环境下mockjs可以拦截

安装

npm install mockjs --save-dev

项目搭建

src 新增目录结构

• mock

  • index.js 用于加载mock对api拦截的配置

  • mock-data.js 用于定义mock模拟数据对象方法

  • api

    • userApi.js mock模拟api接口方法定义文件

注意：mockjs一般只用于开发环境下单元测试用

mock/index.js 配置mock对api拦截的文件

代码：

// 引入mockjs
import Mock from 'mockjs'

// 引入api对应的mock模拟接口方法文件
import userApi from './api/userApi.js'
//import customerApi from './api/customerApi.js'


// 设置200-1000毫秒延时请求数据
Mock.setup({
  timeout: '200-1000'
})

/********* 配置要拦截的 api (使用正则路径匹配) 和 api对应的mock模拟接口方法 ********/

// 用户
Mock.mock(/\/api\/user\/list/, 'get', userApi.getUserList)
Mock.mock(/\/user\/info/, 'get', userApi.getUser)
Mock.mock(/\/user\/add/, 'post', userApi.createUser)
Mock.mock(/\/user\/del/, 'post', userApi.deleteUser)

mock/mock-data.js 定义mock数据对象模拟方法

代码示例：

import Mock from 'mockjs'
const Random = Mock.Random


export default {
    // 缓存mock data
    store: {},
    
    // 获取表 mock data
    getTable: function(tableName){
        if(this.store[tableName]){
            return this.store[tableName]
        }else{
            let func = this[tableName];
            this.store[tableName] = func();
            return this.store[tableName]
        }
    },
    
    // 用户表
    ifs_ua_account: function(){
        let List = []
        const count = 200
        for (let i = 0; i < count; i++) {
            List.push(
                Mock.mock({
                    uid: i + 1,
                    user_name: Random.name(),     // 随机的英文姓名
                    real_name: Random.cname(),    // 随机的中文姓名
                    "sex|1": ["男", "女"],        // 随机取数组中一个元素
                    birthday: Random.date(),      // 随机日期
                    mobile: /^1[3456789]\d{9}$/,  // 手机号码
                    post: Random.pick(["设计", "开发", "测试", "实施"], 1, 3), // 从数组中随机取1-3个元素重新组成数组
                    address: '@county(true)',       // 地址
                    email: "@email",                // Email
                    weight: Random.float(40, 90, 1, 1),  // Random.float(整数位最小值, 整数位最大值, 小数位最小位数, 小数位最大位数) 实型
                    age: Random.integer(20, 55),    // 随机取20 - 55之间的整数
                    e_memo: "@paragraph(1,2)",      // 英文文本(句子)
                    memo: "@cparagraph(1,2)",       // 中文文本(句子)一个参数时，参1：句子的个数；两个参数时，参1：句子的最小个数  参2：句子的最大个数
                    "status|1": [0, 1, 2],          // 随机取数组中一个元素
                    header: Random.image('200x100', '#50B347', '#FFF', 'Mock.js'), // 根据字符串text生成一张图片 Random.image( size, background, foreground, text )
                })
            )
        }
        return List;
    },
    
    // 角色表
    ifs_ua_account_group: function(){
        let List = []
        const count = 8
        const name = ["管理员", "项目经理", "测试经理", "开发经理"];
        for (let i = 0; i < name.length; i++) {
            List.push(
                Mock.mock({
                    id: i + 1,
                    role_name: name[i],
                    role_memo: "@cparagraph(1,2)",
                    role_code: /UG-\d{2}-\d{2}-\d{2}/    // "UG-NN-NN-NN"格式
                })
            )
        }
        return List;
    }


}

mock/api/xxxxApi.js mock模拟api接口方法定义

示例代码：

import Mock from 'mockjs'

import mockdb from "@/mock/mock-data.js"

// get请求从config.url获取参数，post从config.body中获取参数
function param2Obj(url) {
    const search = url.split('?')[1]
    if (!search) {
        return {}
    }
    return JSON.parse(
        '{"' +
        decodeURIComponent(search)
        .replace(/"/g, '\\"')
        .replace(/&/g, '","')
        .replace(/=/g, '":"') +
        '"}'
    )
}
const Random = Mock.Random

// 随机生成的用户列表数据
let List = mockdb.getTable("ifs_ua_account")


export default {
    /**
     * 获取列表
     * 要带参数  
     * @param  
     * @return {{code: number, message: string, data: *[]}}
     */
    getUserList: config => {
        const {
            name,
            page = 1,
            limit = 20
        } = param2Obj(config.url) 
        return {
            code: 200,
            message: '',
            data: List
        }
    },
    
    /**
     * 增加用户
     * @param name, addr, age, birth, sex
     * @return {{code: number, data: {message: string}}}
     */
    createUser: config => {
        const {
            name,
            addr,
            age,
            birth,
            sex
        } = JSON.parse(config.body)
        console.log(JSON.parse(config.body))
        List.unshift({
            id: Mock.Random.guid(),
            name: name,
            addr: addr,
            age: age,
            birth: birth,
            sex: sex
        })
        return {
            code: 20000,
            data: {
                message: '添加成功'
            }
        }
    },
    
    /**
     * 删除用户
     * @param id
     * @return {*}
     */
    deleteUser: config => {
        const {
            id
        } = param2Obj(config.url)
        if (!id) {
            return {
                code: -999,
                message: '参数不正确'
            }
        } else {
            List = List.filter(u => u.id !== id)
            return {
                code: 200,
                message: '删除成功'
            }
        }
    }
}

项目配置

mockjs 在 dev环境下拦截请求

.env.development 开发环境变量配置文件中，增加变量

VUE_APP_MOCK = 1

main.js 文件中增加下面代码

// mock配置，实现只在dev环境下载入mockjs
process.env.VUE_APP_MOCK && require('@/mock/index.js') 

项目测试

前面的项目中搭建及配置都完成了，现在就可以调用axios访问api进行测试了

我们先在src/api/ 目录下新建一个userApi.js 文件，定义向后端请求的方法；

src/api/userApi.js 代码：

import https from '@/https.js'

const userApi = {

    baseUrl: '/api',
    
    getUserList: function(params){
        return https.fetchGet(this.baseUrl + "/user/list", {});
    },
    
};

export default userApi

然后，我们在App.vue中，引入 src/api/userApi.js ，调用 getUserList() 方法，控制台打印出 返回的数据，测试完成。

userApi.getUserList().then((response)=>{
    console.log(response.data)
})

开发流程

首先，我们知道mock是用来模拟接口返回的，那么我们就先要将接口入参及返回确认定义好；

并且，我们要在src/api/目录下的api方法要定义好；

这是两个前提条件。

然后，才是前端测试，发现后端接口还没开发，就自己做mock测试；

所以流程应该是这样：

• 接口入参及返回定义
• 完成前端功能开发
• mock/mock-data.js 添加接口返回数据模型 （这一步是可选的，目前还不确定是否要将数据模型定义单独放到这里，还是直接放到 xxxApi.js里定义，要在实际项目应用中，看情况再确认）
• mock/api/xxxApi.js 添加api接口mock方法
• mock/index.js 添加api路由拦截配置