Tutoriel sur les frameworks Node.js et Express.js

Dans ce tutoriel, nous étudierons le framework Express. Ce framework est conçu pour être un framework d'application web Node.js minimaliste et flexible, offrant un ensemble de fonctionnalités robustes pour la création d'applications web monopages, multipages et hybrides.

Qu’est-ce qu’Express.js ?

Express.js est un framework serveur d'applications web Node.js, spécialement conçu pour la création d'applications web monopages, multipages et hybrides.

Il est devenu le framework serveur standard pour Node.js. Express constitue la partie backend de ce que l'on appelle la pile MEAN.

Express superpose le routage et les intergiciels au protocole HTTP Node.js principal. flux et les API d'événements.

Le MEAN est un logiciel gratuit et open source Javascénario pile logicielle pour la création de sites Web dynamiques et d'applications Web comprenant les composants suivants ;

1) MongoDB — La base de données NoSQL standard

2) Express.js — Le framework par défaut des applications Web

3) AngularJS - Le JavaScript MVC framework utilisé pour les applications Web

4) Node.js — Cadre utilisé pour les applications serveur et réseau évolutives.

Le framework Express.js facilite le développement d'une application qui peut être utilisée pour gérer plusieurs types de requêtes telles que les requêtes GET, PUT, POST et DELETE.

Installation et utilisation d'Express

Express est installé via Node Package Manager. Cela peut être fait en exécutant la ligne suivante dans la ligne de commande

npm installer express

La commande ci-dessus demande au gestionnaire de paquets Node de télécharger l'express requis modules et installez-les en conséquence.

Note de version : npm installe désormais Express 5.2 ; de nombreux projets utilisent encore Express 4. Les deux exécutent les exemples ci-dessous sur un version Node.js prise en charge.

Utilisons notre framework Express nouvellement installé et créons une simple application « Hello World ».

Notre application va créer un simple module serveur qui écoutera sur le port numéro 3000. Dans notre exemple, si une requête est effectuée via le navigateur sur ce numéro de port, l'application serveur enverra une réponse « Hello World » au client.

var express=require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('Hello World!');
});
var server=app.listen(3000,function() {});

Code Explication:

1. Dans notre première ligne de code, nous utilisons la fonction require pour inclure le « module express ».
2. Avant de pouvoir commencer à utiliser le module express, nous devons en faire un objet.
3. Nous créons ici une fonction de rappel. Cette fonction sera appelée chaque fois qu'un utilisateur accédera à la racine de notre application web, à savoir http://localhost:3000. Elle servira à afficher la chaîne de caractères « Hello World » sur la page web.
4. Dans la fonction de rappel, nous renvoyons la chaîne « Hello World » au client. Le paramètre 'res' est utilisé pour renvoyer le contenu à la page Web. Ce paramètre 'res' est fourni par le module 'request' pour permettre de renvoyer du contenu à la page Web.
5. Nous utilisons ensuite la fonction listen pour que notre application serveur écoute les requêtes client sur le port 3000. Vous pouvez spécifier ici n'importe quel port disponible.

Si la commande est exécutée avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

De la sortie,

• Vous pouvez clairement le constater si vous consultez le URL Si vous accédez à localhost sur le port 3000, vous verrez la chaîne « Hello World » affichée sur la page.
• Comme nous avons spécifiquement indiqué dans notre code que le serveur écoute sur le port 3000, nous pouvons visualiser le résultat en accédant à cette adresse. URL.

Que sont les itinéraires ?

Une seule route racine n'est que le point de départ.

Le routage détermine la manière dont une application répond à une requête client adressée à un point de terminaison particulier.

Par exemple, un client peut effectuer une requête HTTP GET, POST, PUT ou DELETE pour diverses opérations. URL comme celles illustrées ci-dessous ;

http://localhost:3000/Books
http://localhost:3000/Students

Dans l'exemple ci-dessus,

• Si une requête GET est effectuée pour la première URL, alors la réponse devrait idéalement être une liste de livres.
• Si la requête GET est effectuée pour la seconde URL, la réponse devrait idéalement être une liste d'étudiants.
• Donc, d'après le URL Lorsqu'une ressource est consultée, une fonctionnalité différente du serveur web est appelée, et la réponse correspondante est envoyée au client. C'est le principe du routage.

Chaque route peut avoir une ou plusieurs fonctions de gestionnaire, qui sont exécutées lorsque la route correspond.

La syntaxe générale d'un itinéraire est indiquée ci-dessous

app.METHOD(PATH, HANDLER)

Où,

1) l'application est une instance du module express

2) METHOD est une méthode de requête HTTP (GET, POST, PUT ou DELETE)

3) PATH est un chemin sur le serveur.

4) HANDLER est la fonction exécutée lorsque l'itinéraire correspond.

⚠️ express 5 Notes: Ces signatures restent inchangées, mais app.del() est devenu app.delete(), res.sendfile() est devenu res.sendFile(), et les caractères génériques doivent désormais avoir des noms tels que /*splat.

Prenons l'exemple de la mise en œuvre de routes dans Express. Notre exemple créera trois routes :

1. Une route /Node qui affichera la chaîne « Tutoriel sur Node » si cette route est accédée
2. Une route /Angular qui affichera la chaîne « Tutoriel sur Angular » si cette route est accédée
3. Une route par défaut / qui affichera la chaîne « Bienvenue à Guru99 tutoriels.

Notre code de base restera le même que les exemples précédents. L'extrait ci-dessous est un module complémentaire permettant de montrer comment le routage est implémenté.

var express = require('express');
var app = express();
app.route('/Node').get(function(req,res)
{
    res.send("Tutorial on Node");
});
app.route('/Angular').get(function(req,res)
{
    res.send("Tutorial on Angular");
});
app.get('/',function(req,res){
    res.send('Welcome to Guru99 Tutorials');
});

Code Explication:

1. Ici, nous définissons un itinéraire si le URL http://localhost:3000/Node is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Node URLCette fonction possède 2 paramètres.
   • Le paramètre principal que nous utiliserons est le paramètre 'res', qui peut être utilisé pour renvoyer des informations au client.
   • Le paramètre 'req' contient des informations sur la requête en cours. Parfois, des paramètres supplémentaires peuvent être envoyés dans le cadre de la demande effectuée, et le paramètre « req » peut donc être utilisé pour trouver les paramètres supplémentaires envoyés.
2. Nous utilisons la fonction d'envoi pour renvoyer la chaîne « Tutoriel sur Node » au client si la route Node est choisie.
3. Ici, nous définissons un itinéraire si le URL http://localhost:3000/Angular is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Angular URL.
4. Nous utilisons la fonction d'envoi pour renvoyer la chaîne « Tutoriel sur Angular » au client si la route Angular est choisie.
5. Il s'agit de la route par défaut empruntée lorsqu'on accède à la racine de l'application : http://localhost:3000. Lorsque la route par défaut est choisie, le message « Bienvenue sur Guru99 tutoriels seront envoyés au client.

Si la commande est exécutée avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

De la sortie,

• Vous pouvez clairement le constater si vous consultez le URL Si vous accédez à localhost sur le port 3000, vous verrez la chaîne « Bienvenue sur Guru99 tutoriels sont affichés sur la page.
• Parce que dans notre code, nous avons mentionné que notre valeur par défaut URL afficherait ce message.

Ensuite, accédez à /Node.

De la sortie,

• Vous pouvez constater que si le URL L'URL ayant été modifiée en /Node, la route Node correspondante sera sélectionnée et la chaîne « Tutoriel sur Node » s'affichera.

Ensuite, accédez à /Angular.

De la sortie,

• Vous pouvez constater que si le URL L'URL ayant été modifiée en /Angular, la route Node correspondante sera sélectionnée et la chaîne « Tutoriel sur Angular » s'affichera.

Exemple de serveur Web utilisant express.js

L'exemple précédent nous a montré comment déterminer le contenu à afficher en fonction du routage. Ce type de routage est utilisé dans la plupart des applications web modernes. L'autre aspect d'un serveur web concerne l'utilisation de modèles (templates) avec Node.js.

Pour créer rapidement des applications Node.js à la volée, une méthode simple et efficace consiste à utiliser des modèles. De nombreux frameworks permettent de créer des modèles. Nous prendrons ici l'exemple du framework Jade.

Jade s'installe via le gestionnaire de paquets Node.js. Pour ce faire, exécutez la ligne de commande suivante :

npm installer jade

La commande ci-dessus demande au gestionnaire de paquets Node de télécharger les modules Jade requis et de les installer en conséquence.

NOTE: Dans la dernière version de Node, Jade est obsolète. Utilisez plutôt le carlin.

⚠️ Équivalent moderne : installer Carlin Renommez index.jade en index.pug et définissez app.set('view engine','pug'). Le package jade ne reçoit aucune mise à jour ; les étapes ci-dessous restent valides.

Utilisons notre framework Jade nouvellement installé et créons quelques modèles de base.

Étape 1) La première étape consiste à créer un modèle Jade. Créez un fichier nommé index.jade et insérez le code ci-dessous. Assurez-vous de créer le fichier dans le dossier « views ».

1. Nous spécifions ici que le titre de la page sera remplacé par la valeur transmise lorsque ce modèle sera invoqué.
2. Nous précisons également que le texte de la balise d'en-tête sera remplacé par ce qui sera transmis dans le modèle Jade.

Voici le code de l'application qui le génère.

var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function(req,res)
{
res.render('index',
{title:'Guru99',message:'Welcome'})
});
var server=app.listen(3000,function() {});

Code Explication:

1. La première chose à spécifier dans l'application est le « moteur de rendu » qui sera utilisé pour afficher les modèles. Puisque nous allons utiliser Jade pour le rendu de nos modèles, nous le spécifions en conséquence.
2. La fonction de rendu est utilisée pour afficher une page Web. Dans notre exemple, nous rendons le modèle (index.jade) qui a été créé précédemment.
3. Nous transmettons les valeurs de «GuruLes valeurs « 99 » et « Bienvenue » seront respectivement attribuées aux paramètres « title » et « message ». Ces valeurs seront remplacées par les paramètres « title » et « message » déclarés dans le modèle index.jade.

Si la commande est exécutée avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

De la sortie,

• Nous pouvons constater que le titre de la page est défini sur «Guru99” et l’en-tête de la page devient « Bienvenue ».
• Cela est dû au modèle Jade qui est invoqué dans notre application Node.js.

FAQ