Tutorial sul framework Node.js Express.js

In questo tutorial, studieremo il framework Express. Questo framework è stato progettato per essere un framework per applicazioni web Node.js minimale e flessibile, che offre un solido set di funzionalità per la creazione di applicazioni web a pagina singola, a più pagine e ibride.

Cos'è Express.js?

Express.js è un framework per server di applicazioni web basato su Node.js, progettato specificamente per la creazione di applicazioni web a pagina singola, a più pagine e ibride.

È diventato il framework server standard per Node.js. Express è la parte backend di quello che è noto come stack MEAN.

Esprimere il routing a livelli e il middleware sul core Node.js HTTP, flussi e API per eventi.

The MEAN è gratuito e open source JavaCopione stack software per la creazione di siti web dinamici e applicazioni web che comprende i seguenti componenti;

1) MongoDB — Il database NoSQL standard

2) Express.js — Il framework predefinito per le applicazioni web

3) AngularJS - Il JavaFramework script MVC utilizzato per le applicazioni web

4) Node.js — Framework utilizzato per applicazioni scalabili lato server e di rete.

Il framework Express.js semplifica lo sviluppo di un'applicazione che può essere utilizzata per gestire più tipi di richieste come le richieste GET, PUT, POST e DELETE.

Installazione e utilizzo di Express

Express viene installato tramite il Node Package Manager. Questo può essere fatto eseguendo la seguente riga nella riga di comando

npm installa espresso

Il comando sopra riportato richiede al Node Package Manager di scaricare express richiesto moduli e installarli di conseguenza.

Nota sulla versione: npm ora installa Express 5.2; molti progetti bloccano ancora Express 4. Entrambi eseguono gli esempi seguenti su un rilascio di Node.js supportato.

Usiamo il nostro framework Express appena installato e creiamo una semplice applicazione "Hello World".

La nostra applicazione creerà un semplice modulo server che rimarrà in ascolto sulla porta numero 3000. Nel nostro esempio, se viene effettuata una richiesta tramite il browser su questa porta, l'applicazione server invierà una risposta "Hello World" al client.

var express=require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('Hello World!');
});
var server=app.listen(3000,function() {});

Code Spiegazione:

1. Nella nostra prima riga di codice, utilizziamo la funzione require per includere il "modulo express".
2. Prima di poter iniziare a utilizzare il modulo express, dobbiamo crearne un oggetto.
3. Qui stiamo creando una funzione di callback. Questa funzione verrà chiamata ogni volta che qualcuno accede alla directory principale della nostra applicazione web, ovvero http://localhost:3000. La funzione di callback verrà utilizzata per inviare la stringa 'Hello World' alla pagina web.
4. Nella funzione di callback, inviamo la stringa "Hello World" al client. Il parametro 'res' viene utilizzato per rimandare il contenuto alla pagina web. Questo parametro "res" è qualcosa che viene fornito dal modulo "richiesta" per consentire di inviare nuovamente il contenuto alla pagina web.
5. Utilizziamo quindi la funzione `listen` per fare in modo che la nostra applicazione server rimanga in ascolto delle richieste dei client sulla porta 3000. Qui è possibile specificare qualsiasi porta disponibile.

Se il comando viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.

Produzione:

Dall'uscita,

• Puoi vedere chiaramente che se navighi su URL Accedendo a localhost sulla porta 3000, vedrai la stringa 'Hello World' visualizzata sulla pagina.
• Poiché nel nostro codice abbiamo specificato che il server deve rimanere in ascolto sulla porta 3000, siamo in grado di visualizzare l'output quando navighiamo a questo indirizzo. URL.

Cosa sono i percorsi?

Un singolo percorso radice è solo il punto di partenza.

Il routing determina il modo in cui un'applicazione risponde a una richiesta del client a un endpoint specifico.

Ad esempio, un client può effettuare una richiesta http GET, POST, PUT o DELETE per vari URL come quelli mostrati di seguito;

http://localhost:3000/Books
http://localhost:3000/Students

Nell'esempio sopra,

• Se viene effettuata una richiesta GET per la prima URL, quindi la risposta dovrebbe idealmente essere un elenco di libri.
• Se la richiesta GET viene effettuata per la seconda URL, quindi la risposta dovrebbe idealmente essere un elenco di studenti.
• Quindi, in base al URL Quando si accede a una determinata pagina, viene richiamata una diversa funzionalità sul server web e, di conseguenza, la risposta viene inviata al client. Questo è il concetto di routing.

Ogni rotta può avere una o più funzioni di gestione, che vengono eseguite quando la rotta viene abbinata.

La sintassi generale per una rotta è mostrata di seguito

app.METHOD(PATH, HANDLER)

In cui,

1) app è un'istanza del modulo express

2) METHOD è un metodo di richiesta HTTP (GET, POST, PUT o DELETE)

3) PATH è un percorso sul server.

4) HANDLER è la funzione eseguita quando la rotta viene abbinata.

⚠️ espresso 5 Nota: Queste firme sono rimaste invariate, ma app.del() è diventato app.delete(), res.sendfile() è diventato res.sendFile() e i caratteri jolly ora necessitano di nomi come /*splat.

Vediamo un esempio di come possiamo implementare le route in Express. Il nostro esempio creerà 3 route come

1. Una rotta /Nodo che visualizzerà la stringa "Tutorial sul nodo" se si accede a questa rotta
2. Una rotta /Angular che visualizzerà la stringa "Tutorial su Angular" se si accede a questa rotta
3. Un percorso predefinito / che visualizzerà la stringa "Benvenuti a Guru99 tutorial.

Il nostro codice di base rimarrà lo stesso degli esempi precedenti. Lo snippet seguente è un componente aggiuntivo per mostrare come viene implementato il routing.

var express = require('express');
var app = express();
app.route('/Node').get(function(req,res)
{
    res.send("Tutorial on Node");
});
app.route('/Angular').get(function(req,res)
{
    res.send("Tutorial on Angular");
});
app.get('/',function(req,res){
    res.send('Welcome to Guru99 Tutorials');
});

Code Spiegazione:

1. Qui stiamo definendo un percorso se il URL http://localhost:3000/Node is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Node URLLa funzione ha 2 parametri.
   • Il parametro principale che utilizzeremo è il parametro 'res', che può essere utilizzato per inviare informazioni al client.
   • Il parametro 'req' contiene informazioni sulla richiesta effettuata. A volte potrebbero essere inviati parametri aggiuntivi come parte della richiesta effettuata e quindi il parametro "req" può essere utilizzato per trovare i parametri aggiuntivi inviati.
2. Stiamo utilizzando la funzione di invio per inviare la stringa "Tutorial on Node" al client se viene scelta la rotta Node.
3. Qui stiamo definendo un percorso se il URL http://localhost:3000/Angular is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Angular URL.
4. Stiamo utilizzando la funzione send per inviare la stringa "Tutorial on Angular" al client se viene scelta la rotta Angular.
5. Questo è il percorso predefinito che viene scelto quando si accede alla radice dell'applicazione: http://localhost:3000. Quando viene scelto il percorso predefinito, viene visualizzato il messaggio "Benvenuti in GuruVerranno inviati al cliente 99 tutorial.

Se il comando viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.

Produzione:

Dall'uscita,

• Puoi vedere chiaramente che se navighi su URL di localhost sulla porta 3000, vedrai la stringa 'Benvenuti a Guru99 tutorial visualizzati sulla pagina.
• Perché nel nostro codice abbiamo menzionato che il nostro predefinito URL verrebbe visualizzato questo messaggio.

Successivamente, accedi a /Node.

Dall'uscita,

• Puoi vedere che se il URL è stato modificato in /Node, verrà scelto il percorso Node corrispondente e verrà visualizzata la stringa "Tutorial su Node".

Quindi, accedi a /Angular.

Dall'uscita,

• Puoi vedere che se il URL è stato modificato in /Angular, verrà selezionata la relativa rotta Node e verrà visualizzata la stringa "Tutorial su Angular".

Server Web di esempio che utilizza express.js

Dall'esempio precedente abbiamo visto come possiamo decidere quale output mostrare in base al routing. Questo tipo di routing è quello utilizzato nella maggior parte delle moderne applicazioni web. L'altra parte di un server web riguarda l'utilizzo dei template in Node.js.

Quando si creano rapidamente applicazioni Node.js al volo, un modo semplice e veloce è quello di utilizzare i template. Esistono molti framework sul mercato per la creazione di template. In questo caso, prenderemo come esempio il framework Jade.

Jade viene installato tramite il Node Package Manager. Questo può essere fatto eseguendo la seguente riga nella riga di comando.

npm installa giada

Il comando sopra riportato richiede al Node Package Manager di scaricare i moduli Jade necessari e di installarli di conseguenza.

NOTA: Nell'ultima versione di Node jade è stato deprecato. Invece, usa il carlino.

⚠️ Equivalente moderno: install CarlinoRinominare index.jade in index.pug e impostare app.set('view engine','pug'). Il pacchetto jade non riceve aggiornamenti; i passaggi seguenti vengono comunque eseguiti.

Utilizziamo il framework Jade appena installato e creiamo alcuni modelli di base.

Passo 1) Il primo passo consiste nel creare un template Jade. Crea un file chiamato index.jade e inserisci il codice seguente. Assicurati di creare il file nella cartella "views".

1. Qui stiamo specificando che il titolo della pagina verrà modificato in qualunque valore venga passato quando questo modello viene richiamato.
2. Specifichiamo inoltre che il testo nel tag di intestazione verrà sostituito con qualsiasi contenuto venga passato al template Jade.

Di seguito è riportato il codice dell'applicazione che lo visualizza.

var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function(req,res)
{
res.render('index',
{title:'Guru99',message:'Welcome'})
});
var server=app.listen(3000,function() {});

Code Spiegazione:

1. La prima cosa da specificare nell'applicazione è il "motore di visualizzazione" che verrà utilizzato per il rendering dei template. Poiché useremo Jade per il rendering dei nostri template, lo specifichiamo di conseguenza.
2. La funzione render viene utilizzata per eseguire il rendering di una pagina web. Nel nostro esempio, stiamo eseguendo il rendering del modello (index.jade) creato in precedenza.
3. Stiamo trasmettendo i valori di “Guru99” e “Welcome” rispettivamente ai parametri “title” e “message”. Questi valori verranno sostituiti dai parametri 'title' e 'message' dichiarati nel template index.jade.

Se il comando viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.

Produzione:

Dall'uscita,

• Possiamo vedere che il titolo della pagina viene impostato su "Guru99” e l’intestazione della pagina viene impostata su “Benvenuto”.
• Ciò è dovuto al template Jade che viene richiamato nella nostra applicazione Node.js.

DOMANDE FREQUENTI