Cadre Express Node.js


Express Introduction

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

Utilisez Express pour créer rapidement un site Web entièrement fonctionnel.

Fonctionnalités principales du framework Express :

  • Vous pouvez configurer un middleware pour répondre aux requêtes HTTP.

  • définit des tables de routage pour effectuer différentes actions de requête HTTP.

  • Vous pouvez restituer dynamiquement des pages HTML en passant des paramètres au modèle.

Installer Express

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

$ npm install express --save

La commande ci-dessus installera le framework Express dans le période actuelle Dans le répertoire node_modules du répertoire, le répertoire express sera automatiquement créé sous le répertoire node_modules. Les modules importants suivants doivent être installés avec le framework express :

  • body-parser - middleware node.js pour le traitement des encodages JSON, Raw, Texte et URL données.

  • cookie-parser - Il s'agit d'un outil pour analyser les cookies. Grâce à req.cookies, vous pouvez récupérer les cookies transmis et les convertir en objets.

  • multer - middleware node.js, utilisé pour traiter les données de formulaire de enctype="multipart/form-data" (définir l'encodage MIME du formulaire). 

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

Première instance du framework Express

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

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

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

//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("应用实例，访问地址为 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 le suivant :

Demande et réponse

L'application express utilise les paramètres de la fonction de rappel : request et réponse Objet pour gérer les données de demande et de réponse. Introduction détaillée des objets 

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

request et response :

Objet de requête - l'objet de requête représente une requête HTTP, y compris Request chaîne de requête, paramètres, contenu, en-têtes HTTP et autres attributs. Les attributs communs sont :

  1. req.app : lorsque le rappel est un fichier externe, utilisez req.app pour accéder à l'instance express

  2. req .baseUrl : Récupère le chemin URL de la route actuellement installée

  3. req.body / req.cookies : Récupère le "corps de la requête" / Cookies

  4. req.fresh / req.stale : Déterminez si la requête est toujours "fraîche"

  5. req.hostname / req.ip : Obtenez le nom d'hôte et l'adresse IP

  6. req .originalUrl : Obtenez l'URL de la demande d'origine

  7. req.params : Obtenez les paramètres de routage

  8. req .path : Obtenez le chemin de la requête

  9. req.protocol : Obtenez le type de protocole

  10. req.query : Obtenez la chaîne de paramètres de requête du URL

  11. req.route : obtenez l'itinéraire correspondant actuel

  12. req.subdomains : obtenez le nom du sous-domaine

  13. req .accpets() : Vérifiez le type de requête de l'en-tête Accept de la requête

  14. req.acceptsCharsets/req.acceptsEncodings/req.acceptsLanguages

  15. req. get() : récupère l'en-tête de requête HTTP spécifié

  16. 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 lorsqu'une requête est reçue. Les attributs courants sont :

  1. res.app : identique à req.app

  2. res.append() : ajoute l'en-tête HTTP spécifié

  3. res.set() après res.append() réinitialisera l'en-tête précédemment défini

  4. res.cookie(name, value [, option ] ) : Définir l'option Cookie

  5.  : domain/expires/httpOnly/maxAge/path/secure/signed

  6. res.clearCookie() : Effacer Cookies

  7. res.download() : Transférer le fichier avec le chemin spécifié

  8. res.get() : Renvoie l'en-tête HTTP spécifié

  9. res.json() : transmettre la réponse JSON

  10. res.jsonp() : transmettre la réponse JSONP

  11. res.location() : définissez uniquement l'en-tête HTTP Location de la réponse, sans définir le code d'état ni fermer la réponse

  12. res.redirect() : définissez l'en-tête HTTP Location de la réponse et définissez le code d'état 302

  13. res.send() : Envoyer la réponse HTTP

  14. res.sendFile(path[,options ][,fn]) : Transférer le fichier avec le chemin spécifié -Content-Type sera automatiquement défini en fonction de l'extension du fichier

  15. res.set() : définissez l'en-tête HTTP et l'objet entrant peut définir plusieurs en-têtes à la fois

  16. res.status() : Définissez le code d'état HTTP

  17. res.type() : Définissez le type MIME de Content-Type

Routage

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

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

Ensuite, nous étendons Hello World et ajoutons des fonctionnalités pour gérer davantage de types de requêtes HTTP.

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

var express = require('express');var app = express();//  主页输出 "Hello World"app.get('/', function (req, res) {
   console.log("主页 GET 请求");
   res.send('Hello GET');})//  POST 请求app.post('/', function (req, res) {
   console.log("主页 POST 请求");
   res.send('Hello POST');})//  /del_user 页面响应app.get('/del_user', function (req, res) {
   console.log("/del_user 响应 DELETE 请求");
   res.send('删除页面');})//  /list_user 页面 GET 请求app.get('/list_user', function (req, res) {
   console.log("/list_user GET 请求");
   res.send('用户列表页面');})// 对页面 abcd, abxcd, ab123cd, 等响应 GET 请求app.get('/ab*cd', function(req, res) {   
   console.log("/ab*cd GET 请求");
   res.send('正则匹配');})var server = app.listen(8081, function () {  var host = server.address().address  var port = server.address().port

  console.log("应用实例，访问地址为 http://%s:%s", host, port)})

Exécutez le code ci-dessus : 

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

Ensuite, vous pouvez essayer d'accéder à http://127.0. 0.1:8081 Différentes adresses pour voir l'effet.

Accédez à http://127.0.0.1:8081/list_user dans le navigateur, le résultat est le suivant :

Accédez à http://127.0.0.1 dans le navigateur : 8081/abcd, le résultat est tel qu'indiqué ci-dessous :

Accédez à http://127.0.0.1:8081/abcdefg dans le navigateur, le résultat est tel qu'indiqué ci-dessous :

Fichiers statiques

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

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

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

Nous pouvons mettre quelques images dans le répertoire public/images, comme suit : 

node_modules
server.jspublic/public/imagespublic/images/logo.png

Modifions à nouveau l'application "Hello Word" pour ajouter la fonction de traitement des fichiers statiques.

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

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("应用实例，访问地址为 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ès dans le navigateur http://127.0.0.1:8081/images/logo.png (cet exemple utilise le logo du tutoriel rookie), le résultat est le suivant :

GET method

L'exemple suivant montre la soumission de deux paramètres via la méthode GET dans le formulaire. Nous pouvons utiliser le routeur process_get dans le fichier server.js pour traiter l'entrée :

<🎜. >Le code du fichier index.htm est le suivant :

<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>

Le code du fichier server.js est le suivant :

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) {   // 输出 JSON 格式
   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("应用实例，访问地址为 http://%s:%s", host, port)})

Exécutez le code ci-dessus :

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

Accès au navigateur http : //127.0.0.1:8081/index.htm, Comme le montre l'image :

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

Méthode POST

L'exemple suivant Il montre la soumission de deux paramètres via la méthode POST dans le formulaire. Nous pouvons utiliser le routeur

process_post dans le fichier server.js pour traiter le. input :

Le code du fichier index.htm est modifié comme suit : 

<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>

Le code du fichier server.js est modifié comme suit :

var express = require('express');var app = express();var bodyParser = require('body-parser');// 创建 application/x-www-form-urlencoded 编码解析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) {   // 输出 JSON 格式
   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("应用实例，访问地址为 http://%s:%s", host, port)})

Exécutez le code ci-dessus :

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

Accès au navigateur http://127.0.0.1:8081/index.htm, comme indiqué dans la figure Comme indiqué :

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

Téléchargement de fichiers

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

Le code du fichier index.htm est modifié comme suit : 

<html><head><title>文件上传表单</title></head><body><h3>文件上传：</h3>选择一个文件上传: <br /><form action="/file_upload" method="post" enctype="multipart/form-data"><input type="file" name="image" size="50" /><br /><input type="submit" value="上传文件" /></form></body></html>

Le code du fichier server.js est modifié comme suit : 

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/'}).array('image'));app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );})app.post('/file_upload', function (req, res) {

   console.log(req.files[0]);  // 上传的文件信息   var des_file = __dirname + "/" + req.files[0].originalname;
   fs.readFile( req.files[0].path, function (err, data) {
        fs.writeFile(des_file, data, function (err) {         if( err ){
              console.log( err );         }else{
               response = {
                   message:'File uploaded successfully', 
                   filename:req.files[0].originalname              };          }
          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("应用实例，访问地址为 http://%s:%s", host, port)})

Exécutez le code ci-dessus : 

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

Accès au navigateur http://127.0.0.1:8081/index.htm, comme indiqué dans l'image :

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

Gestion des cookies

Nous pouvons utiliser un middleware pour envoyer des informations sur les cookies au serveur Node.js Le code suivant génère les informations sur les cookies envoyées par le client : 

// express_cookie.js 文件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)
.

Exécutez le code ci-dessus : 

$ node express_cookie.js

Vous pouvez maintenant visiter http://127.0.0.1:8081 et afficher la sortie des informations du terminal, comme indiqué ci-dessous :

Informations associées