Come definire rotte e metodi di richiesta HTTP in Express

Introduzione

Questo articolo esaminerà come gestire rotte e metodi di richiesta HTTP in un progetto Express. Le rotte gestiscono la navigazione dell’utente verso vari URL in tutta l’applicazione. HTTP, abbreviazione di Hyper Text Transfer Protocol, comunica e facilita i dati dal tuo server Express al browser web.

Imparerete come definire le rotte e usare i metodi di richiesta HTTP GETPOSTPUT, e DELETE per manipolare i dati.

Prequisiti

Per completare questo tutorial, una comprensione di Node.js è utile ma non necessaria. Se vuoi saperne di più su Node.js, controlla la serie How To Code in Node.js.

Impostare il tuo progetto

Poiché Express è un framework Node.js, assicurati di avere Node.js installato da Node.js prima di seguire i prossimi passi. Esegui quanto segue nel tuo terminale:

Crea una nuova directory chiamata node-express-routing per il tuo progetto:

mkdir node-express-routing

Passa nella nuova directory:

cd node-express-routing

Inizializza un nuovo progetto Node con le impostazioni predefinite. Questo includerà il tuo file package.json per accedere alle tue dipendenze:

npm init -y

Crea il tuo file di ingresso, index.js. Qui è dove gestirete le vostre rotte e i metodi di richiesta HTTP:

touch index.js

Installate sia Express che nodemon come dipendenze. Userete nodemon per riavviare continuamente il vostro progetto Express ogni volta che il file index.js cambia.

 
npm install express --save
 
npm install -D nodemon
 

Apri il tuo file package.json con il tuo editor di testo preferito e aggiorna il tuo start script per includere nodemon e il tuo index.js file:

Questo vi permetterà di usare il comando npm start nel vostro terminale per lanciare il vostro server Express e aggiornare le modifiche.

Ora che hai impostato il tuo progetto e configurato nodemon per aggiornare quando rileva cambiamenti nel tuo index.js file, sei pronto per avviare il tuo server Express.

Avviare il tuo server Express

Il tuo server Express è dove gestirai la logica per integrare le tue rotte e i metodi di richiesta HTTP. Configurerai ed eseguirai il tuo server per visualizzare il tuo progetto nel browser.

Per avviare il vostro server Express, richiedete Express nel vostro file index.js e memorizzate un’istanza nella variabile app. Poi, dichiarate una variabile PORT e specificate l’indirizzo :3000.

In seguito, aggiungete .listen() a app e inserite PORT come primo argomento, poi una funzione callback. Il middleware Express .listen() crea un browser locale dall’indirizzo nella vostra variabile PORT per visualizzare le vostre modifiche.

Includete anche express.json() come argomento di app.use(). Questo è per analizzare i dati in arrivo attraverso le richieste HTTP. Una versione precedente si basava sulla dipendenza body-parser, ma da allora Express ha incluso un middleware integrato per l’analisi dei dati.

Esegui il seguente comando nel tuo terminale per avviare il progetto:

npm start

Il tuo progetto è caricato su . Navigate nel vostro browser, e notate quanto segue:

Questo è l’inizio di un’istanza Express in esecuzione. Lavoriamo sulla definizione dei metodi HTTP per popolare il browser.

Definizione del metodo di richiesta HTTP GET

Per visualizzare il tuo progetto, puoi inviare informazioni dal tuo server Express attraverso una GET richiesta, un metodo HTTP.

In index.js, aggiungete .get() alla vostra variabile app, specificare un percorso anonimo e includere un callback che accede agli argomenti request e response:

 app.get('/', (request, response) => { response.send('Hello');});

L’argomento request contiene informazioni sulla richiesta GET, mentre response.send() invia dati al browser. I dati all’interno di response.send() possono essere una stringa, un oggetto o un array.

Ora che abbiamo implementato una richiesta GET, vediamo le rotte e gli altri metodi HTTP.

Comprendere le rotte

Se navighi verso riceverai tutti gli account nel tuo array:

Output

Si può anche filtrare l’ID dell’account usando l’endpoint /:id. Express considera l’ID nell’endpoint /:id come un segnaposto per un parametro utente, e corrisponde a quel valore.

Una volta che si naviga verso , si ottiene un account che corrisponde al parametro /:id:

Output
{ "id": 3, "username": "sarahjane", "role": "guest"}

Progettazione dei metodi di richiesta HTTP POST, PUT e DELETE

I metodi HTTP forniscono funzionalità aggiuntive ai tuoi dati utilizzando le richieste POSTPUT e DELETE. Il metodo di richiesta POST crea nuovi dati nel tuo server, mentre PUT aggiorna le informazioni esistenti. Il metodo di richiesta DELETE rimuove i dati specificati.

POST

Per creare nuovi dati nell’array accounts, è possibile integrare un metodo di richiesta POST.

In index.js, aggiungete .post() alla vostra app variabile, e includete la route'/accounts' come primo argomento:

Spingerete qualsiasi dato in arrivo dalla vostra POST richiesta nell’array accounts e invierete la risposta come oggetto JSON.

Il vostro accounts array contiene ora un nuovo utente:

PUT

È possibile modificare e aggiornare un particolare account attraverso una richiesta PUT.

In index.js, aggiungete .put() alla vostra variabile app e includete il percorso '/accounts/:id' come primo argomento. Troverete l’ID dell’account inserito e imposterete una condizione per aggiornare con i nuovi dati:

Ora siete in grado di aggiornare i dati nell’array accounts. Se un utente cambia il suo "role":

{ "role": "guest"}

Nota che "role" si aggiorna a guest da admin in

Output
{ "id": 1, "username": "paulhal", "role": "guest"}

DELETE

È possibile eliminare utenti e dati utilizzando il metodo di richiesta DELETE.

In index.js, aggiungete .delete() alla vostra variabile app e includete '/accounts/:id' come primo argomento. Filtrerete l’array accounts e restituirete l’account da eliminare.

Se si invia una richiesta DELETE a , questo rimuoverà l’account con il /:id di 1 dall’array accounts.

Conclusione

Specificare le rotte e usare i metodi di richiesta HTTP aiuta a generare prestazioni aggiuntive quando si creano, aggiornano e cancellano utenti e dati nel server Express.