Heim > Artikel > Web-Frontend > NodeJS-Anmeldeseite, Sprungseite, Sprungseite

NodeJS-Anmeldeseite, Sprungseite, Sprungseite

王林Original: 2023-05-25 12:38:41519Durchsuche

In der Webentwicklung ist die Benutzeranmeldung ein sehr wichtiger Link. In Node.js können wir einige Frameworks und Bibliotheken verwenden, um zur Anmeldeseite zu springen. In diesem Artikel wird erläutert, wie Sie mit Express.js zur Anmeldeseite springen.

Express.js installieren

Zuerst müssen wir Express.js installieren und den folgenden Befehl über die Befehlszeile eingeben: #🎜🎜 #

npm install express --save

# 🎜🎜#Dieser Befehl installiert Express.js in unserem Projekt und speichert es in der Datei package.json.

Anmeldeseite erstellen

Erstellen Sie im Projektverzeichnis eine neue EJS-Datei mit dem Namen login.ejs. Diese Datei dient als unsere Anmeldeseite. In login.ejs können wir einige HTML-Formularelemente hinzufügen, wie unten gezeigt:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>
    <h1>欢迎登录</h1>
    <form action="/login" method="post">
        <input type="text" name="username" placeholder="请输入用户名">
        <input type="password" name="password" placeholder="请输入密码">
        <input type="submit" value="登录">
    </form>
</body>
</html>

Im obigen Code haben wir eine einfache HTML-Seite und ein Formular erstellt, das den Benutzernamen und das Passwort enthält. Wenn der Benutzer das Formular absendet, wird die Route „/login“ ausgelöst, die die vom Benutzer übermittelte Anfrage verarbeitet.

Erstellen einer Express-Anwendung

Als nächstes müssen wir eine Express-Anwendung erstellen. Erstellen Sie im Projektverzeichnis eine neue Datei mit dem Namen app.js und folgendem Inhalt:

const express = require('express');
const app = express();

app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public'));

app.get('/', (req, res) => {
    res.render('login');
});

app.post('/login', (req, res) => {
    // 处理用户提交的请求
});

app.listen(3000, () => {
    console.log('程序已启动！');
});

Im obigen Code haben wir eine Express-Anwendung erstellt und die Ansichts-Engine und die öffentlichen Dateien eingerichtet. Der Pfad von der Clip. app.get('/') bedeutet, dass die Seite login.ejs gerendert wird, wenn der Benutzer auf den Stammpfad zugreift. app.post('/login') bedeutet, dass die Anmeldeanforderung verarbeitet wird, wenn der Benutzer das Formular absendet.

Anmeldeanfragen bearbeiten

Jetzt müssen wir den Code schreiben, der Anmeldeanfragen verarbeitet. Auf der Route app.post('/login') können wir den vom Benutzer übermittelten Benutzernamen und das Passwort abrufen:

app.post('/login', (req, res) => {
    const username = req.body.username;
    const password = req.body.password;
    
    // 处理用户名和密码
});

Als nächstes können wir einige Verarbeitungen basierend auf dem Benutzernamen und dem Passwort durchführen. Wenn die Überprüfung erfolgreich ist, können wir zu anderen Seiten weiterleiten:

app.post('/login', (req, res) => {
    const username = req.body.username;
    const password = req.body.password;

    if (username === 'admin' && password === '123456) {
        res.redirect('/dashboard');
    } else {
        res.render('login', {message: '用户名或密码不正确'});
    }
});

Wenn im obigen Code die Überprüfung von Benutzername und Passwort erfolgreich ist, wird zur Dashboard-Seite weitergeleitet, andernfalls zur Anmeldeseite erneut gerendert und es wird eine Fehlermeldung angezeigt. Wenn Sie auf andere Seiten umleiten möchten, können Sie Anweisungen wie res.redirect('/') oder res.redirect('/dashboard') verwenden.

Dashboard-Seite erstellen

Zuletzt müssen wir eine neue EJS-Datei mit dem Namen „dashboard.ejs“ erstellen und sie dem Benutzer auf der Schnittstelle rendern . Sie können der Seite „dashboard.ejs“ einige HTML-Elemente hinzufügen, wie unten gezeigt:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>欢迎访问Dashboard</title>
</head>
<body>
    <h1>欢迎访问Dashboard</h1>
</body>
</html>

Jetzt haben wir eine Sprungfunktion für die Node.js-Anmeldeseite fertiggestellt. Wenn sich der Benutzer erfolgreich anmeldet, wird er zur Dashboard-Seite weitergeleitet.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie Express.js verwenden, um die Node.js-Anmeldeseitensprungfunktion zu implementieren. Wir haben eine einfache Anmeldeseite und eine Route erstellt, die Anmeldeanfragen verarbeitet. Wenn sich der Benutzer erfolgreich anmeldet, wird er zur Dashboard-Seite weitergeleitet. Die Verwendung von Node.js und Express.js für die Webentwicklung kann uns dabei helfen, schnell effiziente Webanwendungen zu erstellen und außerdem ein angenehmes Benutzererlebnis zu bieten.

Das obige ist der detaillierte Inhalt vonNodeJS-Anmeldeseite, Sprungseite, Sprungseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：vue zeigt nach einigen Sekunden eine Eingabeaufforderung anNächster Artikel：vue zeigt nach einigen Sekunden eine Eingabeaufforderung an

In Verbindung stehende Artikel

Mehr sehen