Siri tindanan MERN !

Siaran 5: Membina Antara Muka Pengguna Bahagian Depan dengan React

Dalam Post 4, kami membangunkan API RESTful menggunakan Express dan Node.js untuk mengendalikan operasi CRUD untuk data pengguna. Kini, tiba masanya untuk mencipta UI bahagian hadapan menggunakan React, membenarkan pengguna melihat, menambah, mengemas kini dan memadamkan data melalui antara muka interaktif yang berkomunikasi dengan bahagian belakang kami.

1. Menyediakan Projek Frontend

Mula-mula, mari pastikan persediaan bahagian hadapan sedia dalam projek tindanan MERN anda.

• Navigasi ke folder bahagian hadapan dan pasang Axios untuk mengendalikan permintaan HTTP:

  cd frontend
  npm install axios

Axios akan membolehkan kami menghantar permintaan dengan mudah ke API Ekspres kami.

2. Mencipta Komponen Tindak Balas Asas

Kami akan membuat komponen untuk mengurus pengguna: komponen utama untuk menyenaraikan pengguna dan komponen borang untuk menambah atau mengedit pengguna.

Susun Folder Komponen

Di dalam src, cipta folder komponen dengan fail berikut:

• UserList.js - untuk menyenaraikan pengguna
• UserForm.js - untuk mencipta dan mengedit pengguna

Komponen Senarai Pengguna

Senarai Pengguna akan mengambil data pengguna dari bahagian belakang dan memaparkannya dalam senarai. Tambahkan kod berikut pada 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;

Komponen Borang Pengguna

Komponen UserForm mengendalikan mencipta dan mengemas kini pengguna.

// 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. Menyatukan Semuanya dalam Komponen Apl

Dalam App.js, kami akan menggabungkan UserList dan UserForm untuk memaparkan senarai pengguna dan mengendalikan penambahan/kemas kini pengguna.

// 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. Menguji Aplikasi

Untuk menguji UI hujung hadapan dengan API hujung belakang, pastikan kedua-dua pelayan hujung belakang dan hujung hadapan berjalan:

• Dalam folder bahagian belakang, mulakan pelayan:

  npm start

• Dalam folder bahagian hadapan, mulakan apl React:

  npm start

Lawati http://localhost:3000 untuk berinteraksi dengan aplikasi. Anda sepatutnya boleh:

• Tambah pengguna baharu: Masukkan butiran dalam borang dan klik "Tambah Pengguna."
• Edit pengguna: Klik "Edit" di sebelah nama pengguna untuk memuatkan data mereka dalam borang.
• Padam pengguna: Klik "Padam" untuk mengalih keluar pengguna daripada senarai.

Langkah Seterusnya

Dalam Siaran 6, kami akan menumpukan pada memperhalusi UI dan meningkatkan pengalaman pengguna dengan menambahkan penggayaan dan pengendalian pengesahan borang. Nantikan lebih banyak lagi!

Atas ialah kandungan terperinci Siri tindanan MERN !. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!