Benutzeranmeldefunktion mit JavaScript und jQuery implementieren

Einführung

In diesem Projekt lernst du, wie du eine Benutzereinlogfunktion mit JavaScript und jQuery implementierst. Dieses Projekt ist dazu gedacht, um dir essentielle Fertigkeiten im Bereich der Front-End-Entwicklung zu vermitteln, insbesondere auf dem Gebiet der Daten-Dynamisierung.

👀 Vorschau

Die erfolgreichen Ergebnisse sehen wie folgt aus:

Die Fehlschlag-Effekte sehen wie folgt aus:

Ergebnis eines fehlgeschlagenen Anmeldeversuchs

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du Benutzerdaten aus einer JSON-Datei mithilfe der AJAX-Funktionalität von jQuery abrufst
Wie du die eingegebenen Benutzernamen und Passwörter gegen die Benutzerdaten validierst
Wie du passende Erfolgs- oder Fehlermeldungen basierend auf dem Anmeldeversuch anzeigst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

jQuery's AJAX-Methoden zum Senden von HTTP-Anfragen und Verarbeiten von Antworten zu verwenden
Die DOM mithilfe von jQuery zu manipulieren, um die Benutzeroberfläche basierend auf dem Anmeldeprozess zu aktualisieren
Benutzereingaben mit der Anmeldefunktion zu integrieren und den Anmeldevorgang zu verarbeiten

Projektstruktur einrichten

In diesem Schritt wirst du die Projekt-Dateien und -Struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne das Projektverzeichnis. Die Verzeichnisstruktur ist wie folgt:

├── bootstrap.min.css ## Bootstrap-Datei
├── index.html ## Benutzereinlogseite
├── jQuery-3.6.0.min.js ## jQuery-Datei
├── userlist.json  ## JSON-Datei
├── login.js   ## JavaScript-Code für die Benutzereinlogung
├── index.html ## Benutzereinlogseite

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Benutzerdaten abrufen

In diesem Schritt wirst du lernen, wie du die ajax-Funktion von jQuery verwendest, um Benutzerdaten aus der Datei userlist.json abzurufen.

Öffne die Datei login.js und finde die Funktion login.
Füge innerhalb der Funktion login folgenden Code hinzu, um eine AJAX-Anfrage an die Datei userlist.json zu senden:

function login(username, password) {
  // TODO
  $.ajax({
    method: "GET",
    url: "userlist.json",
    success: function (data) {
      // Die Benutzerdaten sind jetzt im Parameter 'data' verfügbar
      console.log(data);
    }
  });
}

Dieser Code wird eine GET-Anfrage an die Datei userlist.json senden.

Benutzeranmeldung validieren

In diesem Schritt wirst du lernen, wie du den eingegebenen Benutzernamen und das Passwort mit den Benutzerdaten vergleichst, die aus der AJAX-Anfrage erhalten wurden.

Füge innerhalb der success-Callback-Funktion der AJAX-Anfrage folgenden Code hinzu, um zu überprüfen, ob der eingegebene Benutzername und das Passwort mit einem der Benutzeraufzeichnungen übereinstimmen:

$.ajax({
  method: "GET",
  url: "userlist.json",
  success: function (data) {
    let judge = data.userlist.some((item) => {
      return item.username == username && item.password == password;
    });
    //...
  }
});

Dieser Code verwendet die some-Methode, um zu überprüfen, ob eine der Benutzeraufzeichnungen im Array data.userlist mit dem eingegebenen Benutzernamen und Passwort übereinstimmt.

Füge nach dem Aufruf der some-Methode folgenden Code hinzu, um die passende Erfolg- oder Fehlermeldung anzuzeigen:

$.ajax({
  method: "GET",
  url: "userlist.json",
  success: function (data) {
    //...
    if (judge) {
      $("#tip1").removeClass("fade");
      $("#tip2").addClass("fade");
    } else {
      $("#tip2").removeClass("fade");
      $("#tip1").addClass("fade");
    }
  }
});

Dieser Code verwendet jQuery, um die Sichtbarkeit der Erfolg- und Fehlermeldungselemente auf der Seite zu manipulieren.

Anmeldefunktion integrieren

In diesem letzten Schritt wirst du lernen, wie du die Anmeldefunktion mit den Benutzereingabeelementen auf der Seite integrierst.

Finde innerhalb der $(document).ready()-Funktion den Klickereignishandler für die "Anmelden"-Schaltfläche:

$("#btnsubmit").click(function () {
  // TODO
});

Füge innerhalb des Klickereignishandlers folgenden Code hinzu, um die eingegebenen Benutzernamen- und Passwortwerte zu erhalten und die login-Funktion aufzurufen:

$("#btnsubmit").click(function () {
  // TODO
  let username = $("#exampleInputUsername").val();
  let password = $("#exampleInputPassword").val();
  login(username, password);
});

Dieser Code ruft die Werte ab, die der Benutzer in den Benutzernamen- und Passwort-Eingabefeldern eingegeben hat, und ruft dann die login-Funktion mit diesen Werten auf.

Speichere die Datei login.js und aktualisiere die index.html-Seite in deinem Browser. Versuche, verschiedene Benutzernamen- und Passwortkombinationen einzugeben und auf die "Anmelden"-Schaltfläche zu klicken, um die Erfolg- und Fehlermeldungen zu sehen.

Die erfolgreichen Ergebnisse sehen wie folgt aus: