Kuidas toimub front-end ja back-end vaheline koostöö?

Suhtlus toimub HTTP(S) protokolli kaudu, kasutades erinevaid meetodeid (GET, POST, PUT, DELETE jne). Frontend saadab päringud backendile andmete saamiseks või saatmiseks. Backend töötleb need päringud, vajadusel suhtleb andmebaasiga ja saadab vastuse.

Peamised suhtlusviisid:

• REST API: Kõige levinum lähenemine. Backend pakub komplekti lõpp-punkte (endpoints), millele frontend saab pöörduda operatsioonide teostamiseks. Andmed edastatakse tavaliselt JSON-formaadis.

  // Näide JSON-vastusest backendist
  {
    "users": [
      {
        "id": 1,
        "name": "Alex"
      },
      {
        "id": 2,
        "name": "Elena"
      }
    ]
  }
  

• GraphQL: Alternatiiv REST-ile. Frontend pärib ainult vajalikke andmeid, ühe päringuga. See võimaldab vähendada päringute arvu ja edastatavate andmete mahtu.

• WebSockets: Annab võimaluse luua kahepoolne püsiv ühendus frontend ja backend vahel. Kasutatakse reaalajas andmevahetuseks (vestlused, teavitused).

• Server-Sent Events (SSE): Backend saadab andmeid frontendile ühepoolselt HTTP-ühenduse kaudu. Kasutatakse serveri uuenduste saamiseks ilma pidevate klientide päringuteta.

Tüüpiline suhtlusstsenaarium:

1. Kasutaja teeb tegevuse frontendis (näiteks vajutab nuppu).
2. Frontend saadab vastavale backendi lõpp-punktile HTTP-päringu.
3. Backend saab päringu, töötleb seda (näiteks teeb päringu andmebaasile).
4. Backend koostab vastuse (tavaliselt JSON-formaadis) ja saadab selle frontendile.
5. Frontend saab vastuse, töötleb andmed ja uuendab kasutajaliidest.

Näide AJAX-päringust frontendis JavaScripti abil:

// Saada GET-päring kasutajate nimekirja saamiseks
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // Töötle saadud andmeid
    console.log('Saadud kasutajad:', data.users);
  })
  .catch(error => {
    // Vea töötlemine
    console.error('Viga kasutajate saamisel:', error);
  });