Realizato da

Pubblicato il

nodejs

express

router

webapp


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

Vogliamo 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.js

Se 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); // importante
module.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.

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)