URL's en routes begrijpen

7 minuten

Een toepassing heeft verschillende gegevens die worden beheerd, zoals producten of orders. Als ontwikkelaar voor Tailwind Traders kunt u uw API's ordenen in secties voor het type gegevens. Met behulp van secties kunt u de app onderhouden en uitbreiden.

Een eenvoudige manier om een web-app uit te breiden, is ervoor te zorgen dat gegevens toegankelijk zijn via toegewezen URL's. Twee verschillende URL's activeren twee verschillende onderdelen van code in uw web-app.

https://tailwindtraders.com/products
https://tailwindtraders.com/orders

In deze les wordt beschreven wat een URL is om een API te maken.

URL-pad

Een URL is een adres dat een gebruiker in een client invoert, zoals een browser, om een specifieke server en een specifieke functionaliteit te vinden. Als u weet hoe de URL werkt, kunt u uw app daaromheen organiseren.

Hier volgt een typische URL: http://localhost:8000/products/1?page=1&pageSize=20

De URL is gebaseerd op een syntaxis die er als volgt uitziet:

scheme:[//authority]path[?query][#fragment]

Laten we de onderdelen voor de voorbeeld-URL uitleggen: https://tailwindtraders.com/products/1?page=1&pageSize=20#sort=asc.

URL-onderdeel	Opmerking	Beschrijving
Schema	`https`	Het gebruikte protocol, zoals , , , , `irc`of `file`. `ftphttpshttp`
Instantie	`tailwindtraders.com`	Bestaat uit optionele gebruikersgegevens en een host, meestal een domeinnaam.
Pad	`/products/1`	Nul tot veel segmenten gescheiden door een slash (`/`), waarbij u de resources opgeeft waarin u geïnteresseerd bent.
Query	`page=1&pageSize=20`	Optioneel onderdeel dat na het `?` teken is gedefinieerd, bestaande uit parameter-/waardeparen om gegevens verder te filteren.
Fragment	`sort=asc`	Hiermee kunt u nog specifieker zijn, zoals het sorteren van de gegevens in een bepaalde volgorde.

Elke route kan acties bevatten, zoals maken, lezen, bijwerken en verwijderen (ook wel CRUD genoemd). De actie wordt aangegeven door de routemethode en gecombineerd met aanvullende informatie die wordt verzonden in de HTTP-headers en hoofdtekst.

HTTP-handlers

Express is een webframework waarmee u HTTP-API's kunt maken. Gebruik deze om routes te maken die HTTP-aanvragen verwerken.

Hier volgt een voorbeeld van code waarmee HTTP-aanvragen voor de URL /products/114worden verwerkt:

app.get('/products/:id', (req, res) => {
  // handle this request `req.params.id`
})

De indeling van de handler is app.<method>(<route>, <callback>). De aanvraag voor de route /products/114 met de GET-methode voert de code uit in de functie die toegang heeft tot de binnenkomende aanvraag (req) en retourneert het antwoord (res).

Deze code kan worden herschreven om het lezen gemakkelijker te maken:

const routeHandler = (incomingRequest, outgoingResponse) => {
  // handle this request
}

app.get('/products/:id', routeHandler)

In uw werk bij Tailwind Traders moet u mogelijk werken in Express-apps met een van beide codestijlen.

Binnenkomende gegevens

Gegevens kunnen op verschillende manieren naar de API worden verzonden:

Gegevens	Locatie	Uitleg
Routeparameter	`/products/:id`, waar `:id` is de parameter	Routeparameters maken deel uit van de URL. Ze worden gebruikt om een specifieke resource te identificeren. De gegevenslengte is beperkt tot de toegestane lengte van de URL, zodat deze doorgaans kort is, zoals een id of een naam. Een route kan meerdere parameters hebben.
Queryparameter	`/products?page=1&pageSize=20`, waar `?page=1&pageSize=20` is de parameter	Queryparameters maken deel uit van de URL. Ze worden gebruikt om gegevens te filteren. De gegevenslengte is beperkt tot de toegestane lengte van de URL, zodat deze doorgaans kort is, zoals een id of een naam. Een route kan meerdere queryparameters hebben.
Aanvraagtekst	`POST /products`	De aanvraagbody maakt deel uit van de HTTP-aanvraag. Het wordt gebruikt om gegevens naar de API te verzenden. De gegevenslengte is niet beperkt tot de toegestane lengte van de URL, zodat deze lang kan zijn. De HTTP-header geeft aan de API het type gegevens aan, zoals tekst, JSON of binair.

Binnenkomende gegevens komen meestal overeen met de volgende methoden op basis van het doel van de actie:

Actie	Methode	Gegevens
Maken	POST	Aanvraagtekst
Read	GET	Route- en queryparameters
Bijwerken	PUT	Aanvraagtekst
Delete	DELETE	Route- en queryparameters

Tip

De eerste letter van elke methode spelt CRUD. Deze termen worden in de branche gebruikt om de vier basistypen van bewerkingen te beschrijven die op gegevens kunnen worden uitgevoerd.

Voorbeeld van routeparameter met req.params

Stel dat de aanvraag-URL is /products/20. De Express-route voor het afhandelen van deze aanvraag is:

app.get('/products/:id', (req, res) => {
    const id = req.params.id

    // get product that matches id from database
})

Voorbeeld van queryreeks met req.query

Stel dat de aanvraag-URL is /products?page=1&pageSize=20. De Express-route voor het afhandelen van deze aanvraag is:

app.get('/products', (req, res) => {
    const page = req.query.page
    const pageSize = req.query.pageSize

    // get next page of products from database
})

Voorbeeld van aanvraagbody met req.body

Stel dat de aanvraag-URL is /products en dat de aanvraagbody is { "name": "Product 1" }. De Express-route voor het afhandelen van deze aanvraag is:

app.post('/products', (req, res) => {
    const name = req.body.name

    // add new product to database
})

Doorgaan