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中文網其他相關文章！