【快速上手系列】模板引擎Thymeleaf简单使用教程

本文链接：https://blog.youkuaiyun.com/weixin_55452293/article/details/131377626

Thymeleaf是一个用于服务器端的Java模板引擎，适用于HTML、XML等文件。它提供优雅的自然模板，替代复杂的JSP。在SpringBoot项目中，通过添加相关依赖，可以轻松集成Thymeleaf。配置HTML页面，使用Thymeleaf的th:text、th:if、th:each等指令实现数据绑定和逻辑判断。在控制器中处理数据并返回视图，关闭缓存以实现动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【快速上手系列】模板引擎Thymeleaf简单使用教程

简介

Thymeleaf 是一个服务器端 Java 模板引擎，能够处理 html、xml、css和JavaScript等模板文件。 Thymeleaf 模板可以直接当作静态原型来使用，它主要目标是为开发者的开发工作流程带来优雅的自然模板，也是 Java 服务器端 HTML5 开发的理想选择。

使用模板引擎可以弥补html的两个缺陷
接收到来自作用域的值
进行逻辑判断：for，if…

jsp虽然可以实现这些功能，但是它本身非常复杂，实际开发中使用jsp是非常不推荐的，因为编译的时候jsp的代码经过分离编译等过程，实际上会降低性能

可以说模板引擎就是为了解决这两个问题因而随之产生的

使用

导入jar包

创建springboot项目时，选择模板引擎下的Thymeleaf即可

请添加图片描述

或者你已有了springboot但是没有选择

可以添加maven依赖

pom.xml

<spring-boot.version>2.1.17.RELEASE</spring-boot.version>

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

tips：springboot项目中无需设置有关springboot本身的每个jar包是否冲突，只需写好spring-boot.version的版本号即可，springboot会自动选择相应兼容此版本的jar包依赖

前端页面配置

需要在html页面的html标签上写上

<html xmlns:th="http://www.thymeleaf.org">
    <body>
    </body>
</html>

然后写一个controller返回到这个html页面

@RequestMapping("/xxx")
public String xxx(Model model) {
    model.addAttribute("dog", "kuma");
    return "index";	//这里返回的html页面直接写文件名称即可，因为Thymeleaf的默认配置视图解析器就是开启的，且前缀就是classpath：/templates/,后缀是.html（当然如果你要把页面放在其它地方的话那自己再在yml配置文件中配置一下相关配置即可）
}

tips：注意这里的controller不要写@ResponseBody注解（或者你可能整个controller类都写了这个），否则会将返回的页面路径变成json字符串被打印在页面中，导致无法正常显示（也就是说显示的路径成了返回的数据）

然后可以在yml配置文件中设置一下thymeleaf，

关一下缓存，否则可能页面改了半天也没改变

spring：
	thymeleaf：
		cache： false	# 开发时关闭缓存

具体html实现

已知html页面是无法使用EL表达式的

所以我们可以用thymeleaf来实现

th:text：用于显示数据，且会覆盖你的死数据内容

<!-- th:text -->
<span th:text="${dog}">这里什么都没有</span>

请添加图片描述

可以看到数据成功显示（当然你的动态数据前提是从controller来的啊。。。）

也可以看到原有的“这里什么都没有”的这句话被覆盖掉了

tips：使用前提是必须th：xxx必须是在标签中，不能独立拿出来使用

一个小例子

后端controller

/**
 * @Author Tuerlechat,
 * @Date 2022/11/16
 */
@Controller
//@ResponseBody 使用模板引擎返回页面时会变成json数据返回去，所以要关闭
@RequestMapping("/pro")
public class ProviderController {

    @Autowired
    private ProviderService providerService;

    @RequestMapping("/findProviderList")
    public String findProviderList(Model model) {
        List<Provider> providers = new ArrayList<>();
        providers = providerService.findProviderList(null,1,10);	//一个翻页查询的数据
        model.addAttribute("providers", providers);	//返回集合数据
        model.addAttribute("dog", "kuma");	//返回独立的字符串
        return "index";
    }

}

前端html页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <!-- th:text 显示内容 -->
    <span th:text="${dog}">这里什么都没有</span>
    <!-- th:if 条件判断 -->
    <span th:text="海胆" th:if="${dog}=='kuma'">这里什么都没有</span>	
    <!-- th:each 遍历集合（集合别名：${后端传过来的集合对象名}） -->
    <spn>请选择供应商：</spn>
    <select name="providerSelect">
        <option th:each="pro : ${providers}" th:text="${pro.proName}"></option>
    </select>
    <!-- th:href 超链接（两种写法） -->
    <a th:href="@{index.html(dogName=${dog})}">悬浮看浏览器窗口左下角</a>
    <a th:href="'index.html?dogName='+${dog}">悬浮看浏览器窗口左下角</a>
</div>
</body>
</html>