Πώς υλοποιείται το 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).