使用mock.js模拟数据

安装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数据