Backend Entwicklung

Im Frontend-Teil hast du gelernt, wie man mit Vue.js, HTML und CSS eine Benutzeroberfläche baut. Aber woher kommen eigentlich die Daten? Wer speichert sie? Und wer entscheidet, wer was sehen darf? Das ist die Aufgabe des Backends.

Was ist ein Backend?

Eine Webanwendung besteht aus zwei Teilen:

• Frontend – das, was der Benutzer sieht und anklickt (läuft im Browser)
• Backend – der Teil, der im Hintergrund läuft, Daten verarbeitet und speichert (läuft auf einem Server)

Das Frontend kommuniziert mit dem Backend über das Internet – und zwar meistens über eine API.

Was ist eine API?

API steht für Application Programming Interface – auf Deutsch: Schnittstelle. Eine API ist wie ein Kellner in einem Restaurant:

• Du (das Frontend) schaust die Speisekarte an und bestellst etwas
• Der Kellner (die API) nimmt deine Bestellung entgegen
• Die Küche (der Server / die Datenbank) bereitet das Essen zu
• Der Kellner bringt dir das Ergebnis zurück

Das Frontend weiss nicht, wie die Datenbank aufgebaut ist. Es stellt einfach eine Anfrage an die API und bekommt eine Antwort.

HTTP-Requests und REST

Die meisten Web-APIs funktionieren nach dem REST-Prinzip und nutzen das HTTPS-Protokoll – dasselbe Protokoll, das dein Browser verwendet, wenn du eine Webseite öffnest.

Eine HTTPS-Anfrage besteht immer aus:

• einer URL (z.B. https://api.meinshop.ch/produkte)
• einer Methode (was willst du tun?)
• optional einem Body (die Daten, die du mitschickst)

Die wichtigsten HTTP-Methoden

Methode	Bedeutung	Beispiel
GET	Daten lesen	Alle Produkte anzeigen
POST	Daten erstellen	Neues Produkt hinzufügen
PUT	Daten ersetzen	Produkt aktualisieren
DELETE	Daten löschen	Produkt entfernen

Diese vier Grundoperationen nennt man auch CRUD – Create, Read, Update, Delete.

Was ist JSON?

Wenn das Frontend und das Backend (oder allgemein verschiedene Programme & Programmiersprachen) miteinander reden, brauchen sie eine gemeinsame Sprache für die Daten. Diese Sprache heisst JSON (JavaScript Object Notation).

JSON sieht fast genau so aus wie ein JavaScript-Objekt:

{
  "id": 1,
  "name": "Laptop",
  "preis": 999.90,
  "verfügbar": true
}

Fast alle modernen APIs senden und empfangen ihre Daten im JSON-Format. Das tolle an JSON ist, dass es von so gut wie allen Programmiersprachen gelesen und verarbeitet werden kann.

HTTP-Statuscodes

Jede Antwort vom Server enthält einen Statuscode, der angibt, ob die Anfrage geklappt hat:

Code	Bedeutung
200 OK	Alles gut, hier ist die Antwort
201 Created	Ressource wurde erfolgreich erstellt
400 Bad Request	Deine Anfrage war fehlerhaft
401 Unauthorized	Du bist nicht eingeloggt
403 Forbidden	Du hast keine Berechtigung
404 Not Found	Diese Ressource gibt es nicht
500 Internal Server Error	Auf dem Server ist etwas schiefgelaufen

---

Datenpersistenz

Damit Daten auch nach einem Server-Neustart noch vorhanden sind, müssen sie irgendwo gespeichert werden – in einer Datenbank. Ohne Datenbank verliert der Server alle Daten, sobald er neu gestartet wird.

Für unser Projekt verwenden wir Supabase – eine einfach zu bedienende Datenbank, die man kostenlos in der Cloud nutzen kann.

---

Überblick: Was wir bauen

In den einzelnen Teilen dieses Moduls wirst du:

1. Eine eigene API mit Python bauen – mit echten Endpoints für GET, POST, PUT und DELETE. Du testest sie mit Postman.
2. Von VUEjs aus mit deiner API interagieren
3. Daten mit Supabase speichern – damit deine Daten nicht verloren gehen, wenn der Server neu startet.