Ant Design Pro 从零到一（Mock 使用）

• 语言: 中文（简体）
• 格式: .pdf
• 来源: b3logfile.com

摘要

文档介绍了如何在Ant Design Pro中使用Mock进行数据模拟。Mock用于在前后端分离开发中模拟后端数据，帮助前端开发不受后端进度影响。文档详细展示了Mock的基本格式和使用方法，并结合Express框架实现数据接口模拟。此外，介绍了如何在Service文件夹中使用umi-request进行数据请求，并在前端组件中使用ProTable展示数据。通过代码示例，展示了如何在Ant Design Pro项目中集成Mock数据，包括数据接口的创建、数据请求的发送以及数据在前端的渲染过程。

AI总结

《Ant Design Pro 从零到一（Mock 使用）》文档总结：

1. **Mock 的基本概念与作用**
Mock 是用于模拟后端数据，帮助前端在后端未完成功能的情况下进行开发。它通过虚拟数据模拟后端接口，适用于前后端分离的开发模式。

2. **Mock 的实现方式**
- 在 Ant Design Pro 中，可以通过编写 Mock 文件来定义接口和返回数据。
- 示例：定义一个 `GET /api/testList` 接口，返回模拟数据。

     const getList = async (req: Request, res: Response) => {
       const result = {
         success: true,
         data: [
           { id: 1, name: 'test01', sort: 1 },
           { id: 2, name: 'test02', sort: 2 }
         ]
       };
       return res.json(result);
     };
     export default { 'GET /api/testList': getList };

3. **Service 文件的作用**
Service 文件用于定义接口请求逻辑，调用 Mock 接口获取数据。
- 示例：使用 `umi` 的 `request` 方法发送请求。

     import { request } from 'umi';
     export async function getList() {
       return request('/api/testList');
     }

4. **前端页面使用 Mock 数据**
- 在页面组件中，通过 ProTable 的 `request` 属性调用 Service 中的接口方法，获取 Mock 数据并展示。

     import { ProColumns } from '@ant-design/pro-table';
     import { getList } from '@/services/test';
     
     const columns: ProColumns[] = [
       { title: 'id', dataIndex: 'id' },
       { title: 'name', dataIndex: 'name' },
       { title: 'sort', dataIndex: 'sort' }
     ];
     
     const TestList: React.FC = () => {
       return (
         
           
             
                {
                   let result = await getList();
                   return result;
                 }}
               />
             
           
         
       );
     };
     export default TestList;

5. **完整流程**
- **Mock 文件**：定义接口和返回数据。
- **Service 文件**：定义接口请求逻辑，调用 Mock 接口。
- **页面组件**：通过 ProTable 或其他组件，调用 Service 方法获取数据并展示。

通过这种方式，前端开发者可以在后端接口未完成时，基于 Mock 数据进行开发和测试，提升开发效率。