知識庫 / Spring / Spring MVC RSS 訂閱

1. 簡介

Thymeleaf 是一款用於處理和創建 HTML、XML、JavaScript、CSS 和純文本的 Java 模板引擎。 想要了解 Thymeleaf 和 Spring 的入門知識，請參考這篇文檔。

在本文中，我們將討論 Thymeleaf 3.0 的新特性，以及它在 Spring MVC 中與 Thymeleaf 應用程序的集成。 版本 3 帶來了許多新特性和底層改進。 具體來説，我們將涵蓋自然處理和 JavaScript 內聯這兩個主題。

Thymeleaf 3.0 包含三種新的文本模板模式： TEXT、JAVASCRIPT 和 CSS – 它們分別用於處理純文本、JavaScript 和 CSS 模板。

2. Maven 依賴

首先，讓我們看看如何將 Thymeleaf 集成到 Spring 中所需的配置。我們需要在我們的依賴中包含 <em thymeleaf-spring</em> 庫。

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>

<div>
</div>
<div>
<p>請注意，對於 Spring 4 項目，必須使用 <em >thymeleaf-spring4</em> 庫，而不是 <em >thymeleaf-spring5</em> 庫。 最新依賴的版本可以在 <a href="https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf-spring5">這裏</a>找到。 </p>

3. Java Thymeleaf 配置

首先，我們需要配置新的模板引擎、視圖和模板解析器。要做到這一點，我們需要更新 Java 配置類，該類已創建。

要做到這一點，我們需要更新 Java 配置類，該類在此處創建。除了新的解析器類型之外，我們的模板還實現了 Spring 接口 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;
    }
}

如上所述，我們創建了三種不同的視圖解析器——一個用於 HTML 視圖，一個用於 JavaScript 文件，以及一個用於純文本文件。Thymeleaf 將通過檢查文件名後綴來區分它們：.html、.js 和 .txt。

我們還創建了靜態類 ArrayUtil，以便使用方法 array()，該方法創建包含視圖名稱的所需 String[] 數組。

在類的下一部分，我們需要配置模板引擎：

private ISpringTemplateEngine templateEngine(ITemplateResolver templateResolver) {
    SpringTemplateEngine engine = new SpringTemplateEngine();
    engine.setTemplateResolver(templateResolver);
    return engine;
}

最後，我們需要創建三個獨立的模板解析器：

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

請注意，為了測試，最好使用非緩存模板，因此建議使用 setCacheable(false) 方法。

Javascript 模板將存儲在 /WEB-INF/js/ 文件夾中，純文本文件在 /WEB-INF/txt/ 文件夾中，最終 HTML 文件的路徑是 /WEB-INF/html。

4. Spring 控制器配置

為了測試我們的新配置，我們創建了以下 Spring 控制器:

@Controller
public class InliningController {

    @RequestMapping(value = "/html", method = RequestMethod.GET)
    public String getExampleHTML(Model model) {
        model.addAttribute("title", "Baeldung");
        model.addAttribute("description", "Thymeleaf 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";
    }
}

在 HTML 文件示例中，我們將演示如何使用新的內聯功能，包括有和無 HTML 標籤轉義的情況。

對於 JS 示例，我們將生成一個 AJAX 請求，該請求將加載包含學生信息的 js 文件。請注意，我們正在使用來自該文章中的簡單 buildStudents() 方法，位於 StudentUtils 類中。

最後，在純文本示例中，我們將以文本文件形式顯示學生信息。 使用純文本模板模式的典型示例可以用於發送純文本電子郵件。

作為附加功能，我們將使用 SecurityContextHolder，以獲取已登錄的用户名。

5. HTML/Js/Text 示例文件

本教程的最後一部分是創建三種不同類型的文件，並測試新的 Thymeleaf 功能的使用。我們先從 HTML 文件開始：

<!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>

在當前文件中，我們使用了兩種不同的方法。為了顯示標題，我們使用轉義語法，這會移除所有 HTML 標籤，從而只顯示文本。對於描述，我們使用未轉義語法，以保留 HTML 標籤。最終結果將如下所示：

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

當然，這將會被我們的瀏覽器解析，以顯示帶有粗體樣式的 Thymeleaf 文本。

接下來，我們將測試 js 模板功能。

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

在 <em >JAVASCRIPT</em> 模板模式下，屬性將不會進行轉義。這會導致創建 JavaScript 彈窗。我們使用 jQuery AJAX 在 listStudents.html 文件中加載這個彈窗。

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

最後一個，但絕非最小的函數，是我們想要測試的純文本文件生成功能。我們創建了 studentsList.txt 文件，內容如下：

Dear [(${username})],

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

請注意，與標記模板模式類似，標準方言僅包含一個可處理的元素 ([# …]) 及其一組可處理的屬性 (th:text, th:utext, th:if, th:unless, th:each, 等等)。最終結果將是一個文本文件，我們可以將其用於例如電子郵件，正如在第 3 節末尾所提到的。

如何進行測試？ 我們的建議是首先在瀏覽器中進行試驗，然後檢查現有的 JUnit 測試。

6. Thymeleaf 在 Spring Boot 中的使用

Spring Boot 通過添加 spring-boot-starter-thymeleaf依賴項，提供對 Thymeleaf 的自動配置。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <version>2.3.3.RELEASE</version>
</dependency>

無需進行任何顯式配置。默認情況下，HTML文件應放置在 resources/templates 目錄下。

7. 結論

在本文中，我們重點介紹了 Thymeleaf 框架在版本 3.0 中實施的新功能。

如果您計劃將項目從版本 2 遷移到最新版本，請參閲 這裏提供的遷移指南。請注意，您現有的 Thymeleaf 模板與 Thymeleaf 3.0 幾乎 100% 兼容，因此您只需在配置中進行少量修改。