前言

後端開發忙，不給你接口？

後端抱怨你在測試過程中，頻繁的給髒數據？

後端修個接口很慢沒法測試？

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