0 vite配置proxy代理

vite.config.ts代碼如下圖所示：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";// https://vite.dev/config/
export default defineConfig({plugins: [react()],server: {proxy: {"/api": {target: "http://localhost:3001",changeOrigin: true,},},},
});

1 搭建mock服務

1.1 mock作用

• 工作中，經常前后端并行開發
• 前后端商議好API格式，雙方各自開發，前端使用mock服務模擬
• 前后端開發完，在對接聯調

1.2 技術選型

• 使用mockjs，直接使用
• 使用nodejs服務+ mockjs
• 使用在線mock平臺

1.3 mockjs

使用：

• 前端代碼引入mockjs
• 定義要模擬的路由、返回結果
• mockjs劫持ajax請求，得到模擬的結果

演示：

_mock/index.ts如下所示：

import Mock from "mockjs";Mock.mock("/api/test", "get", () => {return {errno: 0,data: {name: `張三 ${Date.now()}`,},};
});

Home.tsx中演示，如下：

...
useEffect(() => {// fetch("/api/test")//   .then((res) => res.json())//   .then((data) => console.log("fetch data: ", data));// mockjs 只能攔截XMLHttpRequest，不能攔截fetch請求// mockjs 內部使用XMLHttpRequest API axios.get("/api/test").then((res) => console.log("axios data ", res));}, []);...

效果如下圖所示：

使用總結

• 只能攔截XMLHttpRequest，不能攔截fetch請求，有局限
• 要在生產環境注釋掉，否則線上請求也被劫持
• 結論：不建議在項目中直接使用mockjs

1.4 nodejs+mockjs

nodejs做服務端情況下使用mockjs

• mockjs兩大功能：劫持ajax+ 全面的Random能力
• 把mockjs用戶nodejs服務端，使用Random能力

1.4.1 mock模擬請求

第一步：初始化項目questionnaire-mock

npm init -y

第二步：安裝不要依賴

npm add mockjs --save

第三步：創建兩個mockjs文件，test.js和question.js

const Mock = require('mockjs')const Random = Mock.Randommodule.exports = [{url: '/api/test',method: 'get',response() {return {errno: 0,data: {name: Random.cname()}}}}
]

const Mock = require('mockjs')const Random = Mock.Randommodule.exports = [{url: '/api/question/:id',method: 'get',response() {return {errno: 0,data: {id: Random.id(),title: Random.ctitle()}}}}
]

1.4.2 koa框架開發web服務

第一步：安裝依賴

npm install koa koa-router --save

第二步：koa配置使用路由

const Koa = require('koa')
const Router = require('koa-router')const mockList = require('./mock/index')const app = new Koa()
const router = new Router()// 注冊mock路由
mockList.forEach(item => {const {url, method, response} = itemrouter[method](url, async ctx => {const res = response()ctx.body = res})
})app.use(router.routes())
// 應用監聽3001端口
app.listen(3001)

第四步：配置啟動腳本，啟動服務

{"name": "questionnaire-mock","version": "1.0.0","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "nodemon index.js"},"keywords": [],"author": "","license": "ISC","description": "","dependencies": {"koa": "^2.16.1","koa-router": "^13.0.1","mockjs": "^1.1.0"},"devDependencies": {"nodemon": "^3.1.9"}
}

npm run dev

啟動成功，如下圖所示：

1.4.3 測試api請求

測試兩個接口，如下圖所示：

為了更真實模擬網絡請求，我給異步請求接口添加請求時間（網絡延遲）,代碼如下所示：

const Koa = require('koa')
const Router = require('koa-router')const mockList = require('./mock/index')const app = new Koa()
const router = new Router()async function getRes(fn) {return new Promise(resolve => {setTimeout(() => {const res = fn()resolve(res)}, 1000);})
}// 注冊mock路由
mockList.forEach(item => {const {url, method, response} = itemrouter[method](url, async ctx => {const res = await getRes(response)ctx.body = res})
})app.use(router.routes())
// 應用監聽3001端口
app.listen(3001)

1.4.4 模擬post請求，使用postman測試

question.js新增post接口，代碼如下所示：

const Mock = require('mockjs')const Random = Mock.Randommodule.exports = [{url: '/api/question/:id',method: 'get',response() {return {errno: 0,data: {id: Random.id(),title: Random.ctitle()}}}},{url: '/api/question',method: 'post',response() {return {errno: 0,data: {id: Random.id()}}}},
]

postman測試改接口，如下圖所示：

1.4.5 測試nodejs服務器api

啟動questionnaire，查看Home.tsx接口請求：

import { FC, useEffect } from "react";
// import { FC } from "react";
import { useNavigate } from "react-router-dom";
import { Button, Typography } from "antd";
import axios from "axios";
import { MANAGE_INDEX_PATHNAME } from "../router";
import styles from "./Home.module.scss";// import "../_mock/index.ts";const { Title, Paragraph } = Typography;const Home: FC = () => {const nav = useNavigate();useEffect(() => {fetch("/api/test").then((res) => res.json()).then((data) => console.log("fetch data: ", data));// mockjs 只能攔截XMLHttpRequest，不能攔截fetch請求// mockjs 內部使用XMLHttpRequest API // axios.get("/api/test").then((res) => console.log("axios data ", res));}, []);// function clickHandler() {//   nav({//     pathname: LOGIN_PATHNAME,//     search: "a=20",//   });// }return (<div className={styles.container}><div className={styles.info}><Title>調查問卷 | 在線投票</Title><Paragraph>已累計創建問卷 100 份，發布問卷 90 份，收到問卷 980 份</Paragraph><Button type="primary" onClick={() => nav(MANAGE_INDEX_PATHNAME)}>開始使用</Button></div></div>);
};export default Home;

fetch接口如下圖所示：

axios接口如下圖所示：

1.5 mock平臺

在線mock平臺

• Fast-mock Y-API Swagger
• 可能不穩定、不維護，或者網戀不穩定
• 可能存在敏感數據泄漏的風險

優點不耗費資源，成本低。生產強烈不建議使用在線mock平臺，除非是個人測試無所謂。

1.6 小結

• 直接在前端使用mockjs，不推薦
• 使用nodejs+mockjs，推薦
• 使用在線mock平臺，不推薦

結語

?QQ:806797785

??倉庫地址：https://gitee.com/gaogzhen

??倉庫地址：https://github.com/gaogzhen

[1]mock文檔[CP/OL].

[2]koa官網[CP/OL].