CRUD qanday amalga oshiriladi?

CRUD — бу Create, Read, Update, Delete маъноларини англатади. Бу маълумотлар устидан амалга ошириладиган асосий операциялар.

Create (Яратиш): Янги ресурс яратиш учун POST усули билан endpointга сўров юборилади. Сўровнинг тана қисми одатда янги объектнинг маълумотларини ўз ичига олади.

// Fetch API билан мисоллар
fetch('/api/items', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Янги элемент' }),
})
  .then(response => response.json())
  .then(data => console.log('Яратилди:', data));

Read (Ўқиш): GET усули билан сўров юборилади.

• Барча ресурсларни ўқиш: коллекциянинг асосий endpointга GET сўрови.
• Аниқ бир ресурсни ўқиш: ресурснинг идентификаторини кўрсатган endpointга GET сўрови.

// Барчасини ўқиш
fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log('Барча элементлар:', data));

// Аниқ бирини ўқиш
fetch('/api/items/123')
  .then(response => response.json())
  .then(data => console.log('Элемент 123:', data));

Update (Янгилаш): PUT ёки PATCH усули билан, ресурснинг идентификаторини кўрсатган endpointга сўров юборилади.

• PUT: мавжуд ресурснинг тўлиқ алмаштирилиши.
• PATCH: қисман янгилаш.

// Янгилаш (PUT)
fetch('/api/items/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Янгиланди элемент' }),
})
  .then(response => response.json())
  .then(data => console.log('Янгиланди:', data));

// Қисман янгилаш (PATCH)
fetch('/api/items/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ description: 'Янги тавсиф' }),
})
  .then(response => response.json())
  .then(data => console.log('Қисман янгиланди:', data));

Delete (Ўчириш): DELETE усули билан, ресурснинг идентификаторини кўрсатган endpointга сўров юборилади.

fetch('/api/items/123', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Муваффақиятли ўчирилди');
    } else {
      console.error('Ўчиришда хато');
    }
  });

REST API билан боғлиқлик:

CRUD операциялари REST (Representational State Transfer) принциплари билан чамбарчас боғлиқ бўлиб, бу ерда HTTP усуллари ресурслар устида амалга оширилади:

CRUD	HTTP усули
Create	POST
Read	GET
Update	PUT/PATCH
Delete	DELETE

Фронтендда CRUD реализацияси бу HTTP сўровларини бекенд APIга юбориш ва олинган жавобларни ишлашни ўз ичига олади. Одатда, HTTP билан ишлаш учун китобхоналар (масалан, Axios, Fetch API) ва ҳолат ва UI бошқаруви учун фреймворклар/китобхоналар (масалан, React, Vue, Angular) қўлланади.