Mock数据
目录
Ant Design Pro Mock 使用指南
一、基础配置
1. 创建 Mock 文件
⚡ 二、高级功能
1. 动态数据生成（Mock.js）
2. 网络延迟模拟
3. 跨域处理
三、联调切换至真实接口
1. 关闭 Mock
2. 代理到真实后端
⚠️ 四、常见问题解决
1. 线上部署 Mock
2. 页面刷新 404
五、最佳实践
六、完整示例
用户管理模块 Mock
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= { success: boolean; data: T; error?: string }; 'GET /api/data': { success: true, data: [...] } as Response ; -
接口文档生成
使用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 ?
;
};总结流程图
通过此流程，前端可独立于后端开发，切换真实接口时只需调整代理配置，业务代码零修改。完整示例参考 Ant Design Pro Mock 文档。