Wie man mit Node.js und Express beginnt

Einführung

Express ist ein Webanwendungs-Framework für Node.js, das es Ihnen ermöglicht, robuste APIs und Webserver auf eine einfachere und sauberere Weise zu erstellen. Es ist ein leichtgewichtiges Paket, das die Kernfunktionen von Node.js nicht verdeckt.

In diesem Artikel werden Sie Express installieren und verwenden, um einen Webserver zu erstellen.

Voraussetzungen

Wenn Sie diesem Artikel folgen möchten, benötigen Sie:

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.

Dieses Tutorial wurde mit Node v15.14.0, npm v7.10.0, express v4.17.1 und serve-index v1.9.1 überprüft.

Schritt 1 – Einrichten des Projekts

Zuerst öffnen Sie Ihr Terminalfenster und erstellen ein neues Projektverzeichnis:

mkdir express-example

Dann navigieren Sie zum neu erstellten Verzeichnis:

cd express-example

An diesem Punkt können Sie ein neues npm-Projekt initialisieren:

npm init -y

Als nächstes müssen Sie das Paket express installieren:

npm install express@4.17.1

An diesem Punkt haben Sie ein neues Projekt bereit, um Express zu verwenden.

Schritt 2 — Erstellen eines Express-Servers

Jetzt, da Express installiert ist, erstellen Sie eine neue server.js-Datei und öffnen Sie sie mit Ihrem Code-Editor. Fügen Sie dann die folgenden Codezeilen hinzu:

const express = require('express');

const app = express();

Die erste Zeile hier greift das Hauptmodul von Express aus dem installierten Paket ab. Dieses Modul ist eine Funktion, die wir dann in der zweiten Zeile ausführen, um unsere app-Variable zu erstellen. Auf diese Weise können Sie mehrere Apps erstellen, jede mit ihren eigenen Anfragen und Antworten.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

Diese Codezeilen sind die Stelle, an der wir unserem Express-Server sagen, wie er eine GET-Anforderung an unseren Server behandeln soll. Express enthält ähnliche Funktionen für POST, PUT usw., die app.post(...), app.put(...) usw. verwenden.

Diese Funktionen nehmen zwei Hauptparameter an. Der erste ist die URL, auf die diese Funktion angewendet werden soll. In diesem Fall zielen wir auf '/' ab, was die Wurzel unserer Website ist: in diesem Fall localhost:3000.

Der zweite Parameter ist eine Funktion mit zwei Argumenten: req und res. req repräsentiert die Anfrage, die an den Server gesendet wurde; Wir können dieses Objekt verwenden, um Daten darüber zu lesen, was der Client zu tun beabsichtigt. res repräsentiert die Antwort, die wir an den Client zurücksenden werden.

Hier rufen wir eine Funktion auf res auf, um eine Antwort zurückzusenden: 'Erfolgreiche Antwort.'.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Schließlich müssen wir, sobald wir unsere Anfragen eingerichtet haben, unseren Server starten! Wir übergeben 3000 an die listen-Funktion, die der App angibt, auf welchem Port sie hören soll. Die als zweiter Parameter übergebene Funktion ist optional und wird ausgeführt, wenn der Server gestartet wird. Dadurch erhalten wir im Konsolenfenster ein Feedback, um zu wissen, dass unsere Anwendung läuft.

Öffnen Sie Ihr Terminalfenster erneut und starten Sie Ihre Anwendung:

node server.js

Dann besuchen Sie localhost:3000 in Ihrem Webbrowser. Ihr Browserfenster zeigt: 'Erfolgreiche Antwort'. Ihr Terminalfenster zeigt: 'Beispiel-App hört auf Port 3000.'.

Und damit haben wir einen Webserver! Wir möchten jedoch definitiv mehr als nur eine einzelne Textzeile an den Client senden. Lassen Sie uns kurz erläutern, was Middleware ist und wie man diesen Server als statischen Dateiserver einrichtet!

Schritt 3 — Verwendung von Middleware

Mit Express können wir Middleware-Funktionen schreiben und verwenden, die Zugriff auf alle HTTP-Anfragen haben, die an den Server gesendet werden. Diese Funktionen können:

• Jeden Code ausführen.
• Änderungen an den Anfrage- und Antwortobjekten vornehmen.
• Den Anfrage-Antwort-Zyklus beenden.
• Die nächste Middleware-Funktion im Stapel aufrufen.

Wir können unsere eigenen Middleware-Funktionen schreiben oder Drittanbieter-Middleware verwenden, indem wir sie genauso importieren, wie wir es mit jedem anderen Paket tun würden.

Lassen Sie uns zunächst unsere eigene Middleware schreiben, und dann werden wir versuchen, einige vorhandene Middleware zum Bereitstellen statischer Dateien zu verwenden.

Um eine Middleware-Funktion zu definieren, rufen wir app.use() auf und übergeben ihr eine Funktion. Hier ist eine grundlegende Middleware-Funktion, um die aktuelle Uhrzeit während jeder Anfrage in der Konsole auszugeben:

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Der Aufruf von next() fordert die Middleware auf, zur nächsten Middleware-Funktion zu gehen, falls vorhanden. Dies ist wichtig, um am Ende unserer Funktion einzuschließen – sonst bleibt die Anfrage in dieser Middleware hängen.

Optional können wir einen Pfad an die Middleware übergeben, der nur Anfragen an diese Route bearbeitet. Zum Beispiel:

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Indem wir '/request-type' als ersten Argument an app.use() übergeben, wird diese Funktion nur für Anfragen ausgeführt, die an localhost:3000/request-type gesendet werden.

Öffnen Sie Ihr Terminalfenster erneut und führen Sie Ihre Anwendung aus:

node server.js

Dann besuchen Sie localhost:3000/request-type in Ihrem Webbrowser. Ihr Terminalfenster zeigt den Zeitstempel der Anfrage und 'Anforderungstyp: GET' an.

Nun versuchen wir, vorhandene Middleware zum Bereitstellen statischer Dateien zu verwenden. Express wird mit einer integrierten Middleware-Funktion geliefert: express.static. Wir werden auch eine Middleware-Funktion eines Drittanbieters, serve-index, verwenden, um eine Indexliste unserer Dateien anzuzeigen.

Zuerst erstellen Sie im gleichen Ordner, in dem sich der Express-Server befindet, ein Verzeichnis namens public und legen Sie dort einige Dateien ab.

Dann installieren Sie das Paket serve-index:

npm install serve-index@1.9.1

Zuerst importieren Sie das Paket serve-index oben in der Serverdatei.

Dann fügen Sie die Middleware express.static und serveIndex hinzu und geben Sie den Pfad an, von dem aus darauf zugegriffen werden soll, sowie den Namen des Verzeichnisses:

const express = require('express');
const serveIndex = require('serve-index');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.use('/public', express.static('public'));
app.use('/public', serveIndex('public'));

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Starten Sie nun Ihren Server neu und navigieren Sie zu localhost:3000/public. Ihnen wird eine Liste aller Ihrer Dateien angezeigt!

Abschluss

In diesem Artikel haben Sie Express installiert und verwendet, um einen Webserver zu erstellen. Sie haben auch integrierte und von Drittanbietern stammende Middleware-Funktionen verwendet.

Setzen Sie Ihr Lernen fort mit So verwenden Sie das req-Objekt in Express, So verwenden Sie das res-Objekt in Express und So definieren Sie Routen und HTTP-Anforderungsmethoden in Express.