Tutoriel Node.js Express FrameWork – Apprenez en 10 minutes
Dans ce tutoriel, nous étudierons le framework Express. Ce framework est construit de telle manière qu'il agit comme un framework d'application Web Node.js minimal et flexible, fournissant un ensemble robuste de fonctionnalités pour la création d'applications Web monopages, multipages et hybrides.
Qu’est-ce qu’Express.js ?
Express.js est un framework de serveur d'applications Web Node js, spécialement conçu pour créer des applications Web monopage, multipages et hybrides.
Il est devenu le framework de serveur standard pour node.js. Express est la partie backend de quelque chose connu sous le nom de pile MEAN.
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 d’applications Web par défaut
3) Angulaire.js - L' JavaScript MVC framework utilisé pour les applications Web
4) Node.js – Framework utilisé pour les applications côté 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 packages Node de télécharger les modules express requis et de les installer en conséquence.
Utilisons notre framework Express nouvellement installé et créons une simple application « Hello World ».
Notre application va créer un module serveur simple qui écoutera sur le port numéro 3000. Dans notre exemple, si une requête est faite via le navigateur sur ce numéro de port, alors 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() {});
Explication du code :
- Dans notre première ligne de code, nous utilisons la fonction require pour inclure le « module express ».
- Avant de pouvoir commencer à utiliser le module express, nous devons en faire un objet.
- Ici, nous créons une fonction de rappel. Cette fonction sera appelée chaque fois que quelqu'un accède à la racine de notre application Web qui est http://localhost:3000 . La fonction de rappel sera utilisée pour envoyer la chaîne 'Hello World' à la page Web.
- 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.
- Nous utilisons ensuite la fonction d'écoute pour que notre application serveur écoute les demandes des clients sur le port n° 3000. Vous pouvez spécifier n'importe quel port disponible ici.
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 voir que si nous parcourons l'URL de localhost sur le port 3000, vous verrez la chaîne « Hello World » affichée sur la page.
- Parce que dans notre code, nous avons mentionné spécifiquement que le serveur écoute sur le port n° 3000, nous pouvons voir le résultat lors de la navigation vers cette URL.
Que sont les itinéraires ?
Le routage détermine la manière dont une application répond à une demande 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 URL telles que celles indiqué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, la réponse devrait idéalement être une liste de livres.
- Si la requête GET est effectuée pour la deuxième URL, la réponse devrait idéalement être une liste d'étudiants.
- Ainsi, en fonction de l'URL consultée, une fonctionnalité différente sur le serveur Web sera invoquée et, par conséquent, la réponse sera envoyée au client. C'est le concept de 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.
Regardons un exemple de la façon dont nous pouvons implémenter des itinéraires dans l'express. Notre exemple créera 3 itinéraires comme
- Une route /Node qui affichera la chaîne « Tutoriel sur Node » si cette route est accédée
- Une route /Angular qui affichera la chaîne « Tutoriel sur Angular » si cette route est accédée
- Un itinéraire par défaut / qui affichera la chaîne « Bienvenue dans les didacticiels Guru99 ».
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'); }));
Explication du code :
- Ici, nous définissons un itinéraire si l'URL http://localhost:3000/Node est sélectionné dans le navigateur. À la route, nous attachons une fonction de rappel qui sera appelée lorsque nous naviguerons vers l'URL du nœud. La fonction a 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.
- Nous utilisons la fonction d'envoi pour renvoyer la chaîne « Tutoriel sur Node » au client si la route Node est choisie.
- Ici, nous définissons un itinéraire si l'URL http://localhost:3000/Angular est sélectionné dans le navigateur. À la route, nous attachons une fonction de rappel qui sera appelée lorsque nous naviguerons vers l'URL angulaire.
- Nous utilisons la fonction d'envoi pour renvoyer la chaîne « Tutoriel sur Angular » au client si la route Angular est choisie.
- C'est l'itinéraire par défaut qui est choisi lorsque l'on navigue jusqu'à l'itinéraire de l'application – http://localhost:3000. Lorsque l'itinéraire par défaut est choisi, le message « Bienvenue dans les didacticiels Guru99 » sera envoyé 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 voir que si nous parcourons l'URL de localhost sur le port 3000, vous verrez la chaîne « Bienvenue dans les didacticiels Guru99 » affichée sur la page.
- Car dans notre code, nous avons mentionné que notre URL par défaut afficherait ce message.
De la sortie,
- Vous pouvez voir que si l'URL a été modifiée en /Node, la route du nœud respective sera choisie et la chaîne « Tutorial On Node » s'affichera.
De la sortie,
- Vous pouvez voir que si l'URL a été modifiée en /Angular, la route du nœud respective sera choisie et la chaîne « Tutorial On Angular » s'affichera.
Exemple de serveur Web utilisant express.js
À partir de notre exemple ci-dessus, nous avons vu comment décider quelle sortie afficher en fonction du routage. Ce type de routage est utilisé dans la plupart des applications Web modernes. L'autre partie d'un serveur Web consiste à utiliser des modèles dans Node js.
Lors de la création d'applications Node rapides à la volée, un moyen simple et rapide consiste à utiliser des modèles pour l'application. Il existe de nombreux frameworks disponibles sur le marché pour créer des modèles. Dans notre cas, nous prendrons l’exemple du framework jade pour le template.
Jade est installé via le gestionnaire de packages Node. Cela peut être fait en exécutant la ligne suivante dans la ligne de commande
npm installer jade
La commande ci-dessus demande au gestionnaire de packages 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.
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 de jade. Créez un fichier appelé index.jade et insérez le code ci-dessous. Assurez-vous de créer le fichier dans le dossier « vues »
- Nous spécifions ici que le titre de la page sera remplacé par la valeur transmise lorsque ce modèle sera invoqué.
- Nous précisons également que le texte de la balise d'en-tête sera remplacé par tout ce qui est transmis dans le modèle Jade.
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() {});
Explication du code :
- La première chose à préciser dans l’application est le « moteur de visualisation » qui sera utilisé pour restituer les modèles. Puisque nous allons utiliser jade pour rendre nos modèles, nous le spécifions en conséquence.
- 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.
- Nous transmettons respectivement les valeurs de « Guru99 » et « Welcome » aux paramètres « titre » et « message ». Ces valeurs seront remplacées par les paramètres 'title' et 'message' déclarés dans le template 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 voir que le titre de la page est défini sur « Guru99 » et que l'en-tête de la page est défini sur « Bienvenue ».
- Cela est dû au modèle jade qui est invoqué dans notre application node js.
Résumé
- Le framework express est le framework le plus couramment utilisé pour développer des applications Node js. Le framework express est construit sur le framework node.js et permet d'accélérer le développement d'applications basées sur serveur.
- Les routes sont utilisées pour rediriger les utilisateurs vers différentes parties des applications Web en fonction de la demande effectuée. La réponse pour chaque itinéraire peut varier en fonction de ce qui doit être montré à l'utilisateur.
- Les modèles peuvent être utilisés pour injecter du contenu de manière efficace. Jade est l'un des moteurs de création de modèles les plus populaires utilisés dans les applications Node.js.