Mock数据

目录

[📘 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)
}

---

💎 五、最佳实践

1. ​​模块化拆分​​

   • 按业务创建 mock/user.ts、mock/order.ts 文件，通过 mock/index.ts 汇总

     // mock/index.ts
     import user from './user';
     import order from './order';
     export default { ...user, ...order };

2. ​​统一响应格式​​

   type Response<T> = { success: boolean; data: T; error?: string };
   'GET /api/data': { success: true, data: [...] } as Response<DataType>;

3. ​​接口文档生成​ ​

   使用 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 文档。