6.1 Wprowadzenie do CRUD
CRUD to akronim oznaczający cztery podstawowe operacje, które można wykonywać na danych: tworzenie (Create), odczyt (Read), aktualizacja (Update) i usuwanie (Delete). Te operacje są fundamentalne dla pracy z bazami danych i stanowią podstawę większości aplikacji webowych.
Co to jest CRUD?
- Create (Tworzenie): operacja tworzenia służy do dodawania nowych rekordów do bazy danych. Pozwala to wprowadzać nowe dane do systemu.
- Read (Odczyt): operacja odczytu służy do pobierania danych z bazy danych. Umożliwia użytkownikom zapytania i przegląd istniejących informacji.
- Update (Aktualizacja): operacja aktualizacji służy do zmiany istniejących rekordów w bazie danych. Umożliwia edytowanie i korygowanie danych.
- Delete (Usuwanie): operacja usuwania służy do usuwania rekordów z bazy danych. Umożliwia to usuwanie niepotrzebnych lub przestarzałych danych.
Metody HTTP dla operacji CRUD
W kontekście web developmentu operacje CRUD często wykonywane są przy użyciu zapytań HTTP do API. Różne metody HTTP odpowiadają różnym operacjom CRUD:
- POST: używany do tworzenia nowych zasobów.
- GET: używany do odczytywania (pobierania) zasobów.
- PUT i PATCH: używane do aktualizacji istniejących zasobów. PUT zazwyczaj do pełnej zamiany zasobu, podczas gdy PATCH — do częściowej aktualizacji.
- DELETE: używany do usuwania zasobów.
Dlaczego potrzebne są operacje CRUD?
Operacje CRUD są podstawą pracy z danymi w aplikacjach webowych. Pozwalają deweloperom implementować podstawowe funkcjonalności, takie jak tworzenie kont użytkowników, edytowanie profili, przeglądanie danych i usuwanie rekordów. Te operacje również zapewniają interakcję między klientem a serwerem, umożliwiając transfer danych i komend.
Nowoczesne narzędzia do wykonywania operacji CRUD
Współczesne aplikacje webowe często wykorzystują różne narzędzia i biblioteki do wykonywania operacji CRUD przez API:
- Fetch API: wbudowany w przeglądarkę sposób wykonywania zapytań HTTP, oparty na promesach.
- Axios: popularna biblioteka do wykonywania zapytań HTTP, oferująca wygodne i zaawansowane API.
Te narzędzia pomagają deweloperom łatwo i efektywnie wykonywać operacje CRUD, zapewniając elastyczność i prostotę integracji z różnymi API serwera.
6.2 Korzystanie z Fetch
Przeanalizujmy korzystanie z Fetch do wykonywania operacji CRUD.
Tworzenie (Create):
const createData = async (data) => {
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
const result = await response.json();
console.log('Created:', result);
};
createData({ title: 'foo', body: 'bar', userId: 1 });
Odczyt (Read):
const readData = async (id) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
const result = await response.json();
console.log('Read:', result);
};
readData(1);
Aktualizacja (Update):
const updateData = async (id, data) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
const result = await response.json();
console.log('Updated:', result);
};
updateData(1, { title: 'foo', body: 'bar', userId: 1 });
Usuwanie (Delete):
const deleteData = async (id) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
method: 'DELETE'
});
if (response.ok) {
console.log('Deleted:', id);
} else {
console.error('Failed to delete:', id);
}
};
deleteData(1);
6.3 Korzystanie z Axios
Przeanalizujmy korzystanie z Axios do wykonywania operacji CRUD.
Tworzenie (Create):
const axios = require('axios');
const createData = async (data) => {
try {
const response = await axios.post('https://jsonplaceholder.typicode.com/posts', data);
console.log('Created:', response.data);
} catch (error) {
console.error('Error creating data:', error);
}
};
createData({ title: 'foo', body: 'bar', userId: 1 });
Odczyt (Read):
const readData = async (id) => {
try {
const response = await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`);
console.log('Read:', response.data);
} catch (error) {
console.error('Error reading data:', error);
}
};
readData(1);
Aktualizacja (Update):
const updateData = async (id, data) => {
try {
const response = await axios.put(`https://jsonplaceholder.typicode.com/posts/${id}`, data);
console.log('Updated:', response.data);
} catch (error) {
console.error('Error updating data:', error);
}
};
updateData(1, { title: 'foo', body: 'bar', userId: 1 });
Usuwanie (Delete):
const deleteData = async (id) => {
try {
const response = await axios.delete(`https://jsonplaceholder.typicode.com/posts/${id}`);
if (response.status === 200) {
console.log('Deleted:', id);
}
} catch (error) {
console.error('Error deleting data:', error);
}
};
deleteData(1);
6.4 Porady dotyczące użycia CRUD
Porady dotyczące użycia operacji CRUD przez API:
- Obsługa błędów: zawsze obsługuj możliwe błędy przy wykonywaniu zapytań HTTP. Używaj bloków
try...catch
lub metodcatch
do obsługi błędów. - Walidacja danych: przed wysłaniem danych na serwer upewnij się, że są w odpowiednim formacie.
- Uwierzytelnianie i autoryzacja: pracując z chronionymi zasobami upewnij się, że prawidłowo obsługujesz uwierzytelnianie i autoryzację, na przykład dodając tokeny dostępu do nagłówków zapytań.
- Paginacja i filtrowanie: przy pobieraniu dużych ilości danych używaj parametrów zapytań do paginacji i filtrowania danych.
- Cache'owanie: dla poprawienia wydajności możesz cache'ować często zapytywane dane.
GO TO FULL VERSION