MERN 堆栈系列！

帖子 5：使用 React 构建前端用户界面

在第 4 篇文章中，我们使用 Express 和 Node.js 开发了 RESTful API 来处理用户数据的 CRUD 操作。现在，是时候使用 React 创建前端 UI，允许用户通过与后端通信的交互式界面来查看、添加、更新和删除数据。

1.设置前端项目

首先，让我们确保您的 MERN 堆栈项目中的前端设置已准备就绪。

• 导航到前端文件夹并安装 Axios 来处理 HTTP 请求：

  cd frontend
  npm install axios

Axios 将允许我们轻松地将请求发送到我们的 Express API。

2.创建基本的 React 组件

我们将创建用于管理用户的组件：一个用于列出用户的主组件和一个用于添加或编辑用户的表单组件。

组织组件文件夹

在 src 内，创建一个包含以下文件的组件文件夹：

• UserList.js - 列出用户
• UserForm.js - 用于创建和编辑用户

用户列表组件

UserList将从后端获取用户数据并以列表形式显示。将以下代码添加到 UserList.js：

// src/components/UserList.js
import React, { useState, useEffect } from "react";
import axios from "axios";

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

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await axios.get("/api/users");
        setUsers(response.data);
      } catch (error) {
        console.error("Error fetching users:", error);
      }
    };
    fetchUsers();
  }, []);

  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map(user => (
          <li key={user._id}>
            {user.name} - {user.email}
            <button onClick={() => onEdit(user)}>Edit</button>
            <button onClick={() => onDelete(user._id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

用户表单组件

UserForm 组件处理创建和更新用户。

// src/components/UserForm.js
import React, { useState, useEffect } from "react";
import axios from "axios";

const UserForm = ({ selectedUser, onSave }) => {
  const [formData, setFormData] = useState({ name: "", email: "", password: "" });

  useEffect(() => {
    if (selectedUser) {
      setFormData(selectedUser);
    }
  }, [selectedUser]);

  const handleChange = e => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async e => {
    e.preventDefault();
    try {
      if (selectedUser) {
        await axios.put(`/api/users/${selectedUser._id}`, formData);
      } else {
        await axios.post("/api/users", formData);
      }
      onSave();
      setFormData({ name: "", email: "", password: "" });
    } catch (error) {
      console.error("Error saving user:", error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={formData.name} onChange={handleChange} placeholder="Name" required />
      <input name="email" value={formData.email} onChange={handleChange} placeholder="Email" required />
      <input name="password" value={formData.password} onChange={handleChange} placeholder="Password" required />
      <button type="submit">{selectedUser ? "Update User" : "Add User"}</button>
    </form>
  );
};

export default UserForm;

3.将它们全部放在应用程序组件中

在App.js中，我们将结合UserList和UserForm来显示用户列表并处理添加/更新用户。

// src/App.js
import React, { useState } from "react";
import UserList from "./components/UserList";
import UserForm from "./components/UserForm";
import axios from "axios";

const App = () => {
  const [selectedUser, setSelectedUser] = useState(null);

  const handleEdit = user => setSelectedUser(user);

  const handleDelete = async userId => {
    try {
      await axios.delete(`/api/users/${userId}`);
      window.location.reload();
    } catch (error) {
      console.error("Error deleting user:", error);
    }
  };

  const handleSave = () => {
    setSelectedUser(null);
    window.location.reload();
  };

  return (
    <div>
      <h1>Manage Users</h1>
      <UserForm selectedUser={selectedUser} onSave={handleSave} />
      <UserList onEdit={handleEdit} onDelete={handleDelete} />
    </div>
  );
};

export default App;

4.测试应用程序

要使用后端 API 测试前端 UI，请确保后端和前端服务器都在运行：

• 在后端文件夹中，启动服务器：

  npm start

• 在前端文件夹中，启动 React 应用程序：

  npm start

访问 http://localhost:3000 与应用程序交互。您应该能够：

• 添加新用户：在表单中输入详细信息，然后单击“添加用户”。
• 编辑用户：单击用户名旁边的“编辑”以将其数据加载到表单中。
• 删除用户：点击“删除”可将用户从列表中删除。

后续步骤

在第 6 篇文章中，我们将专注于通过添加样式和处理表单验证来完善 UI 并改善用户体验。更多精彩敬请期待！

以上是MERN 堆栈系列！的详细内容。更多信息请关注PHP中文网其他相关文章！