Website-Backend (dynamische Handler)
Neben ihren statischen Dateien kann eine hochgeladene Website ein echtes Backend haben — kleine JavaScript-Handler, die an einzelne Adressen gebunden sind. Jeder Handler ist an einen Pfad und eine HTTP-Methode gebunden; wenn ein Besucher diese Adresse öffnet, führt Qubix den Handler aus und gibt zurück, was er erzeugt — eine Seite, eine JSON-Antwort, eine Weiterleitung, einen Statuscode.
Verwenden Sie es, wenn eine Seite serverseitig etwas tun muss, statt nur statischen Inhalt anzuzeigen: einen Lead über eine POST-Anfrage entgegennehmen, auf einen bestimmten Pfad mit generiertem HTML antworten oder je nach Anfrage eine Weiterleitung senden. Für gewöhnliche statische Whitepages und Landings benötigen Sie das nicht — lassen Sie den Tab Backend leer, und die Website wird als reine Dateien ausgeliefert.
Den Backend-Tab öffnen
Eine Website-Karte hat oben drei Tabs: Dateien, Backend und Vorschau. Der aktive Tab wird in der Adressleiste gespeichert, sodass Sie einen Link direkt zu einem bestimmten Tab kopieren können.
- Öffnen Sie den Bereich «Websites» und klicken Sie auf die gewünschte Website.
- Wechseln Sie zum Tab Backend.
Wenn die Website noch keine Handler hat, zeigt die Liste den Hinweis, dass «+ new» einen aus einer Vorlage erstellt.
Der Tab Backend wird nur benötigt, wenn die Seite serverseitig etwas verarbeiten muss. Eine rein statische Seite funktioniert ohne jegliche Handler.
Einen Handler erstellen
- Klicken Sie im Tab Backend oben links über der Handler-Liste auf «+ new». Ein neuer Handler wird aus einer fertigen Vorlage erstellt und im Editor geöffnet.
🎬 GIF: Klick auf «+ new» und das Öffnen des Vorlagen-Handlers im Editor
- Legen Sie im Kopfformular über dem Editor den Pfad fest — die Adresse, auf die der Handler antwortet. Das Feld akzeptiert eine Vorlage mit Platzhaltern (zum Beispiel
/users/:id)::name— erfasst ein Pfadsegment (zum Beispiel passt:idin/users/:idauf/users/42);*— erfasst den Rest des Pfads über mehrere Segmente hinweg;**— passt auf den Rest des Pfads, ohne ihn zu erfassen.
- Wählen Sie die Methode —
GET,POST,PUT,DELETE,PATCH,HEAD,OPTIONSoder ANY (antwortet auf jede Methode). - Lassen Sie das Kontrollkästchen enabled aktiviert, damit der Handler auf der Live-Website funktioniert. Schalten Sie es aus, um einen Handler gespeichert, aber inaktiv zu halten.
- Schreiben Sie im zentralen Editor den Handler-Code (siehe Der Handler-Code unten).
- Klicken Sie auf Speichern (oder Cmd+S, unter Windows — Strg+S).
In der Liste links wird jeder Handler durch seine Methode und seinen Pfad dargestellt (ein Handler ohne festgelegte Methode wird als ANY angezeigt); ein deaktivierter ist entsprechend gekennzeichnet.
Wenn mehrere Handler auf dieselbe Adresse antworten könnten, wählt Qubix den spezifischsten aus — ein Handler mit einem exakten Pfad gewinnt gegenüber einem mit einem Platzhalter oder einer Wildcard. So können Sie einen präzisen Handler neben einem breiten Catch-all halten, ohne dass sie kollidieren.
Der Handler-Code
Ein Handler ist eine JavaScript-Funktion, die ein Anfrageobjekt erhält — nennen Sie es r — das die Anfrage (Methode, Pfad, Query- und Formularargumente, Header, die erfassten Pfadsegmente) und die Antwort (Header setzen, einen Status mit einem Body zurückgeben oder eine Weiterleitung) zugänglich macht. Die Vorlage, mit der der Editor startet, zeigt bereits die typische Form.
Der Editor ist ein vollwertiger Code-Editor mit Syntaxhervorhebung und Autovervollständigung: Beginnen Sie, r. zu tippen, und Qubix schlägt die verfügbaren Anfrage- und Antwortfelder mit ihren Beschreibungen vor, sodass Sie sie sich nicht merken müssen.
Innerhalb eines Handlers steht Ihnen auch das gemeinsame Qubix-Werkzeugset zur Verfügung: schreibgeschützte Datenbankabfragen, Anfragen an externe Dienste und Zustand, der zwischen Aufrufen erhalten bleibt. Diese funktionieren genauso wie in Skripten — Einzelheiten finden Sie in jenem Artikel. Ausgehende Anfragen sind nur an Adressen erlaubt, die der Administrator auf die Zulassungsliste gesetzt hat. Welche Tabellen und Spalten eine Abfrage erreichen kann, finden Sie unter Tabellen für sql-Abfragen.
Das r-Objekt — Referenz
Alles, was der Handler aus der Anfrage liest und zum Erstellen der Antwort verwendet.
Anfrage lesen:
| Feld | Was es ist |
|---|---|
r.method | Die HTTP-Methode der Anfrage (GET, POST, …) |
r.uri | Die Adresse, auf die der Handler geantwortet hat (zum Beispiel /promo/123) |
r.rawUri | Die vollständige externe Adresse einschließlich des Dienst-Präfixes |
r.args | Adress- und Formularparameter (key → value) |
r.params | Aus der Pfadvorlage erfasste Werte (zum Beispiel id aus /users/:id) |
r.requestBuffer | Der Anfrage-Body als Zeichenkette |
r.headersIn | Die Anfrage-Header |
r.remoteAddress | Die IP-Adresse des Besuchers |
r.variables | Der Klick-Kontext: geo, click_id, sub1…sub5, lang |
r.session | Die Besuchersitzung: get(key), set(key, value), delete(key) |
Antwort erstellen:
| Feld / Methode | Aktion |
|---|---|
r.headersOut | Die Antwort-Header (Sie können sie setzen und löschen) |
r.return(status, body?, location?) | Antwort senden; location ist die Weiterleitungsadresse |
r.log(...), r.warn(...), r.error(...) | In das Ausführungsprotokoll schreiben (im Test-Runner sichtbar) |
Krypto-Hilfsfunktionen
Ein Handler verfügt außerdem über Krypto-Hilfsfunktionen:
| Methode | Was sie tut |
|---|---|
crypto.uuid() | Eine zufällige Kennung |
crypto.hmac(algo, key, data) | HMAC von data mit key, hex-kodiert; algo ist 'sha256', 'sha1' oder 'md5' |
Praktisch zum Beispiel, um Daten vor dem Senden an einen externen Dienst via fetch zu signieren.
Einen Handler testen
Jeder Handler hat einen integrierten Test-Runner rechts vom Editor — senden Sie eine Testanfrage und sehen Sie genau, was der Handler antwortet, ohne die Live-Website zu berühren.
- Wählen Sie die Methode und geben Sie den zu testenden Pfad ein (zum Beispiel
/users/42). - (Optional) Füllen Sie die Anfrage-Eingaben aus:
- Query (JSON) — Query-Parameter als JSON-Objekt;
- Body (raw) — der rohe Anfrage-Body;
- geo und click_id — Werte, die dem Handler als Anfragevariablen übergeben werden.
- Klicken Sie auf Ausführen.
Das Ergebnis erscheint darunter:
- der Antwort-Status (grün / blau / rot eingefärbt) und wie lange der Lauf gedauert hat;
- Parameter — die aus der Pfadvorlage erfassten Werte;
- Weiterleitung — das Weiterleitungsziel, falls der Handler eines gesetzt hat;
- die Antwort-Header und Body;
- die Konsole — alles, was der Handler während des Laufs protokolliert hat.
Wenn die Anfrage den gespeicherten Zustand des Handlers erreicht oder ändert, markiert das Panel auch die Sitzung als berührt.
Query (JSON) muss gültiges JSON sein. Wenn nicht, wird der Test nicht ausgeführt und das Feld wird hervorgehoben — korrigieren Sie das JSON und klicken Sie erneut auf Ausführen.
Website-Dateien bearbeiten
Die andere Hälfte der Karte ist der Tab Dateien — die statischen Dateien der Website (HTML, CSS, JS, Bilder, Schriften) in einem Baum links und ein Code-Editor rechts. Textdateien öffnen sich mit Syntaxhervorhebung; speichern Sie mit Speichern oder Cmd+S (unter Windows — Strg+S). Bilder, Video, Audio und andere Dateien erhalten eine Vorschau oder einen Download. Sie können Dateien zwischen Ordnern ziehen und neue von Ihrem Computer ablegen.
Eine vollständige Aufschlüsselung des Tabs Dateien finden Sie in Websites und Eine Website hochladen.
Hinweise zu Feldern und Verhalten
Pfad — die Adressvorlage, auf die der Handler antwortet. Unterstützt :name (ein Segment), * (der Rest, erfasst) und ** (der Rest, nicht erfasst). Die erfassten Segmente stehen dem Handler zur Verfügung und werden im Test-Runner als params angezeigt.
method — welche HTTP-Methode den Handler auslöst. ANY antwortet auf jede Methode.
enabled — ob der Handler auf der Live-Website läuft. Ein deaktivierter Handler bleibt gespeichert, wird aber übersprungen.
«+ new» — erstellt einen Handler aus der integrierten Vorlage, bereit zur Bearbeitung.