Comment s'inscrire, se connecter et accéder à la page dans nodejs

Node.js implémente l'enregistrement, la connexion et le saut de page

Node.js est un environnement d'exécution JavaScript basé sur le moteur Chrome V8. Il peut s'exécuter côté serveur et peut être utilisé pour implémenter facilement certaines fonctions courantes côté serveur, telles que la création de serveurs HTTP, la mise en œuvre de la communication en temps réel Socket.IO, etc. Dans cet article, nous utiliserons Node.js comme base, utiliserons le framework Express et la base de données MongoDB pour implémenter une fonction simple d'enregistrement, de connexion et de saut de page.

1. Installer Node.js

Tout d'abord, nous devons installer Node.js localement. Vous pouvez télécharger le fichier Node.js correspondant au système d'exploitation actuel via le site officiel (https://nodejs.org) puis l'installer.

2. Créer un projet

Ensuite, nous devons créer un projet localement. Vous pouvez saisir la commande suivante dans la ligne de commande :

mkdir node-login
cd node-login

3. Initialiser le projet

Exécutez la commande suivante pour initialiser le projet :

npm init

Entrez le nom du projet , le numéro de version, la description et d'autres informations, puis créez un fichier package.json.

4. Installer les dépendances

Ensuite, nous devons installer des dépendances telles que Express, Mongoose et Body-parser. Vous pouvez saisir les instructions suivantes sur la ligne de commande :

npm install express mongoose body-parser --save

Le paramètre --save signifie enregistrer ces dépendances dans le fichier package.json.

5. Configuration de la base de données

Dans cet exemple, nous utilisons MongoDB comme base de données. Vous pouvez télécharger et installer MongoDB à partir du site officiel de MongoDB (https://www.mongodb.com/). Créez ensuite une base de données et un utilisateur auquel vous connecter.

6. Créer un serveur

Ensuite, nous devons créer un fichier serveur. Vous pouvez créer un fichier nommé server.js dans le répertoire racine du projet. Dans ce fichier, nous devons charger les dépendances, nous connecter à la base de données et créer un serveur HTTP pour écouter les requêtes.

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const app = express();

app.use (bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

mongoose.connect('mongodb://your-mongodb-url', { useNewUrlParser: true, useUnifiedTopology: true }, (err) => {
if (err) {

console.log(err);

} else {

console.log('Connected to the database');

}
});

app.get('/', (req, res) => {
res.send('Hello World!');
});

const port = process.env.PORT || 3000;

app.listen(port, () => {
console.log(Server running on port ${port}) ;
});

Nous utilisons Mongoose pour nous connecter à la base de données MongoDB et générer des journaux sur les erreurs. Ensuite, nous créons une route simple pour tester si le serveur fonctionne correctement.

7. Créer un modèle de données utilisateur

Ensuite, nous devons créer un modèle de données utilisateur. Créez un fichier nommé user.js dans le répertoire racine du projet. Dans ce fichier, nous définissons un modèle de données appelé Utilisateur, qui comprend des champs tels que le nom d'utilisateur, l'e-mail et le mot de passe.

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const UserSchema = new Schema({
nom d'utilisateur : {

type: String,
required: true,
unique: true

},
email : {

type: String,
required: true,
unique: true

},
mot de passe : {

type: String,
required: true

}
});

const User = mongoose.model('User', UserSchema);

module.exports = User;

8. Créer des itinéraires d'inscription et de connexion

Ensuite, nous devons créer Routage d’inscription et de connexion. Ajoutez la route suivante dans server.js :

const User = require('./user');

// Register
app.post('/register', (req, res) => {
const user = nouvel utilisateur ({

username: req.body.username,
email: req.body.email,
password: req.body.password

});
user.save((err) => {

if (err) {
  console.log(err);
  res.status(500).send('Error registering new user please try again.');
} else {
  res.redirect('/login');
}

});
});

// Login
app.post('/login', (req , res) => {
const email = req.body.email;
const password = req.body.password;
User.findOne({ email: email }, (err, user) => {

if (err) {
  console.log(err);
  res.status(500).send('Error on the server.');
} else {
  if (!user) {
    res.status(404).send('User not found.');
  } else {
    user.comparePassword(password, (err, isMatch) => {
      if (isMatch && !err) {
        res.redirect('/dashboard');
      } else {
        res.status(401).send('Password is incorrect.');
      }
    });
  }
}

});
});

Ces itinéraires gèrent les demandes et créent et authentifient les utilisateurs lorsqu'ils s'inscrivent et se connectent, puis accèdent à la page appropriée.

9. Création de vues et de modèles

Enfin, nous devons créer des vues et des modèles. Vous pouvez créer un dossier appelé vues dans le répertoire racine du projet et créer les fichiers suivants dans ce dossier :

• register.ejs : modèle d'enregistrement
• login.ejs : modèle de connexion
• dashboard.ejs : modèles de tableau de bord

In Avec ces modèles, nous utilisons HTML, CSS et JavaScript pour créer des pages belles et faciles à utiliser.

10. Exécutez le projet

Maintenant, nous pouvons utiliser la commande suivante pour démarrer le projet :

node server.js

Visitez http://localhost:3000 dans le navigateur pour afficher la page Web. Entrez les informations d'inscription et connectez-vous pour accéder à la page du tableau de bord.

Résumé

Dans cet article, nous utilisons Node.js, le framework Express et la base de données MongoDB pour créer une application simple de connexion et de page de renvoi. À l'aide de Node.js et des technologies associées, vous pouvez créer facilement et rapidement des applications qui implémentent certaines fonctions côté serveur, améliorant ainsi considérablement l'efficacité du développement et du déploiement.

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!