Benvenuti a questa guida su come utilizzare il router di Express in Node.js
potete trovare il codice competo per questo tutorial su questa repository GitHub di devnews.it, siete liberi di scaricarlo e usarlo nel vostro progetto.
Requisiti:
In questa guida vedremo come creare una struttura di URL, per gestire in modo corretto la vostra Web App o sito.
In particolare creeremo un server HTTP e vedremo come utilizzare il modulo Router di Express.js per rispondere a richieste di diverse routes
Per seguire questa guida vi consiglio di cominciare prima con la nostra introduzione su l'uso di Node.js ed Express.js per creare una Web App
Come funziona il router di Express.js?
Come qualsiasi server HTTP, il server di Express è in continua attesa di richieste provenienti da client. Ogni volta che un client inserisce l'url del nostro sito nel browser, viene inviata una richiesta del tipo GET (in inglese prendere). Questa richiesta viene indirizzata verso una porta specifica del server, dove si trova in ascolto il nostro server Express.
Una volta che la richiesta raggiunge il nostro server, il modulo router entra in gioco. Express indirizza questa richiesta verso una specifica funzione JS, la processa e infine invia una risposta al client tramite il protocollo HTTP.
Vediamo ora come accettare richieste e inviare una pagina web in risposta.
Creare la struttura url della nostra web app.
Cominciamo subito creando il router.
Supponiamo di avere un sito web con vari post - www.nostro-blog.com
Questo sito è diviso in varie sezioni:
| Home
| Posts
| NewsVogliamo quindi raggiungere un post tramite il link - www.nostro-blog/post/
E le news attraverso il link - www.nostro-blog.com/news/
Vediamo come creare questa strutture usando il router di Express.js
Come utilizzare il Router di Express.js
Per prima cosa creiamo un nuovo file chiamato router.js
In questo file andremo a inserire il codice necessario per la nostra struttura url.
Vediamo come servire la home page:
var express = require('express');
var router = express.Router();
// servira la home page
router.get('/', function(req, res) {
res.send('Questa è la home page');
});
module.exports = router;Come vedete importiamo i moduli express ed express.router() e rispondiamo alle richieste GET per il l'indirizzo '/' . Questo indirizzo corrisponde al nostro sito www.nostro-blog.com/
In seguito esportiamo il nostro router che verrà importato nella nostra app nel seguente modo:
var express = require('express'); var app = express(); var router = require("./router.js"); // carichiamo il nostro router app.use(router); // impostiamo le nostre routes app.listen(3000, function(){console.log('App sta ascoltando su localhost:3000'); });
Per ora abbiamo creato una risposta per una richiesta per la nostra home page. Vediamo il nostro router in azione.
Dalla directory del file app.js eseguito nel cmd o terminal il seguente comando:
node app.jsSe ora navigate dal browser all'indirizzo localhost:3000 vedrete la nostra risposta per la home page.
Continuiamo inserendo una nuova route.
Ma prima di continuare, parliamo di perché è importante separare le nostre route in file diversi.
In teoria possiamo inserire ogni route del nostro sito nello stesso file, nel seguente modo:
app.get(/, function(req,res){
});
app.get(/posts, function(req,res){
});
app.get(/posts/nuovi, function(req,res){
});
app.get(/posts/popolari, function(req,res){
});Ma come potete immaginare, se abbiamo un sito con molte pagine, il nostro file router.js diventerebbe difficilissimo da gestire.
Per questo è conveniente separare le nostre routes, creando un file per ogni sub-route.
Nel nostro caso quindi creeremo un file per i post ed uno per le news.
Creiamo le routes per i nostri post in posts.js
var express = require('express');
var router = express.Router();
router.get("/", function(req,res){
res.send("lista dei nostri post");
});
module.exports = router;Come potete vedere questo file è uguale al nostro router principale e risponde alla richiesta per l’indirizzo home: ‘/’
Ora assegneremo il prefisso /posts a questo indirizzo.
Dobbiamo quindi modificare il nostro router nel seguente modo:
var express = require('express'); var router = express.Router(); var posts = require("./posts.js"); // carichiamo il nostro router per i post // servira la home page router.get('/', function(req, res) { res.send('Questa è la home page'); }); router.use("/posts", posts); // importantemodule.exports = router;
Come vedete con la funzione router.use("/posts", posts); carichiamo il router dei post e lo assegniamo al prefisso /posts
In questo modo, ogni route all’interno del file posts.js sarà preceduta dal prefisso /posts
Ora quando facciamo una richiesta all’indirizzo localhost:3000/posts ecco cosa succede:
- Richiesta raggiunge il router.
- Router controlla se ha una funzione configurata per rispondere all’indirizzo /posts
- Router trova il modulo posts.js e utilizza le routes al suo interno
Questo rende il nostro progetto più organizzato e facile da mantenere. Infatti se ora vogliamo inserire una nuova route, per rispondere all’indirizzo /posts/popolari basterebbe inserire la seguente funzione nel file posts.js
router.get(‘/popolari’, function(req,res){
…
});Per rispondere alle richieste per l'indirizzo www.nostro-blog/news il processo è lo stesso:
- creare un file news.js
- inserire le routes senza prefisso /news
- in router.js caricare news.js e assegnare il prefisso /news
Ora siete in grado di strutturare le routes della vostra app usando il router di express.js, cosa aspettate a creare la vostra web app con node.js? datevi da fare!
potete trovare il codice competo per questo tutorial su questa repository GitHub di devnews.it, siete liberi di scaricarlo e usarlo nel vostro progetto. In cambio vi chiedo solamente di condividere questa pagina con i vostri amici su Facebook o Twitter, o di metter mi piace alla nostra pagina Facebook Grazie mille e alla prossima :)
Grazie per aver seguito questa guida. Spero vi sia stata di aiuto e che vi porterà a creare delle meravigliose web app.
