Operacje CRUD

Frontend SELF PL
Poziom 44 , Lekcja 1
Dostępny

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):

JavaScript
    
      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):

JavaScript
    
      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):

JavaScript
    
      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):

JavaScript
    
      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):

JavaScript
    
      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):

JavaScript
    
      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):

JavaScript
    
      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):

JavaScript
    
      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:

  1. Obsługa błędów: zawsze obsługuj możliwe błędy przy wykonywaniu zapytań HTTP. Używaj bloków try...catch lub metod catch do obsługi błędów.
  2. Walidacja danych: przed wysłaniem danych na serwer upewnij się, że są w odpowiednim formacie.
  3. 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ń.
  4. Paginacja i filtrowanie: przy pobieraniu dużych ilości danych używaj parametrów zapytań do paginacji i filtrowania danych.
  5. Cache'owanie: dla poprawienia wydajności możesz cache'ować często zapytywane dane.
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION