Node.js - Framework Express

Aperçu express

Express est un cadre d'application Web Node.js minimal et flexible qui fournit un ensemble robuste de fonctionnalités pour développer des applications Web et mobiles. Il facilite le développement rapide d'applications Web basées sur les nœuds. Voici quelques-unes des fonctionnalités principales du framework Express -

Permet de configurer des middlewares pour répondre aux requêtes HTTP.
Définit une table de routage qui est utilisée pour effectuer différentes actions basées sur la méthode HTTP et l'URL.
Permet de rendre dynamiquement les pages HTML en passant des arguments aux modèles.

Installation d'Express

Tout d'abord, installez le framework Express globalement à l'aide de NPM afin qu'il puisse être utilisé pour créer une application Web à l'aide du terminal nœud.

$ npm install express --save

La commande ci-dessus enregistre l'installation localement dans le node_modulesrépertoire et crée un répertoire express à l'intérieur de node_modules. Vous devez installer les modules importants suivants avec express -

body-parser - Il s'agit d'un middleware node.js pour la gestion des données de formulaire codées JSON, Raw, Text et URL.
cookie-parser - Analyser l'en-tête Cookie et remplir les req.cookies avec un objet indexé par les noms des cookies.
multer - Il s'agit d'un middleware node.js pour la gestion des données multipart / form-data.

$ npm install body-parser --save
$ npm install cookie-parser --save
$ npm install multer --save

Bonjour le monde Exemple

Voici une application Express très basique qui démarre un serveur et écoute sur le port 8081 pour la connexion. Cette application répond avecHello World!pour les demandes sur la page d'accueil. Pour chaque autre chemin, il répondra par un404 Not Found.

var express = require('express');
var app = express();

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

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Enregistrez le code ci-dessus dans un fichier nommé server.js et exécutez-le avec la commande suivante.

$ node server.js

Vous verrez la sortie suivante -

Example app listening at http://0.0.0.0:8081

Ouvrez http://127.0.0.1:8081/ dans n'importe quel navigateur pour voir le résultat suivant.

Demande de réponse

L'application Express utilise une fonction de rappel dont les paramètres sont request et response objets.

app.get('/', function (req, res) {
   // --
})

Objet de requête - L'objet de requête représente la requête HTTP et possède des propriétés pour la chaîne de requête de requête, les paramètres, le corps, les en-têtes HTTP, etc.
Objet de réponse - L'objet de réponse représente la réponse HTTP qu'une application Express envoie lorsqu'elle reçoit une requête HTTP.

Vous pouvez imprimer req et res objets qui fournissent beaucoup d'informations liées à la requête et à la réponse HTTP, y compris les cookies, les sessions, l'URL, etc.

Routage de base

Nous avons vu une application de base qui sert une requête HTTP pour la page d'accueil. Le routage fait référence à la détermination de la manière dont une application répond à une demande client à un point de terminaison particulier, qui est un URI (ou un chemin) et une méthode de demande HTTP spécifique (GET, POST, etc.).

Nous allons étendre notre programme Hello World pour gérer plus de types de requêtes HTTP.

var express = require('express');
var app = express();

// This responds with "Hello World" on the homepage
app.get('/', function (req, res) {
   console.log("Got a GET request for the homepage");
   res.send('Hello GET');
})

// This responds a POST request for the homepage
app.post('/', function (req, res) {
   console.log("Got a POST request for the homepage");
   res.send('Hello POST');
})

// This responds a DELETE request for the /del_user page.
app.delete('/del_user', function (req, res) {
   console.log("Got a DELETE request for /del_user");
   res.send('Hello DELETE');
})

// This responds a GET request for the /list_user page.
app.get('/list_user', function (req, res) {
   console.log("Got a GET request for /list_user");
   res.send('Page Listing');
})

// This responds a GET request for abcd, abxcd, ab123cd, and so on
app.get('/ab*cd', function(req, res) {   
   console.log("Got a GET request for /ab*cd");
   res.send('Page Pattern Match');
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Enregistrez le code ci-dessus dans un fichier nommé server.js et exécutez-le avec la commande suivante.

$ node server.js

Vous verrez la sortie suivante -

Example app listening at http://0.0.0.0:8081

Vous pouvez maintenant essayer différentes requêtes sur http://127.0.0.1:8081 pour voir la sortie générée par server.js. Voici quelques captures d'écran montrant différentes réponses pour différentes URL.

Écran montrant à nouveau http://127.0.0.1:8081/list_user

Écran montrant à nouveau http://127.0.0.1:8081/abcd

Écran montrant à nouveau http://127.0.0.1:8081/abcdefg

Servir des fichiers statiques

Express fournit un middleware intégré express.static pour servir des fichiers statiques, tels que des images, CSS, JavaScript, etc.

Il vous suffit de transmettre le nom du répertoire où vous conservez vos actifs statiques, au express.staticmiddleware pour commencer à servir les fichiers directement. Par exemple, si vous conservez vos fichiers images, CSS et JavaScript dans un répertoire nommé public, vous pouvez le faire -

app.use(express.static('public'));

Nous garderons quelques images dans public/images sous-répertoire comme suit -

node_modules
server.js
public/
public/images
public/images/logo.png

Modifions l'application "Hello Word" pour ajouter la fonctionnalité permettant de gérer les fichiers statiques.

var express = require('express');
var app = express();

app.use(express.static('public'));

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

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port

   console.log("Example app listening at http://%s:%s", host, port)
})

Enregistrez le code ci-dessus dans un fichier nommé server.js et exécutez-le avec la commande suivante.

$ node server.js

Ouvrez maintenant http://127.0.0.1:8081/images/logo.png dans n'importe quel navigateur et observez le résultat suivant.

Méthode GET

Voici un exemple simple qui transmet deux valeurs à l'aide de la méthode HTML FORM GET. Nous allons utiliserprocess_get routeur à l'intérieur de server.js pour gérer cette entrée.

<html>
   <body>
      
      <form action = "http://127.0.0.1:8081/process_get" method = "GET">
         First Name: <input type = "text" name = "first_name">  <br>
         Last Name: <input type = "text" name = "last_name">
         <input type = "submit" value = "Submit">
      </form>
      
   </body>
</html>

Sauvegardons le code ci-dessus dans index.htm et modifions server.js pour gérer les demandes de page d'accueil ainsi que l'entrée envoyée par le formulaire HTML.

var express = require('express');
var app = express();

app.use(express.static('public'));
app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.get('/process_get', function (req, res) {
   // Prepare output in JSON format
   response = {
      first_name:req.query.first_name,
      last_name:req.query.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

L'accès au document HTML en utilisant http://127.0.0.1:8081/index.htm générera le formulaire suivant -




First Name:



Last Name:

Vous pouvez maintenant entrer le prénom et le nom, puis cliquer sur le bouton Soumettre pour voir le résultat et il devrait renvoyer le résultat suivant -

{"first_name":"John","last_name":"Paul"}

Méthode POST

Voici un exemple simple qui transmet deux valeurs à l'aide de la méthode HTML FORM POST. Nous allons utiliserprocess_get routeur à l'intérieur de server.js pour gérer cette entrée.

<html>
   <body>
      
      <form action = "http://127.0.0.1:8081/process_post" method = "POST">
         First Name: <input type = "text" name = "first_name"> <br>
         Last Name: <input type = "text" name = "last_name">
         <input type = "submit" value = "Submit">
      </form>
      
   </body>
</html>

Sauvegardons le code ci-dessus dans index.htm et modifions server.js pour gérer les demandes de page d'accueil ainsi que l'entrée envoyée par le formulaire HTML.

var express = require('express');
var app = express();
var bodyParser = require('body-parser');

// Create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })

app.use(express.static('public'));
app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/process_post', urlencodedParser, function (req, res) {
   // Prepare output in JSON format
   response = {
      first_name:req.body.first_name,
      last_name:req.body.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

L'accès au document HTML en utilisant http://127.0.0.1:8081/index.htm générera le formulaire suivant -




First Name:



Last Name:

Vous pouvez maintenant entrer le prénom et le nom, puis cliquer sur le bouton Soumettre pour voir le résultat suivant -

{"first_name":"John","last_name":"Paul"}

Téléchargement de fichiers

Le code HTML suivant crée un formulaire de téléchargement de fichiers. Ce formulaire a l'attribut de méthode défini surPOST et l'attribut enctype est défini sur multipart/form-data

<html>
   <head>
      <title>File Uploading Form</title>
   </head>

   <body>
      <h3>File Upload:</h3>
      Select a file to upload: <br />
      
      <form action = "http://127.0.0.1:8081/file_upload" method = "POST" 
         enctype = "multipart/form-data">
         <input type="file" name="file" size="50" />
         <br />
         <input type = "submit" value = "Upload File" />
      </form>
      
   </body>
</html>

Sauvegardons le code ci-dessus dans index.htm et modifions server.js pour gérer les demandes de page d'accueil ainsi que le téléchargement de fichiers.

var express = require('express');
var app = express();
var fs = require("fs");

var bodyParser = require('body-parser');
var multer  = require('multer');

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/'}));

app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/file_upload', function (req, res) {
   console.log(req.files.file.name);
   console.log(req.files.file.path);
   console.log(req.files.file.type);
   var file = __dirname + "/" + req.files.file.name;
   
   fs.readFile( req.files.file.path, function (err, data) {
      fs.writeFile(file, data, function (err) {
         if( err ) {
            console.log( err );
            } else {
               response = {
                  message:'File uploaded successfully',
                  filename:req.files.file.name
               };
            }
         
         console.log( response );
         res.end( JSON.stringify( response ) );
      });
   });
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

L'accès au document HTML en utilisant http://127.0.0.1:8081/index.htm générera le formulaire suivant -

File Upload:
Select a file to upload: 





NOTE: This is just dummy form and would not work, but it must work at your server.

Gestion des cookies

Vous pouvez envoyer des cookies à un serveur Node.js qui peut gérer la même chose en utilisant l'option middleware suivante. Voici un exemple simple pour imprimer tous les cookies envoyés par le client.

var express      = require('express')
var cookieParser = require('cookie-parser')

var app = express()
app.use(cookieParser())

app.get('/', function(req, res) {
   console.log("Cookies: ", req.cookies)
})
app.listen(8081)

↰ Previous page Next page ↱

Node.js - Framework Express

Aperçu express

Installation d'Express

Bonjour le monde Exemple

Demande de réponse

Routage de base

Servir des fichiers statiques

Méthode GET

Méthode POST

Téléchargement de fichiers

Gestion des cookies

Tutoriel Node.js

Ressources utiles Node.js