Routes en HTTP-aanvraagmethoden definiëren in Express

Inleiding

In dit artikel wordt beschreven hoe routes en HTTP-aanvraagmethoden in een Express-project moeten worden gebruikt. Routes zorgen voor de navigatie van gebruikers naar verschillende URL’s in uw toepassing. HTTP, kort voor Hyper Text Transfer Protocol, communiceert en faciliteert data van uw Express server naar de web browser.

U leert hoe u routes kunt definiëren en de HTTP-requestmethoden GETPOSTPUT, en DELETE kunt gebruiken om gegevens te manipuleren.

Voorvereisten

Om deze tutorial te voltooien, is kennis van Node.js nuttig, maar niet vereist. Als je meer wilt leren over Node.js, bekijk dan de How To Code in Node.js series.

Set Up Your Project

Aangezien Express een Node.js framework is, moet je er zeker van zijn dat je Node.js geïnstalleerd hebt voordat je de volgende stappen volgt. Voer het volgende uit in uw terminal:

Maak een nieuwe directory aan met de naam node-express-routing voor uw project:

mkdir node-express-routing

Start in de nieuwe directory:

cd node-express-routing

Initialiseer een nieuw Node project met standaardinstellingen. Dit zal uw package.json bestand bevatten om uw afhankelijkheden te benaderen:

npm init -y

Maak je entry bestand, index.js. Dit is waar u uw routes en HTTP request methods zult behandelen:

touch index.js

Installeer zowel Express als nodemon als dependencies. U zult nodemon gebruiken om uw Express project steeds opnieuw te starten wanneer het index.js bestand wijzigt.

 
npm install express --save
 
npm install -D nodemon
 

Open uw package.json bestand met uw favoriete tekst editor en update uw start script om nodemon en uw index.js bestand te includeren:

Dit stelt u in staat om het npm start commando in uw terminal te gebruiken om uw Express server te starten en veranderingen bij te werken.

Nu dat u uw project heeft opgezet en nodemon heeft geconfigureerd om te verversen wanneer het veranderingen in uw index.js bestand detecteert, bent u klaar om uw Express server te starten.

Start uw Express Server

Uw Express server is waar u de logica zult hanteren om uw routes en HTTP request methodes te integreren. U zult uw server opzetten en draaien om uw project in de browser te visualiseren.

Om uw Express server te starten, vereist u Express in uw index.js bestand en slaat u een instantie op in de app variabele. Verklaar vervolgens een PORT variabele en geef het adres :3000 op.

Volgende, voeg .listen() toe aan app en voeg PORT toe als eerste argument, dan een callback functie. De Express middleware .listen() maakt een lokale browser van het adres in uw PORT variabele om uw wijzigingen te visualiseren.

Ook express.json() als argument voor app.use(). Dit is om de binnenkomende gegevens te parsen via uw HTTP-verzoeken. Een eerdere versie vertrouwde op de body-parser afhankelijkheid, maar sindsdien heeft Express een ingebouwde middleware voor het parsen van gegevens.

Run het volgende commando in uw terminal om het project te starten:

npm start

Uw project is geladen op . Navigeer naar uw browser, en zie het volgende:

Dit is het begin van een draaiende Express-instance. Laten we eens werken aan het definiëren van HTTP-methoden om je browser te vullen.

Vaststellen van de HTTP GET Request Method

Om je project te bekijken, kun je informatie van je Express server versturen via een GET request, een HTTP method.

In index.js, voeg .get() toe aan uw app variabele, specificeer een anonieme route, en neem een callback op die toegang geeft tot de request en response argumenten:

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

Het request argument bevat informatie over het GET verzoek, terwijl response.send() gegevens naar de browser verzendt. De gegevens in response.send() kunnen een string, object, of een array zijn.

Nu je een GET verzoek hebt geïmplementeerd, laten we eens kijken naar routes en andere HTTP methoden.

Routes begrijpen

Als je navigeert naar krijg je alle accounts in je array:

Output

Je kunt ook account ID’s filteren met behulp van het /:id endpoint. Express beschouwt het ID in het eindpunt /:id als een plaatshouder voor een gebruikersparameter, en vergelijkt die waarde.

Als je eenmaal naar navigeert, krijg je een account dat overeenkomt met de /:id parameter:

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

Ontwerpen van POST, PUT, en DELETE HTTP Request Methods

HTTP methodes bieden extra functionaliteit aan uw gegevens met behulp van de POSTPUT, en DELETE verzoeken. De POST verzoek methode creëert nieuwe gegevens in uw server, terwijl PUT bestaande informatie bijwerkt. De DELETE request methode verwijdert de opgegeven gegevens.

POST

Om nieuwe gegevens in de accounts array te maken, kunt u een POST request methode integreren.

In index.js, voeg .post() variabele, en neem de route'/accounts' op als het eerste argument:

U duwt alle binnenkomende gegevens van uw POST verzoek in de accounts array en stuurt het antwoord als een JSON object.

Uw accounts array bevat nu een nieuwe gebruiker:

PUT

U kunt een bepaald account bewerken en bijwerken via een PUT verzoek.

In index.js, voeg .put() toe aan uw app variabele en neem de route '/accounts/:id' op als eerste argument. U vindt de ingevoerde account ID, en stelt een voorwaarde in om te updaten met nieuwe gegevens:

U bent nu in staat om gegevens in de accounts array bij te werken. Als een gebruiker zijn "role" wijzigt:

{ "role": "guest"}

Merk op dat "role" bijwerkt naar guest van admin in

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

DELETE

U kunt gebruikers en gegevens verwijderen met de DELETE verzoekmethode.

In index.js voegt u .delete() toe aan uw app variabele, en neemt u '/accounts/:id' op als het eerste argument. U filtert door de accounts array en retourneert het te verwijderen account.

Als je een DELETE verzoek stuurt naar , zal dit het account met de /:id van 1 uit de accounts array halen.

Conclusie

Het specificeren van routes en het gebruik van HTTP-verzoekmethoden helpen om extra prestaties te genereren bij het aanmaken, bijwerken en verwijderen van gebruikers en gegevens in uw Express-server.