Oefening: parameters routeren en query's

4 minuten

Maak als technicus voor Tailwind Traders uw API's om efficiënt te zijn voor zowel de server als de client door de hoeveelheid gegevens te beperken die wordt verzonden of geretourneerd door de API.

Gegevens bevinden zich meestal in een database of andere opslag. De grootte van de gegevens kan enorm zijn. Wanneer een gebruiker alle gegevens voor de producten vraagt, kan het antwoord duizenden of zelfs miljoenen records zijn. Een aanvraag zoals deze kan een database heel erg belasten. Het duurt ook lang om het antwoord op de client te leveren en weer te geven.

Om dat scenario te voorkomen, is het een goed idee om de grootte van het antwoord te beperken:

Routeparameters gebruiken om een specifieke record te vragen
Gebruik queryparameters om een subset van records op te geven.

In deze oefening worden beide technieken geleerd.

Start het proces om een nieuwe GitHub Codespace te maken op de main vertakking van de MicrosoftDocs/node-essentials GitHub-opslagplaats.

Dit project openen in GitHub Codespaces
Controleer op de pagina Codespace maken de configuratie-instellingen voor codespace en selecteer vervolgens Nieuwe codespace maken
Wacht tot de coderuimte is gestart. Dit opstartproces kan enkele minuten duren.
Open een nieuwe terminal in de codespace.

Tip

U kunt het hoofdmenu gebruiken om naar de menuoptie Terminal te navigeren en vervolgens de optie Nieuwe terminal te selecteren.
Controleer of Node.js is geïnstalleerd in uw omgeving:
```
node --version
```
Sluit de terminal.
De resterende oefeningen in dit project vinden plaats in de context van deze ontwikkelingscontainer.

Open Visual Studio Code in de context van een lege map.
Zorg ervoor dat de Dev Containers-extensie is geïnstalleerd in Visual Studio Code.
Open een nieuwe terminal in de editor.

Tip

U kunt het hoofdmenu gebruiken om naar de menuoptie Terminal te navigeren en vervolgens de optie Nieuwe terminal te selecteren.
Kloon de MicrosoftDocs/node-essentials GitHub-opslagplaats naar de huidige map.
```
git clone https://github.com/MicrosoftDocs/node-essentials.git .
```
Open de map waarin u de GitHub-opslagplaats hebt gekloond.
Open het opdrachtenpalet, zoek naar de Dev Containers-opdrachten en selecteer vervolgens Dev Containers: Opnieuw openen in container.

Tip

Visual Studio Code vraagt u mogelijk automatisch om de bestaande map in een ontwikkelingscontainer opnieuw te openen. Dit is functioneel gelijk aan het gebruik van het opdrachtpalet om de huidige werkruimte in een container opnieuw te openen.
Controleer of Node.js is geïnstalleerd in uw omgeving:
```
node --version
```
Sluit de terminal.
De resterende oefeningen in dit project vinden plaats in de context van deze ontwikkelingscontainer.

Bestanden instellen voor project

Als u het project voor deze module wilt controleren, opent u de ./nodejs-http/exercise-express-routing/parameters map in de code-editor.

De map parameters moet deze bestanden bevatten:

Bestand	Doel
`app.js`	Dit bestand bevat de Express-toepassing.
`package.json`	Dit bestand bevat de afhankelijkheden voor het project.
`package-lock.json`	Dit bestand bevat de exacte versies van de afhankelijkheden.

Klik met de rechtermuisknop op de mapnaam in de verkenner /nodejs-http/exercise-express-routing/parameters en selecteer Openen in geïntegreerde terminal.
Voer in de terminal de volgende opdracht uit om de afhankelijkheden van het project te installeren:
```
npm install
```

Open app.js om deze te inspecteren. Het bestand moet er als volgt uitzien:

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

Met deze JavaScript-code maakt u een eenvoudige Express.js-server. Hiermee definieert u een matrix van products en stelt u drie routes in: root (/), /products/:iden /products. De server luistert op poort 3000. De routes /products/:id en /products zijn tijdelijke aanduidingen zonder functionaliteit.

De gegevens zijn vastgelegd om de oefening te vereenvoudigen. In een praktijkscenario zouden de gegevens afkomstig zijn van een database of andere opslag.

Productroute implementeren om één product te retourneren

De code bevat een Express-toepassing. De volgende stap is twee routes te implementeren:

/products/:id: Deze route moet één product retourneren.
/products: Deze route moet alle producten retourneren of zoveel producten waarvoor queryparameters worden aangevraagd.

Als u de route /products/:idwilt implementeren, zoekt u de volgende code in het bestand app.js in de parametermap :

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

Vervang deze door deze code:

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

Voer in de terminal de volgende opdracht uit om de app uit te voeren:
```
node app.js
```
Wanneer Visual Studio Code de melding van het openen van de browser verschijnt, selecteert u Openen in de browser.
Voeg het volgende toe aan het einde van de URL:
```
/products/1
```
De uitvoer is:
```
{
  "id": 1,
  "name": "Ivanhoe",
  "author": "Sir Walter Scott"
}
```
Gefeliciteerd U hebt de route correct geïmplementeerd. De app gebruikt de routeparameter id om een specifiek product te vinden.
Selecteer Ctrl+C in de terminal om de toepassing te stoppen.

Route van producten implementeren om een lijst met producten te retourneren

Als u de route /productswilt implementeren, zoekt u de volgende code:

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

Vervang deze door deze code:

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

Voer in de terminal de volgende opdracht uit om de app te starten en de code te testen:
```
node app.js
```
Wanneer Visual Studio Code de melding van het openen van de browser verschijnt, selecteert u Openen in de browser.
Voeg het volgende toe aan het einde van de URL:
```
/products?page=1&pageSize=2
```
De uitvoer is:
```
[{
  "id": 1,
  "name": "Ivanhoe",
  "author": "Sir Walter Scott"
},
{
  "id": 2,
  "name": "Colour Magic",
  "author": "Terry Pratchett"
}]
```
Het antwoord toont de eerste twee van drie records. Dit antwoord betekent dat de queryparameters page en pageSizede antwoordgrootte van de volledige lijst naar twee items zijn gefilterd.
Wijzig de URL om de volgende route te gebruiken om products?page=2&pageSize=2 het aantal pagina's van een naar twee te wijzigen. Het antwoord is:
```
[{
  "id": 3,
  "name": "The Bluest eye",
  "author": "Toni Morrison"
}]
```

Omdat de code slechts drie records bevat, mag de tweede pagina slechts één record bevatten.

Selecteer Ctrl+C in de terminal om de toepassing te stoppen.

U hebt nu queryparameters toegepast om het antwoord te beperken.

Doorgaan

Project openen in ontwikkelingscontainer

Bestanden instellen voor project

Productroute implementeren om één product te retourneren

Route van producten implementeren om een lijst met producten te retourneren

Feedback