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.

Node.js

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.

Drei Blöcke zeigen einen Ablauf mit Request Middleware Next bis zu return und Response
Ablauf eines Requests durch Middleware

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.

Suchen auf mediaevent.de