Erstellen einer Blogging-App mit React, Teil 2: Benutzeranmeldung

Dieses Tutorial zeigt, dass die Anmeldefunktionalität eines Blogs mithilfe funktionaler React -Komponenten erstellt wird. Aufbauend auf dem vorherigen Anmeldungstutorial konzentriert sich dieser Abschnitt auf das Erstellen des Anmeldeformulars und die Bearbeitung der Benutzerregistrierung.

Erste Schritte

Beginnen Sie mit dem Klonen des Github -Repositorys aus dem ersten Teil des Tutorials:

git clone https://github.com/tutsplus/create-a-blogging-app-using-react

Navigieren Sie zum Projektverzeichnis und installieren Sie Abhängigkeiten:

cd my-blog
npm install

Die Anwendung sollte unter http://localhost:5000 zugänglich sein.

Die serverseitige (node.js/Express-Beispiel)

Der serverseitige Code verwaltet die Einfügung von Benutzerdaten in eine Datenbank. Die Fehlerbehandlung ist entscheidend. In diesem Beispiel wird eine PostgreSQL -Datenbank verwendet (passen Sie nach Bedarf für Ihre ausgewählte Datenbank an):

app.post('/api/posts/userprofiletodb', (req, res, next) => {
    const values = [req.body.email, req.body.pwd]; // Corrected to use req.body
    pool.query(`INSERT INTO users(username, email, pwd, date_created)
                VALUES(, , , NOW())
                ON CONFLICT DO NOTHING`, values,
            (q_err, q_res) => {
              if(q_err) return next(q_err);
              res.json(q_res.rows);
    });
});

Die clientseitige (reagierte)

Verwenden von funktionalen React -Komponenten und useState verwalten wir den Zustand der Komponente.

Erfassungsformwerte

Zustandsvariablen verfolgen Änderungen in den Feldern für Anmeldeformulare:

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

Diese Zustandsvariablen sind an die Formulareingaben gebunden:

<input type="email" value="{email}" onchange="{(e)"> setEmail(e.target.value)} />
<input type="password" value="{password}" onchange="{(e)"> setPassword(e.target.value)} />

Die onChange Handler aktualisieren die Statusvariablen, wenn sich die Eingabewerte ändern. Native Browsereingangsvalidierung (wie das E -Mail -Format -Überprüfungen) wird verwendet.

Anmeldung einsetzt

Die Funktion handleSubmit sendet die Anmeldedaten mit fetch oder einer Bibliothek wie AXIOS an den Server (empfohlen für Sicherheit und Funktionen):

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const response = await axios.post('/api/posts/userprofiletodb', { email, password });
    // Handle successful signup
  } catch (error) {
    // Handle errors
  }
};

Axios wird aufgrund ihrer erweiterten Sicherheitsmerkmale (z. B. Fälschungsschutz) und besserer Fehlerbehandlungsfunktionen gegenüber der Fetch-API bevorzugt.

.

Eine funktionierende Demo

Eine funktionierende Demo ist auf Stackblitz verfügbar (Link im Originaltext).

Schlussfolgerung

Dieses Tutorial umfasste die Implementierung der Benutzeranmeldung, einschließlich Formularhandhabung, clientseitiger Statusverwaltung, serverseitiger Datenpersistenz und Fehlerbehandlung. Der nächste Teil konzentriert sich auf das Hinzufügen und Anzeigen von Blog -Posts.

Das obige ist der detaillierte Inhalt vonErstellen einer Blogging-App mit React, Teil 2: Benutzeranmeldung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!