React入门实战：使用Ant Design构建用户管理系统

写在前面

在上节课中，我们实现了简单的表单，如下。今天，我们将学习最常见的表单组件的使用。一步步向更复杂的页面进发。

本次页面核心知识点：（1）搜索表单模块——搜索、重置功能。

搭建用户管理页面

1. 创建项目

首先，我们需要创建一个新的React项目。可以使用create-react-app工具，它可以快速创建一个包含所有必要依赖项的项目。

npx create-react-app my-user-management-app

2. 安装Ant Design

接下来，我们需要安装Ant Design库。Ant Design是一个流行的React UI库，它提供了丰富的组件和样式。

npm install antd

3. 创建基本布局

在src文件夹中，创建一个名为App.js的文件。这个文件将作为应用程序的主组件。在App.js中，我们可以创建基本布局，包括头部、内容和底部。

import React from "react";
import { Layout } from "antd";

const { Header, Content, Footer } = Layout;

const App = () => {
  return (
    <Layout>
      <Header>Header</Header>
      <Content>Content</Content>
      <Footer>Footer</Footer>
    </Layout>
  );
};

export default App;

4. 创建用户列表页面

在src文件夹中，创建一个名为UserList.js的文件。这个文件将作为用户列表页面的组件。在UserList.js中，我们可以使用Ant Design的表格组件来显示用户列表。

import React, { useState, useEffect } from "react";
import { Table, Button } from "antd";

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // 从服务器获取用户列表
    fetch("http://localhost:3000/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "邮箱",
      dataIndex: "email",
      key: "email",
    },
    {
      title: "操作",
      key: "action",
      render: (record) => {
        return (
          <div>
            <Button type="primary" size="small">
              编辑
            </Button>
            <Button type="danger" size="small">
              删除
            </Button>
          </div>
        );
      },
    },
  ];

  return (
    <div>
      <h1>用户列表</h1>
      <Table columns={columns} dataSource={users} />
    </div>
  );
};

export default UserList;

5. 创建添加用户页面

在src文件夹中，创建一个名为AddUser.js的文件。这个文件将作为添加用户页面的组件。在AddUser.js中，我们可以使用Ant Design的表单组件来收集用户的信息。

import React, { useState } from "react";
import { Form, Input, Button } from "antd";

const AddUser = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    // 将用户数据发送到服务器
    fetch("http://localhost:3000/users", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(values),
    })
      .then((res) => res.json())
      .then((data) => {
        // 添加用户成功后，重置表单
        form.resetFields();
      });
  };

  return (
    <div>
      <h1>添加用户</h1>
      <Form
        form={form}
        name="add-user-form"
        onFinish={onFinish}
        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>
          <Button type="primary" htmlType="submit">
            添加
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default AddUser;

6. 创建编辑用户页面

在src文件夹中，创建一个名为EditUser.js的文件。这个文件将作为编辑用户页面的组件。在EditUser.js中，我们可以使用Ant Design的表单组件来收集用户的信息。

import React, { useState, useEffect } from "react";
import { Form, Input, Button } from "antd";

const EditUser = ({ match }) => {
  const [form] = Form.useForm();
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 从服务器获取用户信息
    fetch(`http://localhost:3000/users/${match.params.id}`)
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, [match.params.id]);

  const onFinish = (values) => {
    // 将用户数据发送到服务器
    fetch(`http://localhost:3000/users/${match.params.id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(values),
    })
      .then((res) => res.json())
      .then((data) => {
        // 编辑用户成功后，返回用户列表页面
        window.location.href = "/users";
      });
  };

  return (
    <div>
      <h1>编辑用户</h1>
      {user && (
        <Form
          form={form}
          name="edit-user-form"
          onFinish={onFinish}
          autoComplete="off"
          initialValues={user}
        >
          <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>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
      )}
    </div>
  );
};

export default EditUser;

7. 配置路由

在src文件夹中，创建一个名为App.js的文件。这个文件将作为应用程序的主组件。在App.js中，我们可以配置路由，以便用户可以在不同的页面之间导航。

import React from "react";
import { Layout, Menu, Breadcrumb } from "antd";
import { Link, Route, Switch } from "react-router-dom";
import UserList from "./UserList";
import AddUser from "./AddUser";
import EditUser from "./EditUser";

const { Header, Content, Footer } = Layout;

const App = () => {
  return (
    <Layout>
      <Header>
        <Menu theme="dark" mode="horizontal">
          <Menu.Item key="1">
            <Link to="/">用户列表</Link>
          </Menu.Item>
          <Menu.Item key="2">
            <Link to="/add-user">添加用户</Link>
          </Menu.Item>
        </Menu>
      </Header>
      <Content>
        <Switch>
          <Route exact