TOC

Spring MVC Thymeleaf 3.0: Neue Funktionen

1. Einführung

Thymeleaf ist eine Java-Template-Engine für die Verarbeitung und Erstellung von HTML, XML, JavaScript, CSS und Nur-Text. Ein Intro zu Thymeleaf und Spring finden Sie unter dieser Beitrag .

In diesem Artikel werden wir neue Funktionen von Thymeleaf 3.0 in Spring MVC mit Thymeleaf-Anwendung besprechen. Version 3 enthält neue Funktionen und viele Verbesserungen unter der Haube. Um genauer zu sein, behandeln wir die Themen natürliche Verarbeitung und Javascript-Inlining.

Thymeleaf 3.0 enthält drei neue textuelle Vorlagenmodi: TEXT , JAVASCRIPT und CSS -, die zur Verarbeitung von einfachen, JavaScript- bzw. CSS-Vorlagen verwendet werden sollen.

2. Abhängigkeiten von Maven

Lassen Sie uns zunächst die für die Integration von Thymeleaf mit Spring erforderlichen Konfigurationen sehen. thymeleaf-spring library ist in unseren Abhängigkeiten erforderlich: 

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring4</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>

Beachten Sie, dass für ein Spring 4-Projekt die thymeleaf-spring4 -Bibliothek anstelle von thymeleaf-spring5 verwendet werden muss. Die neueste Version der Abhängigkeiten finden Sie unter https://search.maven.org/classic/#search%7Cgav%7C1%7Cg%3A%22org.thymeleaf%22%20AND%20a%3A%22thymeleaf-spring5%22 Hier].

3. Java Thymeleaf-Konfiguration

Zuerst müssen wir neue Template Engine, View und Template Resolver konfigurieren. Dazu müssen wir die erstellte Java-Konfigurationsklasse aktualisieren

Um dies zu tun, müssen wir die Java-Konfigurationsklasse aktualisieren: Link:/thymeleaf-in-spring-mvc Neben neuen Arten von Resolvern implementieren unsere Vorlagen die Spring-Schnittstelle ApplicationContextAware : 

@Configuration
@EnableWebMvc
@ComponentScan({ "com.baeldung.thymeleaf" })
public class WebMVCConfig implements WebMvcConfigurer, ApplicationContextAware {

    private ApplicationContext applicationContext;

   //Java setter

    @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;
    }

    @Bean
    public ViewResolver javascriptViewResolver() {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine(javascriptTemplateResolver()));
        resolver.setContentType("application/javascript");
        resolver.setCharacterEncoding("UTF-8");
        resolver.setViewNames(ArrayUtil.array("** .js"));
        return resolver;
    }

    @Bean
    public ViewResolver plainViewResolver() {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine(plainTemplateResolver()));
        resolver.setContentType("text/plain");
        resolver.setCharacterEncoding("UTF-8");
        resolver.setViewNames(ArrayUtil.array("** .txt"));
        return resolver;
    }
}

Wie wir oben sehen können, haben wir drei verschiedene Ansichtsauflöser erstellt - eine für HTML-Ansichten, eine für Javascript-Dateien und eine für reine Textdateien.

Thymeleaf unterscheidet sie, indem sie die Dateinamenserweiterungen .html , .js und .txt jeweils überprüfen.

Wir haben auch die statische ArrayUtil -Klasse erstellt, um die Methode array () zu verwenden, die das erforderliche String[] -Array mit Ansichtsnamen erstellt.

Im nächsten Teil dieser Klasse müssen wir die Template Engine konfigurieren: 

private <span class="pl-smi x x-first x-last">ISpringTemplateEngine</span> templateEngine(ITemplateResolver templateResolver) {
    SpringTemplateEngine engine = new SpringTemplateEngine();
    engine.setTemplateResolver(templateResolver);
    return engine;
}

Schließlich müssen wir drei separate Vorlagenauflöser erstellen: 

private ITemplateResolver htmlTemplateResolver() {
    SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
    resolver.setApplicationContext(applicationContext);
    resolver.setPrefix("/WEB-INF/views/");
    resolver.setCacheable(false);
    resolver.setTemplateMode(TemplateMode.HTML);
    return resolver;
}

private ITemplateResolver javascriptTemplateResolver() {
    SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
    resolver.setApplicationContext(applicationContext);
    resolver.setPrefix("/WEB-INF/js/");
    resolver.setCacheable(false);
    resolver.setTemplateMode(TemplateMode.JAVASCRIPT);
    return resolver;
}

private ITemplateResolver plainTemplateResolver() {
    SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
    resolver.setApplicationContext(applicationContext);
    resolver.setPrefix("/WEB-INF/txt/");
    resolver.setCacheable(false);
    resolver.setTemplateMode(TemplateMode.TEXT);
    return resolver;
}

Bitte beachten Sie, dass es zum Testen besser ist, nicht zwischengespeicherte Vorlagen zu verwenden. Aus diesem Grund wird empfohlen, die Methode setCacheable (false) zu verwenden.

Javascript-Vorlagen werden im Ordner /WEB-INF/js/ gespeichert. Die reinen Textdateien befinden sich im Ordner /WEB-INF/txt/ . Der Pfad zu den HTML-Dateien ist /WEB-INF/html .

4. Federsteuerungskonfiguration

Um unsere neue Konfiguration zu testen, haben wir folgenden Spring-Controller entwickelt: 

@Controller
public class InliningController {

    @RequestMapping(value = "/html", method = RequestMethod.GET)
    public String getExampleHTML(Model model) {
        model.addAttribute("title", "Baeldung");
        model.addAttribute("description", "<strong>Thymeleaf</strong> tutorial");
        return "inliningExample.html";
    }

    @RequestMapping(value = "/js", method = RequestMethod.GET)
    public String getExampleJS(Model model) {
        model.addAttribute("students", StudentUtils.buildStudents());
        return "studentCheck.js";
    }

    @RequestMapping(value = "/plain", method = RequestMethod.GET)
    public String getExamplePlain(Model model) {
        model.addAttribute("username", SecurityContextHolder.getContext()
          .getAuthentication().getName());
        model.addAttribute("students", StudentUtils.buildStudents());
        return "studentsList.txt";
    }
}

Im Beispiel für eine HTML-Datei zeigen wir Ihnen, wie Sie die neue Inlining-Funktion mit und ohne HTML-Tags verwenden können.

Für das JS-Beispiel generieren wir eine AJAX-Anfrage, die die js-Datei mit den Schülerinformationen lädt. Bitte beachten Sie, dass wir die einfache buildStudents () -Methode innerhalb der StudentUtils -Klasse verwenden, und zwar unter diesem Link:/thymeleaf-in-spring-mvc[article].

Im Klartext-Beispiel zeigen wir schließlich die Schülerinformationen als Textdatei an. Ein typisches Beispiel für die Verwendung des Nur-Text-Vorlagenmodus könnte zum Senden von Nur-Text-E-Mails verwendet werden.

Als zusätzliche Funktion verwenden wir SecurityContextHolder , um den protokollierten Benutzernamen zu erhalten.

5. HTML/JS/TEXT-Beispieldateien

Der letzte Teil dieses Lernprogramms besteht darin, drei verschiedene Dateitypen zu erstellen und die Verwendung der neuen Thymeleaf-Funktionen zu testen. Beginnen wir mit der HTML-Datei: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Inlining example</title>
</head>
<body>
    <p>Title of tutorial:[[${title}]]</p>
    <p>Description:[(${description})]</p>
</body>
</html>

In dieser Datei verwenden wir zwei unterschiedliche Ansätze. Um den Titel anzuzeigen, verwenden wir eine Escape-Syntax, die alle HTML-Tags entfernt und nur Text anzeigt. Im Falle der Beschreibung verwenden wir eine nicht umschriebene Syntax, um HTML-Tags beizubehalten. Das Endergebnis sieht dann so aus: 

<p>Title of tutorial: Baeldung</p>
<p>Description: <strong>Thymeleaf</strong> tutorial</p>

Das wird natürlich von unserem Browser analysiert, indem das Wort Thymeleaf fett dargestellt wird.

Als Nächstes testen wir die js-Vorlagenfunktionen: 

var count =[[${students.size()}]];
alert("Number of students in group: " + count);

Attribute im JAVASCRIPT -Vorlagenmodus werden von JavaScript nicht angezeigt.

Dies führt zur Erstellung einer js-Warnung. Wir laden diese Warnung mithilfe von jQuery AJAX in die Datei listStudents.html: 

<script>
    $(document).ready(function() {
        $.ajax({
            url : "/spring-thymeleaf/js",
            });
        });
</script>

Die letzte, aber nicht die kleinste Funktion, die wir testen möchten, ist die Erzeugung von Textdateien. Wir haben die Datei studentsList.txt mit folgendem Inhalt erstellt: 

Dear[(${username})],

This is the list of our students:[# th:each="s : ${students}"]   -[(${s.name})]. ID:[(${s.id})][/]Thanks,
The Baeldung University

Beachten Sie, dass wie bei den Markup-Vorlagenmodi die Standard-Dialekte nur ein verarbeitbares Element ( [# …​]) und eine Menge verarbeitbarer Attribute ( th: text, th: utext, th: if, th: falls nicht enthalten , th: each usw.). Das Ergebnis wird eine Textdatei sein, die wir beispielsweise in der E-Mail verwenden können, wie am Ende von Abschnitt 3 erwähnt.

  • Wie testen? ** Wir empfehlen, zuerst mit dem Browser zu spielen und dann den vorhandenen JUnit-Test zu überprüfen.

6. Fazit

In diesem Artikel haben wir die im Thymeleaf-Framework implementierten neuen Funktionen mit Fokus auf Version 3.0 beschrieben.

Die vollständige Implementierung dieses Tutorials finden Sie unter https://github.com/eugenp/tutorials/tree/master/spring-thymeleaf (GitHub-Projekt). Dies ist ein auf Eclipse basierendes Projekt, das in jeder modernen Umgebung leicht zu testen ist Internet-Browser.

Wenn Sie vorhaben, ein Projekt von Version 2 auf diese neueste Version zu migrieren, lesen Sie http://www.thymeleaf.org/doc/articles/thymeleaf3migration.html im Migrationsleitfaden]. Beachten Sie, dass Ihre vorhandenen Thymeleaf-Vorlagen zu fast 100% mit Thymeleaf 3.0 kompatibel sind. In dieser Konfiguration müssen Sie nur wenige Änderungen vornehmen.

Related