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

《Ant Design Pro 从零到一（Mock 使用）》文档总结： 1. **Mock 的基本概念与作用** Mock 是用于模拟后端数据，帮助前端在后端未完成功能的情况下进行开发。它通过虚拟数据模拟后端接口，适用于前后端分离的开发模式。 2. **Mock 的实现方式** - 在 Ant Design Pro 中，可以通过编写 Mock 文件来定义接口和返回数据。 - 示例：定义一个 `GET /api/testList` 接口，返回模拟数据。 ```javascript 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` 方法发送请求。 ```javascript import { request } from 'umi'; export async function getList() { return request('/api/testList'); } ``` 4. **前端页面使用 Mock 数据** - 在页面组件中，通过 ProTable 的 `request` 属性调用 Service 中的接口方法，获取 Mock 数据并展示。 ```javascript 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 ( ); }; export default TestList; ``` 5. **完整流程** - **Mock 文件**：定义接口和返回数据。 - **Service 文件**：定义接口请求逻辑，调用 Mock 接口。 - **页面组件**：通过 ProTable 或其他组件，调用 Service 方法获取数据并展示。 通过这种方式，前端开发者可以在后端接口未完成时，基于 Mock 数据进行开发和测试，提升开发效率。