Ant Design Pro极速上手教程：30分钟搭建专业级管理系统-优快云博客

Ant Design Pro极速上手教程：30分钟搭建专业级管理系统

【免费下载链接】ant-design-pro 👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro! 项目地址: https://gitcode.com/gh_mirrors/an/ant-design-pro

引言：告别繁琐配置，极速开发企业级应用

你是否还在为搭建企业级管理系统而烦恼？从零开始配置路由、权限、表单、表格等基础组件，不仅耗时耗力，还容易出现各种兼容性问题。现在，有了Ant Design Pro（以下简称AntD Pro），这些问题都将迎刃而解。本教程将带你在30分钟内，从环境搭建到完成一个功能完善的表格管理系统，让你快速掌握AntD Pro的核心用法，轻松应对企业级应用开发需求。

读完本教程，你将能够：

快速搭建AntD Pro开发环境
理解AntD Pro项目结构和核心配置
掌握ProTable组件的高级用法
实现数据的增删改查功能
了解国际化和权限控制的基本实现

一、环境准备：5分钟完成开发环境搭建

1.1 系统要求

在开始之前，请确保你的开发环境满足以下要求：

环境依赖	最低版本要求	推荐版本
Node.js	20.0.0	20.10.0+
npm	9.0.0	10.0.0+
Git	2.0.0	2.40.0+

1.2 快速安装

AntD Pro提供了多种安装方式，这里我们推荐使用Git直接克隆仓库并安装依赖：

# 克隆仓库
git clone https://gitcode.com/gh_mirrors/an/ant-design-pro.git

# 进入项目目录
cd ant-design-pro

# 安装依赖
npm install

注意：如果你的网络环境不佳，可以使用淘宝npm镜像提高安装速度：
npm install --registry=https://registry.npmmirror.com

1.3 启动开发服务器

安装完成后，使用以下命令启动开发服务器：

# 启动开发模式
npm run start:dev

等待编译完成后，你将看到类似以下输出：

✔ Webpack
  Compiled successfully in 12.34s

  App running at:
  - Local:   http://localhost:8000/
  - Network: http://192.168.1.100:8000/

现在，打开浏览器访问 http://localhost:8000，你将看到AntD Pro的欢迎页面，说明环境搭建成功。

二、项目结构解析：理解AntD Pro的工程化设计

AntD Pro采用了基于Umi（企业级React应用框架）的工程化方案，项目结构清晰，便于扩展和维护。下面我们重点解析几个核心目录和文件：

ant-design-pro/
├── config/           # 项目配置目录
├── mock/             # 模拟数据目录
├── public/           # 静态资源目录
├── src/              # 源代码目录
│   ├── components/   # 公共组件
│   ├── layouts/      # 布局组件
│   ├── pages/        # 页面组件
│   ├── services/     # API服务
│   ├── app.tsx       # 应用入口
│   └── ...
├── package.json      # 项目依赖配置
└── ...

2.1 核心配置文件

config/config.ts: 项目的主要配置文件，包括路由、主题、代理等设置。
src/app.tsx: 应用入口文件，包含全局初始化逻辑、布局配置等。
package.json: 项目依赖和脚本配置，定义了项目的各种命令和依赖包。

2.2 页面开发流程

在AntD Pro中开发页面的典型流程如下：

mermaid

三、快速开发：15分钟实现表格管理功能

接下来，我们将以"表格管理"功能为例，展示如何在AntD Pro中快速开发一个完整的CRUD（创建、读取、更新、删除）功能模块。

3.1 理解表格页面结构

AntD Pro提供了ProTable组件，集成了搜索、筛选、分页、排序等常用功能。我们以src/pages/table-list/index.tsx为例，分析其核心结构：

import { ProTable } from '@ant-design/pro-components';
import { useRequest } from '@umijs/max';
import { rule } from '@/services/ant-design-pro/api';

const TableList: React.FC = () => {
  // 定义表格列配置
  const columns = [
    {
      title: '规则名称',
      dataIndex: 'name',
      // 列渲染逻辑
    },
    // 更多列配置...
  ];

  return (
    <ProTable<API.RuleListItem>
      headerTitle="查询表格"
      request={rule} // 数据请求函数
      columns={columns} // 列配置
      rowKey="key" // 行唯一标识
      // 其他配置...
    />
  );
};

export default TableList;

3.2 数据请求与表格绑定

AntD Pro推荐使用useRequest hook处理数据请求，结合ProTable实现数据的自动加载和状态管理：

// API服务定义 (src/services/ant-design-pro/api.ts)
export async function rule(params: API.PageParams) {
  return request<API.RuleListResponse>('/api/rule', {
    params,
  });
}

// 表格页面使用
const { data, loading, run } = useRequest(rule);

<ProTable
  dataSource={data?.data}
  loading={loading}
  // 其他配置...
/>

3.3 实现新增功能

通过Modal和Form组件实现新增功能：

import CreateForm from './components/CreateForm';

// 在工具栏添加新增按钮
<ProTable
  toolBarRender={() => [
    <CreateForm key="create" reload={actionRef.current?.reload} />,
  ]}
/>

// CreateForm组件实现 (src/pages/table-list/components/CreateForm.tsx)
const CreateForm: React.FC<{ reload: () => void }> = ({ reload }) => {
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm();
  
  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      // 调用新增API
      await addRule({ ...values });
      message.success('新增成功');
      setVisible(false);
      reload(); // 重新加载表格数据
    } catch (error) {
      // 处理错误
    }
  };
  
  return (
    <>
      <Button onClick={() => setVisible(true)}>新增</Button>
      <Modal
        visible={visible}
        onCancel={() => setVisible(false)}
        onOk={handleSubmit}
      >
        <Form form={form}>
          {/* 表单字段 */}
        </Form>
      </Modal>
    </>
  );
};

3.4 实现编辑和删除功能

类似地，我们可以实现编辑和删除功能：

// 编辑功能
<ProTable
  columns={[
    // 其他列...
    {
      title: '操作',
      valueType: 'option',
      render: (_, record) => [
        <a onClick={() => handleEdit(record)}>编辑</a>,
        <a onClick={() => handleDelete(record)}>删除</a>,
      ],
    },
  ]}
/>

// 删除功能实现
const { run: delRun } = useRequest(removeRule, {
  manual: true,
  onSuccess: () => {
    message.success('删除成功');
    actionRef.current?.reload();
  },
});

const handleDelete = (record) => {
  delRun({ data: { key: record.key } });
};

3.5 批量操作功能

AntD Pro的ProTable内置了行选择功能，结合FooterToolbar可以轻松实现批量操作：

import { FooterToolbar } from '@ant-design/pro-components';

const [selectedRows, setSelectedRows] = useState([]);

<ProTable
  rowSelection={{
    onChange: (_, rows) => setSelectedRows(rows),
  }}
/>

{selectedRows.length > 0 && (
  <FooterToolbar>
    <Button onClick={() => handleBatchDelete()}>
      批量删除
    </Button>
  </FooterToolbar>
)}

四、高级功能：5分钟集成权限控制和国际化

4.1 权限控制

AntD Pro内置了完善的权限控制方案，通过access.ts配置权限：

// src/access.ts
export default function access(initialState: { currentUser?: API.CurrentUser }) {
  const { currentUser } = initialState || {};
  return {
    canReadTable: currentUser && currentUser.access.includes('readTable'),
    canEditTable: currentUser && currentUser.access.includes('editTable'),
    canDeleteTable: currentUser && currentUser.access.includes('deleteTable'),
  };
}

// 在表格中使用权限控制
<ProTable
  columns={[
    // 其他列...
    {
      title: '操作',
      valueType: 'option',
      render: (_, record) => [
        {
          name: '编辑',
          onClick: () => handleEdit(record),
          access: 'canEditTable', // 关联权限
        },
        {
          name: '删除',
          onClick: () => handleDelete(record),
          access: 'canDeleteTable',
        },
      ],
    },
  ]}
/>

4.2 国际化配置

AntD Pro支持多语言切换，通过locales目录管理翻译文本：

// src/locales/zh-CN/pages.ts
export default {
  'pages.tableList.title': '表格列表',
  'pages.tableList.name': '规则名称',
  'pages.tableList.create': '新增',
  // ...
};

// src/locales/en-US/pages.ts
export default {
  'pages.tableList.title': 'Table List',
  'pages.tableList.name': 'Rule Name',
  'pages.tableList.create': 'Create',
  // ...
};

// 在组件中使用
import { useIntl } from '@umijs/max';

const intl = useIntl();
const title = intl.formatMessage({ id: 'pages.tableList.title' });

五、构建部署：5分钟完成项目打包和发布

5.1 项目打包

使用以下命令打包生产环境代码：

npm run build

打包完成后，会在项目根目录生成dist文件夹，包含所有静态资源。

5.2 本地预览

打包完成后，可以使用以下命令本地预览部署效果：

npm run preview

5.3 部署选项

AntD Pro构建的项目是纯静态资源，可以部署到任何支持静态网站的服务上：

部署方式	特点	适用场景
静态服务器	简单直接，只需部署dist目录	本地演示、内部系统
云存储服务	如阿里云OSS、腾讯云COS，成本低	公开网站、流量适中的应用
容器部署	如Docker + Nginx，可扩展性强	企业级应用、高流量网站

六、总结与进阶学习

通过本教程，你已经掌握了AntD Pro的基本使用方法，能够快速搭建一个功能完善的企业级管理系统。以下是一些进阶学习资源，帮助你深入了解AntD Pro的更多高级特性：

6.1 核心知识点回顾

mermaid

6.2 进阶学习资源

官方文档：Ant Design Pro官方文档
组件库：Ant Design组件库
ProComponents：ProComponents文档
Umi框架：Umi官方文档

6.3 常见问题解决

性能优化：使用React.memo、useMemo优化渲染性能
按需加载：配置路由按需加载减少初始加载时间
主题定制：通过config.ts配置自定义主题
Mock数据：使用mock目录模拟API数据，提高前端开发效率

结语

Ant Design Pro作为一款成熟的企业级前端解决方案，极大地降低了中后台系统的开发门槛。通过本教程的学习，你已经具备了使用AntD Pro快速开发业务系统的能力。随着实践的深入，你将发现更多高级特性，进一步提高开发效率和系统质量。

最后，鼓励你积极参与AntD Pro的开源社区，分享经验，共同进步。祝你在前端开发的道路上越走越远！

【免费下载链接】ant-design-pro 👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro! 项目地址: https://gitcode.com/gh_mirrors/an/ant-design-pro

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考