安装mock.js
//安装 只需要在开发环境使用,这里直接-D即可
npm install -D mockjs
//卸载
npm uninstall mockjs
在vue项目中配合axios使用
创建文件
src目录下创建
- mock
- data (存放一些json数据文件)
- modules (存放mock模块)
- utils (存放一些处理数据的方法 )
- message.js (存放通用message,方便统一 管理)
- index.js (mockjs的出口,用于导入modules的模块,设置Mock公共操作,比如超时时间)
modules 和index.js 文件实内际操作
/**
* @desc tree模块
* @Date 2023-06-07 08:41:43
**/
import { apiPath } from "@/request/apiPath.js"; // 导入请求公共地址文件
import { tree } from "@/mock/data/index.js"; // 导入事先写好的数据
import { getScopeNumer } from "@/mock/utils"; // 导入用于生成俩数随机的中间值的方法
const { mapPointTree } = apiPath; // 获取需要拦截的请求地址
const Mock = require("mockjs"); // 导入mock
const Random = Mock.Random; // 引用Random方法,具体自行看文档,里面有内置各种处理数据的方法
Mock.mock(mapPointTree.getResourceListTree, "get", {
code: 220, // 状态码
data: tree,// 返回的数据->这里是事先写好的固定数据
msg: "success",
});
/**
* @desc 重要基础设施
* @Date 2023-06-07 08:41:43
**/
Mock.mock(mapPointTree.criticalInfrastructure, "get", {
msg: "操作成功",
code: 200,
data: () => { // 这里使用箭头函数返回动态数据
const data = [];
for (let index = 0; index < 8; index++) {
let item = {
lng: getScopeNumer(118.1, 118.2), // 使用自定义的方法
lat: getScopeNumer(31.1, 31.2), // 使用自定义的方法
name: Random.cword(3, 5), //返回随机的3~5位的中文标题
id: Random.id(), // 返回id ->这里使用时间戳+index也是可以的
};
data.push(item);
}
return data;
},
});
/**
* @desc mock出口
* @Date 2023-06-07 08:41:43
**/
// 导入需要的mock模块
require("@/mock/modules/tree");
require("@/mock/modules/mapPointTree");
// 引入mock
const Mock = require("mockjs")
//设置超时时间
Mock.setup({ timeout: 0 - 300 });
完成以上操作 导入至main.js
//这里进行了环境判断 判单当前是开发环境还是生产模式
//只有在开发环境才我们才会进行导入
//也可以直接注释改行代码 使mockjs失效
window.LESCONFIG.MOCK && require("@/mock");
这里说一下 apiPath.js文件
// 获取baseURL 这里是根据 生产和开发环境进行动态获取
const { BASE_URL } = window.LESCONFIG;
// 公共api的json
export const apiPath = {
// 首页api模块
mapPointTree: {
getResourceListTree: `${BASE_URL}/gxtResListEntity/getResourceListTree`, //图层资源
whareHose: `${BASE_URL}/supply/wharehouse`, // 物资仓库
whareRepertory: `${BASE_URL}/supply/repertory`, // 物资库存
fireBrigade: `${BASE_URL}/fireBrigade`, //消防队伍
mineTeam: `${BASE_URL}/mineTeam`, //矿山队伍
forestFireBrigade: `${BASE_URL}/forestFireBrigade`, //森林消防队伍
railwayTeam: `${BASE_URL}/railwayTeam`, //铁路队伍
waterTeam: `${BASE_URL}/waterTeam`, //水上队伍
dangerousObjectTeam: `${BASE_URL}/dangerousObjectTeam`, //危化品队伍
localFireFightingTeam: `${BASE_URL}/localFireFightingTeam`, //地方灭火队伍
focusEnterprises: `${BASE_URL}/focusEnterprises`, //重点关注企业
majorTransportationHub: `${BASE_URL}/majorTransportationHub`, //主要交通枢纽
criticalInfrastructure: `${BASE_URL}/criticalInfrastructure`, //重要基础设施
highRisKenterprise: `${BASE_URL}/highRisKenterprise`, //高危企业
sportsHall: `${BASE_URL}/sportsHall`, //体育馆
park: `${BASE_URL}/park`, //公园
bombShelter: `${BASE_URL}/bombShelter`, //防空洞
},
};
// 使用公共api地址文件,是为了修改方便,当接口变动只需要去该文件(apiPath.js)进行修改。
// 凡是都有俩面性,这样操作方便mockjs获取需要拦截的请求api地址 但是每次添加接口都要在该文件进行多一步操作
// 原本我是要用exresss + mysql 进行本地联调的,完成一些基本的增删改查。但是有时候不一定有空去搭建 所以使用mockjs进行数据模拟
// 正常情况下后端是来的及的,也用不到自己去mock数据