Kuidas rakendatakse CRUD-i?

CRUD tähistab Create, Read, Update, Delete. Need on põhitegevused, mida tehakse andmetega.

Create (Loo): Uue ressursi loomise jaoks saadetakse POST meetodiga päring sihtkohta. Päringu keha sisaldab tavaliselt uue objekti andmeid.

// Näited Fetch API kasutades
fetch('/api/items', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'New Item' }),
})
  .then(response => response.json())
  .then(data => console.log('Loodud:', data));

Read (Lugemine): Saada päring GET meetodiga:

• Kõigi ressursside lugemine: GET päring peamise kogumi lõpp-punkti.
• Spetsiifilise ressursi lugemine: GET päring ressursi identifikaatoriga lõpp-punkti.

// Kõikide lugemine
fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log('Kõik üksused:', data));

// Spetsiifilise lugemine
fetch('/api/items/123')
  .then(response => response.json())
  .then(data => console.log('Esemed 123:', data));

Update (Uuendamine): Saada päring PUT või PATCH meetodiga ressursi lõpp-punkti koos identifikaatoriga:

• PUT: täielik olemasoleva ressursi asendamine.
• PATCH: osaline uuendamine.

// Uuendamine (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('Uuendatud:', data));

// Osaline uuendamine (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('Patch tehtud:', data));

Delete (Kustuta): Saada päring DELETE meetodiga ressursi lõpp-punkti koos identifikaatoriga:

fetch('/api/items/123', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Kustutamine õnnestus');
    } else {
      console.error('Kustutamine ebaõnnestus');
    }
  });

Seos REST API-ga:

CRUD operatsioonid on tihedalt seotud REST (Representational State Transfer) põhimõtetega, kus HTTP meetodid kasutatakse nende toimingute teostamiseks ressursside üle:

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

Frontendil hõlmab CRUD-i rakendamine nende HTTP-päringute saatmist backend-API-le ja vastuste töötlemist. Sageli kasutatakse HTTP teegid (näiteks Axios, Fetch API) ning raamistikke/teeke oleku ja kasutajaliidese haldamiseks (näiteks React, Vue, Angular).