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.

Thymeleaf in Ihrer Anwendung initialisieren

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 erstellen Das Initialisierungstool von Spring. Sie haben auch die Möglichkeit, es später zu Ihrer Build-Spezifikationsdatei im Abschnitt „Abhängigkeiten“ hinzuzufügen.

instagram viewer

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

Dein pom.xml Die Datei sollte den folgenden Abhängigkeitsabschnitt enthalten:

<dependency>
<groupId>org.springframework.bootgroupId>


<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>

Während Ihr build.gradle Die Datei sollte den folgenden Abhängigkeitsabschnitt enthalten:

dependencies {
 implementation 'org.springframework.boot: spring-boot-starter-thymeleaf'
}

Die im Artikel verwendete Beispielanwendung finden Sie hier GitHub-Repository Die Nutzung steht Ihnen unter der MIT-Lizenz kostenlos zur Verfügung.

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.

Verwendung von Thymeleaf in Spring Boot

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 erstellen Vorlagen Ordner, der in der Ressourcendatei verfügbar ist.

Die home.html-Datei

html>
<htmlxmlns: th="http://www.thymeleaf.org">


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

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

Einen Header erstellen

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.

html>
<htmlxmlns: th="http://www.thymeleaf.org">


 <body>


<divid="nav">


<h1>LOGOh1>


<ul>


<li><aid="current">Home a>li>


<li><a>Abouta>li>


<li><a>Servicesa>li>


ul>


div>


 body>


html>

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

<divth: insert="~{header:: #nav}">div>

Einfügen des Markups oben oben im home.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:

  • Eine Tilde (~), die optional ist.
  • Ein Paar geschweifte Klammern ({}), was optional ist.
  • Der Name der Vorlage, die das Markup enthält, das Sie einfügen möchten (header.html).
  • Der CSS-Selektor des Markups, das Sie einfügen möchten (#nav).

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

"header:: #nav">

Füllen Sie Ihren Vorlagenkörper

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

  • Fragmentausdruck (~{…})
  • Nachrichtenausdruck (#{…})
  • Link-URL-Ausdruck (@{…})
  • Variablenausdruck (${…})
  • Auswahlvariablenausdruck (*{…})

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 .Eigenschaften Datei unter der Ressourcen Ordner.

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

placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.

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.

<pth: text="#{placeholder.text}">p>

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:

  • Ein Nummernzeichen (#).
  • Ein Paar geschweifte Klammern ({}).
  • Der Schlüssel, der die Nachricht enthält, die Sie einfügen möchten (Platzhaltertext).

Gestalten Sie Ihre Vorlage

Eine weitere wichtige Datei im Ressourcen 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 wird verarbeitet sowohl relative als auch absolute URLs.

<linkrel="stylesheet"th: href="@{/css/style.css}" />

Einfügen des obigen Markups in die Ihrer HTML-Datei ermöglicht es Ihnen, Ihre Vorlage mit einem zu formatieren style.css Datei. Diese Datei ist in einer Datei verfügbar CSS Ordner unter statisch Abschnitt der Ressourcen Datei der Musteranwendung. Sie sollten dem immer den Link-URL-Ausdruck zuweisen Th: href Attribut.

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

<divid="showcase"th: style="'background: url(/images/background.jpg) no-repeat center center fixed;'">

Das obige Markup verwendet die Th: 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.

Der Variablenausdruck

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 Anwendungskontext (das sind Daten, die mit den verschiedenen Aufgaben verknüpft sind, die im ausgeführt werden). Anwendung). 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 navigieren http://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, auf der das Wort „Willkommen“ angezeigt wird, 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 der modal.html Die Datei hat das folgende Markup:

<formid="form"th: action="@{/home}"method="post">
<inputtype="text"name="userName"class="form-control"placeholder="Your Name" />


<buttontype="submit"class="btn">Submitbutton>


form>

Wenn ein Benutzer das Formular abschickt, wird das ausgelöst Th: Aktion Attribut, das den Wert einer Beitrags-URL hat, die Sie im finden WebController Klasse.

@PostMapping("/home")
public String processName(String userName, Model model){


 model.addAttribute("userName", userName);


return"home";
 }

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

<h1>Welcome <spanth: text="${userName}">span>!h1>

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.

Alternative Vorlagen- und Styling-Optionen

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.