Erstellen einer neuen Webanwendung mit dem Express-Framework

  • 8 Minuten

Unternehmen speichern oft große Mengen von Daten in Dateisystemen und Datenbanken. Sie greifen auf diese Daten zu, indem sie sie mithilfe von HTTP über Webanwendungen aus APIs bereitstellen.

Webserver und Webanwendungen

Ein Webserver ist eine Software, die auf Anforderungen von Clients reagiert. Eine Webanwendung baut auf dem Webserver auf. Einige Umgebungen wie Node.js stellen den Webserver und die Webanwendung in einem Framework bereit. In diesem Modul wird der Webserver durch das HTTP-Modul bereitgestellt. Die Webanwendung wird durch das Express.js-Framework bereitgestellt und enthält den Webserver.

Weitere Informationen:

  • Webanwendungen: Die Anwendung stellt eine Web-App für den Client bereit:
    • Visuell mit HTML, CSS und JavaScript
    • Über Daten mit APIs
    • Sowohl visuelle Daten als auch Daten, die eine Kombination aus HTML, CSS, JavaScript und APIs enthalten. Das wird als monolithische Anwendung betrachtet.
  • URL-Routing: Das URL-Routing ist ein Mechanismus, der beim Anfordern einer bestimmten URL-Adresse Funktionen des Webservers bereitstellt. Beispiel: Die URL /products kann einer Funktion zugeordnet werden, die eine Produktliste zurückgibt. Die URL /products/1 kann einer Funktion zugeordnet werden, die ein bestimmtes Produkt zurückgibt.
  • HTTP-Header: Dabei handelt es sich um Schlüssel-Wert-Paare, die vom Client an den Server gesendet werden. Sie enthalten Informationen zur Anforderung oder Antwort.
    • Unterstützung verschiedener Inhaltstypen: Ein Client kann Daten in einem bestimmten Format anfordern und die Daten möglicherweise in diesem Format zurückgeben. Zu diesen Formaten zählen unter anderem Nur-Text, JSON, HTML oder CSV.
    • Authentifizierung/Autorisierung: Einige Daten sind möglicherweise vertraulich. Ein Benutzer muss sich womöglich anmelden oder über eine spezifische Rolle bzw. eine spezifische Berechtigungsstufe verfügen, um auf die Daten zuzugreifen. Das wird im HTTP-Header verarbeitet.
  • Datenaustausch: Benutzer*innen müssen möglicherweise Daten anzeigen und dem System hinzufügen. Um Daten hinzuzufügen, könnten Benutzer*innen Daten in ein Formular eingeben oder Dateien hochladen.
  • Markteinführungszeit: Wählen Sie Tools und Frameworks aus, die Lösungen für häufige Probleme bereitstellen, um Webanwendungen und APIs effizient zu erstellen. Diese Auswahlmöglichkeiten helfen Entwickler*innen, die geschäftlichen Anforderungen des Auftrags schnell zu erfüllen.

HTTP-Modul in Node.js

Node.js umfasst ein integriertes HTTP-Modul. Dabei handelt es sich um ein relativ kleines Modul, dass die meisten Arten von Anforderungen verarbeitet. Sie unterstützt allgemeine Datentypen wie Header, die URL und Daten.

Das folgende Codebeispiel ist ein einfacher Webserver, der eingehende Anforderungen an Port 3000 lauscht. Er antwortet dem Client unabhängig von der verwendeten URL-Route oder den verwendeten HTTP-Headern mit der einfachen Textnachricht hello world.

// 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 diesem Beispiel wird die Webanwendung mit den folgenden Schritten konfiguriert:

  1. requestHandler: Die Funktion liest die Anforderung (req) und bestimmt, welche Antwort (res) gesendet werden soll.
  2. server: Die createServer()-Methode wird mit dem Anforderungshandler definiert. Da nur ein Anforderungshandler vorhanden ist, antwortet der Server immer mit derselben Antwort. In einer realen Anwendung verfügen Sie über mehrere Anforderungshandler, um verschiedene Arten von Anforderungen und verschiedene Routen zu verarbeiten. Das wird später ausführlicher behandelt.
  3. server.listen: Die listen()-Methode wird mit einem angegebenen Port aufgerufen. Nach dem Aufruf der listen()-Methode ist der Server bereit, Clientanforderungen zu akzeptieren. Bei einer lokalen Ausführung ist die App auf http://localhost:3000 verfügbar. Die console.log-Anweisung wird ausgeführt, um Entwickler*innen mitzuteilen, dass der Server einsatzbereit ist.

In diesem Express.js-Codebeispiel werden mehrere Funktionsstile verwendet:

  • Ein Rückruf in server.listen(PORT string, callback_function)
  • Eine Pfeilfunktion in requestHandler = (req, res) => {} mit anderen Bereichsregeln als eine reguläre Funktion

Express.js-Framework

Bisher haben Sie die Funktionen des HTTP-Moduls in Node.js kennengelernt. Dieses eignet sich gut für kleinere Webanwendungen. Wenn eine Anwendung wächst, kann ein Framework wie Express Sie dabei unterstützen, Ihre Architektur auf skalierbare Weise zu erstellen.

Nachdem Sie einige Webanwendungen erstellt haben, werden Sie feststellen, dass Sie immer wieder dieselben Probleme lösen. Probleme wie die Routenverwaltung, die Authentifizierung und Autorisierung sowie die Fehlerverwaltung sind gängig. Zu diesem Zeitpunkt suchen Sie nach einem Framework wie Express, das einige oder alle Probleme behebt.

Routenverwaltung in Express

Wenn ein Client eine Anforderung an eine Webanwendung sendet, wird die Adresse als URL verwendet, die auf einen bestimmten Server verweist. Eine URL könnte folgendermaßen aussehen:

http://localhost:3000/products

Der Begriff localhost in der URL bezeichnet Ihren eigenen Computer. Bei einer Produktions-URL wird der Begriff localhost ggf. durch einen Domänennamen wie microsoft.com ersetzt. Der letzte Teil der URL ist die Route. Diese definiert einen bestimmten logischen Ort auf dem Server, zu dem navigiert werden soll. In diesem Fall lautet die Route /products.

Das Express-Framework verwendet die URL, die Route und HTTP-Verben für die Routenverwaltung. HTTP-Verben wie post, put und get beschreiben die vom Client gewünschte Aktion. Jedes HTTP-Verb besitzt eine bestimmte Bedeutung, die beschreibt, was mit den Daten geschehen soll. Express unterstützt das Registrieren von Routen und das Koppeln dieser an entsprechende HTTP-Verben, um die Webanwendung zu organisieren. Express umfasst dedizierte Methoden zur Verarbeitung verschiedener HTTP-Verben sowie ein intelligentes System zum Zuordnen verschiedener Routen zu verschiedenen Teilen Ihres Codes.

Im folgenden Beispiel unterstützt Express Sie beim Verarbeiten von Anforderungen an eine Route mit der Adresse /products, die dem HTTP-Verb get zugeordnet ist:

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

Express sieht app.get für /products anders als app.post für /products, wie im folgenden Codebeispiel dargestellt wird:

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

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

Das HTTP-Verb get bedeutet, dass ein Benutzer Daten lesen möchte. Das HTTP-Verb post bedeutet, dass ein Benutzer Daten schreiben möchte. Häufig werden Apps so aufgeteilt, dass unterschiedliche Routen- und Verbpaare unterschiedliche Codeteile ausführen. Dieses Konzept wird später ausführlicher erläutert.

Bereitstellen verschiedener Inhaltstypen

Express unterstützt viele verschiedene Inhaltsformate, die an einen aufrufenden Client zurückgegeben werden können. Das res-Objekt umfasst eine Reihe von Hilfsfunktionen, die verschiedene Arten von Daten zurückgeben. Wenn Nur-Text zurückgegeben werden soll, können Sie die Methode send() wie folgt verwenden:

res.send('plain text')

Für andere Datentypen wie JSON gibt es dedizierte Methoden, die sicherstellen, dass der richtige Inhaltstyp zurückgegeben wird und die Daten richtig konvertiert werden. Verwenden Sie die Methode json() wie folgt, um JSON in Express zurückzugeben:

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

Die vorherige Express-Codemethode entspricht dem folgenden HTTP-Modulcode:

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

Der Content-Type-HTTP-Header wird festgelegt, und die Antwort wird ebenfalls aus einem JavaScript-Objekt in eine Zeichenfolge konvertiert, bevor diese erneut an den aufrufenden Client zurückgegeben wird.

Wenn Sie die zwei Codebeispiele vergleichen, stellen Sie fest, dass Express ein paar zu schreibende Zeilen spart, indem Hilfsmethoden für gängige Dateitypen wie JSON und HTML verwendet werden.

Erstellen einer Express-Anwendung

Wenn Sie eine Node.js-Anwendung mithilfe des Express-Frameworks entwickeln möchten, müssen Sie dieses zunächst als Abhängigkeit installieren. Außerdem wird empfohlen, zuerst ein Node.js-Projekt zu initialisieren, sodass alle heruntergeladenen Abhängigkeiten in der Datei package.json gespeichert werden. Dies wird generell für alle Apps empfohlen, die für die Node.js-Runtime entwickelt werden. Dies ist insbesondere nützlich, wenn Sie Code in ein Repository wie GitHub pushen. Jeder Benutzer, der Ihren Code über GitHub abruft, kann diesen problemlos verwenden, wenn er zunächst dessen Abhängigkeiten installiert.

Typische Schritte zum Erstellen einer Webanwendung mit dem Express-Framework umfassen Folgendes:

  1. Erstellen der Web-App: Erstellen Sie eine Webanwendungsinstanz. Zu diesem Zeitpunkt kann der Webserver nicht ausgeführt werden, allerdings verfügen Sie über eine Basis, die Sie erweitern können.
  2. Definieren von Routen und Routenhandlern: Definieren Sie, auf welche Routen die Anwendung lauschen soll. Eine typische Routenverwaltung umfasst Folgendes:
    • Eine Stammroute: /
    • Featurerouten: /products
    • Eine Catch-all-Route: *
  3. Konfigurieren der Middleware: Die Middleware ist ein Codeelement, das vor oder nach einer Anforderung ausgeführt werden kann. Beispiele hierfür sind die Authentifizierung, Datenüberprüfung und Protokollierung.
  4. Starten der App: Definieren Sie einen Port, und weisen Sie dann die App an, auf diesen Port zu lauschen. Nun kann die App Anforderungen empfangen.