themeleaf：入门（一）
1. 介绍Thymeleaf
1.1 什么是Thymeleaf
Thymeleaf是一种用于Web和独立环境的现代服务器端Java模板引擎。它能够处理HTML、XML、JavaScript、CSS甚至纯文本。与传统的JSP相比，Thymeleaf的语法更加简洁易懂，同时具备强大的功能和灵活性。
1.2 Thymeleaf的主要特点和优势
-
自然模板： Thymeleaf模板具有良好的可读性，看起来像普通的HTML文件，并且即使在没有Thymeleaf的情况下也能正常显示。
-
与HTML兼容： Thymeleaf与HTML、XML等格式无缝集成，可以直接在这些文件中嵌入Thymeleaf表达式。
-
可嵌套： Thymeleaf支持模板的嵌套，可以将一个模板嵌入到另一个模板中，使得页面结构更加清晰。
-
表达式语言： 强大的表达式语言使得在模板中进行条件判断、循环迭代等操作变得轻松。
-
Spring集成： Thymeleaf是Spring框架的官方模板引擎，能够与Spring MVC完美集成，简化开发流程。
1.3 Thymeleaf在Web开发中的应用场景
Thymeleaf广泛应用于Web开发中，特别适合以下场景：
-
动态网页构建： Thymeleaf可以在服务端生成动态内容，使得构建动态网页变得更加便捷。
-
表单处理： Thymeleaf提供了方便的表单处理功能，可以简化表单的渲染和处理过程。
-
模板布局： Thymeleaf支持模板的布局，使得页面结构更加清晰，可维护性更高。
-
国际化： Thymeleaf具备强大的国际化支持，能够轻松应对多语言环境。
2. Thymeleaf基础语法
2.1 Thymeleaf命名空间
在使用Thymeleaf时，需要在HTML文件中引入Thymeleaf的命名空间以启用Thymeleaf的语法。通常，命名空间声明如下：
DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
html>
通过这样的声明，可以在页面中使用Thymeleaf的语法。
2.2 Thymeleaf的表达式
Thymeleaf的表达式语法是其强大功能的基础。表达式用于在模板中插入动态内容。以下是一些常见的表达式：
-
变量表达式：
${variable}，用于在页面中输出变量的值。 -
选择表达式：
*{selection}，用于在迭代过程中获取当前迭代的对象。 -
URL表达式：
@{url}，用于构建URL。
2.3 Thymeleaf的标准表达式（Standard Expression）
Thymeleaf的标准表达式是一种更加强大的表达式语言，支持在页面中进行更复杂的操作。例如：
<p th:text="${user.name} ?: 'Guest'">Userp>
上述代码会根据user.name的值输出用户的名字，如果为null，则输出’Guest’。
2.4 Thymeleaf的选择器语法
Thymeleaf提供了强大的选择器语法，可以方便地选择文档中的元素进行操作。例如：
<div th:if="${user.isAdmin()}">Admin Sectiondiv>
上述代码会在用户是管理员时显示"Admin Section"。
3. Thymeleaf与HTML结合
3.1 在HTML中嵌入Thymeleaf表达式
Thymeleaf表达式可以轻松嵌入到HTML文件中，以实现动态内容的展示。例如：
DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf Exampletitle>
head>
<body>
<p th:text="${message}">Default Messagep>
body>
html>
在上述例子中，th:text="${message}"表示将变量message的值输出到该段落中。
3.2 Thymeleaf的属性处理
Thymeleaf不仅可以在元素的文本内容中插入表达式，还可以处理元素的属性。例如：
<a th:href="@{/home}" th:title="${user.name}">Homea>
上述代码中，th:href="@{/home}"表示构建一个链接到/home的URL，而th:title="${user.name}"则将用户的名字作为链接的标题。
3.3 使用Thymeleaf进行条件判断
Thymeleaf允许在模板中进行条件判断，以决定是否渲染某个元素或设置某个属性。例如：
<p th:if="${user.isAdmin()}">Admin Sectionp>
在上述例子中，如果用户是管理员，就会显示"Admin Section"。
3.4 使用Thymeleaf进行循环和迭代
Thymeleaf可以方便地处理集合的循环和迭代操作。例如：
<ul>
<li th:each="item : ${items}" th:text="${item}">Itemli>
ul>
上述代码中，th:each用于迭代items集合，为每个元素创建一个列表项。
4. Thymeleaf的模板布局
4.1 定义和使用布局片段
Thymeleaf支持模板布局，使得可以定义和使用布局片段，实现页面的结构化布局。例如，定义一个头部布局片段：
DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="${pageTitle}">Default Titletitle>
head>
<body>
然后在主模板中引用头部布局：
DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf Layout Exampletitle>
head>
<body>
<header th:replace="fragments/header :: header">header>
<div th:yield="content">Main Contentdiv>
body>
html>
在上述例子中，th:replace="fragments/header :: header"表示引用头部布局片段。
4.2 在不同模板中共享布局
Thymeleaf允许在不同的模板中共享布局片段，使得页面的结构保持一致。例如，定义一个尾部布局片段：
DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<footer>
<p>© 2024 Your Companyp>
footer>
body>
html>
然后在主模板中引用尾部布局：
DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf Layout Exampletitle>
head>
<body>
<header th:replace="fragments/header :: header">header>
<div th:yield="content">Main Contentdiv>
<footer th:replace="fragments/footer :: footer">footer>
body>
html>
4.3 使用Thymeleaf布局实现页面的结构
通过Thymeleaf的布局功能，可以更好地组织页面结构，实现头部、尾部等公共部分的复用。这提高了页面的可维护性和可扩展性。
5. Thymeleaf的表单处理
5.1 在表单中使用Thymeleaf
Thymeleaf可以与表单元素结合，简化表单的渲染和处理。例如，在一个登录表单中使用Thymeleaf：
<form th:action="@{/login}" method="post">
<label for="username">Username:label>
<input type="text" id="username" name="username" required th:value="${user.username}" />
<label for="password">Password:label>
<input type="password" id="password" name="password" required />
<button type="submit">Loginbutton>
form>
上述例子中，th:action="@{/login}"表示在登录表单中使用Thymeleaf，并指定表单提交的地址为/login。
5.2 处理表单提交
Thymeleaf也能方便地处理表单的提交。在后端控制器中接收表单数据，并进行相应的处理。例如，使用Spring MVC：
@Controller
public class LoginController {
@PostMapping("/login")
public String processLogin(@ModelAttribute User user) {
// 处理登录逻辑
return "redirect:/dashboard";
}
}
上述代码中，@PostMapping("/login")表示处理/login地址的POST请求，并通过@ModelAttribute接收表单数据。
5.3 表单字段的验证
Thymeleaf与Spring框架集成，可以方便地使用Spring的表单验证功能。例如，在User对象上添加验证注解：
public class User {
@NotEmpty(message = "Username cannot be empty")
private String username;
@NotEmpty(message = "Password cannot be empty")
private String password;
// 省略getter和setter
}
然后在控制器中添加验证：
@Controller
public class LoginController {
@PostMapping("/login")
public String processLogin(@Valid @ModelAttribute User user, BindingResult result) {
if (result.hasErrors()) {
return "login"; // 返回登录页面，显示验证错误信息
}
// 处理登录逻辑
return "redirect:/dashboard";
}
}
在上述例子中，@Valid用于启用验证，BindingResult用于接收验证结果。
6. Thymeleaf与Spring集成
6.1 配置Spring项目以使用Thymeleaf
在Spring项目中使用Thymeleaf，首先需要配置相关的依赖和视图解析器。在Spring Boot项目中，这通常已经默认配置好了。在传统的Spring MVC项目中，需要进行手动配置。
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
@Configuration
public class ThymeleafConfig extends WebMvcConfigurerAdapter {
@Bean
public ViewResolver thymeleafViewResolver(SpringTemplateEngine templateEngine) {
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine);
return resolver;
}
@Bean
public SpringTemplateEngine templateEngine(TemplateResolver templateResolver) {
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.setTemplateResolver(templateResolver);
return engine;
}
@Bean
public TemplateResolver templateResolver() {
TemplateResolver resolver = new ServletContextTemplateResolver();
resolver.setPrefix("/WEB-INF/templates/");
resolver.setSuffix(".html");
resolver.setTemplateMode("HTML5");
return resolver;
}
}
6.2 Thymeleaf与Spring MVC的结合
Thymeleaf与Spring MVC集成时，可以直接在控制器中返回Thymeleaf模板的逻辑视图名。例如：
@Controller
public class ExampleController {
@GetMapping("/example")
public String example(Model model) {
model.addAttribute("message", "Hello, Thymeleaf!");
return "example"; // 返回Thymeleaf模板名称
}
}
在上述例子中，return "example"表示返回名为"example"的Thymeleaf模板。
6.3 使用Thymeleaf进行国际化
Thymeleaf支持国际化，可以轻松实现多语言的切换。在模板中使用国际化的示例：
<p th:text="#{welcome.message}">Welcome!p>
在配置文件中定义国际化的消息：
welcome.message=Welcome to our website!
这样，根据不同的语言环境，将显示相应的消息。
7. Thymeleaf的片段与标签
7.1 片段（Fragment）的定义和使用
Thymeleaf的片段是可重用的部分，可以在模板中定义并在其他模板中引用。例如，定义一个头部片段：
DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="${pageTitle}">Default Titletitle>
head>
<body>
然后在主模板中引用头部片段：
DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf Fragments Exampletitle>
head>
<body>
<div th:replace="fragments/header :: header">div>
body>
html>
7.2 使用Thymeleaf标签库
Thymeleaf提供了丰富的标签库，用于处理常见的Web开发场景。例如，使用th:each标签进行循环：
<ul>
<li th:each="item : ${items}" th:text="${item}">Itemli>
ul>
在上述例子中，th:each用于迭代items集合，为每个元素创建一个列表项。
7.3 创建自定义Thymeleaf标签
Thymeleaf还允许创建自定义标签，以满足特定需求。例如，定义一个简单的自定义标签：
public class CustomDialect extends AbstractProcessorDialect {
public CustomDialect() {
super("Custom Dialect", "custom", StandardDialect.PROCESSOR_PRECEDENCE);
}
@Override
public Set<IProcessor> getProcessors(String dialectPrefix) {
Set<IProcessor> processors = new HashSet<>();
processors.add(new HelloWorldProcessor(dialectPrefix));
return processors;
}
}
然后在模板中使用自定义标签：
<div custom:helloWorld="Welcome to Thymeleaf">div>
上述例子中，custom:helloWorld是自定义标签，用于显示欢迎消息。