Övning – Routnings- och frågeparametrar

4 minuter

Som tekniker för Tailwind Traders skapar du dina API:er för att vara effektiva både för servern och klienten genom att begränsa mängden data som skickas eller returneras från API:et.

Data finns vanligtvis i en databas eller annan lagring. Storleken på data kan vara enorm. När en användare ber om alla data för produkterna kan svaret vara tusentals eller till och med miljontals poster. En begäran som detta kan medföra en enorm belastning på en databas. Det tar också lång tid att hantera och återge svaret på klienten.

För att undvika det scenariot är det en bra idé att begränsa storleken på svaret:

Använda routningsparametrar för att be om en specifik post
Använd frågeparametrar till att ange en delmängd av poster.

I den här övningen lär du dig båda teknikerna.

Starta processen för att skapa ett nytt GitHub Codespace på grenen main av MicrosoftDocs/node-essentials GitHub-lagringsplatsen.

Öppna det här projektet i GitHub Codespaces
På sidan Skapa kodområde granskar du konfigurationsinställningarna för kodområdet och väljer sedan Skapa nytt kodområde
Vänta tills kodområdet har startats. Den här startprocessen kan ta några minuter.
Öppna en ny terminal i kodområdet.

Dricks

Du kan använda huvudmenyn för att navigera till menyalternativet Terminal och sedan välja alternativet Ny terminal .
Kontrollera att Node.js är installerat i din miljö:
```
node --version
```
Stäng terminalen.
De återstående övningarna i det här projektet sker i samband med den här utvecklingscontainern.

Öppna Visual Studio Code i kontexten för en tom katalog.
Kontrollera att tillägget Dev Containers är installerat i Visual Studio Code.
Öppna en ny terminal i redigeraren.

Dricks

Du kan använda huvudmenyn för att navigera till menyalternativet Terminal och sedan välja alternativet Ny terminal .
Klona GitHub-lagringsplatsen MicrosoftDocs/node-essentials till den aktuella katalogen.
```
git clone https://github.com/MicrosoftDocs/node-essentials.git .
```
Öppna mappen som du klonade GitHub-lagringsplatsen till.
Öppna kommandopaletten, sök efter Dev Containers-kommandona och välj sedan Dev Containers: Reopen in Container (Dev Containers: Reopen in Container).

Dricks

Visual Studio Code kan automatiskt uppmana dig att öppna den befintliga mappen i en utvecklingscontainer. Detta är funktionellt likvärdigt med att använda kommandopaletten för att öppna den aktuella arbetsytan igen i en container.
Kontrollera att Node.js är installerat i din miljö:
```
node --version
```
Stäng terminalen.
De återstående övningarna i det här projektet sker i samband med den här utvecklingscontainern.

Konfigurera filer för projektet

Om du vill granska projektet för den här modulen öppnar du ./nodejs-http/exercise-express-routing/parameters mappen i kodredigeraren.

Parameterkatalogen ska innehålla följande filer:

Fil	Syfte
`app.js`	Den här filen innehåller Express-programmet.
`package.json`	Den här filen innehåller beroenden för projektet.
`package-lock.json`	Den här filen innehåller de exakta versionerna av beroendena.

Högerklicka på mappnamnet i utforskaren /nodejs-http/exercise-express-routing/parameters och välj Öppna i integrerad terminal.
I terminalen kör du följande kommando för att installera projektets beroenden:
```
npm install
```

Öppna app.js för att kontrollera den. Filen bör se ut så här:

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}`));

Den här JavaScript-koden skapar en grundläggande Express.js-server. Den definierar en matris med products och konfigurerar tre vägar: rot (/), /products/:idoch /products. Servern lyssnar på port 3000. Vägarna /products/:id och /products är platshållare utan funktioner ännu.

Data är hårdkodade för att förenkla övningen. I ett verkligt scenario skulle data komma från en databas eller annan lagring.

Implementera produktväg för att returnera en enskild produkt

Koden innehåller ett Express-program. Nästa steg är att implementera två vägar:

/products/:id: Den här vägen ska returnera en enskild produkt.
/products: Den här vägen bör returnera alla produkter, eller så många produkter som frågar efter parametrar.

Om du vill implementera vägen /products/:idletar du upp följande kod i filen app.js i parameterkatalogen:

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

Ersätt den med den här koden:

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

Kör appen genom att köra följande kommando i terminalen:
```
node app.js
```
När Visual Studio Code visar meddelandet om att öppna webbläsaren väljer du Öppna i webbläsaren.
Lägg till följande i slutet av URL:en:
```
/products/1
```
Resultatet är:
```
{
  "id": 1,
  "name": "Ivanhoe",
  "author": "Sir Walter Scott"
}
```
Grattis! Du har implementerat vägen korrekt. Appen använder routningsparametern id för att hitta en specifik produkt.
I terminalen väljer du Ctrl+C för att stoppa programmet.

Implementera produktväg för att returnera en lista över produkter

Om du vill implementera vägen /productsletar du upp följande kod:

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

Ersätt den med den här koden:

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);
  }
});

Kör följande kommando i terminalen för att starta appen och testa koden:
```
node app.js
```
När Visual Studio Code visar meddelandet om att öppna webbläsaren väljer du Öppna i webbläsaren.
Lägg till följande i slutet av URL:en:
```
/products?page=1&pageSize=2
```
Resultatet är:
```
[{
  "id": 1,
  "name": "Ivanhoe",
  "author": "Sir Walter Scott"
},
{
  "id": 2,
  "name": "Colour Magic",
  "author": "Terry Pratchett"
}]
```
Svaret visar de första två av de tre posterna. Det här svaret innebär att frågeparametrarna page och pageSize, filtrerade ned svarsstorleken från den fullständiga listan till två objekt.
Ändra URL:en så att den använder följande väg products?page=2&pageSize=2 för att ändra antalet sidor från en till två. Svaret är:
```
[{
  "id": 3,
  "name": "The Bluest eye",
  "author": "Toni Morrison"
}]
```

Eftersom koden bara innehåller tre poster bör den andra sidan endast innehålla en post.

I terminalen väljer du Ctrl+C för att stoppa programmet.

Nu har du tillämpat frågeparametrar för att begränsa svaret.

Fortsätt

Övning – Routnings- och frågeparametrar

Öppna projektet i utvecklingscontainern

Konfigurera filer för projektet

Implementera produktväg för att returnera en enskild produkt

Implementera produktväg för att returnera en lista över produkter

Feedback