mock.js的使用

2021-10-22 15:30:30

#插件

25

前言

最近在了解公司的项目，发现给我的两个项目是基于vue-element-admin这一个后台管理系统框架写的，在看这个框架的时候，发现了一个很有意思的js插件Mock.js 官方文档

作用

  • 生成随机数据，拦截Ajax请求

优点

  • 前后端分离
  • 无侵入开发
  • 支持随机数据类型丰富
  • 可用于单元测试
  • 用法简单
  • 支持拓展

项目实践

项目环境

  • "vue": "^3.0.0"
  • "mockjs": "^1.1.0"
  • "axios": "^0.21.1"

实践步骤

  • 在src/main.ts文件中引入，添加如下代码(可以通过process.env.NODE_ENV的判断来决定是否在生产环境中使用)
// 载入mockjs
// if (process.env.NODE_ENV != \"production\") {
require(\"./mock\");
// }
  • 在src目录下创建mock文件夹用于管理mock.js相关文件
  • mock文件夹下创建index.js文件，用于工程化管理子文件
  • index.js文件内容
import Mock from \"mockjs\";
// 存储mock的接口对象
let configArr = [];
// 一个webpack的api，通过执行require.context函数获取一个特定的上下文，用于实现自动化导入模块
// 使用情况：导入一个文件夹的多个模块，它会遍历文件夹中的指定文件
// 该行代码导入了该文件夹下所有js文件
const files = require.context(\".\", true, /\\.js$/);
const map = {};
// keys：匹配成功模块的名字组成的数组
for (const key of files.keys()) {
  map[key] = files(key);
}
// 将文件中的每一个对象都遍历出来
files.keys().map((key) => {
  if (key === \"./index.js\") {
    return;
  }
  configArr = configArr.concat(map[key].default);
});
console.log(configArr);
// 拦截需要mock的接口
configArr.forEach((item) => {
  const { url, type, response } = item;
  Mock.mock(new RegExp(url), type || \"get\", response);
});
  • 创建其他子文件，用于储存处mock数据
  • 比如说创建share.js
/* eslint-disable prettier/prettier */
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
export default [
  {
    // 拦截的api接口地址
    url: \"/api/share/getShareList\",
    //接口类型
    type: \"get\",
    // 返回数据
    response: (config) => {
      return {
        status: 200,
        data: {
          list:shareList,
          pages:1,
        }
      };
    }
  }
];
const shareList = [
  {
    share_title: \"MD调色盘\",
    share_desc: \"可以帮你生成遵循MDUI规范的调色盘网站，我想不出色彩搭配时都会来这里自动生成，搭配色彩\",
    share_label: \"#网站\",
    share_url: \"https://www.materialpalette.com/\",
    share_id: \"1\",
    share_time: \"2021/09/16\",
    share_like:0,
    imgUrl:'https://www.materialpalette.com/favicon.ico'
  }
];
  • 如上创建完毕后即将mock集成到了项目中并对其进行了模块化管理
  • 将来需要拓展时只需要新建类似share.js文件并配置响应接口以及数据信息即可

Github登录