Was ist Thymeleaf und wie können Sie es in Ihren Spring Boot-Anwendungen verwenden?

Erfahren Sie, wie Sie diese Vorlagen-Engine in Ihre Spring-Anwendungen integrieren.

Thymeleaf ist eine Java-Template-Engine. Es entwickelt Vorlagen sowohl für Web- als auch für eigenständige Anwendungen. Diese Template-Engine nutzt das Natural Templates-Konzept, um Logik in Ihr Layout einzubauen, ohne Ihr Design zu beeinträchtigen. Mit Thymeleaf haben Sie die Kontrolle darüber, wie eine Anwendung die von Ihnen erstellten Vorlagen verarbeitet.

Mit Thymeleaf können Sie sechs Arten von Vorlagen verarbeiten: HTML, XML, Text, JavaScript, CSS und RAW. Thymeleaf bezeichnet jede der Vorlagen als Vorlagenmodus, wobei HTML die beliebteste Vorlage ist, die auf dieser Engine erstellt wird.

Es gibt zwei Möglichkeiten, Thymeleaf zu Ihrer Spring Boot-Anwendung hinzuzufügen. Sie können Thymeleaf als Abhängigkeit auswählen, wenn Sie Ihr Boilerplate mit dem Initializr-Tool von Spring erstellen. Sie haben auch die Möglichkeit, es später zu Ihrer Build-Spezifikationsdatei im Abschnitt „Abhängigkeiten“ hinzuzufügen.

Wenn Sie eine der Gradle-Projektoptionen ausgewählt haben, ist die Datei, die die Abhängigkeiten enthält, diebuild.gradle Datei. Wenn Sie sich jedoch für Maven entschieden haben, ist diese Datei vorhandenpom.xml.

Deinpom.xmlDie Datei sollte den folgenden Abhängigkeitsabschnitt enthalten:

Während Ihrbuild.gradleDie Datei sollte den folgenden Abhängigkeitsabschnitt enthalten:

Die im Artikel verwendete Beispielanwendung ist in diesem GitHub-Repository verfügbar und kann unter der MIT-Lizenz kostenlos verwendet werden.

Durch das Hinzufügen von Thymeleaf zu Ihrer Spring-Anwendung erhalten Sie Zugriff auf die Kernbibliothek, die Ihnen die Verwendung des Spring-Standarddialekts von Thymeleaf ermöglicht. Der Spring Standard Dialect enthält einzigartige Attribute und Syntax, die Sie verwenden können, um Ihren Layouts verschiedene Funktionen hinzuzufügen.

Wenn Sie Thymeleaf in Ihrer Spring-Anwendung verwenden, besteht der erste Schritt darin, Ihr Vorlagendokument zu erstellen. Für diese Beispielanwendung ist das Vorlagendokument HTML. Sie sollten Ihre Thymeleaf-Vorlagen immer in Spring Boot erstellenVorlagenOrdner, der in der Ressourcendatei verfügbar ist.

Die obige Thymeleaf-Vorlage ist eine allgemeine HTML5-Vorlage mit einem Fremdattribut (xmlns:th ). Der Zweck derxmlns:thDas Attribut soll den Umfang für alle bereitstellenDo:* Attribute, die Sie in diesem HTML-Dokument verwenden werden. Die anderen Attribute und Tags in einer Thymeleaf-Vorlage sind traditionelle HTML-Tags und -Attribute.

Einer der ersten und wichtigsten Aspekte jeder Website oder Anwendung ist der Header. Es zeigt an, worum es in der Anwendung geht (durch das Logo) und hilft Ihnen bei der einfachen Navigation in Ihrer Anwendung. Eine einfache Kopfzeile sollte ein Logo sowie mehrere Navigationslinks enthalten.

Mit Thymeleaf können Sie die obige Kopfzeile zu jeder Seite Ihrer Webanwendung hinzufügenth:einfügen Attribut. Derth:einfügenUndth:ersetzen Attribute akzeptieren das, was Thymeleaf Fragmentausdruckswerte nennt. Mit Fragmentausdrücken können Sie Markupfragmente an jeder beliebigen Stelle in Ihrem Layout platzieren.

Einfügen des Markups oben oben imhome.html -Tag fügt das Header-Markup oben auf Ihrer Homepage ein. Ein Fragmentausdruck besteht aus mehreren Komponenten, zwei sind optional und zwei sind erforderlich:

Das folgende Markup führt also zum gleichen Ergebnis wie das obige.

Mit Thymeleaf können Sie fünf Arten von Ausdrücken in Ihren Vorlagen verwenden:

Mit einem Nachrichtenausdruck können Sie externalisierte Textfragmente zu Ihrem Layout hinzufügen. Mit Nachrichtenausdrücken können Sie den Text in Ihrem Layout einfach ersetzen oder wiederverwenden. Wenn Sie einen Nachrichtenausdruck verwenden, sollten Sie die externen Textfragmente immer in a platzieren.EigenschaftenDatei unter derRessourcenOrdner.

Für diese Beispielanwendung ist diese Dateimessage.properties, das das folgende Textfragment enthält:

Beachten Sie, dass das obige Textfragment (oder die Nachricht) einen eindeutigen Schlüssel hat (Platzhaltertext ). Dies liegt daran, dass jede Nachrichtendatei eine Sammlung verschiedener Nachrichten enthalten kann. Sie benötigen also einen Schlüssel, um eine bestimmte Nachricht in Ihr Layout einzufügen.

Wenn Sie das obige Markup in den Textkörper Ihrer HTML-Datei einfügen, wird der Platzhaltertext in Ihrer Ansicht effektiv als Absatz angezeigt. Im Gegensatz zum Fragmentausdruck ist jeder Aspekt des Nachrichtenausdrucks obligatorisch. Ein Nachrichtenausdruck erfordert:

Eine weitere wichtige Datei imRessourcen Ordner ist die statische Datei. In dieser Datei werden Ihre CSS-Dateien und alle Bilder gespeichert, die Sie in Ihrer Anwendung verwenden möchten. Um Ihre externe CSS-Datei mit der Thymeleaf-HTML-Vorlage zu verknüpfen, müssen Sie den Link-URL-Ausdruck verwenden. Der Link-URL-Ausdruck verarbeitet sowohl relative als auch absolute URLs.

Einfügen des obigen Markups in dieIhrer HTML-Datei ermöglicht es Ihnen, Ihre Vorlage mit einem zu formatierenstyle.css Datei. Diese Datei ist in einer Datei verfügbarCSSOrdner unterstatischAbschnitt derRessourcen Datei der Musteranwendung. Sie sollten dem immer den Link-URL-Ausdruck zuweisenth:hrefAttribut.

Thymeleaf bietet mehrere weitere Attribute, mit denen Sie das Design Ihres Layouts verbessern können. Ein solches Attribut ist dasth:StilAttribut, mit dem Sie Bilder zu Ihrem Layout hinzufügen können.

Das obige Markup verwendet dieth:Stil Attribut, um einem bestimmten Abschnitt Ihres Layouts ein Hintergrundbild hinzuzufügen. Thymeleaf verfügt über über hundert verschiedene Attribute, mit denen Sie Ihren Layouts Stil und Funktionalität verleihen können.

Die variablen Ausdrücke sind die beliebtesten und wohl komplexesten Ausdrücke, die Thymeleaf verwendet. Mit Thymeleaf-Variablenausdrücken können Sie Daten entweder aus dem Anwendungskontext oder einem Objekt in der Anwendung sammeln und diese Daten in die Vorlage einfügen. Abhängig von der Quelle der Daten, die Sie in Ihrer Ansicht rendern möchten, können Sie zwei Arten von Variablenausdrücken verwenden.

Der primäre Variablenausdruck verwendet das Dollarzeichen und ermöglicht Ihnen das Sammeln von Daten aus dem Anwendungskontext (d. h. Daten, die mit den verschiedenen Aufgaben verknüpft sind, die in der Anwendung ausgeführt werden). Wenn Sie beispielsweise die Daten eines Benutzers aus einem Modal erfassen möchten, ist der Dollarzeichen-Variablenausdruck die praktischere Wahl. Wenn Sie das Beispielprojekt ausführen und zu navigierenhttp://localhost:8080/In Ihrem Browser sehen Sie das folgende Modal:

Nachdem Sie entweder das Modal geschlossen oder einen Namen eingegeben haben, navigiert die Anwendung zur Startseite. Auf der Startseite sehen Sie eine generische Website, die das Wort „Willkommen“ anzeigt, gefolgt von der Zeichenfolge, die Sie gerade im Modal übermittelt haben.

Die Beispielanwendung verwendet den Variablenausdruck, um diesen Prozess abzuschließen. Die einfache Form in dermodal.htmlDie Datei hat das folgende Markup:

Wenn ein Benutzer das Formular abschickt, wird das ausgelöstth:AktionAttribut, das den Wert einer Beitrags-URL hat, die Sie im findenWebControllerKlasse.

DerProzessname()Die Methode akzeptiert die Zeichenfolge, die der Benutzer dem Modal bereitstellt, und weist diese Zeichenfolge dann einer aufgerufenen Variablen zuNutzername . Mithilfe des Variablenausdrucks fügt der Controller dann die Variable „Benutzername“ in das Layout ein.

Der Auswahlvariablenausdruck verwendet ein Sternchen und ist besonders nützlich, wenn Sie mit komplexeren Anwendungen arbeiten. Beispielsweise kann eine Anwendung, bei der sich Benutzer anmelden müssen, den Auswahlvariablenausdruck verwenden. Sie können den Benutzernamen aus dem Benutzerobjekt sammeln und in das Layout einfügen.

Obwohl Thymeleaf die beliebtere Vorlagenoption für Spring Boot-Anwendungen ist, gibt es mehrere andere, ebenso praktikable Optionen. Dazu gehören JavaServer Pages (JSP), Groovy-basierte Vorlagen, FreeMarker-Vorlagen und Mustache-Vorlagen. Neben der Erstellung eines benutzerdefinierten CSS-Stils können Sie sich auch für die Verwendung eines CSS-Frameworks zur Gestaltung Ihres Layouts entscheiden.

Kadeisha ist Full-Stack-Softwareentwicklerin und technische/technologische Autorin. Sie hat einen Bachelor of Science in Informatik von der University of Technology in Jamaika.