03. Mai 2017

Blog-App-Anleitung

Index

Übersicht

Was Sie lernen werden

Diese Einführung in Structr wird Sie durch die Erstellung einer einfachen Structr-Blog-Anwendung führen. Wir beginnen mit einer leeren Structr-Instanz und bauen die Blog-Anwendung Feature für Feature auf, wobei wir Ihnen zeigen, wie Sie mit Zugriffskontrolle, Authentifizierung und der Anwendung von grundlegendem Bootstrap umgehen.

Sie benötigen

  • Eine neue Structr-Instanz, die in Ihrem Browser läuft
  • Zugriff auf die Kommandozeile zur Ausführung von Structr
  • Ein Inkognito-Browser-Fenster öffnen
  • Zugang zum neo4j-users Slack, damit Sie in #using-structr um Unterstützung bitten können

Die Merkmale

Bevor wir beginnen, sollten wir die Funktionen definieren, die die Blogging-Anwendung haben wird. Die Tutorial-Anwendung hat die folgenden Funktionen, die im Folgenden als User Stories vorgestellt werden:

  • Als öffentlicher Benutzer kann ich ein Konto erstellen
  • Als öffentlicher Benutzer kann ich mich mit einem bestehenden Konto anmelden
  • Als öffentlicher oder authentifizierter Benutzer kann ich einen Feed mit allen Beiträgen sehen, die sich derzeit in der Anwendung befinden, sortiert von der frühesten bis zur ersten Nachricht.
  • Als authentifizierter Benutzer kann ich neue Blogeinträge erstellen, die einen Titel und einen Text enthalten

Die Grundzüge des Datenmodells ergeben sich aus den folgenden Merkmalen:

  • Es gibt Benutzerknoten mit einer Art von Namen und Passworteigenschaften.
  • Post (wie in Blog Post) Knoten werden mit Eigenschaften, die Titel, Text und Erstellungsdatum beschreiben, existieren
  • WRITER_OF-Beziehungen verbinden Benutzer- und Beitragsknoten

Format

Bei der Entwicklung der einzelnen Funktionen werden die folgenden Punkte behandelt, die nach dem jeweiligen Menüpunkt in Structr benannt sind:

  • Seiten
  • Sicherheit
  • Schema
  • Daten

Einen neuen Benutzer erstellen

  • Seiten: Öffentliche Benutzer müssen die Benutzeroberfläche verwenden, um ein Konto zu erstellen. Da es „Signup“ noch nicht gibt, müssen wir eine Seite erstellen
  • Sicherheit: Nur öffentliche Benutzer sollten die Anmeldeoberfläche sehen können, um neue Benutzer anzulegen.
  • Schema: Da Structr bereits über User-Knoten verfügt, werden wir das Schema nicht ändern, um die Kontoerstellung zu implementieren.
  • Daten: Erstellung eines Kontos, wobei bei jeder Anmeldung ein neuer Benutzer angelegt wird

Prüfen Sie das Schema

Neue Benutzer haben einen Namen und ein Passwort.
Navigieren Sie zur Registerkarte Schema und suchen Sie den Knoten Benutzer in der Hauptansicht. Wählen Sie das Bleistiftsymbol, um die Eigenschaften der Benutzer zu prüfen und sicherzustellen, dass sowohl Name als auch Passwort bereits vorhanden sind:

Das Anmeldeformular erstellen

Navigieren Sie zur Ansicht Seiten und drücken Sie auf die grüne Schaltfläche +, um eine neue Seite zu erstellen.

Klicken Sie auf die neu erstellte Registerkarte, um die Seite in Anmeldung umzubenennen.

Die neue Seite sollte in der Seitenstrukturansicht (die oberste Registerkarte auf der linken Seite) wie folgt aussehen:

Wenn Sie mit dem Mauszeiger über die Registerkarte „Anmeldung“ in der Hauptansicht der Seiten fahren, sollte ein Augensymbol erscheinen:

Klicken Sie auf das Augapfelsymbol, um eine Vorschau der Seite in Ihrem Browser zu sehen. Hinweis: Die App kann nur von dem Benutzer angezeigt werden, der mit Admin-Rechten angemeldet ist. Um die öffentliche Sichtbarkeit zu testen, verwenden Sie am besten eine Inkognito-Browser-Sitzung, um einen Besucher zu simulieren.

Öffnen Sie das Menü Widgets (in einer Registerkarte auf der rechten Seite des Bildschirms) und suchen Sie das Widget Panel mit Formular erstellen, ziehen Sie es auf Ihre Seite und legen Sie es ab. Wenn Sie dazu aufgefordert werden, konfigurieren Sie das Widget, um neue Benutzerknoten zu erstellen, und tippen Sie dann auf Widget anhängen.

So sollte die Anmeldeseite bis jetzt aussehen:

Auch die Benutzer benötigen Passwörter. Später werden wir ein Feld dafür in der Seitenstrukturansicht hinzufügen.

Wählen Sie das Div aus, das die Namensbeschriftung und die Eingabe enthält. Klicken Sie auf das Symbol „Element klonen“, um eine Kopie des Divs zu erstellen. Verschieben Sie die Kopie unter das Original und löschen Sie den Standardtext „Initial body text“, damit die Anmeldeseite wie folgt aussieht:

Bearbeiten Sie im kopierten Div die Beschriftung so, dass sie sich auf das Passwort des Benutzersbezieht, indem Sie auf „Name“ tippen und den Text in „Passwort“ ändern.

Bearbeiten Sie im kopierten Div das input.form-Steuerelement so, dass es auf das Passwort des Benutzersverweist, indem Sie auf das Symbol Eigenschaften bearbeiten (das dritte von rechts) klicken und den Feldnamen in Passwort ändern.

Um die neuen Benutzer mit einem Namen und einem Kennwort zu speichern, aktualisieren Sie die Attribute der Schaltfläche Erstellen so, dass sie ein Kennwort enthalten:

Prüfen Sie die Daten

Klicken Sie auf das Vorschaufenster-Symbol und versuchen Sie, einen neuen Benutzer auf der Anmeldeseite zu erstellen.
Nachdem Sie einen Namen und ein Passwort eingegeben haben, sollten Sie Ihren neuen Benutzer auf der Datenseite von Structr sehen.

Jetzt gibt es zwei Benutzer: den Administrator und einen neuen Benutzer, der über das Anmeldeformular erstellt wurde.

Zuschüsse für den Ressourcenzugang

Wir wollen, dass nicht nur authentifizierte Admin-Benutzer neue Benutzer erstellen können. Eigentlich sollten nur nicht authentifizierte Benutzer in der Lage sein, Benutzeranzulegen. Öffnen Sie die Anmeldeseite in einem Inkognito-Fenster, um die Funktion „Benutzer erstellen“ als öffentlicher Benutzer zu testen. Die Seite sollte einen 404-Fehler anzeigen.
Klicken Sie in der Seitenstrukturansicht auf das Schlüsselsymbol, um die Zugriffssteuerung und Sichtbarkeit der Anmeldeseite zu bearbeiten

Aktivieren Sie das Kontrollkästchen Sichtbarkeitsänderungen rekursiv anwenden?, wählen Sie Sichtbar für öffentliche Benutzer und versuchen Sie, die Seite erneut zu laden.

Wenn Sie versuchen, einen neuen Benutzerknoten zu erstellen, wird ein 401-Fehler angezeigt:

Geben Sie in der Ansicht Sicherheit nicht authentifizierten Benutzern die Möglichkeit, neue Benutzerknoten mit einer POST-Anforderung zu erstellen:

Versuchen Sie es erneut und überprüfen Sie, ob ein neuer Benutzer erstellt wurde.

Bootstrap hinzufügen

Fügen Sie etwas Stil hinzu, indem Sie das Bootstrap-Widget suchen und es in den Kopf Ihrer Seite ziehen:

Wiederholen Sie den oben beschriebenen Schritt der Ressourcenzugriffsberechtigung (öffnen Sie das Menü, indem Sie auf die Taste in der Zeile der Anmeldeseite tippen), um nicht authentifizierten Benutzern das Recht zu gewähren, das Design Ihrer neuen Anmeldeseite zu sehen und zu nutzen:

Anmeldung

Da wir nun Benutzer anlegen können, möchten wir uns mit Namen und Passwort anmelden.

Zurück zur Checkliste:

  • Seiten: Die Benutzer müssen sich über eine Anmeldeseite anmelden
  • Sicherheit: Nur öffentliche Benutzer sollten die Benutzeroberfläche sehen oder sich anmelden können
  • Schema: Wir wissen, dass es bereits Benutzer gibt, da wir im letzten Schritt einige erstellt haben
  • Daten: Durch das Einloggen werden die Daten nicht wesentlich verändert

Erstellen der Benutzeroberfläche und der Funktionalitäten

Erstellen Sie eine neue Seite namens login. Sie können sie von Grund auf neu erstellen oder die bereits vorhandene Anmeldeseite klonen und das Formular „Benutzer erstellen“ löschen, um Zeit bei der Einrichtung von Bootstrap und der Zugriffskontrolle zu sparen. Um die Anmeldeseite zu klonen, tippen Sie auf das Klon-Symbol, das sich direkt rechts neben dem Seitennamen in der Seitenstrukturansicht befindet.

Ziehen Sie aus der Widget-Bibliothek ein Login-Form-Widget (unter Bootstrap > Generic) auf die Seite und bearbeiten Sie es so, dass es den Namen anstelle von E-Mail verwendet.

Sicherheit

Zeigen Sie die Seite in einem Inkognito-Browser an und testen Sie sie mit gültigen und ungültigen Anmeldeinformationen.

Schalten Sie die Einstellungen für die Zugriffskontrolle auf der Anmeldeseite rekursiv um, damit Benutzer, die keine Administratoren sind, das neue Widget sehen können: Tippen Sie auf das Schlüsselsymbol der Seite, wählen Sie Sichtbarkeitsschalter rekursiv anwenden… und deaktivieren Sie die Option Sichtbar für öffentliche Benutzer und wählen Sie sie erneut.

Öffnen Sie die Anmeldeseite in einem Inkognito-Browser und versuchen Sie, sich anzumelden. Sie werden die Meldung „Falscher Benutzername oder Passwort“ erhalten, obwohl Ihre Anmeldedaten korrekt sind. Wenn Sie die Konsole oder das Terminal überprüfen, das Sie zur Ausführung von Structr verwenden, werden Sie diese Meldung finden: 

INFO  org.structr.web.auth.UiAuthenticator - No resource access grant found for signature _login. (URI: /structr/rest/login)

Um dies zu beheben, fügen Sie eine Signatur namens _login auf der Seite Sicherheit hinzu.

Filtern Sie nach dieser neuen Signatur und erteilen Sie öffentlichen Benutzern das Recht, darauf zu POSTen.

Versuchen Sie, sich erneut anzumelden, und behalten Sie die Konsole im Auge.
Wenn Sie sich erfolgreich angemeldet haben, sehen Sie

INFO  o.structr.web.resource.LoginResource - Login successful: bc6811eef0dc43408e3b30fb3a3e4931

Versuchen Sie, sich zweimal hintereinander einzuloggen, und beobachten Sie, was Sie sehen werden

org.structr.web.auth.UiAuthenticator - Resource access grant found for signature _login, but method POST not allowed for authenticated users.

Anmeldung und Login: Lose Enden

Bevor wir fortfahren, wollen wir noch ein paar Dinge klären, die sich in der ersten Hälfte dieses Tutorials angesammelt haben:

  • Bei der Anmeldung sollten die Benutzer auf die Anmeldeseite weitergeleitet werden
  • Bei der Anmeldung sollten die Nutzer auf die Feed-Seite weitergeleitet werden, die in Kürze erstellt wird
  • Öffentliche Nutzer sollten in der Lage sein, von der Anmeldeseite zur Anmeldeseite zu navigieren und umgekehrt

Benutzer bei Anmeldung und Registrierung umleiten

Gehen Sie über die Schaltflächen für die Anmeldung und die Registrierung auf die Seite Eigenschaften bearbeiten > Bearbeitungsmodus Bindung und geben Sie den Pfad zur Zielseite ( /feed für Login und /login für Signup) in das Feld Return URI after successful action ein.

Grundlegende Navigation hinzufügen

Um das Testen zu verbessern, öffnen Sie die HTML-Palette und ziehen Sie einige Elemente auf die Anmelde- und Login-Seiten, damit Sie leicht von einer Seite zur anderen navigieren können, ohne die URL eingeben zu müssen.

Auf der Anmeldeseite können Sie zum Beispiel einen Link einfügen, auf dem steht „Login stattdessen!“.

Öffentlicher Feed

Als öffentlicher oder authentifizierter Benutzer kann ich einen Feed mit allen Beiträgen sehen, die sich derzeit in der Anwendung befinden, sortiert von den frühesten bis zu den ersten.

Zurück zur Checkliste

  • Schema: Beiträge sollten existieren, um den Feed zu füllen, und eine WRITER_OF-Beziehung zu ihrem Autor haben
  • Daten: Der Administrator muss in der Lage sein, Testbeiträge zu erstellen, um den Feed zu füllen.
  • Seiten: Die Benutzeroberfläche für den Feed sollte auf einer eigenen Seite bestehen, auf der der Titel des Beitrags, der Autor, das Erstellungsdatum und der Text angezeigt werden.
  • Sicherheit: Sowohl öffentliche als auch authentifizierte Nutzer sollten in der Lage sein, den Feed und die Beiträge im Feed zu sehen.

Schema

Fügen Sie auf der Registerkarte Schema einen Post-Knoten und eine WRITER_OF-Beziehung hinzu, wie in der folgenden Abbildung beschrieben. Um eine Beziehung zu erstellen, tippen Sie auf den Anker (Kreis am Rand des Startknoten-Rechtecks) und ziehen Sie den grünen Pfeil auf einen Kreis am Rand des Endknoten-Rechtecks.

Fügen Sie die Eigenschaften body und title zu den Post-Knoten hinzu. Speichern Sie, indem Sie das grüne Häkchen unter „Aktion“ hinzufügen.

Machen Sie Post-Knoten mit einigen onCreate-Funktionen für öffentliche und authentifizierte Benutzer sichtbar. Tippen Sie auf die Schaltfläche „Add onCreate“, um zwei Funktionen vom Typ onCreate hinzuzufügen (siehe unten):

Überprüfen Sie, ob die Daten wie erwartet angezeigt werden, indem Sie auf der Registerkarte Daten neue Post-Knoten erstellen:

Tipp: Vergessen Sie nicht, die lokalen Attribute mit dem kleinen grünen Häkchen zu speichern.

Daten

Da es keine Möglichkeit gibt, neue Post-Knoten über die UI zu erstellen, verwenden Sie den Structr-Admin, um einige zusätzliche Test-Postszu erstellen. Fügen Sie Beziehungen zwischen Benutzernund Beiträgenhinzu, indem Sie neue UserWRITER_OFPost Instanzen erstellen.

Tipp: Vergessen Sie nicht, die Felder Titel und Text auszufüllen.

Seiten

Erstellen Sie die Feed-Seite

Kopieren Sie die Anmeldeseite, löschen Sie den Anmeldeteil und benennen Sie die neue Seite als Feed. So sollte die Seite aussehen, bevor Sie irgendwelche feedspezifischen Elemente hinzufügen:

Öffnen Sie die HTML-Palette auf der rechten Seite, um HTML-Elemente nach Bedarf hineinzuziehen.

Das Zwischenelement Post könnte etwa so aussehen:

Tippen Sie auf das Symbol “ Eigenschaften bearbeiten“ des übergeordneten Divs des Beitragsund fügen Sie eine Cypher-Abfrage hinzu, um den Feed zu füllen.

Cypher Query:

MATCH (post:Post)
RETURN post

Data Key:

post

Um die Daten zu verwenden, ersetzen Sie die Platzhalter wie folgt:

Beachten Sie, dass der Autor des Beitragsnicht ausgefüllt ist, da Autor keine Eigenschaft von Beitrag ist.

Sidebar: Vorbeugung künftiger loser Enden

Bevor Sie fortfahren, sollten Sie überlegen, ob Sie eine Abmeldeschaltfläche hinzufügen und eine Möglichkeit, zu erkennen, als welcher Benutzer Sie angemeldet sind. Dies wird hilfreich sein, wenn Sie weiter unten im Lernprogramm Blogbeiträge als Nicht-Administrator erstellen.

Wählen Sie eine (konfigurierbare) Abmelde-Schaltfläche aus dem Widget-Menü und ziehen Sie sie an eine leicht zu verwaltende Stelle in Ihrer Feed-Ansicht. Machen Sie die Abmelde-Schaltfläche nur für authentifizierte Benutzer sichtbar und fügen Sie eine Signatur namens _logout auf der Seite Sicherheit hinzu.

*Tipp: Vergessen Sie nicht, authentifizierten Benutzern die Erlaubnis zu erteilen, auf _logout zu POSTen.

Zeigen Sie den Namen des aktuellen Benutzers an, indem Sie den Text der Schaltfläche in ändern:

Eingeloggt als ${me.name}. Abmelden.

Zum Beispiel, wenn Sie sich als Benutzer bob angemeldet haben:

Autor des Beitrags anzeigen

Die Futtermittel sollten jeweils angezeigt werden:

  • Titel des Beitrags
  • Poststelle
  • Beitrag Autor
  • Erstellungsdatum des Beitrags

Die aktuellen Beiträge haben die meisten dieser Elemente, aber es fehlen die Autoren der Beiträge. Bereiten Sie die Abfrage vor, die der Feed verwenden soll, um die Beiträge mit den Verfasserangaben zu füllen, und testen Sie sie mit der integrierten Cypher-Konsole, die sich mit STRG+ALT+C > SHIFT + TAB öffnet. 

MATCH (post:Post)<-[]-(user:User) RETURN {title:post.title, body:post.body, createdDate:post.createdDate, author:user.name} AS post ORDER BY post.createdDate DESC LIMIT 10; //limit for the sake of the Cypher console, remove in the app itself

STRG+ALT+C (oder STRG+SHIFT+C)

SHIFT + TAB, um die Cypher-Konsole zu erreichen

Öffnen Sie das Post-Div und fügen Sie die aktualisierte Abfrage ein, wobei Sie das LIMIT 10 entfernen.

Aktualisieren Sie den Autorenplatzhalter auf ${post.author} und schauen Sie sich Ihre Beiträge an:

Reparieren Sie die Datumsformatierung mit der Funktion date_format:

Verfasst am ${date_format(post.createdDate,’yyyy-MM-dd‘)}

Test in Inkognito

Zeigen Sie eine Vorschau des Feeds in einem neuen Inkognito-Browser an und überprüfen Sie, ob Sie den Feed sowohl als öffentlicher als auch als authentifizierter Benutzer sehen können, indem Sie die Sicherheit der Seite so lange umschalten, bis sie wie erwartet funktioniert.

Benutzer bei der Anmeldung zum Feed umleiten

Gehen Sie zurück zur Anmeldestruktur und wählen Sie die Schaltfläche „Anmelden“.

Geben Sie unter Bindung im Bearbeitungsmodus die Rückgabe-URI mit der Seite ein, die die Benutzer bei der Anmeldung sehen sollen, in diesem Fall Feed. Stellen Sie sicher, dass die Seite für authentifizierte Benutzer sichtbar ist.

Sie sollten dasselbe mit der Anmeldung tun.

Neue Blogeinträge erstellen

Als authentifizierter Benutzer kann ich neue Blogeinträge erstellen, die einen Titel und einen Text enthalten.

  • Schema: Das Schema ist bereits für die Erstellung von Blogbeiträgen vorbereitet
  • Daten: Authentifizierte Nutzer können Beiträge erstellen, was zu mehr Daten führt!
  • Seiten: Die Feed-Seite wird so bearbeitet, dass die Nutzer Posts erstellen können
  • Sicherheit: Authentifizierte Benutzer können Beiträge erstellen

Seiten

Öffnen Sie das Menü Widgets und suchen Sie nach dem Panel mit Formular erstellen (konfigurierbar). Ziehen Sie dann eine Instanz davon in den Body der Feed-Seite, unterhalb der h1.

Wählen Sie Post als Typ des Widgets.

Das Widget erstellt standardmäßig Beiträge mit Namenseigenschaften. Es wird bearbeitet, um Beiträge mit den Eigenschaften Titel und Text zu erstellen.

Erstellen Sie eine Kopie des Divs, das die Namenseingabe umschließt, und ziehen Sie es unter die Namensteile.

Ändern Sie das obere Feld mit der Bezeichnung Name in title und das untere Feld mit der Bezeichnung Name in body post. Sie müssen auch ihre Namen bearbeiten, indem Sie in den Bearbeitungsmodus gehen und > Feld in Titel bzw. Body ändern.

Bearbeiten Sie die Schaltfläche Erstellen entsprechend:

Erstellen Sie die WRITER_OF-Beziehung

Hinzufügen einerBeitrag erstellen

Konfigurieren Sie das Select-Element so, dass es den Namen WRITER_OF-Beziehung wiedergibt.

Damit das Select-Element ausgeblendet wird, fügen Sie unter den HTML-Attributen die html-Klasse „hidden“ hinzu:

Konfigurieren Sie die Option so, dass sie die ID des aktuellen Benutzers als Wert hat und automatisch ausgewählt wird.

Fügen Sie das Attribut zur Schaltfläche Erstellen hinzu.

Ändern Sie die Kardinalität der Beziehung zwischen Benutzer und Beitrag, so dass ein Beitrag nur einen Autor haben kann.

Der aktuell angemeldete Benutzer wird als einziger Verfasser des aktuellen Beitrags festgelegt.
Das Endergebnis sollte in etwa so aussehen:

Sicherheit

Obwohl authentifizierte und öffentliche Benutzer die Feed-Seite sehen können sollten, können nur authentifizierte Benutzer Beiträge schreiben. Setzen Sie die Sichtbarkeit des Formulars auf authentifizierte Benutzer.

Stellen Sie auf der Registerkarte Sicherheit > Ressourcenzugriffsrechte sicher, dass authentifizierte Benutzer Beiträge erstellen können.

Testen Sie die Anwendung in einem Inkognito-Fenster und stellen Sie sicher, dass alles wie erwartet funktioniert:

  • Öffentliche Nutzer sollten den Feed sehen können
  • Authentifizierte Benutzer sollten den Feed sehen können
  • Authentifizierte Benutzer sollten das Panel „Beitrag erstellen“ sehen und nutzen können
  • Öffentliche Benutzer sollten das Bedienfeld „Beitrag erstellen“ nicht sehen oder verwenden können.

Wenn eine der Anforderungen nicht erfüllt ist, schalten Sie die Sichtbarkeitsoptionen für die betreffenden Elemente um, bis sie erfüllt sind.

Schlussfolgerung

Sie sind fertig! Folgen Sie den Schritten hier https://support.structr.com/article/225, um Ihre Arbeit zu exportieren, und erstellen Sie die App, die Sie schon immer mit Structr haben wollten 🙂

Axel Morgner

Dieser Artikel wurde geschrieben von

Axel Morgner

Die neuesten Beiträge von Structr

Ankündigung März 28, 2026
Structr 6.3.0 freigegeben
Ankündigung Februar 23, 2026
Structr 6.2.0 freigegeben
Grafische Darstellung einer mit Structr erstellten Anwendung
Kommentar Februar 02, 2026
Low-Code-Entwicklung: Das natürliche Gegenmittel zu KI-bedingter technischer Verschuldung
Zurück zur Übersicht