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

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

摘要

本文介绍了在Ant Design Pro项目中如何使用Mock来模拟数据。Mock用于在前后端分离开发中，前端可以通过虚拟数据进行开发，避免后端数据的影响。文档展示了Mock的基本格式，并通过一个简单的Demo演示了如何在Service中使用Mock来模拟数据请求。同时，还提到了异步请求的处理方式，并说明了Service组件的基础结构。

AI总结

《Ant Design Pro 从零到一（Mock 使用）》主要介绍了在Ant Design Pro项目中如何使用Mock来模拟数据，以支持前端开发的独立性。以下是总结：

### 核心观点
1. **Mock的作用**
Mock用于模拟后端数据，使前端开发不受后端进度的影响。它通过虚拟数据来支持前端组件的开发和测试。

2. **Mock的基本格式**
Mock数据通常以JavaScript对象的形式定义接口和返回数据。例如：

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

3. **Mock在Service中的应用**
在Ant Design Pro中，Mock数据通常在`services`文件夹中定义。Service文件通过`request`方法发送请求，并调用Mock接口。例如：

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

4. **实际案例**
在组件中使用ProTable时，可以通过Service调用Mock数据。例如：

   import React from 'react';
   import ProTable from '@ant-design/pro-table';
   import { ProColumns } from '@ant-design/pro-table';
   import { getList } from '@/services/test';
   import { PageContainer } from '@ant-design/pro-layout';
   import { Card } from 'antd';

   const TestList: React.FC = () => {
     const columns: ProColumns[] = [
       { title: 'id', dataIndex: 'id' },
       { title: 'name', dataIndex: 'name' },
       { title: 'sort', dataIndex: 'sort' }
     ];
     return (
       
         
            {
               return getList(params);
             }}
           />
         
       
     );
   };

   export default TestList;

5. **异步请求的处理**
在实际开发中，Mock会处理异步请求，通常使用`async/await`来实现。例如：

   import { Request, Response } from 'express';
   const getList = async (req: Request, res: Response) => {
     const result = {
       success: true,
       data: [
         { id: 1, name: 'test01', sort: 1 }
       ]
     };
     return res.json(result);
   };

### 总结
通过Mock，开发者可以在前端独立于后端进行开发和测试。Mock数据的模拟方式简单高效，适用于快速开发和原型设计。在Ant Design Pro中，Mock数据通常在`services`文件夹中定义，并通过Service调用，最终在组件中展示。