Wie erfolgt die Interaktion zwischen Front-End und Back-End?

Die Interaktion erfolgt über das HTTP(S)-Protokoll unter Verwendung verschiedener Methoden (GET, POST, PUT, DELETE usw.). Das Frontend sendet Anfragen an das Backend, um Daten zu erhalten oder zu senden. Das Backend verarbeitet diese Anfragen, interagiert bei Bedarf mit der Datenbank und sendet eine Antwort.

Hauptmethoden der Interaktion:

• REST API: Der am weitesten verbreitete Ansatz. Das Backend stellt eine Reihe von Endpunkten (endpoints) bereit, auf die das Frontend zugreifen kann, um Operationen durchzuführen. Die Daten werden in der Regel im JSON-Format übertragen.

  // Beispiel einer JSON-Antwort vom Backend
  {
    "users": [
      {
        "id": 1,
        "name": "Alex"
      },
      {
        "id": 2,
        "name": "Elena"
      }
    ]
  }
  

• GraphQL: Alternative zu REST. Das Frontend fragt nur die Daten ab, die es benötigt, in einer einzigen Anfrage. Dies reduziert die Anzahl der Anfragen und die Datenmenge.

• WebSockets: Ermöglichen die Einrichtung einer bidirektionalen, dauerhaften Verbindung zwischen Frontend und Backend. Wird für Anwendungen verwendet, die einen Echtzeit-Datenaustausch erfordern (Chats, Benachrichtigungen).

• Server-Sent Events (SSE): Ermöglichen dem Backend, Daten in eine Richtung an das Frontend zu senden, über eine HTTP-Verbindung. Wird verwendet, um Updates vom Server zu erhalten, ohne ständig Anfragen vom Client zu stellen.

Typisches Interaktionsszenario:

1. Der Benutzer führt eine Aktion im Frontend aus (z.B. Button drücken).
2. Das Frontend sendet eine HTTP-Anfrage an den entsprechenden Endpunkt des Backends.
3. Das Backend empfängt die Anfrage, verarbeitet sie (z.B. Datenbankabfrage).
4. Das Backend erstellt eine Antwort (meist im JSON-Format) und sendet sie an das Frontend.
5. Das Frontend erhält die Antwort, verarbeitet die Daten und aktualisiert die Benutzeroberfläche.

Beispiel für eine AJAX-Anfrage im Frontend mit JavaScript:

// Senden einer GET-Anfrage zum Abrufen der Benutzerliste
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // Verarbeitung der empfangenen Daten
    console.log('Empfangene Benutzer:', data.users);
  })
  .catch(error => {
    // Fehlerbehandlung
    console.error('Fehler beim Abrufen der Benutzer:', error);
  });