Web-Frontend
js-Tutorial
ZingGrid mit Supabase verbinden: Fügen Sie in wenigen Minuten ein Backend hinzu
ZingGrid mit Supabase verbinden: Fügen Sie in wenigen Minuten ein Backend hinzu
Cross-Beitrag aus meinem Artikel auf dem Zing-Blog.
Supabase ist eine Open-Source-Firebase-Alternative. Sie bieten eine Vielzahl von Diensten an, aber in diesem Artikel werden wir näher darauf eingehen, wie es als einfaches Backend für unsere Grids fungieren kann.
Ersteinrichtung
Es gibt ein paar Schritte, die wir auf der Supabase-Seite durchlaufen müssen, bevor wir mit der Konfiguration unserer Raster beginnen können.
1. Kontoerstellung
Zuerst müssen wir das Supabase-Konto erstellen, mit dem wir eine Verbindung herstellen möchten. Über diesen Link können Sie sich bei Supabase anmelden. Sobald Ihr Konto erstellt und per E-Mail bestätigt wurde, fahren Sie mit dem nächsten Schritt fort.
2. Erstellen Sie Ihr erstes Projekt
Gehen Sie zur Dashboard-Seite und erstellen Sie ein neues Projekt. Notieren Sie sich unbedingt den Projektnamen und das Datenbankpasswort.
3. Notieren Sie sich die Projektinformationen
An diesem Punkt sollten Sie Ihre Projekt-URL und Ihren API-Schlüssel sehen. Wir müssen beides später in unserem Code an ZingGrid übergeben, also stellen Sie sicher, dass Sie sie in einer sicheren lokalen Datei speichern.
4. Erstellen Sie Ihre erste Tabelle
Klicken Sie in der Seitenleiste auf den Abschnitt Tabelleneditor. Von hier aus können wir unsere erste Tabelle erstellen
Der erste Schritt besteht darin, unserer Tabelle einen Namen zu geben, hier verwende ich demoTable
Dann können wir die Spalten bearbeiten. Für dieses Beispiel habe ich zwei Spalten. Eine für Vornamen und eine für Nachnamen.
5. Fügen Sie einige Beispieldaten hinzu
6. Aktualisieren Sie die Sicherheitseinstellungen
Wir werden die Sicherheit auf Zeilenebene vorübergehend deaktivieren, damit wir für diese Demo problemlos aus unserer Tabelle lesen und schreiben können. In der Produktion möchten wir die richtigen Rollen mit Authentifizierung einrichten.
⚠️ HINWEIS: Diese Einstellungsänderung dient nur dem Zweck dieser Demo und ist nicht für die Produktion gedacht
Supabase-Adapter – REST-API
ZingGrid unterstützt beide Arten der Interaktion mit Supabase – über die REST-API und über das Client-Skript. Wir gehen zunächst auf die Verwendung der REST-API ein.
Stellen Sie sicher, dass Sie Folgendes ersetzen, indem Sie den anfänglichen Democode unten verwenden:
- ***Link*** – Die Projekt-URL, die Sie sich zuvor notiert haben
- ***tableName*** – Der Name der Supabase-Tabelle, die Sie gerade erstellt haben
- ***apiKey*** – Der Supabase-API-Schlüssel, den Sie zuvor notiert haben
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="/lib/zinggrid.js"></script>
<title>Supabase</title>
</head>
<body>
<zing-grid
page-size="5"
sort
pager
title="Supabase"
editor-controls
editor-disabled-fields="id"
src="https://***link***.supabase.co/rest/v1/***tableName***"
>
<zg-data adapter="supabase">
<zg-param
name="headers"
value='
{
"Authorization": "Bearer ***apiKey***",
"apikey": "***apiKey***"
}'
></zg-param>
</zg-data>
</zing-grid>
</body>
</html>
Wenn Sie diese Seite im Browser anzeigen, sollten Sie die anfänglichen Daten sehen, die wir eingegeben haben!
SupabaseJS-Adapter – Client-Skript
Wenn Ihre App zufällig die Supabase-JavaScript-Client-Bibliothek verwendet (über die Sie auf der Dokumentationsseite mehr erfahren können), können Sie Ihre Supabase-Anmeldeinformationen außerhalb Ihres Markups speichern, was die Flexibilität erheblich erhöht.
Als Ergänzung zum vorherigen Beispiel erstellen wir zunächst ein Superbase-Clientobjekt (mehr dazu in ihren Dokumenten)
const supabaseUrl = 'https://***link***.supabase.co/'; const supabaseKey = '***apiKey***'; const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);
und dann diesen Client bei ZingGrid registrieren
ZingGrid.registerClient(supabaseClient);
Schließlich setzen wir das Adapterattribut für zg-data auf supabaseJS und wir haben Folgendes:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Supabase</title>
<!-- ZingGrid -->
<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
<!-- Supabase Client Library -->
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
</head>
<body>
<script>
const supabaseUrl = 'https://***link***.supabase.co/';
const supabaseKey = '***apiKey***';
const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);
ZingGrid.registerClient(supabaseClient);
</script>
<zing-grid
page-size="5"
sort
pager
title="SupabaseJS"
editor-controls
editor-disabled-fields="id"
>
<zg-data adapter="supabaseJS">
<zg-param name="dataTable" value="***tableName***"></zg-param>
</zg-data>
</zing-grid>
</body>
</html>
Funktioniert wie zuvor
Das obige ist der detaillierte Inhalt vonZingGrid mit Supabase verbinden: Fügen Sie in wenigen Minuten ein Backend hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße?
Apr 04, 2025 pm 02:42 PM
Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...
Entmystifizieren JavaScript: Was es tut und warum es wichtig ist
Apr 09, 2025 am 12:07 AM
JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.
Wer bekommt mehr Python oder JavaScript bezahlt?
Apr 04, 2025 am 12:09 AM
Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.
Wie kann man Parallax -Scrolling- und Element -Animationseffekte wie die offizielle Website von Shiseido erzielen?
oder:
Wie können wir den Animationseffekt erzielen, der von der Seite mit der Seite mit der offiziellen Website von Shiseido begleitet wird?
Apr 04, 2025 pm 05:36 PM
Diskussion über die Realisierung von Parallaxe -Scrolling- und Elementanimationseffekten in diesem Artikel wird untersuchen, wie die offizielle Website der Shiseeido -Website (https://www.shiseeido.co.jp/sb/wonderland/) ähnlich ist ...
Ist JavaScript schwer zu lernen?
Apr 03, 2025 am 12:20 AM
JavaScript zu lernen ist nicht schwierig, aber es ist schwierig. 1) Verstehen Sie grundlegende Konzepte wie Variablen, Datentypen, Funktionen usw. 2) Beherrschen Sie die asynchrone Programmierung und implementieren Sie sie durch Ereignisschleifen. 3) Verwenden Sie DOM -Operationen und versprechen Sie, asynchrone Anfragen zu bearbeiten. 4) Vermeiden Sie häufige Fehler und verwenden Sie Debugging -Techniken. 5) Die Leistung optimieren und Best Practices befolgen.
Die Entwicklung von JavaScript: Aktuelle Trends und Zukunftsaussichten
Apr 10, 2025 am 09:33 AM
Zu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.
Wie fusioniere ich Arrayelemente mit derselben ID mit JavaScript in ein Objekt?
Apr 04, 2025 pm 05:09 PM
Wie fusioniere ich Array -Elemente mit derselben ID in ein Objekt in JavaScript? Bei der Verarbeitung von Daten begegnen wir häufig die Notwendigkeit, dieselbe ID zu haben ...
So implementieren Sie die Funktion des Ziell- und Drop-Einstellungsfunktion, ähnlich wie bei VSCODE in der Front-End-Entwicklung?
Apr 04, 2025 pm 02:06 PM
Erforschen Sie die Implementierung der Funktion des Bedien- und Drop-Einstellungsfunktion der Panel ähnlich wie VSCODE im Front-End. In der Front-End-Entwicklung wird VSCODE ähnlich wie VSCODE implementiert ...
