Dans ce tutoriel, nous allons étudier le framework Express. Ce framework est conçu 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 uniques, multipages et hybrides.
Dans ce didacticiel, vous apprendrez-
- Qu'est-ce que Express.js?
- Installation et utilisation d'Express
- Que sont les routes?
- Exemple de serveur Web utilisant express.js
Qu'est-ce que Express.js?
Express.js est une infrastructure de serveur d'applications Web Node js, spécialement conçue pour la création d'applications Web à une page, à plusieurs pages et hybrides.
Il est devenu le cadre de serveur standard pour node.js. Express est la partie backend de quelque chose connu sous le nom de pile MEAN.
Le MEAN est une pile logicielle JavaScript gratuite et open-source pour la création de sites Web dynamiques et d'applications Web qui comprend les composants suivants;
1) MongoDB - La base de données NoSQL standard
2) Express.js - Le cadre d'applications Web par défaut
3) Angular.js - Le framework JavaScript MVC utilisé pour les applications Web
4) Node.js - Framework utilisé pour les applications évolutives côté serveur et réseau.
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 et POST et DELETE.
Installation et utilisation d'Express
Express est installé via le gestionnaire de packages de nœuds. 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 vers la page Web. Ce paramètre 'res' est quelque chose qui est fourni par le module 'request' pour permettre à quelqu'un de renvoyer du contenu vers la page Web.
- Nous utilisons alors 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'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
De la sortie,
- Vous pouvez clairement voir que si nous naviguons vers 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 sommes en mesure de visualiser la sortie lors de la navigation vers cette URL.
Que sont les routes?
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 faire une requête http GET, POST, PUT ou DELETE pour diverses URL telles que celles illustrées ci-dessous;
http://localhost:3000/Bookshttp://localhost:3000/Students
Dans l'exemple ci-dessus,
- Si une demande GET est faite pour la première URL, la réponse devrait idéalement être une liste de livres.
- Si la demande GET est faite pour la deuxième URL, la réponse devrait idéalement être une liste d'étudiants.
- Ainsi, en fonction de l'URL à laquelle on accède, une fonctionnalité différente sur le serveur Web sera invoquée et, en conséquence, 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'une route est indiquée ci-dessous
app.METHOD(PATH, HANDLER)
Où,
1) app 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 la route correspond.
Regardons un exemple de la façon dont nous pouvons implémenter des routes dans l'express. Notre exemple créera 3 itinéraires comme
- A / Node route qui affichera la chaîne "Tutorial on Node" si cette route est accédée
- A / Route angulaire qui affichera la chaîne "Tutoriel sur Angular" si cette route est accédée
- Une route par défaut / qui affichera la chaîne "Welcome to Guru99 Tutorials".
Notre code de base restera le même que les exemples précédents. L'extrait ci-dessous est un module complémentaire pour 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 une route si l'URL http: // localhost: 3000 / Node est sélectionnée 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 demande en cours. Parfois, des paramètres supplémentaires peuvent être envoyés dans le cadre de la demande en cours, et par conséquent, le paramètre «req» peut être utilisé pour trouver les paramètres supplémentaires envoyés.
- Nous utilisons la fonction d'envoi pour renvoyer la chaîne "Tutorial on Node" au client si la route Node est choisie.
- Ici, nous définissons une route si l'URL http: // localhost: 3000 / Angular est sélectionnée 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 "Tutorial on Angular" au client si la route Angular est choisie.
- C'est la route par défaut qui est choisie quand on navigue vers la route 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'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
De la sortie,
- Vous pouvez clairement voir que si nous naviguons vers l'URL de localhost sur le port 3000, vous verrez la chaîne «Welcome to Guru99 Tutorials» affichée sur la page.
- Parce que 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 Node respective sera choisie et la chaîne «Tutorial On Node» s'affiche.
De la sortie,
- Vous pouvez voir que si l'URL a été modifiée en / Angular, la route Node respective sera choisie et la chaîne "Tutorial On Angular" s'affiche.
Exemple de serveur Web utilisant express.js
À partir de notre exemple ci-dessus, nous avons vu comment nous pouvons décider de la sortie à afficher en fonction du routage. Ce type de routage est ce qui 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 cadres disponibles sur le marché pour créer des modèles. Dans notre cas, nous prendrons l'exemple du framework jade pour le templating.
Jade est installé via le gestionnaire de paquets 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 paquets Node de télécharger les modules jade requis et de les installer en conséquence.
REMARQUE: dans la dernière version de Node, jade est obsolète. Au lieu de cela, utilisez carlin.
Utilisons notre framework jade nouvellement installé et créons des 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»
- Ici, nous spécifions que le titre de la page sera changé en n'importe quelle valeur transmise lorsque ce modèle sera appelé.
- Nous spécifions également que le texte de la balise d'en-tête sera remplacé par tout ce qui est passé dans le modèle de 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 à spécifier dans l'application est le "moteur de visualisation" qui sera utilisé pour rendre les modèles. Puisque nous allons utiliser du jade pour rendre nos modèles, nous le spécifions en conséquence.
- La fonction de rendu est utilisée pour rendre 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 "Guru99" et "Welcome" 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'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
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".
- Ceci est dû au modèle jade qui est appelé 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 aide au développement rapide des applications serveur.
- Les itinéraires sont utilisés 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.