帖子 5：使用 React 構(gòu)建前端用戶界面

在第 4 篇文章中，我們使用 Express 和 Node.js 開發(fā)了 RESTful API 來處理用戶數(shù)據(jù)的 CRUD 操作?，F(xiàn)在，是時候使用 React 創(chuàng)建前端 UI，允許用戶通過與后端通信的交互式界面來查看、添加、更新和刪除數(shù)據(jù)。

1.設(shè)置前端項目

首先，讓我們確保您的 MERN 堆棧項目中的前端設(shè)置已準(zhǔn)備就緒。

• 導(dǎo)航到前端文件夾并安裝 Axios 來處理 HTTP 請求：

  cd frontend
  npm install axios

Axios 將允許我們輕松地將請求發(fā)送到我們的 Express API。

2.創(chuàng)建基本的 React 組件

我們將創(chuàng)建用于管理用戶的組件：一個用于列出用戶的主組件和一個用于添加或編輯用戶的表單組件。

組織組件文件夾

在 src 內(nèi)，創(chuàng)建一個包含以下文件的組件文件夾：

• UserList.js - 列出用戶
• UserForm.js - 用于創(chuàng)建和編輯用戶

用戶列表組件

UserList將從后端獲取用戶數(shù)據(jù)并以列表形式顯示。將以下代碼添加到 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 組件處理創(chuàng)建和更新用戶。

// 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.將它們?nèi)糠旁趹?yīng)用程序組件中

在App.js中，我們將結(jié)合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.測試應(yīng)用程序

要使用后端 API 測試前端 UI，請確保后端和前端服務(wù)器都在運行：

• 在后端文件夾中，啟動服務(wù)器：

  npm start

• 在前端文件夾中，啟動 React 應(yīng)用程序：

  npm start

訪問 http://localhost:3000 與應(yīng)用程序交互。您應(yīng)該能夠：

• 添加新用戶：在表單中輸入詳細(xì)信息，然后單擊“添加用戶”。
• 編輯用戶：單擊用戶名旁邊的“編輯”以將其數(shù)據(jù)加載到表單中。
• 刪除用戶：點擊“刪除”可將用戶從列表中刪除。

后續(xù)步驟

在第 6 篇文章中，我們將專注于通過添加樣式和處理表單驗證來完善 UI 并改善用戶體驗。更多精彩敬請期待！

以上是MERN 堆棧系列！的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！