Sobes.tech
Junior

Πώς υλοποιείται το CRUD;

sobes.tech AI

Απάντηση από AI

CRUD σημαίνει Δημιουργία, Ανάγνωση, Ενημέρωση, Διαγραφή. Αυτές είναι οι βασικές λειτουργίες που εκτελούνται στα δεδομένα.

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.

  • Ανάγνωση όλων των πόρων: αίτηση GET στο κύριο endpoint της συλλογής.
  • Ανάγνωση συγκεκριμένου πόρου: αίτηση GET στο endpoint με το αναγνωριστικό του πόρου.
// Ανάγνωση όλων
fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log('Όλα τα στοιχεία:', data));

// Ανάγνωση συγκεκριμένου
fetch('/api/items/123')
  .then(response => response.json())
  .then(data => console.log('Item 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 (Transfer of Représentational State), όπου οι μέθοδοι HTTP χρησιμοποιούνται για την εκτέλεση αυτών των ενεργειών πάνω σε πόρους:

CRUD Μέθοδος HTTP
Create POST
Read GET
Update PUT/PATCH
Delete DELETE

Στην πλευρά του frontend, η υλοποίηση CRUD περιλαμβάνει την αποστολή αυτών των HTTP αιτημάτων στο backend API και την επεξεργασία των ληφθέντων απαντήσεων. Συχνά χρησιμοποιούνται βιβλιοθήκες για εργασία με HTTP (π.χ., Axios, Fetch API) και frameworks/βιβλιοθήκες για διαχείριση κατάστασης και UI (π.χ., React, Vue, Angular).