Ant Design Pro + Hooks + TypeScript 实战指南

引言

对于构建复杂且健壮的 Web 应用程序，Ant Design Pro 是一个理想的选择。Ant Design Pro 集成了大量成熟的功能，可以显著简化开发流程。此外，React Hooks 和 TypeScript 的引入使开发过程更加高效和可维护。

本指南将引导您使用 Ant Design Pro + Hooks + TypeScript 构建一个完整的后台管理系统项目，涵盖登录、首页、产品和用户管理等主要模块。

安装与设置

1. 创建一个新的 React 项目：

npx create-react-app antd-design-pro

2. 安装 Ant Design Pro：

npm install @ant-design/pro-layout

3. 安装 React Hooks：

npm install react-hooks

4. 安装 TypeScript：

npm install typescript

构建登录模块

1. 创建 pages/login/index.tsx 文件，导入必要的库：

import { Button, Form, Input, message } from 'antd';
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

2. 定义一个状态管理函数，处理用户登录：

const onFinish = async (values: any) => {
  // 这里省略了实际的登录逻辑，可以根据具体业务实现
  message.success('登录成功');
  navigate('/');
};

3. 渲染登录表单：

return (
  <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    autoComplete="off"
  >
    <Form.Item
      label="用户名"
      name="username"
      rules={[{ required: true, message: '请输入用户名' }]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="密码"
      name="password"
      rules={[{ required: true, message: '请输入密码' }]}
    >
      <Input.Password />
    </Form.Item>

    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
      <Button type="primary" htmlType="submit">
        登录
      </Button>
    </Form.Item>
  </Form>
);

构建首页模块

1. 创建 pages/home/index.tsx 文件，导入必要的库：

import { Card, Col, Row } from 'antd';

2. 渲染首页内容：

return (
  <Row gutter={16}>
    <Col span={8}>
      <Card title="待办事项" bordered={false}>
        {/* 这里省略了待办事项列表 */}
      </Card>
    </Col>
    <Col span={8}>
      <Card title="最新消息" bordered={false}>
        {/* 这里省略了最新消息列表 */}
      </Card>
    </Col>
    <Col span={8}>
      <Card title="数据统计" bordered={false}>
        {/* 这里省略了数据统计图表 */}
      </Card>
    </Col>
  </Row>
);

构建产品模块

1. 创建 pages/products/index.tsx 文件，导入必要的库：

import { Button, Table, Modal, Form, Input, message } from 'antd';
import { useEffect, useState } from 'react';

2. 定义产品数据状态：

const [products, setProducts] = useState([]);

3. 获取产品列表：

useEffect(() => {
  // 这里省略了获取产品列表的逻辑，可以根据具体业务实现
  setProducts([
    {
      id: 1,
      name: '产品 1',
      price: 100,
    },
    // ...
  ]);
}, []);

4. 渲染产品列表：

return (
  <>
    <Button type="primary" onClick={handleAddProduct}>新增产品</Button>
    <Table
      columns={columns}
      dataSource={products}
      rowKey="id"
    />
    <Modal
      title="新增产品"
      visible={addProductModalVisible}
      onOk={handleAddProductModalOk}
      onCancel={handleAddProductModalCancel}
    >
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={handleAddProductModalFinish}
        autoComplete="off"
      >
        <Form.Item
          label="产品名称"
          name="name"
          rules={[{ required: true, message: '请输入产品名称' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="产品价格"
          name="price"
          rules={[{ required: true, message: '请输入产品价格' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  </>
);

构建用户模块

1. 创建 pages/users/index.tsx 文件，导入必要的库：

import { Button, Table, Modal, Form, Input, message } from 'antd';
import { useEffect, useState } from 'react';

2. 定义用户数据状态：

const [users, setUsers] = useState([]);

3. 获取用户列表：

useEffect(() => {
  // 这里省略了获取用户列表的逻辑，可以根据具体业务实现
  setUsers([
    {
      id: 1,
      name: '用户 1',
      email: 'user1@example.com',
    },
    // ...
  ]);
}, []);

4. 渲染用户列表：

return (
  <>
    <Button type="primary" onClick={handleAddUser}>新增用户</Button>
    <Table
      columns={columns}
      dataSource={users}
      rowKey="id"
    />
    <Modal
      title="新增用户"
      visible={addUserModalVisible}
      onOk={handleAddUserModalOk}
      onCancel={handleAddUserModalCancel}
    >
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={handleAddUserModalFinish}
        autoComplete="off"
      >
        <Form.Item
          label="用户名"
          name="name"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="邮箱地址"
          name="email"
          rules={[{ required: true, message: '请输入邮箱地址' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  </>
);

SEO 优化