貼文 5：使用 React 建立前端使用者介面

在第 4 篇文章中，我們使用 Express 和 Node.js 開發(fā)了 RESTful API 來處理使用者資料的 CRUD 操作?，F(xiàn)在，是時(shí)候使用 React 建立前端 UI，允許使用者透過與後端通訊的互動(dòng)式介面來查看、新增、更新和刪除資料。

1.設(shè)定前端項(xiàng)目

首先，讓我們確保您的 MERN 堆疊專案中的前端設(shè)定已準(zhǔn)備就緒。

• 導(dǎo)航到前端資料夾並安裝 Axios 來處理 HTTP 請(qǐng)求：

  cd frontend
  npm install axios

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

2.建立基本的 React 元件

我們將建立用於管理使用者的元件：一個(gè)用於列出使用者的主元件和一個(gè)用於新增或編輯使用者的表單元件。

組織組件資料夾

在 src 內(nèi)，建立一個(gè)包含下列檔案的元件資料夾：

• 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.將它們?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.測(cè)試應(yīng)用程式

要使用後端 API 測(cè)試前端 UI，請(qǐng)確保後端和前端伺服器都在運(yùn)作：

• 在後端資料夾中，啟動(dòng)伺服器：

  npm start

• 在前端資料夾中，啟動(dòng) React 應(yīng)用程式：

  npm start

造訪 http://localhost:3000 與應(yīng)用程式互動(dòng)。您應(yīng)該能夠：

• 新增使用者：在表單中輸入詳細(xì)信息，然後按一下「新增使用者」。
• 編輯使用者：按一下使用者名稱旁的「編輯」以將其資料載入表單。
• 刪除使用者：點(diǎn)選「刪除」可將使用者從清單中刪除。

後續(xù)步驟

在第 6 篇文章中，我們將專注於透過新增樣式和處理表單驗(yàn)證來完善 UI 並改善使用者體驗(yàn)。更多精彩敬請(qǐng)期待！

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