Praxis der Implementierung der Benutzeranmeldung durch Front-End- und Back-End-Interaktion von Node.js

Praxis der Implementierung der Benutzeranmeldung durch Front-End- und Back-End-Interaktion von Node.js

Ich habe mir vor Kurzem einige Kenntnisse über das Backend von Node.js angeeignet, sodass ich als jemand, der sich mit dem Frontend beschäftigt, allmählich das Backend verstehe. Lassen Sie mich ohne weitere Umschweife mit der Einführung beginnen. Wenn Sie diesen Blog besser verstehen möchten, benötigen Sie zunächst die Grundlagen von HTML, CSS, JavaScript und Node.js sowie ein wenig Wissen über SQL-Datenbanken. Als nächstes starten wir mit diesem kleinen Projekt.

1. Projektanforderungen

Der Benutzer muss die Anmeldeoberfläche aufrufen und Benutzernamen und Kennwort eingeben. Das Backend erhält die vom Benutzer eingegebenen Formularinformationen und durchsucht die Datenbank. Wenn diese korrekt sind, wird zur Seite „Erfolgreiche Anmeldung“ gesprungen.

PS: Die Kommentare sind recht ausführlich. Wenn du etwas nicht verstehst, lies bitte die Kommentare. Natürlich können Sie gerne eine Nachricht hinterlassen und Fragen stellen, eine schnelle Lösung des Problems ist dies jedoch nicht.

Zweitens: Beginnen Sie mit dem Codieren

1. Erstellen Sie die Frontend-Seite (CSS-Style wird hier weggelassen)

<Formularmethode="posten" Aktion="http://localhost:8080/">
                <input type="text" required="erforderlich" id="use_name" placeholder="Bitte geben Sie Ihren Benutzernamen ein" name="user_name">
                <input type="password" required="erforderlich" id="pwd" placeholder="Bitte geben Sie Ihr Passwort ein" name="user_pwd">
            <button type="submit" class="but">Anmelden</button>
</form>

Erstellen Sie ein Formular, verwenden Sie die Methode zur Postübermittlung und übermitteln Sie die Adresse an Ihren eigenen Host, da ich eine lokale Testumgebung verwende.

Seite „Anmeldung erfolgreich“ success.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Seite „Anmeldung erfolgreich“</title>
    <Stil>
        /*Erfolgsseitenstil*/
        .Erfolg {
            Textausrichtung: zentriert;
            Farbe: #3e8e41;
        }
    </Stil>
</Kopf>
<Text>
<h1 class="success">Herzlichen Glückwunsch! Erfolgreich angemeldet! </h1>
<img src="img/keyboard_coffee.jpg">
</body>
</html>

2. Das Node.js-Backend erhält Benutzereingabedaten

(1) Importieren Sie das Modul. Auf Ihrem Computer muss Node.js installiert sein. Installationsanweisungen finden Sie bei Baidu.

// HTTP-Modul importieren const http = require('http');
//Das Modul zur Verarbeitung von Anforderungsparametern einführen const queryString = require('querystring');
const fs = erfordern('fs');
//Drittanbieter-MIME-Modul einführen const mime = require('mime');
const path = require("Pfad");

(2) Erhebung von Benutzereingabedaten

//Erstellen Sie ein Server-Website-Serverobjekt let sever = http.createServer();
//Binde Anforderungsereignisse an Serverobjekte und löse sever.on('request', function (request, response) { aus.
    /* POST-Parameter werden über Ereignisse empfangen. * Daten sind ein Ereignis, das ausgelöst wird, wenn Anforderungsparameter übergeben werden. * Ende ist ein Ereignis, das ausgelöst wird, wenn die Parameterübergabe abgeschlossen ist. */
    let postParams = ''; //Definiere einen leeren String zum Empfangen von Post-Parametern //Binde Daten, um das Ereignis request.on('data', function (params) { auszulösen.
        postParams = postParams + params; // Post-Parameter verketten });
//Daten an Auslöseereignis binden request.on('end', function () {
        // Verarbeiten Sie den PostParams-String mit der Methode parse() im Querystring-Modul zu einem Objekt // console.log(queryString.parse(postParams));
        //Spezifische Werte abrufen, z. B. Benutzernamen. Hinweis: Der Benutzername muss hier mit name="user_name" im Front-End-HTML-Code übereinstimmen.
        let Benutzername = queryString.parse(postParams).user_name;
        let userpwd = queryString.parse(postParams).user_pwd;
}

Bisher haben wir die vom Benutzer eingegebenen Daten abgerufen und in den von uns definierten Variablen „Benutzername“ und „Benutzerpwd“ gespeichert. Diese werden für den Vergleich mit dem Benutzernamen und dem Passwort verwendet, die unten aus der Datenbank abgerufen wurden.

(3) Benutzerinformationen aus der SQL-Datenbank abrufen (ich verwende eine MySQL-Datenbank. Die Datenbankverwaltungssoftware, die ich verwende, ist DBeaver, weil sie kostenlos ist, hahaha)

Schauen Sie sich die Datentabellen in der Datenbank an, die ich im Voraus vorbereitet habe. Der Datenbankname ist test (Sie können ihn später in den Konfigurationselementen des Datenbankpakets sehen) und der Datentabellenname ist userinfo

// Datenbankabfrageinstanz. Ich durchsuche die Datenbank anhand des Benutzernamens.
//Rufen Sie das benutzerdefinierte gekapselte Link-Datenbankmodul auf. const connection = require("./mysql.js");
connection.query("select * from userinfo where userName=?", [Benutzername], function (Ergebnis, abgelegt) {
            //Ergebnis sind die von der MySQL-Abfrage zurückgegebenen Rohdaten. Der '? ' ist ein Platzhalter, der verwendet wird, um die SQL-Abfrageanweisung durch den Wert in '[]' zu ersetzen.
            //Verarbeite das von MySQL zurückgegebene JSON-ähnliche Array in JSON-Daten let resultJson = JSON.stringify(result);
            //JSON.parse() wird zum Parsen der JSON-Zeichenfolge verwendet let dataJson = JSON.parse(resultJson);
            //Nach dem Parsen den spezifischen Wert abrufen let name = dataJson[0].userName;
            let pwd = dataJson[0].userPwd;
      //Vergleichen Sie die aus der Datenbank erhaltenen Benutzerinformationen mit den Benutzerformulareingaben. Wenn sie übereinstimmen, springen Sie zur erfolgreichen Seite. findPage() ist eine benutzerdefinierte Seitensprungfunktion, wenn (pwd === userpwd && name === username) {
                console.log("Das Passwort ist korrekt!");
                findPage('/success.html', Antwort);
            } anders {
                console.log("Falsches Passwort!");
                response.end('<h1>Falsches Passwort!</h1>')
            }
        });
/**
 * Funktion zum Zugriff auf lokale statische Ressourcen */
Funktion Seitefinden(URL, Res) {
    // static ist der absolute Pfad der verketteten statischen Ressource const static = path.join(__dirname, url);
    //Lokale Dateien asynchron lesen //Dateityp abrufen, Methode getType() des MIME-Moduls verwenden let fileType = mime.getType(static) //Dateityp abrufen, Methode getType() des MIME-Moduls verwenden //Datei lesen fs.readFile(static, function (err, result) {
        wenn (!err) {
            res.end(Ergebnis);
        }
        
    });
}

(4) Kapselung von Datenbankmodulen

Denn wenn Sie für Vorgänge wie Datenbankverknüpfungen bei jeder Verwendung eine Menge Code schreiben, erscheint dieser redundant. Deshalb verweise ich auf die Codes anderer Blogger, um die Datenbankverknüpfungsvorgänge in zwei Dateien zu kapseln.

Datenbankkonfigurations-Kapselungsdatei mysql.config.js

//Konfigurieren Sie die Parameter der Linkdatenbank module.exports = {
    Host: "localhost",
    Port: 3306, //Portnummer Datenbank: „test“, //Datenbankname Benutzer: „root“, //Datenbankbenutzername Passwort: „123456“ //Datenbankpasswort };

Datenbank-Link-Kapselungsdatei mysql.js

let mysql = require('mysql'); //MySQL-Modul einführen let databaseConfig = require('./mysql.config'); //Daten in Datenbankkonfigurationsmodul einführen //Methode nach außen verfügbar machen module.exports = {
    Abfrage: Funktion (SQL, Parameter, Rückruf) {
        //Sie müssen bei jeder Verwendung eine Verbindung erstellen und die Verbindung schließen, nachdem der Datenvorgang abgeschlossen ist. let connection = mysql.createConnection(databaseConfig);
        Verbindung.Verbinden(Funktion (Fehler) {
            wenn (Fehler) {
                console.log('Datenbankverbindung fehlgeschlagen');
                Fehler machen;
            }
            //Datenoperation starten //Drei Parameter übergeben, der erste Parameter ist die SQL-Anweisung, der zweite Parameter sind die in der SQL-Anweisung benötigten Daten und der dritte Parameter ist die Rückruffunktion connection.query(sql, params, function (err, results, fields) {
                wenn (Fehler) {
                    console.log('Datenvorgang fehlgeschlagen');
                    Fehler machen;
                }
                //Gib die abgefragten Daten an die Rückruffunktion zurück callback && callback(results, fields);
                //Ergebnisse sind das Ergebnis der Datenoperation, Felder sind einige Felder der Datenbankverbindung //Um die Verbindung zur Datenbank zu beenden, müssen Sie die Anweisung abfragen, andernfalls wird die Verbindung direkt beendet, sobald diese Methode aufgerufen wird, und die Datenoperation schlägt fehl connection.end(function (err) {
                    wenn (Fehler) {
                        console.log('Datenbankverbindung konnte nicht geschlossen werden!');
                        Fehler machen;
                    }
                });
            });
        });
    }
};

Die beiden oben genannten Dateien wurden im Datenbankabfragebeispiel const connection = require("./mysql.js"); aufgerufen.

Bisher haben wir die Funktion zur Verwendung von node.js zur Abfrage der MySQL-Datenbank und zur Realisierung der Benutzeranmeldefunktion abgeschlossen. Ich möchte dem Blogger danken, der mir die Kapselung von Datenbankoperationen beigebracht hat. Der Link zu seinem Artikel finden Sie hier.

Dies ist das Ende dieses Artikels über die praktische Implementierung der Benutzeranmeldung durch die Front-End- und Back-End-Interaktion von Node.js. Weitere relevante Inhalte zur Benutzeranmeldung von Node.js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Node.js verwendet Express zur Implementierung von Benutzerregistrierungs- und Anmeldefunktionen (empfohlen)

<<:  Verwenden von JavaScript in HTML

>>:  MySQL-Indexoptimierung: Detaillierte Einführung in die Paging-Erkundung

Artikel empfehlen

MySQL partitioniert vorhandene Tabellen in der Datentabelle

Inhaltsverzeichnis So funktioniert es Betriebsabl...

Eine kurze Diskussion über die Unterschiede zwischen den drei wichtigsten Datenbanken: Mysql, SqlServer und Oracle

MySQL Vorteil: Kleine Größe, hohe Geschwindigkeit...

Analyse des Prozesses zum Veröffentlichen und Bereitstellen von Spring Boot-Anwendungen über Docker

Inhaltsverzeichnis Manuelle Bereitstellung 1. Ers...

Beispiel für die Implementierung eines globalen Wasserzeichens in Vue

Inhaltsverzeichnis 1. Erstellen Sie eine Wasserze...

Zusammenfassung der Ausnahmen bei der MySQL-Datenbankverbindung (sammelwürdig)

Beim Bereitstellen des Projekts auf Centos ist mi...

Verwenden von System.Drawing.Common in Linux/Docker

Vorwort Nachdem das Projekt auf .net Core migrier...

Detaillierte Erklärung des Whereis-Beispiels zum Suchen eines bestimmten Programms in Linux

Linux findet ein bestimmtes Programm, wo ist Der ...

Zusammenfassung gängiger Befehle zum Erstellen von ZooKeeper3.4-Middleware unter CentOS7

1. Herunterladen und entpacken 1. Einführung in Z...

Verwenden von vue3, um den Nebennachrichten-Eingabeaufforderungseffekt des Apple-Systems zu imitieren

Inhaltsverzeichnis Animationsvorschau Andere UI-B...

So legen Sie den Rahmen einer Webseitentabelle fest

<br />Zuvor haben wir gelernt, wie man Zelll...

Beispiel zum schnellen Löschen einer 2T-Tabelle in MySQL in Innodb

Vorwort Dieser Artikel stellt hauptsächlich den r...

Installieren Sie Linux mithilfe einer virtuellen VMware-Maschine (CentOS7-Image).

1. VMware herunterladen und installieren Verknüpf...

Einführung in die Containerfunktion of() in der Linux-Kernel-Programmierung

Vorwort Bei der Linux-Kernel-Programmierung werde...

Detaillierte Erklärung der HTML-Ereignisse „onfocus gain focus“ und „onblur lose focus“

HTML-Onfocus-Ereignisattribute Definition und Ver...

HTML implementiert problemlos abgerundete Rechtecke

Frage: Wie erreiche ich mit Div+CSS und Positioni...