Thymeleaf 常见使用_thymeleaf比对样式-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34579060/article/details/105241729

本文详细介绍了Thymeleaf模板引擎的使用方法，包括官网地址、遍历数据、a标签href设置、js获取页面值、点击事件传值、条件样式、时间格式化、参数传递、直接输出、片段传值、条件判断等核心功能。

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

1.1 官网地址

网站：

https://www.thymeleaf.org/

文档地址:

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

1.2 遍历

<div class="media" th:each="question:${questions}">
    <div class="media-left media-middle">
        <a href="#">
            <img class="media-object img-circle" th:src="@{/images/c6.png}" alt="头像">
        </a>
    </div>
    <div class="media-body media-middle">
        <h4 class="media-heading">
            <a th:href="@{'/question/'+ ${question.id}}" th:text="${question.title}"></a>
        </h4>
        <p class="text-desc">
            <span th:text="${question.commentCount}"></span> 个回复 • &nbsp;
            <span th:text="${question.viewCount}"></span> 次浏览 • &nbsp;
            <span th:text="${question.createTime}"></span>
        </p>
    </div>
</div>

1.3 a 标签 href 地址

<h4 class="media-heading">
    <a th:href="@{'/question/'+ ${question.id}}" th:text="${question.title}"></a>
</h4>

1.4 thymeleaf js 获取页面上的值

<script data-th-inline="javascript">
	 let questionId = [[${question.id}]];
</script>

1.5 onclick 向js传值

<button type="button" class="btn btn-success pull-right mt-10"
        th:onclick="addSubComment([[${comment.id}]])">
    评论
</button>

1.6 判断加样式

<a href="/profile/question" class="list-group-item" 
   	th:classappend="${section ==  'question'} ? 'active':''">
    <i class="fa fa-question-circle" aria-hidden="true"></i>&nbsp;
    我的问题
</a>

1.7 thymeleaf 格式化时间

<span th:text="${#dates.format(article.date, 'yyyy-MM-dd HH:mm:ss')}"></span>

1.8 thymeleaf 格式化jdk8 LocalDateTime 时间

引入pom.xml

<dependency>
    <groupId>org.thymeleaf.extras</groupId>
    <artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>

增加配置

package com.example.demo.config.web;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.thymeleaf.extras.java8time.dialect.Java8TimeDialect;

@Configuration
public class TemplateConfiguration {

    @Bean
    public Java8TimeDialect java8TimeDialect() {
        return new Java8TimeDialect();
    }
}

文档地址:

https://github.com/thymeleaf/thymeleaf-extras-java8time

使用

<span th:text=" ${#temporals.format(article.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>

1.10 thymeleaf 的 a标签如何携带多个参数

<a th:href="@{/search(page=1, title=${title})}" aria-label="Previous" class="page-item">
    <span aria-hidden="true">首页</span>
</a>

1.11 thymeleaf 如何不转义直接输出

<a th:href="@{'/article/'+ ${article.id}}" th:utext="${article.title}"></a>

1.12 thymeleaf 如何向th:fragment 传值

<!-- 标签页 -->
<div class="container" th:fragment="base-head(name)">
    <div class="panel">
        <div class="panel-body">
            <ul class="nav nav-pills">
                <li th:classappend="${name == 'index'} ? 'active': ''">
                    <a href="/index">
                        <i class="fa fa-file-text-o" aria-hidden="true"></i>
                        <span>文章</span>
                    </a>
                </li>
                <li th:classappend="${name == 'category'} ? 'active': ''">
                    <a href="/header/category">
                        <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                        <span>分类</span>
                    </a>
                </li>
                <li th:classappend="${name == 'tag'} ? 'active': ''">
                    <a href="/header/tag">
                        <i class="fa fa-tags" aria-hidden="true"></i>
                        <span>标签</span>
                    </a>
                </li>
                <li th:classappend="${name == 'link'} ? 'active': ''">
                    <a href="/header/help">
                        <i class="fa fa-link" aria-hidden="true"></i>
                        <span>编程网址</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

引用并传递值

<div th:replace="~{navigation :: base-head('notice')}"></div>

1.13 th:if 使用

<span class="label label-success" th:if="${article.status} == 1">草稿</span>
<span class="label label-danger" th:if="${article.status} == 2">已发布</span>