Übung: Erstellen einer neuen Express-Webanwendung

• 5 Minuten

Tailwind Traders hat Sie mit der Erstellung einer einfachen API mithilfe des Express-Frameworks beauftragt. Der Onlinehändler möchte Express untersuchen und in Erfahrung bringen, ob die Arbeit mit dem Framework einfach ist. Im Zuge dieser Auswertung möchte das Unternehmen, dass Sie eine Webanwendung entwickeln, die Inhalte über verschiedene Routen bereitstellen kann.

Öffnen des Projekts im Entwicklungscontainer

Verwenden Sie den bereitgestellten Entwicklungscontainer, um die Übungen in diesem Modul abzuschließen. Der Entwicklungscontainer ist mit den Tools vorkonfiguriert, die Sie zum Ausführen der Übungen benötigen.

Erstellen einer einfachen Web-App mit Express

Im Folgenden erstellen Sie eine einfache Anwendung, die Anforderungen verarbeitet.

1. Öffnen Sie ein Terminal im Entwicklungscontainer.

2. Verwenden Sie die folgenden Befehle, um ein neues Node.js-Projekt zu erstellen und das Express-Framework zu installieren:

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

   Der Befehl init erstellt eine Standarddatei package.json für Ihr Node.js-Projekt. Der Befehl install installiert das Express-Framework.

3. Öffnen Sie in einem Code-Editor die Datei „package.json“.

   Suchen Sie im Abschnitt dependencies den Eintrag express:

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

   Dieser Eintrag weist darauf hin, dass das Express-Framework installiert ist. Ihre Version ist möglicherweise aktueller. Dieser Beispielcode verwendet Version 4 des Express-Frameworks.

4. Erstellen Sie in einem Code-Editor im Ordner my-express-app eine Datei mit Namen app.js, und fügen Sie den folgenden Code hinzu:

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

   Mit diesem Code wird eine Instanz einer Express-Anwendung erstellt, indem die express()-Methode aufgerufen wird. Dies ist die Funktion der obersten Ebene, die vom Express-Modul exportiert wird. Alle weiteren Konfigurationen und Funktionen werden über die app-Variable hinzugefügt.

   Beachten Sie, wie der Code eine Route zu Schrägstrich / (dem Stamm) mit folgender Syntax einrichtet:

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

   Nach dem Einrichten der Route startet der Code die Webanwendung durch Aufrufen der listen()-Methode:

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

5. Öffnen Sie ein Terminal für diesen Unterordner, indem Sie mit der rechten Maustaste auf den Namen des Unterordners klicken und Im integriertem Terminal öffnen auswählen.

6. Führen Sie im Terminal den folgenden Befehl aus, um die Express-Webanwendung zu starten:

   node app.js
   

   Die folgende Ausgabe sollte angezeigt werden:

   Example app listening at http://localhost:3000
   

   Diese Ausgabe bedeutet, dass Ihre App aktiv ist und ausgeführt wird und Anforderungen erhalten kann.

7. Sie können mit der rechten Maustaste auf die URL im Terminal klicken und sie auswählen, oder Sie können den Browser öffnen, wenn Visual Studio Code eine Benachrichtigung einblendet, in der Sie gefragt werden, ob Sie im Browser öffnen möchten. Die folgende Ausgabe sollte angezeigt werden:

   Hello World!
   

8. Drücken Sie im Terminal STRG+C, um das Express-Webprogramm zu beenden.

Erstellen einer JSON-Daten zurückgebenden Web-App

Verwenden Sie dieselbe Datei „app.js“, um eine neue Route hinzuzufügen.

1. Öffnen Sie in einem Code-Editor die Datei app.js.

2. Fügen Sie den folgenden Code nach der vorhandenen app.get-Syntax nach dem Code für die erste Route / hinzu:

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

3. Stellen Sie sicher, dass Ihre Datei „app.js“ wie folgt aussieht:

    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. Speichern Sie Ihre Änderungen in der Datei „app.js“, und schließen Sie die Datei.

5. Führen Sie im Terminal den folgenden Befehl aus, um die Express-Web-App erneut zu starten:

   node app.js
   

   Die folgende Ausgabe sollte angezeigt werden:

   Example app listening at http://localhost:3000
   

6. Kehren Sie in einem Browser zur Registerkarte aus dem vorherigen Schritt zurück, und fügen Sie die neue Route /products am Ende der URL hinzu. Die folgende JSON-Ausgabe sollte angezeigt werden:

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

7. Drücken Sie im Terminal STRG+C, um das Express-Webprogramm zu beenden.

Herzlichen Glückwunsch! Sie haben eine zweite Route implementiert, die statische JSON-Daten bereitstellen kann.