Arbeiten mit Fragmenten in Thymeleaf
1. Überblick
In diesem Tutorial zeigen wir, wie manmake use of Thymeleaf Fragments to reuse some common parts of a site macht. Nach dem Einrichten eines sehr einfachen Spring MVC-Projekts konzentrieren wir uns auf Ansichten.
Wenn Sie neu bei Thymeleaf sind, können Sie andere Artikel auf dieser Website wiethis introduction sowiethis one about the 3.0 version der Engine überprüfen.
2. Maven-Abhängigkeiten
Wir benötigen einige Abhängigkeiten, um Thymeleaf zu aktivieren:
org.thymeleaf
thymeleaf
3.0.9.RELEASE
org.thymeleaf
thymeleaf-spring5
3.0.9.RELEASE
Die neueste Version vonthymeleaf undthymeleaf-spring5 finden Sie auf Maven Central.
3. Frühlingsprojekt
3.1. Spring MVC-Konfiguration
Um Thymeleaf zu aktivieren und das Vorlagensuffix festzulegen, müssen wirconfigure MVC with a view resolver and template resolver eingeben.
Wir werden auch das Verzeichnis für einige statische Ressourcen festlegen:
@Bean
public ViewResolver htmlViewResolver() {
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine(htmlTemplateResolver()));
resolver.setContentType("text/html");
resolver.setCharacterEncoding("UTF-8");
resolver.setViewNames(ArrayUtil.array("*.html"));
return resolver;
}
private ITemplateResolver htmlTemplateResolver() {
SpringResourceTemplateResolver resolver
= new SpringResourceTemplateResolver();
resolver.setApplicationContext(applicationContext);
resolver.setPrefix("/WEB-INF/views/");
resolver.setCacheable(false);
resolver.setTemplateMode(TemplateMode.HTML);
return resolver;
}
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/**", "/css/**")
.addResourceLocations("/WEB-INF/resources/", "/WEB-INF/css/");
}Beachten Sie, dass diese Konfiguration bei Verwendung von Spring Boot möglicherweise nicht erforderlich ist, es sei denn, wir müssen unsere eigenen Anpassungen vornehmen.
3.2. Der Controller
In diesem Fall ist der Controller nur ein Fahrzeug für die Ansichten. Jede Ansicht zeigt ein anderes Fragmentverwendungsszenario.
Der letzte lädt einige Daten, die durch das Modell geleitet werden, um in der Ansicht angezeigt zu werden:
@Controller
public class FragmentsController {
@GetMapping("/fragments")
public String getHome() {
return "fragments.html";
}
@GetMapping("/markup")
public String markupPage() {
return "markup.html";
}
@GetMapping("/params")
public String paramsPage() {
return "params.html";
}
@GetMapping("/other")
public String otherPage(Model model) {
model.addAttribute("data", StudentUtils.buildStudents());
return "other.html";
}
}Note that the view names must contain the “.html” suffix because of the way we configured our resolver. Wir geben das Suffix auch an, wenn wir auf Fragmentnamen verweisen.
4. Die Ansichten
4.1. Einfache Fragmenteinbeziehung
Zunächst verwenden wir gemeinsame Teile auf unseren Seiten.
Wir können diese Teile als Fragmente definieren, entweder in isolierten Dateien oder auf einer gemeinsamen Seite. In diesem Projekt werden diese wiederverwendbaren Teile in einem Ordner mit dem Namenfragments definiert.
Es gibt drei grundlegende Möglichkeiten, Inhalte aus einem Fragment einzuschließen:
-
insert – fügt Inhalte in das Tag ein
-
replace – ersetzt das aktuelle Tag durch das Tag, das das Fragment definiert
-
include – dies ist veraltet, aber es kann immer noch in einem Legacy-Code erscheinen
Das nächste Beispiel,fragments.html,, zeigt die Verwendung aller drei Möglichkeiten. Diese Thymeleaf-Vorlage fügt Fragmente in den Kopf und den Körper des Dokuments ein:
Thymeleaf Fragments: home
Go to the next page to see fragments in action
Now, let’s take a look at a page that holds some fragments. Es heißtgeneral.html und ist wie eine ganze Seite mit einigen Teilen, die als gebrauchsfertige Fragmente definiert sind:
Thymeleaf Fragments sample
Go to the next page to see fragments in action
This is another sidebar
Der Abschnitt<head> enthält nur ein Stylesheet. Wir können jedoch auch andere Tools wie Bootstrap, jQuery oder Foundation direkt oder mithilfe von Webjars anwenden.
Beachten Sie, dass alle wiederverwendbaren Tags dieser Vorlage das Attributth:fragment haben. Als Nächstes erfahren Sie, wie Sie einen anderen Teil der Seite einschließen.
Nach dem Rendern und Einbeziehen der Fragmente lautet der zurückgegebene Inhalt:
Thymeleaf Fragments: home
Thymeleaf Fragments sample
Go to the next page to see fragments in action
4.2. Markup-Selektoren für Fragmente
Eines der großartigen Dinge an Thymeleaf-Fragmenten ist, dasswe can also grab any part of a template just using the simple selectors durch Klassen, IDs oder einfach durch Tags erfolgt.
Diese Seite enthält beispielsweise einige Komponenten aus der Dateigeneral.html: einen Blockasideund den Blockdiv.another:
4.3. Parametrisierte Fragmente
Wir können Parameter an ein -Sfragment übergeben, um einen bestimmten Teil davon zu ändern. Dazu muss das Fragment als Funktionsaufruf definiert werden, in dem eine Liste von Parametern deklariert werden muss.
In diesem Beispiel definieren wir ein Fragment für ein generisches Formularfeld:
Und hier ist eine einfache Verwendung dieses Fragments, an das wir Parameter übergeben:
Und so sieht das zurückgegebene Feld aus:
4.4. Fragmenteinschlussausdrücke
Thymeleaf-Fragmente bieten andere interessante Optionen wie die Unterstützung vonconditional expressions to determine whether to include a fragment.
Mit dem OperatorElvis und einem der von Thymeleaf bereitgestellten Ausdrücke (z. B. Sicherheit, Zeichenfolgen und Sammlungen) können verschiedene Fragmente geladen werden.
Beispielsweise können wir dieses Fragment mit Inhalten definieren, die wir abhängig von einer bestimmten Bedingung anzeigen. Dies könnte eine Datei sein, die verschiedene Arten von Blöcken enthält:
Data received
No dataUnd so könnten wir sie mit einem Ausdruck laden:
Weitere Informationen zu Thymeleaf Expressions finden Sie in unserem Artikelhere.
4.5. Flexible Layouts
Das nächste Beispiel zeigt auch zwei andere interessante Verwendungen von Fragmenten fürrender a table with data. Dies ist das wiederverwendbare Tabellenfragment mit zwei wichtigen Teilen: einem Tabellenheader, der geändert werden kann, und dem Text, in dem die Daten gerendert werden:
0
Name
Wenn wir diese Tabelle verwenden möchten, können wir unseren eigenen Tabellenkopf mit der Funktionfieldsübergeben. Der Header wird mit der KlassemyFields referenziert. Der Tabellenkörper wird geladen, indem Daten als Parameter an die FunktiontableBodyübergeben werden:
Id
Name
Und so sieht die letzte Seite aus:
Thymeleaf Fragments sample
Data received
Id
Name
1001
John Smith
1002
Jane Williams
5. Fazit
In diesem Artikel haben wir gezeigt, wie Ansichtskomponenten mithilfe von Thymeleaf-Fragmenten wiederverwendet werden, einem leistungsstarken Tool, das die Vorlagenverwaltung vereinfacht.
Wir haben auch einige andere interessante Funktionen vorgestellt, die über die Grundlagen hinausgehen. Wir sollten dies berücksichtigen, wenn wir Thymeleaf als View-Rendering-Engine auswählen.
Wenn Sie mehr über andere Thymeleaf-Funktionen erfahren möchten, sollten Sie unbedingt unseren Artikel überLayout Dialects lesen.
Wie immer ist der vollständige Implementierungscode des Beispielsover on GitHub verfügbar.