搜索
  • 后端：没空，先自己 mock 去！
  • 发布于 1周前
  • 10 热度
    0 评论
  • 科叼
  • 2 粉丝 232 篇博客
  •   

前言

后端开发忙，不给你接口？

后端抱怨你在测试过程中，频繁的给脏数据？

后端修个接口很慢没法测试？

有了 mockjs ，这些问题将迎刃而解。不要 998，pnpm i 带回家！

真这么丝滑？

请看我的使用方式：

当后端接口无法满足要求，且不能及时更改时。例如后端返回 

{
  "err_no": 0,
  "err_msg": "success",
  "data": [
    {
      "comment_id": "7337487924836287242",
      "user_info": {
        "user_name": "陈陈陈_",
      }
    }
  ],
}

但我此时希望增加一个user_type来确定页面的展示。

那我就直接起一个文件：user.js，把刚才的响应 copy 过来，并追加改动 

myMock('/api/v1/user', 'post', () => {
  return {
      "err_no": 0,
      "err_msg": "success",
      "data": [
        {
          "comment_id": "7337487924836287242",
          "user_info": {
            "user_name": "陈陈陈_",
            "user_type": "admin",
          }
        }
      ],
  }
});

如此一来，这个请求就被无缝替换为了我们的 mock，可以随便测试了。


机-会

技术大厂，前端-后端-测试，新一线和一二线城市等地均有机-会，感兴趣可以试试。待遇和稳定性都不错~


如何接入 mockjs

有的同学就要问了，主播主播，你的 mockjs 确实很方便，怎么接入比较好呀。别急，我们一步一步来

1、安装 mockjs 

pnpm i mockjs

如果是使用 ts 的同学，可能需要额外安装 type 类型包：@types/mockjs

2、新建一个 mock 文件夹，在 mock/index.ts 放入基本路径 

// 各种 mock 的文件，视条件而定，我这里有俩文件就引入了俩
import './login/user.js';
import './model/model.js';

并且在你的项目入口 ts 中引入 mock/index.ts 

import './mock/index'; // 引入 mock 配置

3、导出一个 myMock 方法，并追加一个 baseUrl 方便直接联动你的 axios 

import { ENV_TEST } from '@/api/config/interceptor';
import Mock from 'mockjs';

export const myMock = (
  path: string,
  method: 'get' | 'post',
  callback: (options: any) => any
) => {
  Mock.mock(`${ENV_TEST}${path}`, method, callback);
};

如此一来，你就可以在 mock 文件夹下去搞了，比如：

我想新增一个服务模块的各类接口的 mock，那么我就新增一个 service 文件夹，在其下增加一个 index.ts，并对对应路径进行 mock 

myMock('/api/v1/service', 'get', () => {
  return {
    code: 0,
    msg: 'hello service',
    data: null,
  };
});

另外，别忘了在 mock/index.ts 引入文件


不显示在 network 中？

需要说明的是，这样走 mock 是不会触发真正的请求的，相当于 xhr 直接被 mock 拦截了下来并给了你返回值。所以你无法在 network 中看到你的请求。

这是个痛点，目前比较好的解决方案还是起一个单独的服务来 mock。但这样也就意味着，需要另起一个项目来单独做 mock，太不优雅了。

有没有什么办法，既可以走上述简单的mock，又可以在需要的时候起一个服务来查看 network，并且不需要额外维护两套配置呢？

有的兄弟，有的。 

import express from 'express';
import bodyParser from 'body-parser';
import Mock from 'mockjs';
import './login/user.js';
import './model/model.js';
import { ENV_TEST } from './utils/index.js';

const app = express();
const port = 3010;

// 使用中间件处理请求体和CORS
app.use(bodyParser.json());

// 设置CORS头部
app.use(( _ , res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

// 设置Mock路由的函数
const setupMockRoutes = () => {
  const mockApis = Mock._mocked || {};

  // 遍历每个Mock API，并生成对应的路由
  Object.keys(mockApis).forEach((key) => {
    const { rurl, rtype, template } = mockApis[key];
    const route = rurl.replace(ENV_TEST, ''); // 去掉环境前缀

    // 根据请求类型（GET, POST, 等）设置路由
    app[rtype.toLowerCase()](route, (req, res) => {
      const data =
        typeof template === 'function' ? template(req.body || {}) : template;
      res.json(Mock.mock(data)); // 返回模拟数据
    });
  });
};

// 设置Mock API路由
setupMockRoutes();

// 启动服务器
app.listen(port, () => {
  process.env.NODE_ENV = 'mock'; // 设置环境变量
  console.log(`Mock 服务已启动，访问地址: http://localhost:${port}`);
});


直接在 mock 文件夹下追加这个启动文件，当你需要看 network 的时候，将环境切换为 mock 环境即可。本质是利用了Mock._mocked可以拿到所有注册项，并用 express 起了一个后端服务响应这些注册项来实现的。

在拥有了这个能力的基础上，我们就可以调整我们的命令 


"scripts": {
    "dev": "cross-env NODE_ENV=test vite",
    "mock": "cross-env NODE_ENV=mock vite & node ./src/mock/app.js"
  },


顺便贴一下我的 env 配置： 

export const ENV_TEST = 'https://api-ai.com/fuxi';
export const ENV_MOCK = 'http://localhost:3010/';

let baseURL: string = ENV_TEST;

console.log('目前环境为：' + process.env.NODE_ENV);
switch (process.env.NODE_ENV) {
  case 'mock':
    baseURL = ENV_MOCK;
    break;
  case 'test':
    baseURL = ENV_TEST;
    break;
  case 'production':
    break;
  default:
    baseURL = ENV_TEST;
    break;
}

export { baseURL };

这样一来，如果你需要看 network ，就 pnpm mock，如果不需要，就直接 pnpm dev，完全不需要其他心智负担。

三个字：

——转载自：imoo

用户评论
可能感兴趣的话题