文章目录
前言
如今web开发大部分都采用前后端分离开发模式，那么我们可以使用mockjs来模拟后端数据，独立于后端开发，从而提高开发效率
本demo使用的为vue-cli 4.2.2版本
提示：以下是本篇文章正文内容，下面案例可供参考
一、mockjs是什么？
mockjs是基于js的一种可生成随机数据，拦截Ajax请求的工具，该工具是为了方便前端模拟后端接口数据。mockjs支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等，支持扩展更多数据类型，支持自定义函数和正则。
二、使用步骤
1.npm安装mockjs
在vue-cli根目录打开命令窗口，执行以下打码
代码如下（示例）：
npm install --save-dev mockjs
其余安装方式，详见：mockjs安装Github
2.创建utils文件夹统一存放api
utils文件夹统一放置项目中要用到工具，比如api.js，它包含所有的请求地址，采用在vue原型绑定的方式。如http.js封装网络请求模块。
创建utils文件夹，并在其下创建api.js文件
api.js代码如下（示例）：
export const CONTEXT = '/api/'
export const LIST = CONTEXT + 'list' + '?time=' + new Date().getTime()
api.js包含项目中所有使用的url请求地址，方便统一管理。
3.将api.js挂载到vue原型上
在main.js中添加如下代码
main.js代码如下（示例）：
import * as api from './utils/api.js' //导入所有的url
Vue.prototype.api = api //在vue原型上绑定api
4.创建mock文件夹
在src文件夹下创建mock文件夹，并在其下创建index.js和userInfo.js。
index.js代码如下（示例）：
const Mock = require("mockjs") //引入依赖包mockjs，一定要先安装
import * as api from '../utils/api.js' //导入所有的api url地址
import {
userInfo} from './userInfo.js' //所有的数据模板，这里方便演示所以只有一个
//可以设置响应的时间，模拟网络耗时，单位是ms
Mock.setup({
timeout: '2000 - 4000'
})
//参数： url, 请求方式, 数据模板（可以是对象或字符串）
Mock.mock(api.LIST,'get',userInfo)
userInfo.js代码如下（示例）：
const Mock = require("mockjs")
const Random = Mock.Random; //mockjs对象的一个随机对象
let list = []
const userInfo = function () {
for (let i = 0; i < 10; i++) {
list.push({
id: i,
name: Random.cname(), //返回一个常见的中文名
age: Random.integer(20, 40) //返回一个数字，范围在20~40
})
}
return {
list}
}
export {
userInfo }
还想生成其他数据？请看mockjs官方使用文档
5.在开发环境下添加mockjs的依赖
由于mockjs只在开发环境中使用，添加依赖控制
main.js代码如下（示例）：
if(process.env.NODE_ENV == 'development'){
require('./mock/index')
}
6.在vue文件中使用mockjs
在vue文件中添加代码如下（示例）：
_this.http.get(_this.api.LIST).then( res => {
if(res.status === 200){
console.log('res---------',res)
//TODO
}
}).catch(err => {
})
控制台的结果如下：
注意：以上的网络请求我自己封装的，未封装的axios也可使用。