肇庆市网站建设_网站建设公司_UX设计_seo优化

前言

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

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

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

有了 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