Kā notiek saskarsme starp front-end un back-end…

Saskarsme notiek, izmantojot HTTP(S) protokolu ar dažādiem metodēm (GET, POST, PUT, DELETE utt.). Frontend sūta pieprasījumus uz backend, lai saņemtu vai nosūtītu datus. Backend apstrādā šos pieprasījumus, nepieciešamības gadījumā sadarbojas ar datu bāzi un sūta atbildi.

Galvenie saskarsmes veidi:

REST API: Visbiežāk izmantotais pieejas veids. Backend nodrošina galapunktu (endpoints) kopumu, uz kuriem frontend var vērsties, veicot operācijas. Dati parasti tiek pārsūtīti JSON formātā.

// Piemērs JSON atbildes no backend
{
  "users": [
    {
      "id": 1,
      "name": "Alex"
    },
    {
      "id": 2,
      "name": "Elena"
    }
  ]
}

GraphQL: Alternatīva REST. Frontend pieprasa tikai nepieciešamos datus vienā pieprasījumā. Tas ļauj samazināt pieprasījumu skaitu un pārsūtāmo datu apjomu.
WebSockets: Ļauj izveidot divvirzienu pastāvīgu savienojumu starp frontend un backend. Izmanto reāllaika datu apmaiņai (čati, paziņojumi).
Server-Sent Events (SSE): Backend nosūta datus frontend vienvirzienā caur HTTP savienojumu. Izmanto atjauninājumu saņemšanai no servera bez pastāvīgiem pieprasījumiem no klienta.

Tipisks scenārijs:

Lietotājs veic darbību frontendā (piemēram, nospiež pogu).
Frontend nosūta HTTP pieprasījumu attiecīgajai backend galapunktam.
Backend saņem pieprasījumu, apstrādā to (piemēram, veic vaicājumu uz datu bāzi).
Backend veido atbildi (parasti JSON formātā) un nosūta to frontend.
Frontend saņem atbildi, apstrādā datus un atjauno lietotāja saskarni.

Piemērs AJAX pieprasījumam frontendā ar JavaScript:

// Nosūta GET pieprasījumu, lai iegūtu lietotāju sarakstu
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // Apstrādā saņemtos datus
    console.log('Saņemti lietotāji:', data.users);
  })
  .catch(error => {
    // Kļūdu apstrāde
    console.error('Kļūda, iegūstot lietotājus:', error);
  });

Kā notiek saskarsme starp front-end un back-end?