12.4 Front-end + API integrācija

JavaScript fetch() API ļauj nosūtīt HTTP pieprasījumus no pārlūka uz serveri.

// GET pieprasījums
async function ielādētRezultātus() {
  const r = await fetch("http://localhost:5000/api/rezultati");
  if (!r.ok) {
    console.error("Kļūda:", r.status);
    return;
  }
  const dati = await r.json();
  console.log(dati);
}

// POST ar JSON
async function pievienot(vards, punkti) {
  const r = await fetch("/api/rezultati", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ vards, punkti })
  });
  return await r.json();
}

CORS: Ja frontend ir uz http://localhost:8080, bet backend uz :5000, pārlūks bloķē pieprasījumus drošības dēļ. Risinājums Flask pusē:

from flask_cors import CORS
CORS(app)  # atļauj visiem; produkcijā konkrēti norādi atļautos domēnus

Izpildes soļi:

1. Izveido mapi static/ un tajā index.html ar pamata struktūru.
2. Pievieno Flask maršrutu @app.route("/"), kas atgriež send_from_directory("static", "index.html").
3. Pārbaudi: http://localhost:5000/ rāda HTML.
4. Pievieno style.css un spele.js failus.

Izpildes soļi:

1. JS: const dati = await (await fetch("/api/rezultati")).json();
2. Iterē caur datiem un dinamiski izveido <tr> elementus tabulā.
3. Pievieno "Atjaunot" pogu, kas pārlādē sarakstu.
4. Pievieno indikatorus: Ielādējas... kamēr fetch notiek.

Izpildes soļi:

1. HTML formā: 2 input lauki (vards, punkti) un Submit poga.
2. JS: form.addEventListener("submit", e => { e.preventDefault(); ... })
3. POST uz API ar fetch("/api/rezultati", { method: "POST", ... }).
4. Pēc veiksmīga POST: notīri formu un atjaunini sarakstu.
5. Pievieno kļūdu apstrādi: ja API atgriež 400, parādi paziņojumu lietotājam.

Izpildes soļi:

1. Vienkārša versija: setInterval(() => ielādētRezultātus(), 5000) — atjaunina ik 5 sek.
2. Saproti, kāpēc tas ir neefektīvs.
3. Izpēti, kas ir Server-Sent Events un WebSocket — kad katru lietot.

• CORS bloķē: Pārliecinies, ka frontend un backend ir uz tā paša domēna vai izmanto Flask-CORS.
• Forma pārlādē lapu: Aizmirsts e.preventDefault() — vienmēr pirmais POST handler-ī.
• JSON nav valid: Ja serveris atgriež HTML kļūdu lapu, r.json() mestu izņēmumu.