Heim >Web-Frontend >js-Tutorial >Erstellen Sie in wenigen Minuten ein Admin-Panel für Ihr Projekt
Erstellen Sie in wenigen Minuten ein Admin-Panel für Ihr Projekt
- DDDOriginal
- 2024-12-22 03:38:10487Durchsuche
Kottster ist ein kostenloses Tool, das Entwicklern hilft, Admin-Panels schnell zu erstellen und bereitzustellen. In nur 5 Minuten können Sie ein voll funktionsfähiges Admin-Panel erstellen, es in der Cloud bereitstellen und mit Ihrem Team teilen.
Wenn Sie Apps mit Kottster erstellen, laufen diese auf Remix, einem Web-Framework zum Erstellen von Full-Stack-Apps mithilfe der React- und Node.js-Umgebung.
In diesem Artikel zeige ich Ihnen, wie Sie eine Kottster-App erstellen, sie mit Ihrer Datenbank verbinden, Seiten für bestimmte Tabellen generieren und sie überall hosten.
Ein Projekt erstellen
Bevor Sie beginnen, stellen Sie sicher, dass Node.js (v20 oder höher) auf Ihrem Computer installiert ist.
Um ein neues Projekt zu erstellen, führen Sie diesen Befehl aus:
npx @kottster/cli new
Sie werden nach einem Projektnamen gefragt, ob Sie JavaScript oder TypeScript verwenden möchten und welchen Paketmanager Sie verwenden möchten. Danach wird ein neuer Projektordner mit allem erstellt, was Sie für den Start benötigen.
Um die App lokal zu starten, öffnen Sie den erstellten Ordner und führen Sie npm run dev:
aus
Wenn die App geladen wird, wird die Anmeldeseite angezeigt. Klicken Sie auf „Konto erstellen“, um sich bei Kottster anzumelden. Geben Sie nach der Anmeldung einen Namen für Ihre App ein und klicken Sie auf „App erstellen“. Dadurch wird Ihre App erstellt und Sie werden angemeldet.
Sobald alles eingerichtet ist, wird die Seite „Erste Schritte“ angezeigt:
Verbinden Sie Ihre Datenbank
Wählen Sie auf der Seite „Erste Schritte“ Ihren Datenbanktyp aus, geben Sie die Verbindungsdetails ein und klicken Sie auf „Verbinden“.
Dadurch werden die erforderlichen Pakete installiert und eine Datei mit einer mit Ihrer Datenbank verbundenen Datenquelle in Ihrem Projektordner erstellt.
Bitte beachten Sie, dass Ihre Anmeldeinformationen immer privat bleiben und das Kottster-Tool keinen Zugriff auf Ihre Datenbank hat, wenn Ihre App selbst gehostet wird.
Seiten generieren
Nachdem Sie Ihre Datenbank verbunden haben, sehen Sie die Registerkarte „Seiten generieren“:
Mit dieser Seite können Sie schnell Seiten erstellen, um Daten aus Ihren Datenbanktabellen anzuzeigen oder zu verwalten.
Wenn Sie „Einfügung zulassen“ oder „Aktualisierung zulassen“ aktivieren, sind Formulare zum Hinzufügen und Aktualisieren von Datensätzen verfügbar. Durch Aktivieren von „Löschen zulassen“ wird die Möglichkeit zum Löschen von Datensätzen hinzugefügt.
Sobald Sie Ihre Auswahl getroffen haben, klicken Sie auf „Seiten generieren“. Das Tool generiert automatisch die Seitendateien und aktualisiert das Seitenleistenmenü mit neuen Elementen.
So funktionieren Seiten
Jede Seite in Ihrem Admin-Panel befindet sich im Verzeichnis app/routes. Bei diesen Seiten handelt es sich im Wesentlichen um Remix-Routen, die sowohl als Benutzeroberfläche als auch als API dienen. Sie können sie nach Ihren Wünschen anpassen.
Jede Seitendatei in der Kottster-App sollte eine React-Komponente
Wenn Sie eine Seite für eine bestimmte Datenbanktabelle generieren, enthält diese Folgendes:
- Eine Remix-Aktion, die die Funktion createTableRpc aufruft. Diese Funktion steuert das Verhalten der Tabelle und aktiviert ihre Funktionen.
- Eine
Komponente, die eng mit den in der Aktion definierten createTableRpc-Einstellungen verknüpft ist.
Beispiel einer generierten Seite für die Tabelle „Benutzer“:
npx @kottster/cli new
Sie können mehr über createTableRpc und das
