CSS -Datenbankabfragen? Sicher können wir!

Es klingt ein bisschen lustig, nicht wahr? CSS -Datenbankabfrage. Aber hey, CSS kann mit anderen Sprachen kommunizieren, da es die Werte von Dingen festlegt, die andere Sprachen lesen können. Darüber hinaus kann CSS andere Dateien anfordern, und ich denke, der Server kann auf die Anforderung mit etwas antworten, das er in der Datenbank angefordert hat.

Aber ich war ein kleines Thema. Die Idee für die CSS -Datenbankabfrage war ein Witz -Tweet neulich über Personalvermittler, die nach Entwicklern suchen, die mit CSS eine Verbindung zur Datenbank herstellen können. Lee Meichin schrieb: "Ja, ich kann mit CSS eine Verbindung zur Datenbank herstellen", was eine ebenso lustige Antwort ist.

Was sind die Techniken hinter der CSS -Datenbankabfrage?

Es ist ziemlich klug:

1. Verwenden Sie SQL.js, das manuell an ESM modifiziert wurde, das in JavaScript SQLite ist.
2. Bereiten Sie eine Datenbank vor, die SQL.js abfragen kann.
3. Erstellen Sie ein Houdini Paintworklet, das Abfragen in JavaScript ausführt und zu Paintworklet führt<canvas></canvas> Zeichnen Sie auf den Bildschirm zurück.
4. Übergeben Sie die Abfrage, die über CSS -benutzerdefinierte Eigenschaften an die Arbeitsplatz geleitet werden soll.

Die endgültige Verwendung ist also wie folgt:

 CSS.Paintworklet.addmodule ('./ CSSDB.JS'))

hauptsächlich {
  -SQL-Query: Wählen Sie den Namen aus dem Test aus;
  Hintergrund: Farbe (SQL-DB);
}

Sie müssen zugeben, dass dies die Datenbank in CSS verbindet und abfragt.

Es erinnert mich daran, dass Simon Willison dies letztes Jahr ganz anders macht. Sein Konzept ist, dass Sie erholsame Endpunkte wie /api/roadside_attractions haben, die JSON -Daten zurückgeben. Als alternativer Endpunkt können Sie es jedoch auf /api/roadside_attractions.css einstellen, die eine gültige CSS -Datei zurückgeben, in der alle Daten als CSS -benutzerdefiniertes Attribut verwendet werden.

Also sieht es so aus:

<link href="/api/roadside_attractions.css" rel="stylesheet">
.Attraction-name: After {Inhalt: var (-Name);
.Attraction-Address: After {Inhalt: var (-Adresse);
<p>Anziehungsname:</p>
<p>Adresse:</p>

Auch hier ist dies im Wesentlichen eine Verbindung zur Datenbank in CSS her (obwohl HTML erforderlich ist). Sie können sich selbst sehen, wie es funktioniert.

Das obige ist der detaillierte Inhalt vonCSS -Datenbankabfragen? Sicher können wir!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!