Routing delle richieste con il framework Express.js

Tempo di lettura: 4 minuti
Creare route in Express.js, esercizio pratico

Percorsi e URL

Quando vuoi creare un sito o un API con Node.js sei costretto ad inserire dei controlli per capire quale pagina il visitatore vuole realmente guardare.

Nei precedenti articoli, abbiamo visto quanto fosse noioso controllare l’ URL richiesto con Node.js nudo e crudo (senza framework).

Abbiamo concluso l’esercizio scrivendo un buon vecchio codice spaghetti, un po’ come questo:

if (page == '/') {
  // ...
}
else if (page == '/basement') {
  // ...
}
else if (page == '/floor/1/bedroom') {
  // ...
}

Quando creiamo applicazioni web non possiamo fare a meno di controllare i percorsi, questi che vedi sono i diversi URL a cui la nostra app deve rispondere.

La gestione dei percorsi chiamati anche rotte (routing), è un tema importante nello sviluppo web.

Se ti è già capitato di usare framework come Django o Symfony,  avrai notato quanto si concentrino su una buona gestione delle rotte.

In caso contrario, ricordati solo questo: gestire gli URL del vostro sito web è importante, soprattutto quando il sito è in continua evoluzione.

Express ci aiuta a svolgere questo compito al meglio!

In questo articolo ci concentreremo su come poter “intercettare” varie rotte sia con strutture semplici che più complesse.

Rotte semplici

In primo luogo, ecco un’ applicazione  Express molto semplice:

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

app.get('/', function(req, res) {
  res.setHeader('Content-Type', 'text/plain');
  res.end('You\'re in reception');
});

app.listen(8080);

Non dimenticate di installare Express in modo che questo codice funzioni!

Il codice inizia chiedendo l’ inclusione di Express e crea un oggetto app richiamando la funzione express().

Quindi, è sufficiente inserire i percorsi (diversi URL) ai quali l’ applicazione deve rispondere. Qui ho creato un singolo percorso, la radice “/“. Una funzione di callback viene richiamata quando qualcuno chiama questo percorso.

Questo sistema è molto meglio rispetto alle nostre “if” nidificato. Possiamo scrivere tanti percorsi quanti ne vogliamo:

app.get('/', function(req, res) {
  res.setHeader('Content-Type', 'text/plain');
  res.end('Sei nella Reception. Posso aiutarti?');
});

app.get('/basement', function(req, res) {
  res.setHeader('Content-Type', 'text/plain');
  res.end('Sei nella cantina dei vini. Le bottiglie sono mie!');
});

app.get('/floor/1/bedroom', function(req, res) {
  res.setHeader('Content-Type', 'text/plain');
  res.end('Oh, non dovresti essere qui!');
});

Se vuoi gestire gli errori 404, devi includere le seguenti righe alla fine del codice (poco prima dell’esecuzione di app.listen):

// ... Va inserito come ultima rotta 
app.use(function(req, res, next){
  res.setHeader('Content-Type', 'text/plain');
  res.send(404, 'La pagina non esiste amico!');
});

app.listen(8080);

Per ora non preoccuparti troppo della sintassi e delle impostazioni, ci ritorneremo tra poco. Ora stiamo solo imparando a gestire i percorsi con Express!

Express permette di inserire le chiamate in catena per get() e use():

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

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

})
.get('/floor/1/bedroom', function(req, res) {

})
.use(function(req, res, next){

});

È come scrivere: app.get().get().get().

Essenzialmente le funzioni si passano l’ oggetto app l’una all’ altra, questo ci permetterà di abbreviare il codice.

Quindi non sorprenderti se vedi codici Express scritti in questo modo.

Rotte dinamiche

Express permette di generare percorsi dinamici, cioè percorsi che possono variare. Ci basta scrivere :nomevariabile nell’ URL del percorso, creerà un parametro accessibile da req.params. nomevariabile.

Come questo:

app.get('/floor/:floornum/bedroom', function(req, res) {
  res.setHeader('Content-Type', 'text/plain');
  res.end('Sei nella camera da letto al piano n^' + req.params.floornum);
});

In questo modo possiamo definire delle rotte dinamiche, e allo stesso tempo evitare il passaggio di valori come GET (“?variabile=valore“).

Cosi facendo, tutti i seguenti percorsi sono validi:

  • /floor/1/bedroom
  • /floor/2/bedroom
  • /floor/3/bedroom
  • /floor/ontheroof/bedroom

Significa che posso inserire qualsiasi valore? È possibile assicurarsi che venga utilizzato un numero?

Il visitatore può tecnicamente inserire nell’URL tutto ciò che vuole… Quindi tocca a te controllare il tipo dell’input nella funzione callback, se non è un numero puoi restituire un errore, ad esempio un 404.

Esercizio di routing con Express.js

Proviamo a mettere assieme tutto ciò che hai imparato! Crea un file routing.js e inserisci i codici precedenti.

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

app.get('/', function(req, res) {
  res.setHeader('Content-Type', 'text/plain');
  res.end('Sei nella Reception. Posso aiutarti?');
});

app.get('/basement', function(req, res) {
  res.setHeader('Content-Type', 'text/plain');
  res.end('Sei nella cantina dei vini. Le bottiglie sono mie!');
});

app.get('/floor/:floornum/bedroom', function(req, res) {
  res.setHeader('Content-Type', 'text/plain');
  res.end('Sei nella camera da letto al piano n^' + req.params.floornum);
});

app.use(function(req, res, next){
  res.setHeader('Content-Type', 'text/plain');
  res.send(404, 'La pagina non esiste amico!');
});

app.listen(8080);

Il risultato dovrebbe essere simile a questo:

routing-semplice-dinamico-percorsi-url-express-framework-nodejs
Esempio di routing con Express

Ora non ci resta che avviare la nostra applicazione e andare a vedere il risultato:

esempio-routing-express
Routing dinamico con Express

Perfetto funziona, ottimo lavoro!

Nel prossimo tutorial approfondiremo invece l’aspetto dei template engine, cosi da evitare di scrivere l’HTML all’interno del nostro codice Javascript!


L’articolo che hai appena letto fa parte di una lunga serie di guide e tutorial tradotte in italiano e distribuite gratuitamente. In particolare questo articolo si basa sui testi inglesi di Mathieu Nebra (Ultra fast applications using Node.js), con licenza CC BY-NC-SA. Questo articolo è sotto la stessa licenza.