CRUD nima?

CRUD — bu ma'lumotlar ustida bajariladigan asosiy operatsiyalarni tavsiflovchi qisqartma:

• Create (Yaratish): Yangi ma'lumotlarni qo'shish.
• Read (O'qish): Mavjud ma'lumotlarni olish.
• Update (Yangilash): Mavjud ma'lumotlarni o'zgartirish.
• Delete (O'chirish): Ma'lumotlarni o'chirish.

Frontend dasturlashda, bu operatsiyalar ko'pincha API orqali backend bilan o'zaro aloqada bo'lib, HTTP metodlariga mos keladi:

CRUD Amali	HTTP Metodi	Tavsifi
Create	POST	Ma'lumotlarni yuborib yaratish.
Read	GET	Ma'lumotlarni so'rash.
Update	PUT / PATCH	Ma'lumotlarni yuborib yangilash.
Delete	DELETE	Ma'lumotlarni o'chirish.

REST API bilan o'zaro aloqada bo'lish uchun JavaScript yordamida frontendda misol:

// Faraz qilaylik, user obyekti bor va uni serverda yaratmoqchimiz
fetch('/api/users', {
  method: 'POST', // Yaratish
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Yangi Foydalanuvchi', email: 'yangi.foydalanuvchi@misol.com' }),
})
  .then(response => response.json())
  .then(data => console.log('Foydalanuvchi yaratildi:', data))
  .catch(error => console.error('Foydalanuvchi yaratishda xato:', error));

// Ma'lumotlarni o'qish misoli
fetch('/api/users/1') // ID 1 bo'lgan foydalanuvchi uchun
  .then(response => response.json())
  .then(data => console.log('Foydalanuvchi maʼlumotlari:', data))
  .catch(error => console.error('Foydalanuvchini olishda xato:', error));

// Ma'lumotlarni yangilash misoli
fetch('/api/users/1', {
  method: 'PUT', // Yangilash
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Yangilangan Foydalanuvchi' }),
})
  .then(response => response.json())
  .then(data => console.log('Foydalanuvchi yangilandi:', data))
  .catch(error => console.error('Foydalanuvchini yangilashda xato:', error));

// Ma'lumotlarni o'chirish misoli
fetch('/api/users/1', {
  method: 'DELETE', // O'chirish
})
  .then(response => {
    if (response.ok) {
      console.log('Foydalanuvchi oʼchirildi');
    } else {
      console.error('Oʼchirishda xato:', response.status);
    }
  })
  .catch(error => console.error('Oʼchirishda xato:', error));