官方文档：Mock.js

一.引言

在前端开发过程中，我们经常会遇到后端接口尚未完成，但前端需要进行页面构建和功能测试的情况。这时候，Mockjs就如同救星一般出现了。Mockjs 是一款能够模拟生成随机数据，拦截 Ajax 请求并返回模拟数据的工具，它极大地提高了前端开发的效率，让前端开发可以独立于后端进行。

二.安装Mockjs

npm install mockjs --save - dev

三.模拟数据

src/mock/modules/common.js 

import Mock from "mockjs";// 生成数据列表
var dataList = [];
for (let i = 0; i < Math.floor(Math.random() * 10 + 1); i++) {dataList.push(Mock.mock({id: "@increment",paramKey: "@first",paramValue: "@last",remark: "@csentence",}));
}// 获取参数列表
export function list() {return {// isOpen: false,url: "/user/list",type: "get",data: {msg: "success",code: 200,page: {totalCount: dataList.length,pageSize: 10,totalPage: 1,currPage: 1,list: dataList,},},};
}

四.批量注册

src/mock/index.js 

import Mock from "mockjs";
import * as common from "./modules/common";// tips
// 1. 开启/关闭[业务模块]拦截, 通过调用fnCreate方法[isOpen参数]设置.
// 2. 开启/关闭[业务模块中某个请求]拦截, 通过函数返回对象中的[isOpen属性]设置.
fnCreate(common, true);/*** 创建mock模拟数据* @param {*} mod 模块* @param {*} isOpen 是否开启?*/
export function fnCreate(mod, isOpen = true) {// isOpen = false;if (isOpen) {for (var key in mod) {((res) => {if (res.isOpen !== false) {Mock.mock(new RegExp(res.url), res.type, (opts) => {// console.log("opts---", opts);return res.data;});}})(mod[key]() || {});}}
}

五.全局引入

main.ts入口文件

// 非生产环境, 适配mockjs模拟数据
if (process.env.NODE_ENV !== "production") {const MockJs = () => import("/@/mock/index.js");MockJs();
}

六.页面调用

<template><ul><li v-for="(item, i) in users" :key="i"><h3>id：{{ item.id }}</h3><p>paramKey：{{ item.paramKey }}</p><p>paramValue：{{ item.paramValue }}</p><p>remark：{{ item.remark }}</p><hr /></li></ul>
</template><script>
import axios from 'axios'export default {data() {return {users: []}},mounted() {axios.get('/user/list').then(res => {console.log("res--", res);this.users = res.data.page.list}).catch(error => {console.log(error)})}
}
</script>

效果图