React入门第二章：让用户管理功能助您了解React工作原理

React入门第二章：从用户管理功能实战入手

前言

React作为目前最受欢迎的前端框架之一，以其声明式编程、组件化设计和高性能等优点，受到了广大开发者的喜爱。如果您想学习React，那么从用户管理功能实战入手是一个很好的选择。

用户管理功能是许多应用程序的常见需求，它涉及到用户注册、登录、列表展示、查询过滤、新增编辑和删除等功能。通过构建用户管理功能，您可以深入理解React的核心概念，例如组件化、状态管理和数据绑定等。

搭建开发环境

在开始构建用户管理功能之前，我们需要先搭建好开发环境。您可以使用create-react-app工具来快速创建一个React项目。

npx create-react-app my-react-app

创建一个项目后，您可以通过以下命令启动开发环境：

npm start

引入必要的库

为了构建用户管理功能，我们需要引入一些必要的库。这些库包括：

• antd：一个UI组件库，可以帮助我们快速构建用户界面。
• react-router-dom：一个路由库，可以帮助我们管理应用程序的路由。
• axios：一个HTTP请求库，可以帮助我们与服务器进行通信。

您可以使用以下命令来安装这些库：

npm install antd react-router-dom axios

设计数据模型

在构建用户管理功能之前，我们需要先设计好数据模型。数据模型将决定我们在React组件中如何存储和处理数据。

对于用户管理功能，我们可以设计以下数据模型：

interface User {
  id: number;
  username: string;
  password: string;
  email: string;
  role: string;
}

创建用户注册组件

用户注册组件是用户管理功能中的第一个组件。它允许用户输入用户名、密码、邮箱和角色等信息，并提交注册请求。

我们可以使用以下代码来创建用户注册组件：

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

const UserRegister = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [email, setEmail] = useState("");
  const [role, setRole] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    const user = {
      username,
      password,
      email,
      role,
    };

    axios.post("/api/users", user).then((res) => {
      console.log(res);
    });
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Item label="用户名">
        <Input value={username} onChange={(e) => setUsername(e.target.value)} />
      </Form.Item>
      <Form.Item label="密码">
        <Input value={password} onChange={(e) => setPassword(e.target.value)} />
      </Form.Item>
      <Form.Item label="邮箱">
        <Input value={email} onChange={(e) => setEmail(e.target.value)} />
      </Form.Item>
      <Form.Item label="角色">
        <Input value={role} onChange={(e) => setRole(e.target.value)} />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          注册
        </Button>
      </Form.Item>
    </Form>
  );
};

export default UserRegister;

创建用户登录组件

用户登录组件是用户管理功能中的第二个组件。它允许用户输入用户名和密码，并提交登录请求。

我们可以使用以下代码来创建用户登录组件：

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

const UserLogin = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    const user = {
      username,
      password,
    };

    axios.post("/api/login", user).then((res) => {
      console.log(res);
    });
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Item label="用户名">
        <Input value={username} onChange={(e) => setUsername(e.target.value)} />
      </Form.Item>
      <Form.Item label="密码">
        <Input value={password} onChange={(e) => setPassword(e.target.value)} />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          登录
        </Button>
      </Form.Item>
    </Form>
  );
};

export default UserLogin;

创建用户列表组件

用户列表组件是用户管理功能中的第三个组件。它展示所有用户的信息，并允许用户进行查询和过滤。

我们可以使用以下代码来创建用户列表组件：

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

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

  useEffect(() => {
    axios.get("/api/users").then((res) => {
      setUsers(res.data);
    });
  }, []);

  const handleSearch = () => {
    axios.get("/api/users", { params: { keyword } }).then((res) => {
      setUsers(res.data);
    });
  };

  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "用户名",
      dataIndex: "username",
      key: "username",
    },
    {
      title: "邮箱",
      dataIndex: "email",
      key: "email",
    },
    {
      title: "角色",
      dataIndex: "role",
      key: "role",
    },
  ];

  return (
    <>
      <Input placeholder="请输入关键词" value={keyword} onChange={(e) => setKeyword(e.target.value)} />
      <Button type="primary" onClick={handleSearch}>
        查询
      </Button>
      <Table columns={columns} dataSource={users} />
    </>
  );
};

export default UserList;

创建用户新增组件

用户新增组件是用户管理功能中的第四个组件。它允许用户添加新的用户。

我们可以使用以下代码来创建用户新增组件：

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

const UserAdd = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [email, setEmail] = useState("");
  const [role, setRole] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    const user = {
      username,
      password,
      email,
      role,
    };

    axios.post("/api/users", user).then((res) => {
      console.log(res);
    });
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Item label="用户名">
        <Input value={username} onChange={(e) => setUsername(e.target.value)} />
      </Form.Item>
      <Form.Item label="密码">
        <Input value={password} onChange={(e) => setPassword(e.target.value)} />
      </Form.Item>
      <Form.Item label="邮箱">
        <Input value={email} onChange={(e) => setEmail(e.target.value)} />
      </Form.Item>
      <Form.Item label="角色">
        <Input value={role} onChange={(e) => setRole(e.target.value)} />