Thymeleaf笔记

从0到1的旅行家

已于 2023-07-11 15:39:30 修改

阅读量386

点赞数 1

文章标签：笔记

于 2023-07-11 11:18:33 首次发布

本文链接：https://blog.csdn.net/qq_51110877/article/details/131654671

版权

Thymeleaf官网：Thymeleaf

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>Good Thymes Virtual Grocery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/gtvg.css}" />
</head>
<body>
	<p th:text="#{home.welcome}">Welcome to our grocery store!</p>
</body
</html>

1.导入依赖

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

2.基础语法

1.核心用法

th:xxx：动态渲染指定的 html 标签属性值、或者th指令（遍历、判断等）

th:text：标签体内文本值渲染

th:utext：不会转义，显示为html原本的样子。
th:属性：标签指定属性渲染
th:attr：标签任意属性渲染
th:ifth:each...：其他th指令
例如：

<p th:text="${content}">原内容</p>
<a th:href="${url}">登录</a>
<img src="../../images/gtvglogo.png" 
     th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />

表达式：用来动态取值

${}：变量取值；使用model共享给页面的值都直接用${}
@{}：url路径；
#{}：国际化消息
~{}：片段引用
*{}：变量选择：需要配合th:object绑定对象

系统工具&内置对象：

param：请求参数对象
session：session对象
application：application对象
#execInfo：模板执行信息
#messages：国际化消息
#uris：uri/url工具
#conversions：类型转换工具
#dates：日期工具，是java.util.Date对象的工具类
#calendars：类似#dates，只不过是java.util.Calendar对象的工具类
#temporals： JDK8+ java.time API 工具类
#numbers：数字操作工具
#strings：字符串操作
#objects：对象操作
#bools：bool操作
#arrays：array工具
#lists：list工具
#sets：set工具
#maps：map工具
#aggregates：集合聚合工具（sum、avg）
#ids：id生成工具

2.用法示例

表达式：

变量取值：${...}
url 取值：@{...}
国际化消息：#{...}
变量选择：*{...}
片段引用: ~{...}

常见：

文本： 'one text'，'another one!',...
数字： 0,34,3.0,12.3,...
布尔：true、false
null: null
变量名： one,sometext,main...

文本操作：

拼串： +
文本替换：| The name is ${name} |

布尔操作：

二进制运算： and,or
取反：!,not

比较运算：

比较：>，<，<=，>=（gt，lt，ge,le）
等值运算：==,!=（eq，ne）

条件运算：

if-then： (if)?(then)
if-then-else: (if)?(then):(else)
default: (value)?:(defaultValue)

特殊语法：

无操作：_

所有以上都可以嵌套组合

'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))

3.属性设置

th:href="@{/product/list}"
th:attr="class=${active}"
th:attr="src=@{/images/gtvglogo.png},title=${logo},alt=#{logo}"
th:checked="${user.active}"

<p th:text="${content}">原内容</p>
<a th:href="${url}">登录</a>
<img src="../../images/gtvglogo.png" 
     th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />

4.遍历

语法： th:each="元素名,迭代状态 : ${集合}"

<tr th:each="prod : ${prods}">
  <td th:text="${prod.name}">Onions</td>
  <td th:text="${prod.price}">2.41</td>
  <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>

<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
  <td th:text="${prod.name}">Onions</td>
  <td th:text="${prod.price}">2.41</td>
  <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>

iterStat 有以下属性：（ps：iterStat 可以写成任意字符串）

index：当前遍历元素的索引，从0开始
count：当前遍历元素的索引，从1开始
size：需要遍历元素的总数量
current：当前正在遍历的元素对象
even/odd：是否偶数/奇数行
first：是否第一个元素
last：是否最后一个元素

5.判断

th:if

<a
  href="comments.html"
  th:href="@{/product/comments(prodId=${prod.id})}"
  th:if="${not #lists.isEmpty(prod.comments)}"
  >view</a

th:switch

<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
  <p th:case="*">User is some other thing</p>
</div>

6.属性优先级

片段
遍历
判断

<ul>
  <li th:each="item : ${items}" th:text="${item.description}">Item description here...</li>
</ul>

Order	Feature	Attributes
1	片段包含	th:insert th:replace
2	遍历	th:each
3	判断	th:if th:unless th:switch th:case
4	定义本地变量	th:object th:with
5	通用方式属性修改	th:attr th:attrprepend th:attrappend
6	指定属性修改	th:value th:href th:src ...
7	文本值	th:text th:utext
8	片段指定	th:fragment
9	片段移除	th:remove

7.行内写法

[[...]] 或者[(...)]

<p>Hello, [[${session.user.name}]]!</p>

8.变量选择

<div th:object="${session.user}">
  <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
  <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
  <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>

等同于

<div>
  <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
  <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
  <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
</div

9.模板布局

定义模板： th:fragment
引用模板：~{templatename::selector}
插入模板：th:insert、th:replace

<footer th:fragment="copy">&copy; 2011 The Good Thymes Virtual Grocery</footer>

<body>
  <div th:insert="~{footer :: copy}"></div>
  <div th:replace="~{footer :: copy}"></div>
</body>
<body>
  结果：
  <body>
    <div>
      <footer>&copy; 2011 The Good Thymes Virtual Grocery</footer>
    </div>

    <footer>&copy; 2011 The Good Thymes Virtual Grocery</footer>
  </body>
</body>

10.devtools

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

引入该依赖，便于实现页面的动态刷新，修改页面后；ctrl+F9刷新效果；

java代码的修改，如果devtools热启动了，可能会引起一些bug，难以排查

11.字符串Strings常见的使用方法

判断是不是为空:null:
不为空
为空
判断是不是为空字符串: “”
空的
判断是否相同：
相同于jack,
相同于ywj,
不相同于jack,
不存在设置默认值：

是否包含(分大小写):
包ez
包j
是否包含（不分大小写）
包j

下边同理

${#strings.startsWith(name,'o')}
${#strings.endsWith(name, 'o')}
${#strings.indexOf(name,frag)}// 下标
${#strings.substring(name,3,5)}// 截取
${#strings.substringAfter(name,prefix)}// 从 prefix之后的一位开始截取到最后,比如 (ywj,y) = wj, 如果是(abccdefg,c) = cdefg//里面有2个c,取的是第一个c
${#strings.substringBefore(name,suffix)}// 同上，不过是往前截取
${#strings.replace(name,'las','ler')}// 替换
${#strings.prepend(str,prefix)}// 拼字字符串在str前面
${#strings.append(str,suffix)}// 和上面相反，接在后面
${#strings.toUpperCase(name)}
${#strings.toLowerCase(name)}
${#strings.trim(str)}
${#strings.length(str)}
${#strings.abbreviate(str,10)}// 我的理解是 str截取0-10位，后面的全部用…这个点代替，注意，最小是3位