Oefening: een nieuwe Express-webtoepassing maken

  • 5 minuten

Tailwind Traders heeft u de taak gesteld om een eenvoudige API te maken met behulp van het Express-framework. De online winkel wil Express evalueren om te zien of er gemakkelijk mee kan worden gewerkt. Als onderdeel van die evaluatie willen ze dat u een webtoepassing ontwikkelt die geschikt is voor verschillende routes.

Project openen in ontwikkelingscontainer

Gebruik de meegeleverde ontwikkelingscontainer om de oefeningen in deze module te voltooien. De ontwikkelcontainer is vooraf geconfigureerd met de hulpprogramma's die u nodig hebt om de oefeningen te voltooien.

  1. 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

  2. Controleer op de pagina Codespace maken de configuratie-instellingen voor codespace en selecteer vervolgens Nieuwe codespace maken

    Screenshot of the confirmation screen before creating a new codespace.

  3. Wacht tot de coderuimte is gestart. Dit opstartproces kan enkele minuten duren.

  4. 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.

    Screenshot of the codespaces menu option to open a new terminal.

  5. Controleer of Node.js is geïnstalleerd in uw omgeving:

    node --version

    De dev-container maakt gebruik van een Node.js LTS-versie, zoals v20.5.1. De exacte versie kan afwijken.

  6. De resterende oefeningen in dit project vinden plaats in de context van deze ontwikkelingscontainer.

Een basis-web-app maken met Express

Maak een basistoepassing die aanvragen verwerkt.

  1. Open een terminal in de dev-container.

  2. Gebruik de volgende opdrachten om een nieuw Node.js-project te maken en het Express-framework te installeren:

    mkdir my-express-app
cd my-express-app
npm init -y
npm install express

    Met de init opdracht maakt u een standaard package.json-bestand voor uw Node.js-project. Met install de opdracht wordt het Express-framework geïnstalleerd.

  3. Open het bestand package.json in een code-editor.

    Zoek in de dependencies sectie de express vermelding:

    "dependencies": {
  "express": "^4.18.2"
  ...
}

    Deze vermelding geeft aan dat het Express-framework is geïnstalleerd. Uw versie is mogelijk recenter. In deze voorbeeldcode wordt versie 4 van het Express-framework gebruikt.

  4. Maak in een code-editor in de map een bestand met de my-express-app naam app.js en voeg de volgende code toe:

    const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => res.send('Hello World!'));

app.listen(port, () => console.log(`Example app listening on port ${port}! http://localhost:${port}/`));

    De code maakt een exemplaar van een Express-toepassing door de express() methode aan te roepen. Dit is de functie op het hoogste niveau die door de Express-module wordt geëxporteerd. Alle verdere configuratie en functionaliteit worden toegevoegd via de app variabele.

    U ziet hoe de code een route naar slash /instelt, de hoofdmap, met de syntaxis:

    app.get('/', (req, res) => res.send('Hello World!'));

    Na het instellen van de route start de code de webtoepassing door de listen() methode aan te roepen:

    app.listen(port, () => console.log('Example app listening on port ${port}!'));

  5. Open een terminal voor deze submap door met de rechtermuisknop op de naam van de submap te klikken en Open te selecteren in geïntegreerde terminal.

  6. Voer in de terminal de volgende opdracht uit om de Express-webtoepassing te starten:

    node app.js

    U moet de volgende uitvoer zien:

    Example app listening at http://localhost:3000

    Deze uitvoer betekent dat uw app actief is en aanvragen kan ontvangen.

  7. U kunt met de rechtermuisknop klikken en de URL in de terminal selecteren of u kunt de browser openen wanneer Visual Studio Code een melding verschijnt waarin u wordt gevraagd of u wilt openen in de browser. U moet de volgende uitvoer zien:

    Hello World!

  8. Druk in de terminal op Ctrl+C om het web Express-programma te stoppen.

Een web-app maken die JSON-gegevens retourneert

Gebruik hetzelfde bestand app.js om een nieuwe route toe te voegen.

  1. Open het app.js bestand in een code-editor.

  2. Voeg de volgende code toe na de bestaande app.get syntaxis na de code voor de eerste route: /

     app.get('/products', (req, res) => {
     const products = [
         { id: 1, name: 'hammer' },
         { id: 2, name: 'screwdriver' },
         { id: 3, name: 'wrench' },
     ];

     res.json(products);
 });

  3. Controleer of het bestand app.js er als volgt uitziet:

     const express = require('express');
 const app = express();
 const port = 3000;

 app.get('/', (req, res) => res.send('Hello World!'));

 app.get('/products', (req, res) => {
     const products = [
         { id: 1, name: 'hammer' },
         { id: 2, name: 'screwdriver' },
         { id: 3, name: 'wrench' },
     ];

     res.json(products);
 });

 app.listen(port, () => {
     console.log(`Example app listening on port ${port}! http://localhost:${port}/`);
 });

  4. Sla uw wijzigingen op in het bestand app.js en sluit het bestand.

  5. Voer in de terminal de volgende opdracht uit om de web Express-app opnieuw op te starten:

    node app.js

    U moet de volgende uitvoer zien:

    Example app listening at http://localhost:3000

  6. Ga in een browser terug naar het tabblad uit de vorige stap en voeg de nieuwe route toe /products, aan het einde van de URL. U ziet nu de volgende JSON-uitvoer:

    [{"id":1,"name":"hammer"},{"id":2,"name":"screwdriver"},{"id":3,"name":"wrench"}]

  7. Druk in de terminal op Ctrl+C om het web Express-programma te stoppen.

Gefeliciteerd. U hebt een tweede route geïmplementeerd die statische JSON-gegevens kan verwerken.