凡科建站公司.wordpress淘宝客模版

凡科建站公司,.wordpress淘宝客模版,故宫网站建设,校园兼职网站开发用例图前言 后端开发忙#xff0c;不给你接口#xff1f; 后端抱怨你在测试过程中#xff0c;频繁的给脏数据#xff1f; 后端修个接口很慢没法测试#xff1f; 有了 mockjs #xff0c;这些问题将迎刃而解。不要 998#xff0c;pnpm i 带回家#xff01; 真这么丝滑不给你接口后端抱怨你在测试过程中频繁的给脏数据后端修个接口很慢没法测试有了 mockjs 这些问题将迎刃而解。不要 998pnpm 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、安装 mockjspnpm i mockjs如果是使用 ts 的同学可能需要额外安装 type 类型包types/mockjs2、新建一个 mock 文件夹在 mock/index.ts 放入基本路径// 各种 mock 的文件视条件而定我这里有俩文件就引入了俩 import ./login/user.js; import ./model/model.js;并且在你的项目入口 ts 中引入 mock/index.tsimport ./mock/index; // 引入 mock 配置3、导出一个 myMock 方法并追加一个 baseUrl 方便直接联动你的 axiosimport { 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并对对应路径进行 mockmyMock(/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_ENVtest vite, mock: cross-env NODE_ENVmock 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