Projekt-Dokumentation: CRUD-Grundlagen

Diese Übersicht hilft dir dabei, die Architektur und den Code eures Express/JavaScript-Projekts für die mündliche Prüfung perfekt zu verstehen.

1. Das Big Picture (Client-Server-Modell)

Webanwendungen basieren auf der Kommunikation zwischen zwei Parteien:

Frontend (HTML/JS im Browser): Der "Gast" im Restaurant. Er sieht die Benutzeroberfläche und fordert Daten an.
Middleware / Backend (Express-Server): Der "Kellner". Er nimmt die Anfragen entgegen, verarbeitet sie (z. B. mit einer Datenbank) und schickt die Antwort zurück.

2. Was bedeutet CRUD?

Jede datenbasierte Anwendung nutzt die vier CRUD-Grundoperationen:

Buchstabe	Bedeutung	HTTP-Methode	Beispiel im Code
Create	Erstellen	POST	`app.post('/items')`
Read	Lesen / Anzeigen	GET	`app.get('/items')`
Update	Aktualisieren	PUT / PATCH	`app.put('/items/:id')`
Delete	Löschen	DELETE	`app.delete('/items/:id')`

3. Code-Verständnis für die Prüfung

Wie der Server (Express) lauscht:

Im Backend definiert dein Teammitglied Routen. Hier ist ein typisches Beispiel für eine GET-Route:

app.get('/items', (req, res) => {
    // req = Request (Anfrage vom Browser)
    // res = Response (Antwort vom Server)
    res.json(datenbank); // Schickt Daten zurück
});

Erklärung für den Lehrer: "Das ist eine GET-Route auf dem Express-Server. Wenn das Frontend die Adresse aufruft, antwortet der Server und liefert die Daten im JSON-Format aus."

Wie das Frontend (JavaScript) anfragt:

Damit der Browser Daten vom Server holt, nutzt er meistens den Befehl fetch():

fetch('/items')
    .then(response => response.json())
    .then(data => {
        // Hier werden die Daten ins HTML gezeichnet
    });

Erklärung für den Lehrer: "Mit der Funktion `fetch()` feuert der Browser asynchron eine HTTP-Anfrage ab. Sobald das Versprechen (Promise) aufgelöst wird, wandeln wir die Antwort um und aktualisieren die Benutzeroberfläche."

Möchtest du das Ganze in Aktion sehen?

Wir haben einen interaktiven Simulator gebaut, der das Verhalten des Express-Servers direkt im Browser veranschaulicht.

Zum interaktiven Simulator wechseln →