Die MERN-Stack-Serie!-js-Tutorial-php.cn

Die MERN-Stack-Serie!

Barbara Streisand

Freigeben： 2024-11-15 04:52:02

Original

790 Leute haben es durchsucht

The MERN stack series !

Beitrag 5: Erstellen der Frontend-Benutzeroberfläche mit React

In Beitrag 4 haben wir eine RESTful-API mit Express und Node.js entwickelt, um CRUD-Operationen für Benutzerdaten abzuwickeln. Jetzt ist es an der Zeit, die Frontend-Benutzeroberfläche mit React zu erstellen, damit Benutzer Daten über eine interaktive Schnittstelle anzeigen, hinzufügen, aktualisieren und löschen können, die mit unserem Backend kommuniziert.

1. Einrichten des Frontend-Projekts

Stellen Sie zunächst sicher, dass das Frontend-Setup in Ihrem MERN-Stack-Projekt bereit ist.

Navigieren Sie zum Frontend-Ordner und installieren Sie Axios für die Verarbeitung von HTTP-Anfragen:

  cd frontend
  npm install axios

Nach dem Login kopieren

Axios ermöglicht es uns, problemlos Anfragen an unsere Express-API zu senden.

2. Erstellen grundlegender Reaktionskomponenten

Wir erstellen Komponenten zum Verwalten von Benutzern: eine Hauptkomponente zum Auflisten von Benutzern und eine Formularkomponente zum Hinzufügen oder Bearbeiten von Benutzern.

Komponentenordner organisieren

Erstellen Sie in src einen Komponentenordner mit den folgenden Dateien:

UserList.js – um Benutzer aufzulisten
UserForm.js – zum Erstellen und Bearbeiten von Benutzern

UserList-Komponente

UserList ruft Benutzerdaten vom Backend ab und zeigt sie in einer Liste an. Fügen Sie den folgenden Code zu UserList.js hinzu:

// 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;

Nach dem Login kopieren

UserForm-Komponente

Die UserForm-Komponente übernimmt das Erstellen und Aktualisieren von Benutzern.

// 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;

Nach dem Login kopieren

3. Alles in der App-Komponente zusammenfügen

In App.js kombinieren wir UserList und UserForm, um die Liste der Benutzer anzuzeigen und das Hinzufügen/Aktualisieren von Benutzern zu verwalten.

// 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;

Nach dem Login kopieren

4. Testen der Anwendung

Um die Frontend-Benutzeroberfläche mit der Backend-API zu testen, stellen Sie sicher, dass sowohl der Backend- als auch der Frontend-Server ausgeführt werden:

Starten Sie im Backend-Ordner den Server:

  npm start

Nach dem Login kopieren

Starten Sie im Frontend-Ordner die React-App:

  npm start

Nach dem Login kopieren

Besuchen Sie http://localhost:3000, um mit der Anwendung zu interagieren. Sie sollten in der Lage sein:

Neuen Benutzer hinzufügen: Geben Sie die Details in das Formular ein und klicken Sie auf „Benutzer hinzufügen“.
Benutzer bearbeiten: Klicken Sie neben dem Namen eines Benutzers auf „Bearbeiten“, um dessen Daten in das Formular zu laden.
Benutzer löschen: Klicken Sie auf „Löschen“, um den Benutzer aus der Liste zu entfernen.

Nächste Schritte

In Beitrag 6 konzentrieren wir uns auf die Verfeinerung der Benutzeroberfläche und die Verbesserung der Benutzererfahrung durch das Hinzufügen von Stilen und die Handhabung von Formularvalidierungen. Bleiben Sie dran für mehr!

Das obige ist der detaillierte Inhalt vonDie MERN-Stack-Serie!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!