Node.js - Express Framework

Hallo, angehende Programmierer! Heute machen wir uns auf eine aufregende Reise in die Welt von Node.js und dem Express-Framework. Als Ihr freundlicher Nachbarschaftsinformatiklehrer bin ich begeistert, Sie durch dieses Abenteuer zu führen. Machen Sie sich keine Sorgen, wenn Sie noch nie eine Zeile Code geschrieben haben – wir beginnen ganz am Anfang und arbeiten gemeinsam nach oben.

Was ist Express?

Bevor wir tiefer einsteigen, lassen Sie uns darüber sprechen, was Express eigentlich ist. Stellen Sie sich vor, Sie bauen ein Haus. Sie könnten von Grund auf anfangen, Ihre eigenen Ziegel zu machen und Ihr eigenes Holz zu schneiden. Oder Sie könnten vorgefertigte Materialien verwenden, die die Arbeit einfacher und schneller machen. Express ist wie diese vorgefertigten Materialien, aber für Webanwendungen. Es ist ein Framework, das eine robuste Satz von Funktionen für Web- und Mobile-Anwendungen bietet, was es einfacher und schneller macht, Webanwendungen mit Node.js zu entwickeln.

Installation von Express

Lassen Sie uns mit der Installation von Express beginnen. Zunächst stellen Sie sicher, dass Sie Node.js auf Ihrem Computer installiert haben. Wenn nicht, gehen Sie auf die offizielle Node.js-Website und laden Sie es herunter.

Sobald Node.js installiert ist, öffnen Sie Ihr Terminal (oder die Eingabeaufforderung, wenn Sie unter Windows sind) und geben Sie den folgenden Befehl ein:

npm install express

Dieser Befehl verwendet npm (Node Package Manager), um Express zu installieren. Denken Sie daran, dass npm eine magische Werkzeugkiste ist, die viele nützliche Werkzeuge (genannt Pakete) enthält, die wir in unseren Node.js-Projekten verwenden können.

"Hello World" Beispiel

Nun, da wir Express installiert haben, erstellen wir unsere erste Express-Anwendung. Wir beginnen mit dem klassischen "Hello, World!"-Beispiel.

Erstellen Sie eine neue Datei namens app.js und geben Sie den folgenden Code ein:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.listen(port, () => {
console.log(`Beispiel-App hört auf http://localhost:${port}`);
});

Lassen Sie uns das einmal auseinandernehmen:

1. Wir importieren das Express-Modul und erstellen eine Express-Anwendung.
2. Wir definieren eine Portnummer (3000 in diesem Fall).
3. Wir richten eine Route für die Start-URL ('/') ein, die "Hello, World!" als Antwort sendet.
4. Wir weisen unserer Anwendung an, auf dem angegebenen Port zu lauschen.

Um diese Anwendung zu starten, gehen Sie in Ihr Terminal, navigieren Sie zum Verzeichnis, das app.js enthält, und führen Sie aus:

node app.js

Nun öffnen Sie Ihren Webbrowser und gehen Sie zu http://localhost:3000. Sie sollten "Hello, World!" auf der Seite sehen. Gratulation! Sie haben gerade Ihre erste Express-Anwendung erstellt!

Anwendung Objekt

In unserem vorherigen Beispiel haben wir ein Express-Anwendungsobjekt erstellt:

const app = express();

Dieses app-Objekt ist zentral für die Verwendung von Express. Es verfügt über Methoden für das Routen von HTTP-Anfragen, die Konfiguration von Middleware, das Rendern von HTML-Ansichten, die Registrierung einer Template-Engine und mehr.

Hier sind einige der am häufigsten verwendeten Methoden des app-Objekts:

Methode	Beschreibung
app.get()	Routet HTTP GET-Anfragen an den angegebenen Pfad mit den angegebenen Callback-Funktionen
app.post()	Routet HTTP POST-Anfragen an den angegebenen Pfad mit den angegebenen Callback-Funktionen
app.use()	Hängt die angegebene Middleware-Funktion oder -Funktionen an den angegebenen Pfad an
app.listen()	Bindet und hört auf Verbindungen an dem angegebenen Host und Port

Grundlegendes Routing

Routing bezieht sich auf die Bestimmung, wie eine Anwendung auf eine.Clientanfrage an einen bestimmten Endpunkt (URI oder Pfad) und eine spezifische HTTP-Anfragemethode (GET, POST, etc.) reagiert.

Lassen Sie uns unsere Anwendung erweitern, um mehr Routen hinzuzufügen:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.get('/about', (req, res) => {
res.send('Dies ist die Über Uns-Seite');
});

app.post('/submit', (req, res) => {
res.send('POST-Anfrage empfangen');
});

app.listen(port, () => {
console.log(`Beispiel-App hört auf http://localhost:${port}`);
});

In diesem Beispiel haben wir zwei neue Routen hinzugefügt:

• Eine GET-Routine für '/about', die "Dies ist die Über Uns-Seite" als Antwort sendet
• Eine POST-Routine für '/submit', die "POST-Anfrage empfangen" als Antwort sendet

Um die POST-Routine zu testen, benötigen Sie ein Tool wie Postman, oder Sie können ein HTML-Formular erstellen, das an diese Route sendet.

Serving Static Files

Oftentimes, you'll want to serve static files like images, CSS files, and JavaScript files. Express provides a built-in middleware function express.static for this purpose.

Let's create a directory called public in our project folder, and put an image file (let's say cat.jpg) in it. Then, modify our app.js like this:

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

app.use(express.static('public'));

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.get('/cat', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'cat.jpg'));
});

app.listen(port, () => {
console.log(`Beispiel-App hört auf http://localhost:${port}`);
});

In this example, we've done two things:

1. We've used app.use(express.static('public')) to serve static files from the 'public' directory.
2. We've added a new route '/cat' that sends the cat.jpg file as a response.

Now, you can access your cat image directly at http://localhost:3000/cat.jpg, or through the '/cat' route we defined.

And there you have it! We've covered the basics of Express, from installation to serving static files. Remember, learning to code is like learning a new language – it takes practice and patience. Don't be discouraged if you don't understand everything right away. Keep experimenting, keep building, and most importantly, keep having fun!

In our next lesson, we'll dive deeper into Express middleware and more advanced routing techniques. Until then, happy coding!

Credits: Image by storyset