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.