Comprensione del routing ExpressJS

introduzione

Express è un noto framework web Node.js. Tra le sue funzionalità, fornisce un wrapper per il routing. Express Router aiuta nella creazione di gestori di percorsi. In questo tutorial, imparerai come lavorare con Express Router.

Iniziamo.

Crea una nuova directory per la tua applicazione. Esegui il comando per inizializzare npm nella directory appena creata.

npm init -y

L'unica dipendenza di cui avrai bisogno è espressa, quindi vai avanti e installala.

installazione npm --save express

Alla fine, il tuo file package.json dovrebbe assomigliare a questo.

# package.json "name": "express-router", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test" : "echo \" Errore: nessun test specificato \ "&& exit 1", "keywords": [], "autore": "", "licenza": "ISC", "dipendenze": "express": " ^ 4.16.2 "

Ora crea un nuovo file chiamato index.js, che sarà il tuo file di ingresso come indicato nel tuo package.json.

Per ora, hai solo bisogno di una configurazione di base come questa:

# index.js const express = require ('express') const app = express () app.listen (3000, () => console.log ('Server in esecuzione alla porta 3000'))

Routing di base

Inizia creando alcuni percorsi di base come ho di seguito.

# index.js ... const router = express.Router () // 1 router.get ('/', (req, res) => // 2 res.send ('Questa è la homepage!')) router .post ('/ contact', (req, res) => // 3 res.send ('Questa è la pagina di contatto con una richiesta POST')) app.use ('/', router) // 4 ... 
  1. Viene creata un'istanza di Express Router. L'istanza è impostata su una variabile denominata router. Questa variabile verrà utilizzata ogni volta che si desidera creare un percorso.
  2. Una nuova rotta è definita per il metodo GET alla radice dell'applicazione. È collegato all'istanza della classe Express Router.
  3. Una nuova rotta è definita per il metodo POST alla pagina di contatto dell'applicazione. È collegato all'istanza della classe Express Router.
  4. Questo monta del middleware che verrà utilizzato per gestire i tuoi percorsi. Qui dici alla tua app che vuoi utilizzare il router (che è l'istanza di Express Router) per ogni richiesta fatta all'app che corrisponde al percorso '/'. Se non riesci a montare un percorso su questo middleware, verrà eseguito per ogni richiesta fatta all'app.

Supponiamo che tu avessi il codice qui sotto.

app.use ('/ utente', router)

Questo corrisponderà a tutti i seguenti: /profilo utente, utente / profile / modificare, utente / cruscotto / article / vista, e così via.

Metodi di percorso

Nel codice precedente, hai allegato un metodo di instradamento a un'istanza di Express Router. Il metodo route è derivato da uno dei metodi HTTP e collegato all'istanza di Express Router come hai fatto tu.

Express supporta i seguenti metodi di routing che corrispondono ai metodi HTTP: ottenere, inviare, mettere, capo, Elimina, opzioni, traccia, copia, serratura, MKCOL, mossa, epurazione, sbloccare, rapporto, MKACTIVITY, check-out, fondersi, m-search, notificare, sottoscrivi, Annulla l'iscrizione, toppa, e ricerca.

C'è un metodo di routing app.all () che non è derivato da alcun metodo HTTP. Questo metodo di routing viene caricato per le funzioni in un percorso specificato per tutti i metodi di richiesta.

Di 'che hai il codice qui sotto nella tua applicazione.

app.all ('/ books', (req, res) => res.send ('Questo accede alla sezione del libro'))

Questo verrà eseguito per le richieste a "/ books" quando si utilizza GET, POST, PUT o qualsiasi metodo di richiesta HTTP.

Percorsi

Un percorso percorso viene utilizzato per definire un endpoint in cui è possibile effettuare richieste. Lo fa con la combinazione di un metodo di richiesta. In Express, i percorsi di instradamento possono essere schemi di corde o espressioni regolari.

Ecco alcuni esempi che puoi aggiungere al tuo index.js file.

# index.js router.get ('/ about', (req, res) => res.send ('Questo percorso di percorso corrisponderà a / about')) router.get ('/ profile.txt', ( req, res) => res.send ('Questo percorso corrisponderà a /profile.txt')))

Vediamo un percorso della rotta usando i modelli di stringhe.

router.get ('/ ab + xy', (req, res) => // 1 res.send ('ab + xy')) router.get ('/ ab (xy)? z', (req , res) => // 2 res.send ('/ ab (xy)? z'))
  1. Il percorso corrisponderà abxy, abbxy, abbbxy, e così via.
  2. Il percorso corrisponderà /abz e /abxyz.

Parametri di percorso

Questi vengono utilizzati per acquisire i valori specificati in una determinata posizione nell'URL. Sono chiamati segmenti di URL. I valori acquisiti sono resi disponibili in req.params oggetto, utilizzando il nome del parametro del percorso specificato nel percorso come le chiavi dei valori.

Ecco un esempio.

Se hai un percorso di instradamento simile a questo nella tua applicazione: / utenti /: userId / articoli /:articleId

L'URL richiesto sarà simile a questo: http: // localhost: 3000 / users / 19 / articles / 104

Nei req.params sarà disponibile quanto segue: "userId": "19", "bookId": "104"

Vai avanti e crea un nuovo percorso nella tua applicazione, utilizzando il percorso percorso sopra.

router.get ('/ users /: userId / articles /: articleId', (req, res) => res.send (req.params))

Avviare il server e puntare il browser su http: // localhost: 3000 / users / 19 / articles / 104. Vedrai il req.params oggetto visualizzato nel browser.

Il nome dei parametri del percorso deve essere composto da caratteri word ([A-Za-z0-9_]).

Andiamo oltre!

Di 'che vuoi avere un percorso di instradamento chiamato / Utenti /: nome, dove il nome dell'utente viene passato nell'URL e l'applicazione visualizza il nome insieme a una stringa. Come pensi che possa essere raggiunto?

Vai avanti e provalo prima tu stesso.

Ecco come dovrebbe essere il percorso.

router.get ('/ users /: name', (req, res) => res.send ('Benvenuto, $ req.params.name!'))

Quando visiti http: // localhost: 3000 / users / vivian, dovresti vedere benvenuto, Vivian! visualizzato nel browser.

Login Routes

Vediamo come creare un percorso di accesso in Express. I percorsi di accesso richiedono due azioni su un singolo percorso di instradamento. Le azioni saranno differenziate dal metodo di percorso utilizzato. Ecco come apparirà.

router.get ('/ login', (req, res) => res.send ('Questo dovrebbe portare al modulo di login')) router.post ('/ login', (req, res) => res.send ('Questo è utilizzato nell'elaborazione del modulo'))

Dopo averlo fatto, il modulo del tuo negozio dovrebbe avere un'azione il cui valore è il percorso definito con il metodo POST HTTP. Ecco come dovrebbe apparire.

Quando viene fatto clic sul pulsante di invio del modulo, viene chiamato il router specificato. La differenza tra entrambi i percorsi di instradamento come sopra indicato è il POST HTTP. Questo è il modo in cui l'applicazione determina quale è responsabile della gestione dei dati passati attraverso il modulo.

Un altro aspetto in cui questo può essere sperimentato riguarda l'editing e l'aggiornamento delle risorse.

app.route ()

app.route () può essere utilizzato per creare una catena di gestori di percorsi per un percorso di percorso specifico.

Utilizzando l'esempio del percorso di accesso, ecco come utilizzerai app.route ().

app.route ('/ login') .get ((res, req) => res.send ('Questo dovrebbe portare al modulo di login')) .post ((res, req) => res. invia ('Questo è usato nell'elaborazione del modulo'))

Puoi aggiungere più gestori di percorsi di quanti ne abbiamo sopra.

Conclusione

A questo punto, dovresti sapere come funziona il routing in Express. Hai imparato come impostare il routing di base e anche come lavorare con i metodi ei percorsi del percorso. Hai visto come utilizzare i parametri del percorso e recuperare i valori inviati tramite l'URL.

Se stai cercando altre risorse JavaScript da studiare o da utilizzare nel tuo lavoro, dai un'occhiata a ciò che abbiamo a disposizione su Envato Market.

Con questa conoscenza, puoi andare oltre per creare un'applicazione Express con un routing complesso.