Een nieuwe webtoepassing maken met het Express-framework

  • 8 minuten

Bedrijven slaan vaak een grote hoeveelheid gegevens op in bestandssystemen en -databases. Ze hebben toegang tot die gegevens door deze te leveren via webtoepassingen vanuit API's met behulp van HTTP.

Webservers en webtoepassingen

Een webserver is een stukje software dat reageert op aanvragen van clients. Een webtoepassing bevindt zich boven op de webserver. Sommige omgevingen, zoals Node.js, bieden zowel de webserver als de webtoepassing in een framework. In deze module wordt de webserver geleverd door de HTTP module. De webtoepassing wordt geleverd door het Express.js framework en bevat de webserver.

Meer informatie:

  • Webtoepassingen: De toepassing levert een web-app aan de client:
    • Visueel met HTML, CSS en JavaScript
    • Gegevens met API's
    • Zowel visuals als gegevens met een combinatie van HTML, CSS, JavaScript en API's. Dit wordt beschouwd als een monolithische toepassing.
  • URL-routering: URL-routering is een mechanisme om functionaliteit van de webserver te bieden wanneer een specifiek URL-adres wordt aangevraagd. De URL /products kan bijvoorbeeld worden gekoppeld aan een functie die een lijst met producten retourneert. De URL /products/1 kan worden gekoppeld aan een functie die een specifiek product retourneert.
  • HTTP-headers: dit zijn sleutel-waardeparen die van de client naar de server worden verzonden. Ze bevatten informatie over de aanvraag of het antwoord.
    • Ondersteuning voor verschillende inhoudstypen: Een client kan gegevens in een specifieke indeling aanvragen en kan in die indeling worden geretourneerd, zoals tekst zonder opmaak, JSON, HTML of CSV.
    • Verificatie/autorisatie: sommige gegevens zijn mogelijk gevoelig. Een gebruiker moet zich mogelijk aanmelden of een specifieke rol of machtigingsniveau hebben om toegang tot de gegevens te krijgen. Dit wordt verwerkt in de HTTP-header.
  • Gegevensuitwisseling: Gebruikers moeten mogelijk gegevens weergeven en toevoegen aan het systeem. Als u gegevens wilt toevoegen, kunnen gebruikers gegevens invoeren in een formulier of bestanden uploaden .
  • Time to market: Als u efficiënt webtoepassingen en API's wilt maken, kiest u hulpprogramma's en frameworks die oplossingen bieden voor veelvoorkomende problemen. Deze keuzes helpen de ontwikkelaar snel aan de bedrijfsvereisten van de taak te voldoen.

HTTP-module in Node.js

Node.js wordt geleverd met een ingebouwde HTTP-module. Dit is een redelijk kleine module die de meeste typen aanvragen verwerkt. Het ondersteunt veelgebruikte typen gegevens, zoals headers, de URL en gegevens.

Het volgende codevoorbeeld is een eenvoudige webserver die luistert naar binnenkomende aanvragen op poort 3000. Het reageert met een eenvoudig tekstbericht hello world naar de client, ongeacht de URL-route of HTTP-headers die worden gebruikt.

// Include the HTTP module
const http = require('http');

// Set the port to 3000
const PORT = 3000;

// 1. Process incoming requests (req), reply with response (res)
const requestHandler = (req, res) => {

  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('hello world');
}

// 2. Create a server with the requestHandler
const server = http.createServer(requestHandler);

// 3. Start listening for incoming requests on port
server.listen(PORT, () => {
  console.log(`listening on port ${PORT}`)
})

In dit voorbeeld wordt de webtoepassing geconfigureerd met de volgende stappen:

  1. requestHandler: De functie leest de aanvraag (req) en bepaalt welk antwoord (res) moet worden verzonden.
  2. server: De createServer() methode wordt gedefinieerd met de aanvraaghandler. Omdat er slechts één aanvraaghandler is, reageert de server altijd met hetzelfde antwoord. In een echte toepassing zou u meerdere aanvraaghandlers hebben om verschillende soorten aanvragen en verschillende routes te verwerken. Dit wordt later nader besproken.
  3. server.listen: de listen() methode wordt aangeroepen met een opgegeven poort. Na de aanroep van de listen() methode is de server klaar om clientaanvragen te accepteren. Wanneer de app lokaal wordt uitgevoerd, is de app beschikbaar op http://localhost:3000. De console.log instructie wordt uitgevoerd om de ontwikkelaar te laten weten dat de server gereed is voor gebruik.

In dit Express.js codevoorbeeld worden meerdere stijlen van functies gebruikt:

  • callback in server.listen(PORT string, callback_function)
  • pijlfunctierequestHandler = (req, res) => {} met verschillende bereikregels dan een normale functie

Express.js framework

Tot dusver hebt u meer geleerd over de mogelijkheden van de HTTP-module in Node.js. Het is een uiterst geldige keuze voor kleinere webtoepassingen. Als een toepassing groot wordt, kan een framework zoals Express u helpen uw architectuur op een schaalbare manier te bouwen.

Nadat u een aantal webtoepassingen hebt gemaakt, zult u merken dat u steeds dezelfde problemen oplost. Problemen zoals routebeheer, verificatie en autorisatie, en foutbeheer zijn gebruikelijk. Op dit moment zoekt u naar een framework zoals Express waarmee een aantal of al deze problemen worden opgelost.

Routebeheer in Express

Wanneer een client een aanvraag indient bij een webtoepassing, gebruiken ze een URL. Dit is een adres dat naar een specifieke server verwijst. Een URL zou er zo uit kunnen zien:

http://localhost:3000/products

De term localhost in de URL verwijst naar uw eigen computer. Een meer productiegerichte URL heeft de term localhost voor een domeinnaam microsoft.comals . Het eindonderdeel van de URL is de route. Het bepaalt een specifieke logische locatie om naar de server te gaan. In dit geval is /productsde route .

Het Express-framework gebruikt de URL, route en HTTP-woorden voor routebeheer. HTTP-werkwoorden zoals post, puten get beschrijven de gewenste actie door de client. Elk HTTP-woord heeft een specifieke betekenis voor wat er moet gebeuren met de gegevens. Express helpt routes te registreren en ze te koppelen aan toepasselijke HTTP-woorden om de webtoepassing te organiseren. Express biedt toegewezen methoden voor het verwerken van verschillende HTTP-woorden, en een slim systeem om verschillende routes aan verschillende fragmenten van uw code te koppelen.

In het volgende voorbeeld helpt Express u bij het afhandelen van aanvragen die zijn gericht op een route met het adres /products dat is gekoppeld aan het HTTP-woord get:

app.get('/products', (req, res) => {
  // handle the request
})

Express ziet app.get voor /products een andere weergave dan app.post voor /products, zoals wordt weergegeven in dit volgende codevoorbeeld:

app.get('/products', (req, res) => {
  // handle the request
})

app.post('/products', (req, res) => {
  // handle the request
})

Het HTTP-woord get betekent dat een gebruiker gegevens wil lezen. Het HTTP-woord post betekent dat ze gegevens willen schrijven. Het delen van uw app, zodat verschillende route- en werkwoordkoppelingen verschillende stukjes code uitvoeren, is gebruikelijk. Dit concept wordt later nader besproken.

Verschillende inhoudstypen leveren

Express ondersteunt vele verschillende inhoudsindelingen die kunnen worden geretourneerd naar een client waarvan de aanroep afkomstig is. Het res object wordt geleverd met een set helperfuncties om verschillende typen gegevens te retourneren. Als u tekst zonder opmaak wilt retourneren, gebruikt u de send()-methode zoals:

res.send('plain text')

Voor andere typen gegevens, zoals JSON, zijn er speciale methoden die ervoor zorgen dat het juiste inhoudstype en gegevensconversies worden uitgevoerd. Als u JSON wilt retourneren in Express, gebruikt u de json() methode, zoals deze:

res.json({ id: 1, name: "Catcher in the Rye" })

De vorige Express-codemethode is equivalent aan deze HTTP-modulecode:

res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ id: 1, name: "Catcher in the Rye" }))

De Content-Type header in HTTP is ingesteld en het antwoord wordt ook geconverteerd van een JavaScript-object naar een tekenreeks voordat deze wordt teruggestuurd naar de aanroepende client.

Als u de twee codevoorbeelden vergelijkt, ziet u dat Express een paar regels opslaat door helper-methoden te gebruiken voor algemene bestandstypen, zoals JSON en HTML.

Een Express-toepassing maken

Voor het ontwikkelen van een Node.js-toepassing met behulp van het Express-framework moet u deze als een afhankelijkheid installeren. Het wordt ook aanbevolen eerst een Node.js-project te initialiseren, zodat alle gedownloade afhankelijkheden in het bestand package.json terechtkomen. Dit wordt algemeen aangeraden voor alle apps die voor de Node.js-runtime zijn ontwikkeld. De voordelen hiervan zijn duidelijk wanneer u de code naar een opslagplaats zoals GitHub pusht. Iedereen die de code van GitHub ophaalt, kan de code die u schrijft eenvoudig gebruiken door eerst de desbetreffende afhankelijkheden te installeren.

Voor het maken van een webtoepassing met het Express-framework zijn de gebruikelijke stappen:

  1. Maak de web-app: Maak een exemplaar van een webtoepassing. Op dit moment kan de webserver niet worden uitgevoerd, maar u hebt iets wat u kunt uitbreiden.
  2. Routes en route-handlers definiëren: Definieer naar welke routes de toepassing moet luisteren. Typische routebeheer omvat:
    • hoofdroute: '/'
    • functieroutes: '/products'
    • catch-all route: '*'
  3. Middleware configureren: Middleware is een stukje code dat kan worden uitgevoerd vóór of na een aanvraag. Voorbeelden hiervan zijn verificatie, gegevensvalidatie en logboekregistratie.
  4. Start de app: Definieer een poort en geef vervolgens de app de opdracht om naar die poort te luisteren. Nu is de app gereed voor het ontvangen van aanvragen.