So erstellen Sie eine einfache CRUD-App in Appsmith

Die Entwicklung interner Tools von Grund auf verschwendet Zeit, die Sie nicht haben. Sie benötigen ein schnelles Admin-Panel oder eine Datenverwaltungsoberfläche, kein dreimonatiges Entwicklungsprojekt. Mit Appsmith können Sie eine Datenquelle verbinden, Widgets hineinziehen und Create-, Read-, Update- und Delete-Operationen in unter einer Stunde verdrahten.

Dieses Tutorial führt durch den standardmäßigen Appsmith-CRUD-App-Workflow: Verbinden Ihrer Datenbank, Anzeigen von Daten in einem Table-Widget, Verarbeiten von Datensatzerstellung und -aktualisierungen über Formulare sowie Aktualisieren von Daten nach Mutationen.

Verbinden Sie Ihre Datenquelle

Beginnen Sie mit der Erstellung einer neuen Anwendung in Appsmith. Klicken Sie in der linken Seitenleiste auf das + neben Datasources und wählen Sie Ihren Datenbanktyp – PostgreSQL, MySQL oder eine REST-API.

Geben Sie für SQL-Datenbanken Ihre Verbindungsdaten ein: Host, Port, Datenbankname, Benutzername und Passwort. Speichern Sie sensible Werte in der verschlüsselten Datenquellenkonfiguration und den Umgebungseinstellungen von Appsmith, anstatt sie in Abfragen oder Widgets fest zu codieren. Abfragen werden serverseitig ausgeführt, sodass Credentials niemals dem Browser ausgesetzt werden.

Die vollständige Liste der unterstützten Datenbanken und Konfigurationsoptionen finden Sie in der offiziellen Datenquellen-Dokumentation.

Testen Sie die Verbindung vor dem Speichern. Falls sie fehlschlägt, überprüfen Sie Firewall-Regeln, SSL-Anforderungen und die Richtigkeit der Credentials.

Daten mit einer Abfrage lesen

Erstellen Sie Ihre erste Abfrage zum Abrufen von Datensätzen. Klicken Sie auf + neben Queries/JS, wählen Sie Ihre Datenquelle und schreiben Sie eine SELECT-Anweisung:

SELECT id, name, email, created_at FROM users ORDER BY created_at DESC LIMIT 100;

Benennen Sie diese Abfrage getUsers und führen Sie sie aus, um die Antwort zu überprüfen.

Implementieren Sie für größere Datensätze serverseitige Paginierung. Das Table-Widget von Appsmith unterstützt dies nativ – Sie übergeben Offset- und Limit-Parameter an Ihre Abfrage basierend auf dem Paginierungsstatus der Tabelle.

Daten in einem Table-Widget anzeigen

Ziehen Sie ein Table-Widget auf die Arbeitsfläche. Setzen Sie in den Widget-Eigenschaften die Eigenschaft Table data auf:

{{getUsers.data}}

Die Tabelle generiert automatisch Spalten aus Ihrer Abfrageantwort. Benennen Sie Spalten um, passen Sie Breiten an und blenden Sie Felder wie interne IDs nach Bedarf aus.

Dieses Appsmith-Datenbankintegrationsmuster – Abfrage-zu-Widget-Bindung – bildet die Grundlage jedes Low-Code-CRUD-Frontends, das Sie erstellen werden. Die vollständigen Konfigurationsoptionen des Table-Widgets werden in der Table-Widget-Dokumentation behandelt.

Datensätze mit einem Formular oder Modal erstellen

Fügen Sie ein Button-Widget mit der Beschriftung “Neu hinzufügen” hinzu und setzen Sie seine onClick-Aktion auf das Öffnen eines Modals. Fügen Sie innerhalb des Modals Input-Widgets für jedes Feld hinzu: nameInput, emailInput.

Erstellen Sie eine INSERT-Abfrage namens createUser:

INSERT INTO users (name, email) VALUES ({{nameInput.text}}, {{emailInput.text}});

Verdrahten Sie den Submit-Button des Modals, um createUser auszuführen. Bei Erfolg lösen Sie getUsers.run() aus, um die Tabelle zu aktualisieren, und schließen dann das Modal.

Verwenden Sie für die Validierung die integrierten Validierungseigenschaften des Input-Widgets oder schreiben Sie ein JSObject, das Feldwerte vor der Übermittlung überprüft.

Datensätze mit ausgewählten Zeilen aktualisieren

Aktivieren Sie die Zeilenauswahl in Ihrem Table-Widget. Wenn ein Benutzer auf eine Zeile klickt, macht Table1.selectedRow die Daten dieses Datensatzes verfügbar.

Erstellen Sie eine UPDATE-Abfrage namens updateUser:

UPDATE users
SET name = {{nameInput.text}}, email = {{emailInput.text}}
WHERE id = {{Table1.selectedRow.id}};

Sie können dasselbe Modal für die Bearbeitung wiederverwenden, indem Sie Eingabefelder mit Table1.selectedRow.name als Standardwerte vorausfüllen. Wechseln Sie zwischen “Erstellen”- und “Bearbeiten”-Modi mithilfe einer JSObject-Variablen.

Nachdem die Aktualisierung erfolgreich ausgeführt wurde, rufen Sie getUsers.run() auf, um die Anzeige zu aktualisieren.

Datensätze mit Bestätigung löschen

Fügen Sie Ihrer Tabelle eine Button-Spalte für Löschaktionen hinzu. Setzen Sie den Spaltentyp auf Button und konfigurieren Sie das onClick, um eine DELETE-Abfrage auszuführen:

DELETE FROM users WHERE id = {{Table1.triggeredRow.id}};

Beachten Sie den Unterschied: triggeredRow erfasst die Zeile, in der der Button geklickt wurde, während selectedRow die hervorgehobene Zeile erfasst.

Aktivieren Sie Request confirmation before running in den Abfrageeinstellungen, um versehentliche Löschungen zu verhindern. Bei Erfolg aktualisieren Sie die Tabellendaten.

Der Appsmith-Table-Form-Workflow

Das Muster, das Sie erstellt haben – Table-Widget zur Anzeige von Abfrageergebnissen, Formular oder Modal zur Verarbeitung von Eingaben, parametrisierte Abfragen für Mutationen und Datenaktualisierung bei Erfolg – skaliert für jeden CRUD-Anwendungsfall. Dieser Appsmith-Table-Form-Workflow gilt unabhängig davon, ob Sie Benutzer, Inventar, Support-Tickets oder andere Datensätze verwalten.

Für Produktions-Apps sollten Sie Folgendes berücksichtigen:

• Rollenbasierter Zugriff: Appsmith unterstützt granulare Berechtigungen auf Anwendungs-, Seiten- und Datenquellenebene
• Umgebungen und Credentials: Speichern Sie Datenbankpasswörter und API-Schlüssel sicher über Dev-, Staging- und Produktionsumgebungen hinweg
• Packages: Teilen Sie wiederverwendbare Abfragen und JSObjects über mehrere Anwendungen hinweg mit Appsmith Packages
• Serverseitige Paginierung: Unerlässlich für Tabellen mit Tausenden von Datensätzen

Fazit

Sie haben jetzt eine funktionale CRUD-Oberfläche: Daten werden in einer Tabelle angezeigt, Formulare zum Erstellen und Bearbeiten von Datensätzen, Löschfunktionalität mit Bestätigung und automatische Datenaktualisierung nach jeder Mutation.

Von hier aus erweitern Sie die App mit Suchfiltern, zusätzlichen Seiten oder verbinden Sie sie mit Appsmith Workflows für Backend-Automatisierung. Das Low-Code-CRUD-Frontend, das Sie erstellt haben, dient als Grundlage für komplexere interne Tools – ohne UI und Datenschicht von Grund auf neu zu schreiben.

Häufig gestellte Fragen

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.