Node.js - Express Framework

Panoramica di Express

Express è un framework per applicazioni web Node.js minimale e flessibile che fornisce un robusto set di funzionalità per sviluppare applicazioni web e mobili. Facilita il rapido sviluppo di applicazioni Web basate su nodi. Di seguito sono riportate alcune delle funzionalità principali di Express Framework:

  • Consente di configurare middleware per rispondere alle richieste HTTP.

  • Definisce una tabella di routing che viene utilizzata per eseguire diverse azioni in base al metodo HTTP e all'URL.

  • Consente di eseguire il rendering dinamico delle pagine HTML in base al passaggio di argomenti ai modelli.

Installazione di Express

Innanzitutto, installa il framework Express a livello globale utilizzando NPM in modo che possa essere utilizzato per creare un'applicazione Web utilizzando il terminale del nodo.

$ npm install express --save

Il comando precedente salva l'installazione localmente nel file node_modulesdirectory e crea una directory express all'interno di node_modules. Dovresti installare i seguenti importanti moduli insieme a express -

  • body-parser - Questo è un middleware node.js per la gestione dei dati dei moduli codificati in JSON, Raw, Text e URL.

  • cookie-parser - Analizza l'intestazione dei cookie e popola i req.cookie con un oggetto codificato dai nomi dei cookie.

  • multer - Questo è un middleware node.js per la gestione di multipart / form-data.

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

Hello world Example

Di seguito è riportata un'app Express molto semplice che avvia un server e ascolta sulla porta 8081 per la connessione. Questa app risponde conHello World!per richieste alla homepage. Per ogni altro percorso, risponderà con a404 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)
})

Salva il codice sopra in un file denominato server.js ed eseguilo con il seguente comando.

$ node server.js

Vedrai il seguente output:

Example app listening at http://0.0.0.0:8081

Apri http://127.0.0.1:8081/ in qualsiasi browser per vedere il seguente risultato.

Richiedere risposta

L'applicazione Express utilizza una funzione di callback i cui parametri sono request e response oggetti.

app.get('/', function (req, res) {
   // --
})
  • Oggetto richiesta: l'oggetto richiesta rappresenta la richiesta HTTP e dispone di proprietà per la stringa di query della richiesta, i parametri, il corpo, le intestazioni HTTP e così via.

  • Oggetto risposta: l'oggetto risposta rappresenta la risposta HTTP che un'app Express invia quando riceve una richiesta HTTP.

Puoi stampare req e res oggetti che forniscono molte informazioni relative alla richiesta e alla risposta HTTP inclusi cookie, sessioni, URL, ecc.

Routing di base

Abbiamo visto un'applicazione di base che serve la richiesta HTTP per la homepage. Il routing si riferisce alla determinazione del modo in cui un'applicazione risponde a una richiesta client a un particolare endpoint, che è un URI (o percorso) e un metodo di richiesta HTTP specifico (GET, POST e così via).

Estenderemo il nostro programma Hello World per gestire più tipi di richieste 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)
})

Salva il codice sopra in un file denominato server.js ed eseguilo con il seguente comando.

$ node server.js

Vedrai il seguente output:

Example app listening at http://0.0.0.0:8081

Ora puoi provare diverse richieste su http://127.0.0.1:8081 per vedere l'output generato da server.js. Di seguito sono riportate alcune schermate che mostrano risposte diverse per URL diversi.

Schermata che mostra di nuovo http://127.0.0.1:8081/list_user

Schermata che mostra di nuovo http://127.0.0.1:8081/abcd

Schermata che mostra di nuovo http://127.0.0.1:8081/abcdefg

Pubblicazione di file statici

Express fornisce un middleware integrato express.static per servire file statici, come immagini, CSS, JavaScript, ecc.

Devi semplicemente passare il nome della directory in cui conservi le tue risorse statiche, al file express.staticmiddleware per iniziare a servire i file direttamente. Ad esempio, se mantieni le tue immagini, i file CSS e JavaScript in una directory denominata public, puoi farlo:

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

Conserveremo alcune immagini in formato public/images sottodirectory come segue -

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

Modifichiamo l'app "Hello Word" per aggiungere la funzionalità per gestire i file statici.

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

Salva il codice sopra in un file denominato server.js ed eseguilo con il seguente comando.

$ node server.js

Ora apri http://127.0.0.1:8081/images/logo.png in qualsiasi browser e guarda il seguente risultato.

Metodo GET

Ecco un semplice esempio che passa due valori utilizzando il metodo HTML FORM GET. Useremoprocess_get router all'interno di server.js per gestire questo input.

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

Salviamo il codice sopra in index.htm e modifichiamo server.js per gestire le richieste della home page e l'input inviato dal modulo 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'accesso al documento HTML utilizzando http://127.0.0.1:8081/index.htm genererà il seguente modulo:

First Name:
Last Name:

Ora puoi inserire il nome e il cognome e quindi fare clic sul pulsante Invia per vedere il risultato e dovrebbe restituire il seguente risultato:

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

Metodo POST

Ecco un semplice esempio che passa due valori utilizzando il metodo HTML FORM POST. Useremoprocess_get router all'interno di server.js per gestire questo input.

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

Salviamo il codice sopra in index.htm e modifichiamo server.js per gestire le richieste della home page e l'input inviato dal modulo 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'accesso al documento HTML utilizzando http://127.0.0.1:8081/index.htm genererà il seguente modulo:

First Name:
Last Name:

Ora puoi inserire il nome e il cognome e quindi fare clic sul pulsante di invio per vedere il seguente risultato:

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

Upload di file

Il seguente codice HTML crea un modulo di caricamento file. Questo modulo ha l'attributo del metodo impostato suPOST e l'attributo enctype è impostato su 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>

Salviamo il codice sopra in index.htm e modifichiamo server.js per gestire le richieste della home page e il caricamento dei file.

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'accesso al documento HTML utilizzando http://127.0.0.1:8081/index.htm genererà il seguente modulo:

File Upload:
Select a file to upload: 

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

Gestione dei cookie

È possibile inviare cookie a un server Node.js che può gestirlo utilizzando la seguente opzione middleware. Di seguito è riportato un semplice esempio per stampare tutti i cookie inviati dal cliente.

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)