NodeJS-Anmeldeseite, Sprungseite, Sprungseite-Front-End-Fragen und Antworten-php.cn

NodeJS-Anmeldeseite, Sprungseite, Sprungseite

王林

Freigeben： 2023-05-25 12:38:41

Original

554 Leute haben es durchsucht

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

Nach dem Login kopieren

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

Anmeldeseite erstellen

<!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>

Nach dem Login kopieren

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

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('程序已启动！');
});

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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: '用户名或密码不正确'});
    }
});

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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!