Framework Express pour Node.js

Introduction à Express

Express est un framework d'application web Node.js concis et flexible qui fournit une série de fonctionnalités puissantes pour vous aider à créer diverses applications web, et de riches outils HTTP.

Avec Express, vous pouvez rapidement construire un site web entièrement fonctionnel.

Fonctionnalités principales du framework Express :

Vous pouvez configurer un middleware pour répondre aux requêtes HTTP.
Une table de routage est définie pour exécuter différentes actions de requête HTTP.
Vous pouvez rendre dynamiquement des pages HTML en passant des paramètres aux templates.

Installer Express

Installez Express et enregistrez-le dans la liste des dépendances :

$ cnpm install express --save

La commande ci-dessus installera le framework Express dans le répertoirenode_modulesdu répertoire courant,node_modulesUn répertoire express sera automatiquement créé sous ce répertoire. Les modules importants suivants doivent être installés avec le framework Express :

body-parser- Middleware Node.js pour gérer les données JSON, Raw, Text et URL-encoded.
cookie-parser- C'est un outil pour analyser les cookies. Vous pouvez obtenir les cookies entrants via req.cookies et les convertir en objets.
multer- Middleware Node.js pour gérer les données de formulaire avec enctype="multipart/form-data" (définit l'encodage MIME du formulaire).

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

Après l'installation, nous pouvons vérifier le numéro de version utilisé par express :

$ cnpm list express
/data/www/node
└── [email protected]  -> /Users/tianqixin/www/node/node_modules/.4.15.2@express

Premier exemple du framework Express

Ensuite, nous utilisons le framework Express pour afficher "Hello World".

Dans l'exemple suivant, nous importons le module express et répondons avec la chaîne "Hello World" après que le client a effectué une requête.

Créez le fichier express_demo.js, avec le code suivant :

Code du fichier express_demo.js :

//fichier express_demo.js 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("Instance d'application, l'adresse d'accès est http://%s:%s", host, port) })

Exécutez le code ci-dessus :

$ node express_demo.js 
应用实例，访问地址为 http://0.0.0.0:8081

Visitez http://127.0.0.1:8081 dans le navigateur, le résultat est affiché dans la figure ci-dessous :

Requête et réponse

Les applications Express utilisent les paramètres des fonctions de rappel : les objetsrequestetresponsepour traiter les données de requête et de réponse.

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

requestetresponsePrésentation détaillée des objets :

Objet Request- L'objet request représente une requête HTTP et contient des propriétés telles que la chaîne de requête, les paramètres, le contenu et les en-têtes HTTP. Les propriétés courantes incluent :

req.app : lorsque la fonction de rappel est un fichier externe, utilisez req.app pour accéder à l'instance express
req.baseUrl : obtenir le chemin d'URL où la route est actuellement montée
req.body / req.cookies : obtenir le "corps de la requête" / les cookies
req.fresh / req.stale : déterminer si la requête est toujours "fraîche"
req.hostname / req.ip : obtenir le nom d'hôte et l'adresse IP
req.originalUrl : obtenir l'URL d'origine de la requête
req.params : obtenir les paramètres de la route
req.path : obtenir le chemin de la requête
req.protocol : obtenir le type de protocole
req.query : obtenir la chaîne de paramètres de requête de l'URL
req.route : obtenir la route actuellement correspondante
req.subdomains : obtenir les sous-domaines
req.accepts() : Vérifie les types de documents acceptables pour la requête
req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages : Renvoie le premier encodage de caractères acceptable parmi les jeux de caractères spécifiés
req.get() : Récupère l'en-tête de requête HTTP spécifié
req.is() : Détermine le type MIME de l'en-tête de requête Content-Type

Objet de réponse- L'objet de réponse représente la réponse HTTP, c'est-à-dire les données de réponse HTTP envoyées au client lors de la réception d'une requête. Les propriétés courantes incluent :

res.app : Identique à req.app
res.append() : Ajoute l'en-tête HTTP spécifié
res.set() réinitialisera les en-têtes définis précédemment après res.append()
res.cookie(name, value [, option]) : Définit un cookie
option : domain / expires / httpOnly / maxAge / path / secure / signed
res.clearCookie() : Efface le cookie
res.download() : Transfère le fichier situé au chemin spécifié
res.get() : Renvoie l'en-tête HTTP spécifié
res.json() : Envoie une réponse JSON
res.jsonp() : Envoie une réponse JSONP
res.location() : Définit uniquement l'en-tête HTTP Location de la réponse, sans définir le code de statut ni fermer la réponse.
res.redirect() : Définit l'en-tête HTTP Location de la réponse et définit le code de statut 302
res.render(view, [locals], callback) : Rend une vue et passe la chaîne rendue au callback. Si une erreur se produit pendant le rendu, next(err) sera automatiquement appelé. Le callback recevra toute erreur éventuelle et la page rendue, donc il n'y aura pas de sortie automatique.
res.send() : Envoie une réponse HTTP
res.sendFile(path [, options] [, fn]) : Transfère le fichier au chemin spécifié - Définit automatiquement Content-Type en fonction de l'extension du fichier
res.set() : Définit les en-têtes HTTP ; vous pouvez définir plusieurs en-têtes à la fois en passant un objet
res.status() : Définit le code de statut HTTP
res.type() : Définit le type MIME de Content-Type

Routage

Nous avons déjà appris les applications de base des requêtes HTTP, et le routage détermine qui (le script spécifié) répond aux requêtes des clients.

Dans les requêtes HTTP, nous pouvons extraire l'URL demandée et les paramètres GET/POST via le routage.

Ensuite, nous étendons Hello World en ajoutant quelques fonctionnalités pour gérer davantage de types de requêtes HTTP.

Créez le fichier express_demo2.js, avec le code suivant :

Code du fichier express_demo2.js :

Exécutez le code ci-dessus :

$ node express_demo2.js 
应用实例，访问地址为 http://0.0.0.0:8081

Ensuite, vous pouvez essayer d'accéder à différentes adresses comme http://127.0.0.1:8081 pour voir l'effet.

Accédez à http://127.0.0.1:8081/list_user dans le navigateur, le résultat est affiché dans la figure ci-dessous :

Accédez à http://127.0.0.1:8081/abcd dans le navigateur, le résultat est affiché dans la figure ci-dessous :

Accédez à http://127.0.0.1:8081/abcdefg dans le navigateur, le résultat est affiché dans la figure ci-dessous :

Fichiers statiques

Express fournit le middleware intégré express.static pour définir des fichiers statiques tels que les images, CSS, JavaScript, etc.

Vous pouvez utiliser le middleware express.static pour définir le chemin des fichiers statiques. Par exemple, si vous placez des fichiers images, CSS et JavaScript dans le répertoire public, vous pouvez écrire :

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

Nous pouvons placer quelques images dans le répertoire public/images, comme indiqué ci-dessous :

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

Modifions à nouveau l'application « Hello World » pour ajouter la fonctionnalité de gestion des fichiers statiques.

Créez le fichier express_demo3.js, le code est le suivant :

Code du fichier express_demo3.js :

var express = require('express'); var app = express(); app.use('/public', 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("Exemple d'application, l'adresse d'accès est http://%s:%s", host, port) })

Exécutez le code ci-dessus :

$ node express_demo3.js 
应用实例，访问地址为 http://0.0.0.0:8081

Exécutez le code ci-dessus :

Accédez à http://127.0.0.1:8081/public/images/logo.png dans le navigateur (cet exemple utilise le logo du tutoriel Example), le résultat est présenté dans la figure ci-dessous :

Méthode GET

L'exemple suivant montre comment soumettre deux paramètres via la méthode GET dans un formulaire. Nous pouvons utiliser le routeurprocess_getpour traiter l'entrée :

Code du fichier index.html :

<html> <body> <form action="/process_get" method="GET"> Prénom : <input type="text" name="first_name"> <br> Nom : <input type="text" name="last_name"> <input type="submit" value="Envoyer"> </form> </body> </html>

Code du fichier server.js :

Exécutez le code ci-dessus :

node server.js 
应用实例，访问地址为 http://0.0.0.0:8081

Accédez à http://127.0.0.1:8081/index.html dans le navigateur, comme le montre la figure :

Vous pouvez maintenant saisir des données dans le formulaire et le soumettre, comme démontré ci-dessous :

Méthode POST

L'exemple suivant montre comment soumettre deux paramètres via la méthode POST dans un formulaire. Nous pouvons utiliser le routeurprocess_postpour gérer l'entrée :

Code du fichier index.html :

<html> <body> <form action="http://127.0.0.1:8081/process_post" method="POST"> Prénom : <input type="text" name="first_name"> <br> Nom : <input type="text" name="last_name"> <input type="submit" value="Envoyer"> </form> </body> </html>

Code du fichier server.js :

Exécutez le code ci-dessus :

$ node server.js
应用实例，访问地址为 http://0.0.0.0:8081

Accédez à http://127.0.0.1:8081/index.html dans le navigateur, comme le montre la figure :

Vous pouvez maintenant saisir des données dans le formulaire et le soumettre, comme démontré ci-dessous :

Téléversement de fichier

Ci-dessous, nous créons un formulaire pour téléverser des fichiers, en utilisant la méthode POST, avec l'attribut enctype du formulaire défini sur multipart/form-data.

Code du fichier index.html :

<html> <head> <title>Formulaire de téléversement de fichier</title> </head> <body> <h3>Téléversement de fichier :</h3>Sélectionnez un fichier à téléverser :<br /> <form action="/file_upload" method="post" enctype="multipart/form-data"> <input type="file" name="image" size="50" /> <br /> <input type="submit" value="Téléverser le fichier" /> </form> </body> </html>

Code du fichier server.js :

Exécutez le code ci-dessus :

$ node server.js 
应用实例，访问地址为 http://0.0.0.0:8081

Accédez à http://127.0.0.1:8081/index.html dans le navigateur, comme le montre la figure :

Vous pouvez maintenant saisir des données dans le formulaire et le soumettre, comme démontré ci-dessous :

Gestion des cookies

Nous pouvons utiliser un middleware pour envoyer les informations de cookie au serveur Node.js. Le code suivant affiche les informations de cookie envoyées par le client :

Code du fichier express_cookie.js :

//Fichier express_cookie.js var express = require('express') var cookieParser = require('cookie-parser') var util = require('util'); var app = express() app.use(cookieParser()) app.get('/', function(req, res) { console.log("Cookies : " + util.inspect(req.cookies)); }) app.listen(8081)

Exécutez le code ci-dessus :

$ node express_cookie.js

Vous pouvez maintenant accéder à http://127.0.0.1:8081 et consulter la sortie du terminal, comme illustré ci-dessous :

Ressources connexes

Site officiel d'Express :http://expressjs.com/
Version chinoise de l'API Express 4.x :API Express4.x en chinois
API Express4.x :http://expressjs.com/zh-cn/4x/api.html

Autres extensions

Node.js Application

Framework Express pour Node.js

Introduction à Express

Installer Express

Premier exemple du framework Express

Code du fichier express_demo.js :

Requête et réponse

Routage

Code du fichier express_demo2.js :

Fichiers statiques

Code du fichier express_demo3.js :

Méthode GET

Code du fichier index.html :

Code du fichier server.js :

Méthode POST

Code du fichier index.html :

Code du fichier server.js :

Téléversement de fichier

Code du fichier index.html :

Code du fichier server.js :

Gestion des cookies

Code du fichier express_cookie.js :

Ressources connexes