Thymeleaf 的简单语法和常用th标签

最新推荐文章于 2023-07-12 14:48:19 发布

攀岩巨峰的程序猿

最新推荐文章于 2023-07-12 14:48:19 发布

阅读量1w

点赞数 6

文章标签： thymeleaf th：

本文链接：https://blog.csdn.net/zhangyuliang6430/article/details/90230640

版权

先说句有用的废话:
thymeleaf模板语法,都以 th 属性开头,如:

<span th:text="...">

一,thymeleaf-简单表达式

1.变量表达式
2.选择或星号表达式
3.文字国际化表达式
4.URL表达式
1,变量表达式

Thymeleaf模板引擎在进行模板渲染时，还会附带一个Context存放进行模板渲染的变量，在模板中定义的表达式本质上就是从Context中获取对应的变量的值

<p>Today is: <span th:text="${day}">2 November 2016</span>.</p>

假设day的值为2016年11月2日，那么渲染结果为：

<p>Today is: 2016年11月2日.</p>

注意 : 渲染后,模板中span值2 November 2016将被覆盖
2,选择(星号)表达式

可以简单理解为内层是对外层对象的引用

<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>

也可以混用,如下:

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

如何没有与th:object结合使用，*{}与 ${} 效果一样，因为其范围自动扩展到context。

3,URL表达式

URL表达式指的是把一个有用的上下文或会话信息添加到URL，这个过程经常被叫做URL重写。
Thymeleaf对于URL的处理是通过语法 @{…} 来处理的

<!— 绝对路径 —>
<!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a>

<!— 相对路径 带参数—>
<!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>

<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

Thymeleaf 支持相对路径和绝对路径
(orderId=${o.id}) 表示将括号内的内容作为URL参数处理
@{…} 表达式中可以通过 {orderId} 访问Context中的orderId变量
@{/order} 是Context相关的相对路径，在渲染时会自动添加上当前Web应用的Context名字，假设context名字为app，那么结果应该是 /app/order

4,文字国际化表达式

文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties)
使用Key-Value方式，还可以提供一组参数(可选).

.properties

#{main.title}
#{message.entrycreated(${entryId})}
模板引用:

<table>
    <th th:text="#{header.address.city}">...</th>
    <th th:text="#{header.address.country}">...</th>
</table>

二.thymeleaf-字面值
　　1.文本文字：’one text’ , ‘Another one!’,…
　　2.文字数量：0, 34, 3.0, 12.3,…
　　3.布尔型常量：true, false
　　4.空的文字：null
　　5.文字标记：one, sometext, main,…

三：thymeleaf-文本处理
1.字符串拼接：+

<span th:text="'Welcome to our application, ' + ${user.name} + '!'">

2.文字替换：|The name is ${name}|

<span th:text="|Welcome to our application, ${user.name}!|">

相比以上两种方式都可以实现字符串合并,但是,|…|中只能包含变量表达式${…}，不能包含其他常量、条件表达式等。

四.表达基本对象

1.#ctx:上下文对象

2.#vars:上下文变量

3.#locale:上下文语言环境

4.#httpServletRequest:(只有在Web上下文)HttpServletRequest对象

5.#httpSession:(只有在Web上下文)HttpSession对象。

例如:

<span th:text="${#locale.country}">US</span>.

th:text="${#calendars.format(today,'dd MMMM yyyy')}"

五,表达式预处理
表达式预处理，它被定义在_之间：
#{selection.${sel.code}}
${sel.code} 将先被执行，结果(假如是AAA)将被看做表达式的一部分被执行
结果 #{为selection.AAA}。

六,thymeleaf运算符
在表达式中可以使用各类算术运算符，例如+, -, *, /, %

th:with="isEven=(${prodStat.count} % 2 == 0)"

逻辑运算符>, <, <=,>=，==,!=都可以使用
需要注意的是使用 > ,<, >=, <=时需要用它的HTML转义符(> gt; < lt; >= ge; gte; <= le; lte; == eq; != ne; neq;)

th:if="${prodStat.count} &gt; 1"
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"

布尔运算符 and,or

七,thymeleaf循环
数据集合必须是可以遍历的，使用th:each标签：

<body>
  <h1>Product list</h1>

  <table>
    <tr>
      <th>NAME</th>
      <th>PRICE</th>
      <th>IN STOCK</th>
    </tr>
    <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>
  </table>

  <p>
    <a href="../home.html" th:href="@{/}">Return to home</a>
  </p>
</body>

被循环渲染的元素中加入th:each标签
th:each="prod : ${prods}" 对集合变量prods进行遍历，对象prod在循环体中可通过表达式访问。

八,thymeleaf条件求值
1, If/Unless
Thymeleaf中使用th:if和th:unless属性进行条件判断

设置标签只有在th:if中条件成立时才显示:

<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

th:unless与th:if相反，表达式条件不成立时显示内容。

2,Switch

多路选择Switch结构,默认属性default,用*表示

<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>

3.If-then-else: (if)?(then):else 三元运算符

三元运算控制class属性选择

 <tr th:class="${row.even}? 'even' : 'odd'">

三元运算嵌套

<tr th:class="${row.even}? (${row.first}? 'first' : 'even') : 'odd'">

还可以省略else部分，当表达式结果为false，返回null，否则返回’alt’

<tr th:class="${row.even}? 'alt'">
    ...
</tr>

4.If-then: (if) ? (then) ,省略了else部分，如果条件不成立，返回null

如果第一个表达式的计算结果为null，则取第二个表达式的结果

<div th:object="${session.user}">
    <p>Age: <span th:text="*{age}?: '(no age specified)'">27</span>.</p>
</div>

等效于：

<p>Age: <span th:text="*{age != null}? *{age} : '(no age specified)'">27</span>.</p>

条件表达式嵌套：

<p>Name: <span th:text="*{firstName} ?: (*{admin} ? 'Admin' : #{default.username})">Sebastian</span>.</p>

九,Thymeleaf-Utilities
Thymeleaf提供了套Utility对象,内置于Context中,可通过#直接访问：

#dates: java.util 的实用方法。对象:日期格式、组件提取等.
#calendars: 类似于#日期,但对于java.util。日历对象
#numbers: 格式化数字对象的实用方法。
#strings:字符串对象的实用方法:包含startsWith,将/附加等。
#objects: 实用方法的对象。
#bools: 布尔评价的实用方法。
#arrays: 数组的实用方法。
#lists: list集合。
#sets:set集合。
#maps: map集合。
#aggregates: 实用程序方法用于创建聚集在数组或集合.
#messages: 实用程序方法获取外部信息内部变量表达式,以同样的方式,因为他们将获得使用# {…}语法
#ids: 实用程序方法来处理可能重复的id属性(例如,由于迭代)。

常用th标签都有那些？

关键字	功能介绍	案例
th:id	替换id	`<input th:id="'xxx' + ${collect.id}"/>`
th:text	文本替换	`<p th:text="${collect.description}">description</p>`
th:utext	支持html的文本替换	`<p th:utext="${htmlcontent}">conten</p>`
th:object	替换对象	`<div th:object="${session.user}">`
th:value	属性赋值	`<input th:value="${user.name}" />`
th:with	变量赋值运算	`<div th:with="isEven=${prodStat.count}%2==0"></div>`
th:style	设置样式	`th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"`
th:onclick	点击事件	`th:onclick="'getCollect()'"`
th:each	属性赋值	`tr th:each="user,userStat:${users}">`
th:if	判断条件	`<a th:if="${userId == collect.userId}" >`
th:unless	和th:if判断相反	`<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>`
th:href	链接地址	`<a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />`
th:switch	多路选择配合th:case 使用	`<div th:switch="${user.role}">`
th:case	th:switch的一个分支	`<p th:case="'admin'">User is an administrator</p>`
th:fragment	布局标签，定义一个代码片段，方便其它地方引用	`<div th:fragment="alert">`
th:include	布局标签，替换内容到引入的文件	`<head th:include="layout :: htmlhead" th:with="title='xx'"></head> />`
th:replace	布局标签，替换整个标签到引入的文件	`<div th:replace="fragments/header :: title"></div>`
th:selected	selected选择框选中	`th:selected="(${xxx.id} == ${configObj.dd})"`
th:src	图片类地址引入	`<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />`
th:inline	定义js脚本可以使用变量	`<script type="text/javascript" th:inline="javascript">`
th:action	表单提交的地址	`<form action="subscribe.html" th:action="@{/subscribe}">`
th:remove	删除某个属性	`<tr th:remove="all">` 1.all:删除包含标签和所有的孩子。 2.body:不包含标记删除,但删除其所有的孩子。 3.tag:包含标记的删除,但不删除它的孩子。 4.all-but-first:删除所有包含标签的孩子,除了第一个。 5.none:什么也不做。这个值是有用的动态评估。
th:attr	设置标签属性，多个属性可以用逗号分隔	比如 `th:attr="src=@{/image/aa.jpg},title=#{logo}"`，此标签不太优雅，一般用的比较少。

攀岩巨峰的程序猿

关注

6
点赞
踩
32

收藏

觉得还不错? 一键收藏
1
评论
Thymeleaf 的简单语法和常用th标签

先说句有用的废话:thymeleaf模板语法,都以 th 属性开头,如:<span th:text="...">一,thymeleaf-简单表达式1.变量表达式2.选择或星号表达式3.文字国际化表达式4.URL表达式1,变量表达式Thymeleaf模板引擎在进行模板渲染时，还会附带一个Context存放进行模板渲染的变量，在模板中定义的表达式本质上就是从Contex...
复制链接

扫一扫