saut de page de connexion nodejs saut de page-Questions et réponses frontales-php.cn

saut de page de connexion nodejs saut de page

王林

Libérer： 2023-05-25 12:38:41

original

517 Les gens l'ont consulté

Dans le développement Web, la connexion des utilisateurs est un lien très critique. Dans Node.js, nous pouvons utiliser certains frameworks et bibliothèques pour accéder à la page de connexion. Cet article explique comment utiliser Express.js pour accéder à la page de connexion.

Installer Express.js

Tout d'abord, nous devons installer Express.js, entrez la commande suivante via la ligne de commande :

npm install express --save

Copier après la connexion

Cette commande installera Express.js dans notre projet et l'enregistrera dans le fichier json. .

Créer une page de connexion

Créez un nouveau fichier ejs dans le répertoire du projet et nommez-le login.ejs. Ce fichier servira de page de connexion. Dans login.ejs, nous pouvons ajouter quelques éléments de formulaire HTML comme indiqué ci-dessous :

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

Copier après la connexion

Dans le code ci-dessus, nous avons créé une page HTML de base et un formulaire contenant le nom d'utilisateur et le mot de passe. Lorsque l'utilisateur soumet le formulaire, la route "/login" sera déclenchée, qui traitera la demande soumise par l'utilisateur.

Création d'une application Express

Ensuite, nous devons créer une application Express. Créez un nouveau fichier dans le répertoire du projet, nommé app.js, avec le contenu suivant :

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

Copier après la connexion

Dans le code ci-dessus, nous avons créé une application Express et défini le chemin d'accès au moteur d'affichage et au dossier public. app.get('/') signifie que lorsque l'utilisateur accède au chemin racine, la page login.ejs sera rendue. app.post('/login') signifie que lorsque l'utilisateur soumet le formulaire, la demande de connexion sera traitée.

Gérer la demande de connexion

Maintenant, nous devons écrire le code qui gère la demande de connexion. Dans la route app.post('/login'), nous pouvons obtenir le nom d'utilisateur et le mot de passe soumis par l'utilisateur :

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

Copier après la connexion

Ensuite, nous pouvons effectuer un traitement basé sur le nom d'utilisateur et le mot de passe. Si la vérification réussit, nous pouvons rediriger vers d'autres pages :

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

Copier après la connexion

Dans le code ci-dessus, si la vérification du nom d'utilisateur et du mot de passe réussit, elle sera redirigée vers la page du tableau de bord, sinon la page de connexion sera restituée et une erreur Un message s'affichera. Si vous souhaitez rediriger vers d'autres pages, vous pouvez utiliser des instructions telles que res.redirect('/') ou res.redirect('/dashboard').

Créer la page du tableau de bord

Enfin, nous devons créer un nouveau fichier ejs, nommé Dashboard.ejs, et le restituer à l'interface utilisateur. Vous pouvez ajouter des éléments HTML à la page Dashboard.ejs, comme indiqué ci-dessous :

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

Copier après la connexion

Maintenant, nous avons terminé une fonction de saut de page de connexion Node.js. Lorsque l'utilisateur se connecte avec succès, il sera redirigé vers la page du tableau de bord.

Résumé

Cet article explique comment utiliser Express.js pour implémenter la fonction de saut de page de connexion Node.js. Nous avons créé une page de connexion de base et une route qui gère les demandes de connexion. Lorsque l'utilisateur se connecte avec succès, il sera redirigé vers la page du tableau de bord. L'utilisation de Node.js et Express.js pour le développement Web peut nous aider à créer rapidement des applications Web efficaces et également à offrir une expérience utilisateur agréable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!