Thymeleaf模板引擎常用总结

最新推荐文章于 2025-04-27 19:00:00 发布

大道之简

最新推荐文章于 2025-04-27 19:00:00 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/HcJsJqJSSM/article/details/84071971

本文详细介绍了Thymeleaf模板引擎在SpringBoot框架中的整合与使用方法，包括依赖配置、属性注入、静态资源引入、动态数据访问及迭代、JavaScript中model数据访问、HTML标签解析、数据格式化等核心内容。

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

一：语法简单总结

Thymeleaf是一个Java类库,是xml/html/html5的模板引擎,SpringBoot框架推荐在MVC的Web应用做做View层使用.

SpringBoot中整合Thymeleaf依赖如下.

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

	<properties>
		<!-- set thymeleaf version SpringBoot默认使用的是Thymeleaf的2.0的版本.-->
		<thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
		<thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<java.version>1.8</java.version>
	</properties>

ThymeleafProperties的源码如下.

将application.yml中的spring.thymeleaf的配置注入下面对应的属性中,有几个是默认的,剩下的都是根据使用情况配置的,然后注入到相应的值中.

@ConfigurationProperties：批量注入属性值.

@Value：单个注入属性值.

@ConfigurationProperties(
    prefix = "spring.thymeleaf"
)
public class ThymeleafProperties {
    private static final Charset DEFAULT_ENCODING;
    public static final String DEFAULT_PREFIX = "classpath:/templates/";
    public static final String DEFAULT_SUFFIX = ".html";
    private boolean checkTemplate = true;
    private boolean checkTemplateLocation = true;
    private String prefix = "classpath:/templates/";
    private String suffix = ".html";
    private String mode = "HTML";
    private Charset encoding;
    private boolean cache;
    private Integer templateResolverOrder;
    private String[] viewNames;
    private String[] excludedViewNames;
    private boolean enableSpringElCompiler;
    private boolean enabled;
    private final ThymeleafProperties.Servlet servlet;
    private final ThymeleafProperties.Reactive reactive;

    public ThymeleafProperties() {
        this.encoding = DEFAULT_ENCODING;
        this.cache = true;
        this.enabled = true;
        this.servlet = new ThymeleafProperties.Servlet();
        this.reactive = new ThymeleafProperties.Reactive();
    }

命名空间如下,静态页面转换为动态视图.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

1. Thymeleaf引入css资源.

th:href="@{path}"

<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"  media="all">

2. Thymeleaf引入JavaScript资源.

th:src="@{path}"

<script th:src="@{js/jquery-3.1.1.min.js}"></script>

通过 "@{}"引用静态资源.

3. 访问Model中的数据.

${}访问model中的属性.

<span th:text="${singlePerson.name}"></span>

动态处理的元素使用"th:"为前缀.

4. model中的数据迭代.

判断list集合不为空.

<div th:if="${not #lists.isEmpty(person)}">
</div>

迭代list集合数据.list中保存实体对象.

<div class="panel-body">
                 <ul class="list-group">
                     <li class="list-group-item" th:each="person:${person}">
                         <span th:text="${person.name}"></span>
                         <span th:text="${person.age}"></span>
                         <button class="btn" th:onclick=" 'getPersonName(\'' +${person.name}+ '\'); '">获得名字</button>
                     </li>
                 </ul>
 </div>

如何获取遍历列表的序号,方式一：${stat.count}是从1开始的,方式二：${stat.index}是从0开始的,如果从1开始就${stat.index+1}.

 <tr th:each="novel,stat:${resultlist}">
 <th style="text-align:center;" th:text="${stat.count}"></th>

迭代list,里面存放map对象.

th:text=${novel['Map Key']}

 <tr th:each="novel,stat:${resultlist}">
     <th style="text-align:center;" th:text="${stat.count}"></th>
     <th style="text-align:center;" th:text="${novel['Index']}"></th>
     <th style="text-align:center;" th:text="${novel['Type']}"></th>
     <th style="text-align:center;" th:text="${novel['Id']}"></th>
     <th style="text-align:center;" th:utext="${novel['Highlight']}"></th>
     <th style="text-align:center;" th:text="${novel['Scope']}"></th>
</tr>

5. 在JavaScript中访问model中的数据.

通过th:inline=“javascript”添加到script标签,这样Javascript就可以访问model中的对象属性了.

通过“[[${}]]”访问实际的值.

<script th:inline="javascript">
           var single=[[${singlePerson}]];
           console.log(single.name+"/"+single.age);
           function getPersonName(name){
               console.log(name);
           }
 </script>

6. 解析model属性值中的html标签.

<th style="text-align:center;" th:utext="${novel['Highlight']}"></th>

7. 格式化.(表达式对象)

7.1格式化金额.小数位为2为.

<dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">350</dd>

7.2 格式化日期

<dd th:text="${#dates.format(product.availableFrom, 'yyyy-MM-dd')}">28-Jun-2018</dd>

7.3 字符串连接

<span th:text="${'Hi'+person.name}"></span>