In questo tutorial, studieremo il framework Express. Questo framework è costruito in modo tale da agire come un framework per applicazioni web Node.js minimale e flessibile, fornendo un robusto set di funzionalità per la creazione di applicazioni web a pagina singola, multipagina e ibrida.
In questo tutorial imparerai-
- Cos'è Express.js?
- Installazione e utilizzo di Express
- Cosa sono i percorsi?
- Esempio di server Web che utilizza express.js
Cos'è Express.js?
Express.js è un framework per server di applicazioni Web Node js, progettato specificamente per la creazione di applicazioni Web a pagina singola, multipagina e ibride.
È diventato il framework server standard per node.js. Express è la parte backend di qualcosa noto come stack MEAN.
MEAN è uno stack di software JavaScript gratuito e open source per la creazione di siti Web dinamici e applicazioni Web che ha i seguenti componenti;
1) MongoDB - Il database NoSQL standard
2) Express.js - Il framework di applicazioni web predefinito
3) Angular.js - Il framework JavaScript MVC utilizzato per le applicazioni web
4) Node.js - Framework utilizzato per applicazioni di rete e lato server scalabili.
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 e POST e DELETE.
Installazione e utilizzo di Express
Express viene installato tramite Node Package Manager. Questo può essere fatto eseguendo la seguente riga nella riga di comando
npm installa express
Il comando precedente richiede al gestore di pacchetti Node di scaricare i moduli rapidi richiesti e installarli di conseguenza.
Usiamo il nostro framework Express appena installato e creiamo una semplice applicazione "Hello World".
La nostra applicazione creerà un semplice modulo server che ascolterà sulla porta numero 3000. Nel nostro esempio, se una richiesta viene effettuata tramite il browser su questo numero di 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() {});
Spiegazione del codice:
- Nella nostra prima riga di codice, stiamo usando la funzione require per includere il "modulo express".
- Prima di poter iniziare a utilizzare il modulo express, dobbiamo crearne un oggetto.
- Qui stiamo creando una funzione di callback. Questa funzione verrà chiamata ogni volta che qualcuno accede alla radice della nostra applicazione web che è http: // localhost: 3000 . La funzione di callback verrà utilizzata per inviare la stringa "Hello World" alla pagina web.
- 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 a uno di inviare il contenuto alla pagina web.
- Stiamo quindi utilizzando la funzione di ascolto per fare in modo che la nostra applicazione server ascolti le richieste dei client sulla porta n. 3000. Puoi specificare qualsiasi porta disponibile qui.
Se il comando viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'uscita,
- Puoi vedere chiaramente che se navighiamo all'URL di localhost sulla porta 3000, vedrai la stringa "Hello World" visualizzata nella pagina.
- Poiché nel nostro codice abbiamo menzionato specificamente che il server ascolta sulla porta n. 3000, siamo in grado di visualizzare l'output durante la navigazione a questo URL.
Cosa sono i percorsi?
Il routing determina il modo in cui un'applicazione risponde a una richiesta del client a un particolare endpoint.
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/Bookshttp://localhost:3000/Students
Nell'esempio sopra,
- Se viene effettuata una richiesta GET per il primo URL, la risposta dovrebbe idealmente essere un elenco di libri.
- Se la richiesta GET viene effettuata per il secondo URL, la risposta dovrebbe idealmente essere un elenco di Studenti.
- Quindi, in base all'URL a cui si accede, verrà richiamata una diversa funzionalità sul server web e, di conseguenza, la risposta verrà 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 di una rotta è mostrata di seguito
app.METHOD(PATH, HANDLER)
In cui,
1) l'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 è abbinata.
Diamo un'occhiata a un esempio di come possiamo implementare rotte in express. Il nostro esempio creerà 3 percorsi come
- Una rotta / Node che mostrerà la stringa "Tutorial on Node" se si accede a questa rotta
- A / Rotta angolare che mostrerà la stringa "Tutorial su Angular" se si accede a questa rotta
- Un percorso predefinito / che visualizzerà la stringa "Welcome to Guru99 Tutorials".
Il nostro codice di base rimarrà lo stesso degli esempi precedenti. Lo snippet di seguito è 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');}));
Spiegazione del codice:
- Qui stiamo definendo una rotta se l'URL http: // localhost: 3000 / Node è selezionato nel browser. Alla rotta, stiamo allegando una funzione di callback che verrà chiamata quando navigheremo all'URL del nodo.
La 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 in corso. A volte è possibile inviare parametri aggiuntivi come parte della richiesta in corso, e quindi il parametro "req" può essere utilizzato per trovare i parametri aggiuntivi inviati.
- Stiamo usando la funzione send per inviare la stringa "Tutorial on Node" al client se viene scelta la route Node.
- Qui stiamo definendo una rotta se l'URL http: // localhost: 3000 / Angular è selezionato nel browser. Alla rotta, stiamo allegando una funzione di callback che verrà chiamata quando navigheremo all'URL angolare.
- Stiamo utilizzando la funzione di invio per inviare la stringa "Tutorial su Angular" al client se viene scelto il percorso Angular.
- Questa è la rotta predefinita che viene scelta quando si accede alla rotta dell'applicazione - http: // localhost: 3000 . Quando viene scelto il percorso predefinito, verrà inviato al client il messaggio "Welcome to Guru99 Tutorials".
Se il comando viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'uscita,
- Puoi vedere chiaramente che se navighiamo all'URL di localhost sulla porta 3000, vedrai la stringa 'Welcome to Guru99 Tutorials' visualizzata nella pagina.
- Perché nel nostro codice abbiamo menzionato che il nostro URL predefinito visualizzerebbe questo messaggio.
Dall'uscita,
- È possibile vedere che se l'URL è stato modificato in / Node, verrà scelta la rispettiva route del nodo e verrà visualizzata la stringa "Tutorial On Node".
Dall'uscita,
- Puoi vedere che se l'URL è stato cambiato in / Angular, verrà scelto il rispettivo percorso del nodo e verrà visualizzata la stringa "Tutorial su Angular".
Esempio di server Web che utilizza express.js
Dal nostro esempio precedente, abbiamo visto come possiamo decidere quale output mostrare in base al routing. Questo tipo di routing è ciò che viene utilizzato nella maggior parte delle applicazioni Web moderne. L'altra parte di un server web riguarda l'utilizzo di modelli in Node js.
Quando si creano applicazioni Node rapide al volo, un modo semplice e veloce è utilizzare i modelli per l'applicazione. Ci sono molti framework disponibili sul mercato per creare modelli. Nel nostro caso, prenderemo l'esempio del framework jade per la creazione di modelli.
Jade viene installato tramite il gestore dei pacchetti Node. Questo può essere fatto eseguendo la seguente riga nella riga di comando
npm installa giada
Il comando precedente richiede al gestore dei pacchetti Node di scaricare i moduli jade richiesti e installarli di conseguenza.
NOTA: nell'ultima versione di Node jade è stato deprecato. Invece, usa il carlino.
Usiamo il nostro framework jade appena installato e creiamo alcuni modelli di base.
Passaggio 1) Il primo passaggio è creare un modello di giada. Crea un file chiamato index.jade e inserisci il codice seguente. Assicurati di creare il file nella cartella "visualizzazioni"
- Qui stiamo specificando che il titolo della pagina verrà modificato in qualsiasi valore venga passato quando viene richiamato questo modello.
- Stiamo anche specificando che il testo nel tag di intestazione verrà sostituito con tutto ciò che viene passato nel modello jade.
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() {});
Spiegazione del codice:
- La prima cosa da specificare nell'applicazione è il "motore di visualizzazione" che verrà utilizzato per il rendering dei modelli. Dato che useremo jade per rendere i nostri modelli, lo specifichiamo di conseguenza.
- La funzione di rendering viene utilizzata per eseguire il rendering di una pagina web. Nel nostro esempio, stiamo eseguendo il rendering del modello (index.jade) che è stato creato in precedenza.
- Stiamo passando i valori di "Guru99" e "Welcome" rispettivamente ai parametri "title" e "message". Questi valori verranno sostituiti dai parametri "title" e "message" dichiarati nel modello index.jade.
Se il comando viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
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 modello jade che viene richiamato nella nostra applicazione node js.
Sommario
- Il framework express è il framework più comune utilizzato per lo sviluppo di applicazioni Node js. Il framework express si basa sul framework node.js e aiuta nello sviluppo rapido di applicazioni basate su server.
- Le rotte vengono utilizzate per deviare gli utenti verso diverse parti delle applicazioni web in base alla richiesta effettuata. La risposta per ogni percorso può essere variata a seconda di ciò che deve essere mostrato all'utente.
- I modelli possono essere utilizzati per iniettare contenuto in modo efficiente. Jade è uno dei motori di creazione di modelli più popolari utilizzati nelle applicazioni Node.js.