Thymeleaf模板引擎从入门到实战：Spring Boot整合与核心用法详解

在 Java Web 开发的世界里，模板引擎是连接后端数据与前端展示的重要桥梁。Thymeleaf 凭借其强大的功能和简洁的语法，逐渐成为众多开发者的首选。如果你正在寻找一款能够让你的 Web 应用开发更加高效、代码更加优雅的模板引擎，那么 Thymeleaf 绝对值得你深入了解。本文将带你从零开始，快速掌握 Thymeleaf 的基础知识和核心用法。

一、Thymeleaf 是什么？

Thymeleaf 是一个用于 Java 的开源模板引擎，它可以与 Spring MVC、Spring Boot 等主流 Java Web 框架无缝集成。与传统的 JSP（JavaServer Pages）相比，Thymeleaf 的一大显著优势在于它能够直接在浏览器中预览模板内容，而无需启动整个 Web 应用。这使得开发人员可以更直观地查看页面效果，大大提高了开发效率。此外，Thymeleaf 的语法简洁明了，学习成本较低，并且支持 HTML5 标准，能够很好地兼容现代前端开发工具和技术。

Thymeleaf 的设计理念是 “自然模板”，即模板文件本身就是有效的 HTML（或 XML）文件，可以直接在浏览器中打开并查看。这意味着前端设计师和后端开发者可以更方便地协作，前端设计师可以在不依赖后端数据的情况下设计和完善页面结构与样式，而后端开发者则可以通过添加 Thymeleaf 的标签和表达式，将动态数据填充到页面中。

二、Thymeleaf 的核心功能

数据绑定：Thymeleaf 最核心的功能之一就是数据绑定。它支持从 Java 对象、集合、Map 等数据结构中提取数据，并将其展示在 HTML 页面上。通过使用th:text、th:utext、th:value等属性，我们可以轻松地将后端数据绑定到页面的文本、HTML 内容或表单字段中。
条件与循环：Thymeleaf 提供了丰富的条件判断和循环语句，如th:if、th:unless、th:switch、th:each等。这些语句使得我们可以根据不同的条件动态地展示或隐藏页面元素，以及遍历集合数据并生成相应的 HTML 结构。
表单处理：在 Web 应用中，表单是用户输入数据的重要途径。Thymeleaf 对表单处理提供了强大的支持，它可以自动绑定表单数据到后端的 Java 对象，并对表单进行验证和错误处理。通过th:object、th:field等属性，我们可以方便地创建和处理表单。
国际化支持：随着全球化的发展，Web 应用的国际化需求越来越普遍。Thymeleaf 内置了对国际化的支持，通过配置资源文件和使用#{...}表达式，我们可以轻松实现页面内容的多语言切换。
模板布局：Thymeleaf 支持模板布局，允许我们将页面的公共部分（如头部、导航栏、底部等）提取出来，形成一个布局模板，然后在其他页面中复用。这样可以大大减少代码的重复，提高代码的可维护性。

三、创建项目

1.org.apache.maven.archetypes:maven-archetype-quickstart选这个有什么用？

org.apache.maven.archetypes:maven-archetype-quickstart是 Maven 的一个项目原型，主要用于快速搭建一个基础的 Java 项目骨架，方便开发者在此基础上进行开发。结合你正在阅读的 Thymeleaf 入门内容，它在 Java Web 开发学习中也能起到很好的辅助作用，具体优势如下：

快速搭建项目结构：maven-archetype-quickstart会自动生成标准的 Maven 项目目录结构，包括src/main/java（存放 Java 源代码）、src/main/resources（存放配置文件等资源）、src/test/java（存放测试代码）和src/test/resources（存放测试相关资源）等。当你学习 Thymeleaf 时，可将 Thymeleaf 模板文件放在src/main/resources/templates目录，后端代码放在src/main/java目录，便于后续添加 Thymeleaf 依赖和进行相关开发。
预配置项目基础：该原型生成的项目pom.xml文件中，已配置好基础的 Maven 项目信息，如项目坐标（groupId、artifactId、version）等。当你需要集成 Thymeleaf 到项目时，只需要在pom.xml中添加 Thymeleaf 依赖即可，无需从头配置 Maven 项目的基础信息，节省时间。
提供示例代码：在src/main/java目录下，maven-archetype-quickstart会生成一个简单的 Java 类（如App.java），包含一个简单的main方法示例。虽然与 Thymeleaf Web 开发模式不同，但能帮助初学者理解 Java 代码在 Maven 项目中的基本组织形式，后续学习 Thymeleaf 时，可逐步替换和扩展代码，开发出 Web 应用的后端逻辑，实现与 Thymeleaf 模板的数据交互。
便于学习 Maven 构建：maven-archetype-quickstart生成的项目可以直接使用 Maven 的各种命令进行构建、编译、测试和打包等操作。在学习 Thymeleaf 的过程中，通过对这个基础项目执行 Maven 命令，能更好地掌握 Maven 的使用，例如使用mvn clean install命令将项目打包，为后续部署包含 Thymeleaf 的 Web 应用做好准备。

如果你想基于这个原型，结合 Thymeleaf 开发一个 Web 应用，后续可以添加 Spring Boot、Spring MVC 等依赖，进一步完善项目功能。

2.导入依赖

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

3.编写第一个入门程序

示例1：

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;public class HelloThymeLeaf {public static void main(String[] args) {//创建模版引擎TemplateEngine engine = new TemplateEngine();//准备模版String input = "<input type='text' th:value='hellothymelaef'/>";//准备数据，使用ContextContext context = new Context();//调用引擎，处理模版和数据String out = engine.process(input, context);System.out.println("结果数据："+out);}
}

运行结果;

解释：

创建模板引擎实例

TemplateEngine engine = new TemplateEngine();

创建了一个TemplateEngine对象，它是整个 Thymeleaf 处理流程的核心，后续对模板的解析、数据绑定等操作都依赖于这个引擎实例。

准备模板

String input = "<input type='text' th:value='hellothymelaef'/>";

定义了一个字符串input，它包含了 Thymeleaf 模板代码。在这个例子中，模板是一个简单的 HTML 输入框，其中使用了 Thymeleaf 的th:value属性，不过当前属性值hellothymelaef只是一个静态字符串，后续可以通过数据绑定动态替换。

准备数据上下文

Context context = new Context();

创建了一个Context对象，用于存储要传递给模板的数据。在这个简单示例中，Context对象目前为空，没有实际数据传递。但在实际应用中，可以通过context.setVariable("变量名", 变量值)的方式向其中添加数据，这些数据将在模板处理时被 Thymeleaf 引擎使用。

处理模板并输出结果

String out = engine.process(input, context);
System.out.println("结果数据："+out);

调用TemplateEngine的process方法，将模板字符串input和数据上下文context作为参数传入。process方法会解析模板，应用数据绑定等操作，并返回处理后的结果字符串。最后，通过System.out.println将处理后的结果输出到控制台。在这个例子中，由于没有实际的数据绑定操作，输出结果可能与输入的模板字符串相似，除非后续向context中添加数据并在模板中引用。

示例2：

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;public class HelloThymeleaf2 {public static void main(String[] args) {//创建模版引擎TemplateEngine engine = new TemplateEngine();//准备模版String input = "<input type='text' th:value='${name}'/>";//准备数据，使用ContextContext context = new Context();context.setVariable("name","张三");//调用引擎，处理模版和数据String out = engine.process(input, context);System.out.println("结果数据："+out);}
}

4.使用模版文件

main.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" th:value="${name}"/>
</body>
</html>

Test

    @Testpublic void test(){TemplateEngine engine = new TemplateEngine();//读取磁盘中的模版文件ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();//设置引擎使用resolverengine.setTemplateResolver(resolver);//指定数据Context context = new Context();context.setVariable("name","张三");//处理模版String html=engine.process("main.html",context);System.out.println("html="+html);}

配置模板解析器

ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
engine.setTemplateResolver(resolver);

ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();：创建一个ClassLoaderTemplateResolver对象，该解析器用于从类路径（即src/main/resources及其子目录）中查找和加载模板文件。它是 Thymeleaf 提供的多种模板解析器之一，适用于大多数基于 Maven 或 Gradle 构建的 Java 项目，因为这些项目的资源文件默认会被打包到类路径下。
engine.setTemplateResolver(resolver);：将创建好的模板解析器resolver设置到TemplateEngine中，这样模板引擎在处理模板时，就会使用该解析器来查找对应的模板文件

准备数据上下文

Context context = new Context();
context.setVariable("name", "张三");

Context context = new Context();：创建一个Context对象，它用于在模板处理过程中存储和传递数据，类似于在 Web 开发中Model的作用。
context.setVariable("name", "张三");：向Context中添加一个名为name的变量，并将其值设置为"张三"。这个变量将在模板处理过程中被使用，用于替换模板中相应的表达式。

处理模板并输出结果

String html = engine.process("main.html", context);
System.out.println("html=" + html);

String html = engine.process("main.html", context);：调用TemplateEngine的process方法，该方法接受两个参数：模板文件名（这里是"main.html"，模板引擎会根据之前设置的模板解析器，在类路径下查找该文件）和数据上下文context。process方法会解析模板文件，将context中的数据应用到模板中相应的表达式处，完成数据绑定和模板渲染，并返回处理后的 HTML 字符串。

5.设置模版前缀、后缀

让其再套一层目录依旧能找到

采用这两个方法

   @Testpublic void test2(){TemplateEngine engine = new TemplateEngine();ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();resolver.setPrefix("templates/");resolver.setSuffix(".html");engine.setTemplateResolver(resolver);Context context = new Context();context.setVariable("name","张三");String html = engine.process("index", context);System.out.println("html="+html);}

运行结果：

四、spring boot 中使用thymeleaf

1.创建maven 项目

2.加入依赖

<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
<version>2.0.6.RELEASE</version>
</parent><dependencies><dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency><dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency></dependencies>

3.编写application.properties

spring.thymeleaf.mode=HTML
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false

在配置文件 application. properties 中，可以修改的 Thymeleaf 配置主要有以下。

spring.thymeleaf.cache ：是否打开模板配置，默认为 true 。

spring.thymeleaf.check-template ：是否在处理模板前检查其是否存在，默认为 true 。

spring.thymeleaf.check-template-location ：是否检查模板位置，默认为 true 。

spring.thymeleaf.content-type ：模板的 content-type 值，默认为 text/html

spring.thymeleaf.enabled ：是否开启视图解析，默认为 true 。

spring.thymeleaf.encoding ：模板的编码，默认为 UTF-8。

spring.thymeleaf.excluded-view-names ：要排除的模板名称。

spring.thymeleaf.mode ：模板模式，默认为 HTML5

spring.thymeleaf. prefix : 模板前缀，默认为 classpath :/templates ／，用于创建模板的 URL。

spring.thymeleaf.suffix ：模板后缀，默认为.html ，用于创建模板 URL。 “前缀＋模板名称＋后缀”即可定位到具体的模板。

spring.thymeleaf.template-resolver-order ：默认模板解析器的执行顺序。

spring.thymeleaf.view-names ：要解析的模板名称，用逗号隔开。

以上执行简单的两步就完成了 Spring Boot 与 Thymeleaf 的整合，实际上都不需要配置 application.properties ，使用默认值即可，换言之，只需要为项目加入“spring-boot-starter thymeleaf＂依赖，就能完成整合整理一下，并解释一下

4.创建Controller

package org.example1.demo1.controller;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;@Controller
public class HelloController {//参数：Model可以存放数据，放入到request作用域//返回值：String:表示视图@GetMapping("/hello")public String hello(Model model) {//添加数据model.addAttribute("name","李四");//指定模版视图return "index";}
}