Sobes.tech
Junior

Kaip įgyvendinamas CRUD?

sobes.tech AI

Atsakymas iš AI

CRUD reiškia sukurti, skaityti, atnaujinti, ištrinti. Tai pagrindinės operacijos, kurios atliekamos su duomenimis.

Create (Sukurti): Siųsti užklausą su POST metodu į galinį tašką, kad būtų sukurtas naujas išteklius. Užklausos kūnas dažniausiai turi naujo objekto duomenis.

// Pavyzdžiai naudojant Fetch API
fetch('/api/items', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'New Item' }),
})
  .then(response => response.json())
  .then(data => console.log('Sukurtas:', data));

Read (Skaityti): Siųsti užklausą su GET metodu:

  • Visų išteklių skaitymas: GET užklausa pagrindiniam kolekcijos galiniam taškui.
  • Konkretų išteklių skaitymas: GET užklausa su ištekliaus identifikatoriumi.
// Skaityti visus
fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log('Visi elementai:', data));

// Skaityti konkretų
fetch('/api/items/123')
  .then(response => response.json())
  .then(data => console.log('Elementas 123:', data));

Update (Atnaujinti): Siųsti užklausą su PUT arba PATCH metodu į ištekliaus galinį tašką su identifikatoriumi:

  • PUT: visiškai pakeisti esamą išteklių.
  • PATCH: dalinis atnaujinimas.
// Atnaujinti (PUT)
fetch('/api/items/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Updated Item' }),
})
  .then(response => response.json())
  .then(data => console.log('Atnaujinta:', data));

// Dalinis atnaujinimas (PATCH)
fetch('/api/items/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ description: 'New Description' }),
})
  .then(response => response.json())
  .then(data => console.log('Pakeista:', data));

Delete (Ištrinti): Siųsti užklausą su DELETE metodu į ištekliaus galinį tašką su identifikatoriumi:

fetch('/api/items/123', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Sėkmingai ištrinta');
    } else {
      console.error('Ištrynimas nepavyko');
    }
  });

Sąsaja su REST API:

CRUD operacijos glaudžiai susijusios su REST (Representational State Transfer) principais, kur HTTP metodai naudojami šiems veiksmams atlikti:

CRUD HTTP metodas
Create POST
Read GET
Update PUT/PATCH
Delete DELETE

Frontend'e CRUD įgyvendinimas apima šių HTTP užklausų siuntimą į backend API ir gautų atsakymų apdorojimą. Dažnai naudojamos HTTP bibliotekos (pvz., Axios, Fetch API) ir karkasai/bibliotekos būsenos ir UI valdymui (pvz., React, Vue, Angular).