目录
[📘 Ant Design Pro Mock 使用指南](#📘 Ant Design Pro Mock 使用指南)
[🔧 一、基础配置](#🔧 一、基础配置)
[1. 创建 Mock 文件](#1. 创建 Mock 文件)
[⚡ 二、高级功能](#⚡ 二、高级功能)
[1. 动态数据生成(Mock.js)](#1. 动态数据生成(Mock.js))
[2. 网络延迟模拟](#2. 网络延迟模拟)
[3. 跨域处理](#3. 跨域处理)
[🔄 三、联调切换至真实接口](#🔄 三、联调切换至真实接口)
[1. 关闭 Mock](#1. 关闭 Mock)
[2. 代理到真实后端](#2. 代理到真实后端)
[⚠️ 四、常见问题解决](#⚠️ 四、常见问题解决)
[1. 线上部署 Mock](#1. 线上部署 Mock)
[2. 页面刷新 404](#2. 页面刷新 404)
[💎 五、最佳实践](#💎 五、最佳实践)
[🧪 六、完整示例](#🧪 六、完整示例)
[用户管理模块 Mock](#用户管理模块 Mock)
[Service 层调用](#Service 层调用)
📘 Ant Design Pro Mock 使用指南
基于 Umi 框架实现,支持 TypeScript 类型安全开发,核心流程如下:
🔧 一、基础配置
1. 创建 Mock 文件
-
位置 :项目根目录
/mock
文件夹(支持.ts
后缀) -
模板示例 :
// mock/user.ts import { Request, Response } from 'express'; type User = { id: string; name: string }; // 定义TS类型 export default { // 静态数据 'GET /api/users': { data: [{ id: '1', name: 'Admin' }] } as { data: User[] }, // 类型断言 // 动态处理函数 'POST /api/login': (req: Request, res: Response) => { if (req.body.username === 'admin') { res.send({ success: true }); } else { res.status(401).send({ error: '验证失败' }); } } };
💡 无需手动导入,Umi 自动加载
/mock
目录文件
⚡ 二、高级功能
1. 动态数据生成(Mock.js)
npm install mockjs @types/mockjs --save-dev # 安装依赖
// mock/tags.ts
import mockjs from 'mockjs';
export default {
'GET /api/tags': mockjs.mock({
'list|100': [{
id: '@id', // 随机ID
name: '@cname', // 随机中文名
}]
})
};
2. 网络延迟模拟
// 单接口延迟
'GET /api/data': (_, res) => {
setTimeout(() => res.send({ data: [] }), 2000); // 延迟2秒
}
// 全局延迟(需安装 roadhog-api-doc)
import { delay } from 'roadhog-api-doc';
export default delay({ /* 接口配置 */ }, 1000); // 所有接口延迟1秒
3. 跨域处理
'POST /api/create': (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*'); // 允许跨域
res.send('OK');
}
🔄 三、联调切换至真实接口
1. 关闭 Mock
NO_MOCK=true umi dev # 开发环境禁用[2,4](@ref)
2. 代理到真实后端
// config/proxy.ts
export default {
'/api': {
target: 'http://real-api.com:8080', // 后端地址
changeOrigin: true,
pathRewrite: { '^/api': '' }, // 移除 /api 前缀
},
};
⚠️ 四、常见问题解决
1. 线上部署 Mock
npm install umi-serve -g # 安装独立服务
umi-serve -p 8001 # 启动服务(端口8001)[4](@ref)
通过 Nginx 代理到该服务即可
2. 页面刷新 404
# Nginx 配置
location / {
try_files $uri $uri/ /index.html; # 指向SPA入口[4](@ref)
}
💎 五、最佳实践
-
模块化拆分
-
按业务创建
mock/user.ts
、mock/order.ts
文件,通过mock/index.ts
汇总// mock/index.ts
import user from './user';
import order from './order';
export default { ...user, ...order };
-
-
统一响应格式
type Response<T> = { success: boolean; data: T; error?: string }; 'GET /api/data': { success: true, data: [...] } as Response<DataType>;
-
接口文档生成
使用
roadhog-api-doc
自动生成文档(需配置注释)'GET /api/users': { $desc: "获取用户列表", $params: { page: { desc: '页码' } }, $body: { data: [] }, }
🧪 六、完整示例
用户管理模块 Mock
// mock/user.ts
import { Request, Response } from 'express';
import mockjs from 'mockjs';
type User = { id: string; name: string };
export default {
// 随机生成用户列表
'GET /api/users': mockjs.mock({
'data|10': [{
id: '@id',
name: '@cname',
}]
}) as { data: User[] },
// 删除用户
'DELETE /api/users/:id': (req: Request, res: Response) => {
res.send({ success: true });
}
};
Service 层调用
// src/services/user.ts
import { request } from 'umi';
type User = { id: string; name: string };
export async function getUsers() {
return request<{ data: User[] }>('/api/users'); // 指定返回类型
}
组件中使用
// src/pages/UserList.tsx
import { useRequest } from '@umijs/max';
import { getUsers } from '@/services/user';
export default () => {
const { data, loading } = useRequest(getUsers);
return loading ? <Spin /> : <Table dataSource={data?.data} />;
};
总结流程图

通过此流程,前端可独立于后端开发,切换真实接口时只需调整代理配置,业务代码零修改。完整示例参考 Ant Design Pro Mock 文档。