vue中使用mockjs模拟接口数据

背景

今天需要在项目中新增一个模块, 但是该模块暂时没有提供接口, 所以我们使用mock.js自己模拟接口数据, 这样接口提供完成后, 只需要取消掉模拟数据即可.

1. 安装mockjs

npm i mockjs --save

2. 创建mock全局文件
   由于我是在项目中新增一个模块, 且项目本身原先并没有使用mockjs, 所以我的想法是局部增加数据模拟功能

在main.js同级创建一个mock.js文件, 然后在文件中添加如下代码:

var Mock = require('mockjs')

import party from './pages/partyBuild/conf/data.js';   // 引入局部的数据模拟文件

const mocks = [
    ...party
]

mocks.map(route => {
    console.log(route);
    Mock.mock(route.url, route.type, route.response)
})

接着在main.js中引入该文件

require('./mock');

3. 创建局部数据模拟文件
   
   我在新增的模块中增加一个data.js文件, 用来存放模拟接口数据的代码

import Mock from 'mockjs'
import { partyApi } from './api';

export default [
    {
        url: partyApi.getPartyList,
        type: 'post',
        response: config => {
            return {
                "Status": 200,
                "StatusCode": "1",
                "resDesc": "success",
                "ErrorMessage": "",
                "Data": Mock.mock({
                    "toalCount|1-100": 1,
                    "records|5-12": [
                        {
                            "id|+1": 1,
                            "title": '@ctitle(16, 30)',
                            "date": '@datetime',
                            "type": '@integer(1, 10)',
                            "typeDesc": '@csentence(5)',
                            "status": '@integer(1, 4)',
                            "statusDesc|1": ["已学习", "未学习"],
                            "studyTimes": '@integer(1, 40)'
                        }
                    ]
                })
            }
        }
    }
]

该文件是导出一个数组, 该数组被上面展示的mock.js文件接收, 然后使用mockjs的语法, 开启数据模拟.

我们可以看一看该文件的数据结构, 如下展示数组中的一项

4. 请求
   然后我们根据自己定义的url正常去请求即可

let _this = this;
let param = {
    uid: this.userinfo.Uid,
    pageNumber: this.controls.page,
    pageSize: this.controls.pagesize
};
let url = this.$commonapi.getPartyList;  // 这个url与data.js文件中的url一致
_this.controls.loading = true;
this.$tool.ajax(_this, url, "post", param, null, res => {
    _this.controls.loading = false;
    console.log(res);
});

5. 结束
   
   以上就是我在vue中使用mockjs来进行接口数据模拟的过程.

如果想熟悉mockjs的语法, 可以点击这里, 进入官网查看文档

ps: 这样简单的使用mockjs模拟数据, 在浏览器的Network中是不会出现请求的