CodeGym /Corso Java /Frontend SELF IT /Operazioni CRUD

Operazioni CRUD

Frontend SELF IT
Livello 44 , Lezione 1
Disponibile

6.1 Introduzione a CRUD

CRUD è un acronimo che indica le quattro operazioni principali che puoi fare con i dati: creazione (Create), lettura (Read), aggiornamento (Update) e eliminazione (Delete). Queste operazioni sono fondamentali per lavorare con i database e sono la base della maggior parte delle applicazioni web.

Che cosa è CRUD?

  • Create (Creazione): l'operazione di creazione è usata per aggiungere nuovi record al database. Questo consente di inserire nuovi dati nel sistema.
  • Read (Lettura): l'operazione di lettura è usata per estrarre dati dal database. Questo consente agli utenti di richiedere e visualizzare le informazioni esistenti.
  • Update (Aggiornamento): l'operazione di aggiornamento è usata per modificare i record esistenti nel database. Questo consente di modificare e correggere i dati.
  • Delete (Eliminazione): l'operazione di eliminazione è usata per rimuovere i record dal database. Questo consente di eliminare dati non necessari o obsoleti.

Metodi HTTP per CRUD

Nel contesto dello sviluppo web, le operazioni CRUD sono spesso eseguite usando richieste HTTP verso API. Diversi metodi HTTP corrispondono a diverse operazioni CRUD:

  • POST: usato per creare nuove risorse.
  • GET: usato per leggere (ottenere) le risorse.
  • PUT e PATCH: usati per aggiornare risorse esistenti. PUT è solitamente usato per sostituire completamente una risorsa, mentre PATCH per aggiornamenti parziali.
  • DELETE: usato per eliminare risorse.

Perché sono necessarie le operazioni CRUD?

Le operazioni CRUD sono la base per lavorare con i dati nelle applicazioni web. Permettono agli sviluppatori di implementare funzionalità di base, come la creazione di account utente, la modifica dei profili, la visualizzazione dei dati e l'eliminazione dei record. Queste operazioni facilitano anche l'interazione tra client e server, permettendo di trasmettere dati e comandi.

Strumenti moderni per eseguire operazioni CRUD

Le applicazioni web moderne spesso usano diversi strumenti e librerie per eseguire operazioni CRUD tramite API:

  • Fetch API: un modo integrato nel browser per effettuare richieste HTTP, basato su promise.
  • Axios: una libreria popolare per effettuare richieste HTTP, che fornisce un API comodo e avanzato.

Questi strumenti aiutano gli sviluppatori a eseguire facilmente ed efficacemente operazioni CRUD, garantendo flessibilità e semplicità nell'integrazione con diverse API server.

6.2 Uso di Fetch

Vediamo come utilizzare Fetch per eseguire operazioni CRUD.

Creazione (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 });
    
  

Lettura (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);
    
  

Aggiornamento (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 });
    
  

Eliminazione (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 Uso di Axios

Vediamo come utilizzare Axios per eseguire operazioni CRUD.

Creazione (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 });
    
  

Lettura (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);
    
  

Aggiornamento (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 });
    
  

Eliminazione (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 Consigli per l'uso di CRUD

Consigli per l'uso delle operazioni CRUD tramite API:

  1. Gestione degli errori: gestisci sempre i possibili errori durante le richieste HTTP. Usa blocchi try...catch o metodi catch per gestire gli errori.
  2. Validazione dei dati: prima di inviare i dati al server, assicurati che rispettino il formato atteso.
  3. Autenticazione e autorizzazione: quando lavori con risorse protette, assicurati che l'autenticazione e l'autorizzazione siano gestite correttamente, ad esempio aggiungendo token di accesso negli header delle richieste.
  4. Paginazione e filtraggio: quando ricevi grandi quantità di dati, usa i parametri di richiesta per la paginazione e il filtraggio dei dati.
  5. Caching: per migliorare le performance, puoi memorizzare nella cache i dati richiesti frequentemente.
Commenti
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION