MERN 堆疊系列！-js教程-PHP中文網

The MERN stack series !

貼文 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;

登入後複製