CRUD Operationen

6.1 Einführung in CRUD

CRUD ist ein Akronym für die vier grundlegenden Operationen, die mit Daten durchgeführt werden können: Erstellen (Create), Lesen (Read), Aktualisieren (Update) und Löschen (Delete). Diese Operationen sind grundlegend für die Arbeit mit Datenbanken und bilden die Grundlage der meisten Webanwendungen.

Was ist CRUD?

• Create (Erstellen): Diese Operation wird verwendet, um neue Einträge in einer Datenbank hinzuzufügen. Dadurch können neue Daten ins System eingebracht werden.
• Read (Lesen): Diese Operation wird verwendet, um Daten aus einer Datenbank abzurufen. Dadurch können Benutzer bestehende Informationen anfordern und anzeigen.
• Update (Aktualisieren): Diese Operation wird verwendet, um vorhandene Einträge in einer Datenbank zu ändern. Dadurch können Daten bearbeitet und korrigiert werden.
• Delete (Löschen): Diese Operation wird verwendet, um Einträge aus einer Datenbank zu entfernen. Dadurch können unnötige oder veraltete Daten gelöscht werden.

HTTP-Methoden für CRUD Operationen

Im Kontext der Webentwicklung werden CRUD-Operationen häufig durch HTTP-Anfragen an ein API durchgeführt. Verschiedene HTTP-Methoden entsprechen unterschiedlichen CRUD-Operationen:

• POST: Wird verwendet, um neue Ressourcen zu erstellen.
• GET: Wird verwendet, um Ressourcen abzurufen (lesen).
• PUT und PATCH: Werden verwendet, um bestehende Ressourcen zu aktualisieren. PUT wird normalerweise für einen vollständigen Ersatz der Ressource verwendet, während PATCH für eine teilweise Aktualisierung genutzt wird.
• DELETE: Wird verwendet, um Ressourcen zu löschen.

Warum sind CRUD-Operationen wichtig?

CRUD-Operationen sind die Grundlage für die Arbeit mit Daten in Webanwendungen. Sie ermöglichen es Entwicklern, grundlegende Funktionen zu implementieren, wie das Erstellen von Benutzerkonten, das Bearbeiten von Profilen, das Anzeigen von Daten und das Löschen von Einträgen. Diese Operationen bieten auch die Interaktion zwischen Client und Server, indem sie Daten und Befehle übertragen.

Moderne Tools zur Durchführung von CRUD-Operationen

Moderne Webanwendungen verwenden häufig verschiedene Tools und Bibliotheken, um CRUD-Operationen über APIs durchzuführen:

• Fetch API: Ein in den Browser integrierter Weg, um HTTP-Anfragen basierend auf Promises durchzuführen.
• Axios: Eine beliebte Bibliothek zur Durchführung von HTTP-Anfragen, die eine bequeme und erweiterte API bietet.

Diese Tools helfen Entwicklern, CRUD-Operationen einfach und effektiv auszuführen und bieten Flexibilität und einfache Integration mit verschiedenen Server-APIs.

6.2 Verwendung von Fetch

Schauen wir uns die Verwendung von Fetch zur Durchführung von CRUD-Operationen an.

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

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

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

Löschen (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 Verwendung von Axios

Schauen wir uns die Verwendung von Axios zur Durchführung von CRUD-Operationen an.

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

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

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

Löschen (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 Tipps zur Verwendung von CRUD

Tipps zur Verwendung von CRUD-Operationen über APIs:

1. Fehlerbehandlung: Behandle immer mögliche Fehler bei der Durchführung von HTTP-Anfragen. Verwende try...catch-Blöcke oder catch-Methoden zur Fehlerbehandlung.
2. Datenvalidierung: Stelle sicher, dass die Daten vor dem Senden an den Server dem erwarteten Format entsprechen.
3. Authentifizierung und Autorisierung: Stelle bei der Arbeit mit geschützten Ressourcen sicher, dass Authentifizierung und Autorisierung korrekt gehandhabt werden, beispielsweise durch das Hinzufügen von Zugangstoken zu den Anfrage-Headern.
4. Paginierung und Filterung: Verwende Anfrageparameter für die Paginierung und Filterung von Daten, wenn große Datenmengen abgerufen werden.
5. Caching: Um die Leistung zu verbessern, kannst du häufig angeforderte Daten zwischenspeichern.