Javascript Node.js Express
Node.js Express ist ein flexibles Framework, das die Erstellung des Webservers und von APIs vereinfacht – mit Routenverwaltung, Middleware und schneller Integration externer Module. Express ist ein Standard-Modul für Node.js, auch wenn es bei der Installation nicht mitgeliefert, sondern mit npm installiert wird.
Projekt mit Express anlegen
Express ist – wie die Startseite des Express-Projekts betont – ein schnelles, unkompliziertes Framework für Node.js. Ein guter Einstieg in die Hintergründe von Express ist der Guide zum Routing.
Initialisieren – package.json im Projektordner mit npm init anlegen.
npm init -y
Das erzeugt die Datei package.json im Node-Ordner. Server in index.js (default) oder server.js (in package.json einsetzen) erzeugen
Express installieren
npm install express
| Zweck | Funktion |
|---|---|
| Server starten | app.listen(port, callback) |
| Route definieren (GET) | app.get('/pfad', handler) |
| Route definieren (POST) | app.post('/pfad', handler) |
| Middleware einbinden | app.use(…) |
| Formulardaten parsen | express.urlencoded(…) |
| JSON parsen | express.json() |
| Statische Dateien bereitstellen | express.static('verzeichnis') |
watch anstelle von nodemon
Bislang wurde meist nodemon installiert, um den Server nicht nach jeder Änderungen neu starten zu müssen.
npm install nodemon --save-dev
Stattdessen kann heute watch eingesetzt werden – nur eine Änderung an den npm-Scripts in der Datei package.json:
"scripts": {
"start": "node server",
"dev": "node --watch server"
},
Mit npm run dev in der Konsole startet der Server und erkennt Änderungen beim Speichern automatisch.
Einfache Routes, HTML und JSON ohne stringify
Kein Content-Type muss angegeben werden, HTML wird geparst, selbst JSON-Daten können versendet werden, und zwar ohne stringify.
const express = require("express");
const app = express();
// Ganz einfache Weiterleitung mit Endpunkt /
app.get("/", (req, res) => {
res.send("<h1>Hallo Welt</h1>");
})
app.listen(7000, () => console.log("Server running on port 7000"));
localhost:7000 im Browser eingeben, und schon steht eine HTML-Seite mit Lametta.
<html> <head> </head> <body> <h1>Hallo Welt</h1> </body> </html>
Anstelle von <h1>Hallo Welt</h1> könnte auch direkt ein JSON-Objekt stehen.
res.send({ autor: "Douglas Adams"});
Am Rande: Traditionell werden Module mit require geladen, seit ES6 (ab Node v15 – 2020) auch mit der import()-Funktion. import() gibt ein Promise zurück.
Routes – Weiterleitungen
Eine Route oder Weiterleitung bestimmt, wie eine Anwendung auf einen Client-Request an einem bestimmten Endpunkt antwortet – Route Handler sind Code-Blöcke, die die Logik der Query Strings abhandeln.
Route parameters – Weiterleitungs-Parameter – sind URL-Segmente mit Namen, die auf eine spezielle Position der URL abzielen.
Route path: /users/:userId/books/:bookId
Request URL: http://localhost:7000/users/34/books/8989
req.params: { "userId": "34", "bookId": "8989" }
app.get('/users/:userId/books/:bookId', (req, res) => {
res.send(req.params)
})
Quelle: Express
Mit einem einfachen Callback
// GET mit Routing-Parametern
app.get("/class/:id", (request, response) => {
//console.log (request.params);
const studentId = Number(request.params.id);
const student = data.filter((student) => student.id === studentId);
response.send(student);
});
Aufrufen mit
http://localhost:7000/class/26
Express Static Middleware
Statt jetzt für jeden Endpunkt der Anwendung ein app.get / app.post einzusetzen, wird Express Static Middleware eingesetzt. Middleware sitzt zwischen hereinkommenden und ausgehenden Requests und Responses. Noch das Node-Modul path importieren und einen Ordner für HTML-Dateien – z.B. public – im Node-Ordner anlegen.
const express = require("express");
const path = require("path");
const app = express();
// express static folder
app.use(express.static(path.join(__dirname, "public")));
app.listen(7000, () => console.log("Server running on port 7000"));
Jede HTML-Datei, die im Ordner public angelegt wird, ist jetzt im Browser mit ihrer Route erreichbar. HTML-Dateien müssen jetzt allerdings mit .html-Erweiterung aufgerufen werden.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Node.js express: Anfrage und Antwort</title>
</head>
<body>
<h1>Nachricht senden</h1>
<form id="messageForm">
<input type="text" name="nachricht" placeholder="Deine Nachricht" required />
<button type="submit">Senden</button>
</form>
<p id="antwort"></p>
<script>
const form = document.getElementById('messageForm');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(form);
const response = await fetch('/senden', {
method: 'POST',
body: new URLSearchParams(formData),
});
const text = await response.text();
document.getElementById('antwort').textContent = text;
});
</script>
</body>
</html>
Und in server.js
const express = require('express');
const app = express();
const port = 7000;
// Formulardaten als URL-encoded verarbeiten
app.use(express.urlencoded({ extended: true }));
// Statische Dateien aus dem public-Ordner bereitstellen
app.use(express.static('public'));
// POST-Anfrage entgegennehmen
app.post('/senden', (req, res) => {
const nachricht = req.body.nachricht;
console.log('Empfangene Nachricht:', nachricht);
res.send(`Danke für deine Nachricht: "${nachricht}"`);
});
// Server starten
app.listen(port, () => {
console.log(`Server auf http://localhost:${port}`);
});
Browser mit http://localhost:7000 aufrufen.
express app.get mit next()
Die next-Funktion muss nicht next heißen.
// GET mit next()
app.get ("/next", (request, response, next) => {
console.log ("Response will be send by the next function");
next();
}, (request, response ) => {
response.send("Just set up route with second callback")
});
Response Methoden
- .json
- Sendet eine JSON-Respons
- .send
- Sendet eine HTTP-Respons
- .download()
- Überträgt eine Datei als Anhang
- .redirect()
- Weiterleitung an einen bestimmten Pfad
import data from "./data/mock.json" assert { type: 'json' };
…
app.get ("/", (request, response) => {
response.json(data);
});
// GET mit download
app.get ("/download", (request, response) => {
response.download ("images/gaspreis-entwicklung-2005-2020.webp");
});
Middleware
Entsprechend der offiziellen Express-Dokumentation versteht man unter Middleware-Funktionen solche Funktionen, die Zugriff auf auf das Request-Object, das Response-Object und die next-Funktion haben.
Wenn ein Request hereinkommt, fließt der Request sequentiell durch alle Middelware-Funktionen, bis eine Response zustande kommt und kehrt dann zurück zum Client.
Middleware-Funktionen werden mit app.use registriert.
app.use (function (req, res, next) {
})
Der dritte Parameter next ist ein callback, ist die Flusssteuerung und kann zusätzliche Aufgaben durchführen.