Kaip vyksta sąveika tarp front-end ir back-end…

Sąveika vykdoma per HTTP(S) protokolą naudojant įvairius metodus (GET, POST, PUT, DELETE ir kt.). Frontend siunčia užklausas į backend, kad gautų arba išsiųstų duomenis. Backend apdoroja šias užklausas, jei reikia, bendrauja su duomenų baze ir siunčia atsakymą.

Pagrindiniai sąveikos būdai:

REST API: Labiausiai paplitęs požiūris. Backend teikia galinių taškų (endpoints) rinkinį, į kurį frontend gali kreiptis vykdydamas operacijas. Duomenys dažniausiai perduodami JSON formatu.

// Pavyzdinis JSON atsakymas iš backend
{
  "users": [
    {
      "id": 1,
      "name": "Alex"
    },
    {
      "id": 2,
      "name": "Elena"
    }
  ]
}

GraphQL: Alternatyva REST. Frontend užklausia tik tuos duomenis, kurie jam reikalingi, vienu užklausa. Tai leidžia sumažinti užklausų skaičių ir perduodamų duomenų kiekį.
WebSockets: Leidžia įkurti dvipusį nuolatinį ryšį tarp frontend ir backend. Naudojama realaus laiko duomenų keitimuisi (pokalbiai, pranešimai).
Server-Sent Events (SSE): Leidžia backend siųsti duomenis frontend vienpusiškai per HTTP ryšį. Naudojama atnaujinimams iš serverio be nuolatinio užklausų siuntimo iš kliento.

Tipinis sąveikos scenarijus:

Vartotojas atlieka veiksmą frontend'e (pvz., paspaudžia mygtuką).
Frontend siunčia HTTP užklausą atitinkamai backend'o galiniam taškui.
Backend gauna užklausą, apdoroja ją (pvz., vykdo užklausą į duomenų bazę).
Backend suformuoja atsakymą (dažniausiai JSON formatu) ir siunčia jį frontend'ui.
Frontend gauna atsakymą, apdoroja duomenis ir atnaujina vartotojo sąsają.

Pavyzdys AJAX užklausos frontend'e naudojant JavaScript:

// Siunčiama GET užklausa vartotojų sąrašo gavimui
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // Apdorojame gautus duomenis
    console.log('Gauti vartotojai:', data.users);
  })
  .catch(error => {
    // Klaidos apdorojimas
    console.error('Klaida gaunant vartotojus:', error);
  });

Kaip vyksta sąveika tarp front-end ir back-end?