Esercizio - Parametri di route e query

• 4 minuti

In qualità di tecnico di Tailwind Traders, creare le API in modo che siano efficienti sia per il server che per il client, limitando la quantità di dati inviati o restituiti dall'API.

I dati si trovano in genere in un database o in un'altra risorsa di archiviazione. Le dimensioni dei dati possono essere enormi. Quando un utente richiede tutti i dati per i prodotti, la risposta può includere migliaia o addirittura milioni di record. Una richiesta come questa può comportare un notevole carico sul database. Inoltre, la disponibilità e il rendering della risposta sul client impiegano tempi lunghi.

Per evitare questo scenario, è consigliabile limitare le dimensioni della risposta:

• Usare i parametri di route per richiedere un record specifico
• Usare parametri di query per specificare un subset di record.

Nell'esercizio vengono illustrate entrambe le tecniche.

Aprire il progetto nel contenitore di sviluppo

Configurare i file per il progetto

1. Per esaminare il progetto per questo modulo, aprire la cartella ./nodejs-http/exercise-express-routing/parameters nell'editor di codice.

   La directory parameters deve contenere questi file:

   file	Scopo
   app.js	Questo file contiene l'applicazione Express.
   package.json	Questo file contiene le dipendenze per il progetto.
   package-lock.json	Questo file contiene le versioni esatte delle dipendenze.

2. Fare clic con il pulsante destro del mouse sul nome della cartella /nodejs-http/exercise-express-routing/parameters in Esplora file e selezionare Apri nel terminale integrato.

3. Nel terminale eseguire il comando seguente per procedere all'installazione delle dipendenze del progetto:

   npm install
   

4. Aprire il file app.js per esaminarlo. Il file dovrebbe avere un aspetto simile a questo:

   const express = require('express')
   const app = express()
   const port = 3000
   
   const products = [
   {
     id: 1,
     name: "Ivanhoe",
     author: "Sir Walter Scott",
   },
   {
     id: 2,
     name: "Colour Magic",
     author: "Terry Pratchett",
   },
   {
     id: 3,
     name: "The Bluest eye",
     author: "Toni Morrison",
   },
   ];
   
   app.get('/', (req, res) => res.send('Hello API!'));
   
   app.get("/products/:id", (req, res) => {});
   
   app.get('/products', (req, res) => {});
   
   app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`));
   

   Questo codice JavaScript crea un server Express.js di base. Definisce un array di products e imposta tre route: radice (/), /products/:id e /products. Il server è in ascolto sulla porta 3000. Le route /products/:id e /products sono segnaposto senza alcuna funzionalità.

   I dati sono hardcoded per semplificare l'esercizio. In uno scenario reale, i dati provengono da un database o da un'altra risorsa di archiviazione.

Implementare la route del prodotto per restituire un singolo prodotto

Il codice contiene un'applicazione Express. Il passaggio successivo consiste nell'implementare due route:

• /products/:id: questa route deve restituire un singolo prodotto.
• /products: questa route deve restituire tutti i prodotti oppure i prodotti richiesti dai parametri di query.

1. Per implementare la route /products/:id, individuare il codice seguente nel file app.js nella directory parameters:

   app.get("/products/:id", (req, res) => {});
   

   Sostituirla con questo codice:

   app.get("/products/:id", (req, res) => {
     res.json(products.find(p => p.id === +req.params.id));
   });
   

2. Nel terminale immettere il comando seguente per eseguire l'app:

   node app.js
   

3. Quando in Visual Studio Code viene visualizzata la notifica di apertura del browser, selezionare Apri nel browser.

4. Aggiungere l'elemento seguente alla fine dell'URL:

   /products/1
   

   L'output è il seguente:

   {
     "id": 1,
     "name": "Ivanhoe",
     "author": "Sir Walter Scott"
   }
   

   Complimenti. La route è stata implementata correttamente. L'app usa il parametro di route id per trovare un prodotto specifico.

5. Nel terminale, selezionare CTRL+C per arrestare l'applicazione.

Implementare la route dei prodotti per restituire un elenco di prodotti

1. Per implementare la route /products, individuare il codice seguente:

   app.get("/products", (req, res) => {});
   

   Sostituirla con questo codice:

   app.get("/products", (req, res) => {
     const page = +req.query.page;
     const pageSize = +req.query.pageSize;
   
     if (page && pageSize) {
       const start = (page - 1) * pageSize;
       const end = start + pageSize;
       res.json(products.slice(start, end));
     } else {
       res.json(products);
     }
   });
   

2. Nel terminale eseguire il comando seguente per avviare l'app e testare il codice:

   node app.js
   

3. Quando in Visual Studio Code viene visualizzata la notifica di apertura del browser, selezionare Apri nel browser.

4. Aggiungere l'elemento seguente alla fine dell'URL:

   /products?page=1&pageSize=2
   

   L'output è il seguente:

   [{
     "id": 1,
     "name": "Ivanhoe",
     "author": "Sir Walter Scott"
   },
   {
     "id": 2,
     "name": "Colour Magic",
     "author": "Terry Pratchett"
   }]
   

   La risposta mostra i primi due o tre record. Questa risposta significa che i parametri di query page e pageSize hanno filtrato le dimensioni della risposta dall'elenco completo a due elementi.

5. Modificare l'URL per usare la route products?page=2&pageSize=2 seguente e modificare il numero di pagine da uno a due. La risposta è:

   [{
     "id": 3,
     "name": "The Bluest eye",
     "author": "Toni Morrison"
   }]
   

Poiché il codice contiene solo tre record, la seconda pagina deve contenere un solo record.

1. Nel terminale, selezionare CTRL+C per arrestare l'applicazione.

I parametri di query sono stati applicati correttamente per limitare la risposta.