springboot系列04：Thymeleaf语法讲解

Thymeleaf 介绍

Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，有三个优势：

可以在浏览器查看页面的静态效果，也可以在服务器查看带数据的动态页面效果。
开箱即用的特性。可以直接套用模板实现 JSTL、 OGNL表达式效果。
提供 Spring 标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

标准表达式语法

分为四类：

变量表达式
选择或星号表达式
文字国际化表达式
URL 表达式

变量表达式

即 OGNL 表达式或 Spring EL 表达式，如：${sessionUser.userName}

以HTML标签的一个属性来表示：

<span th:text="${book.name}">  
<li th:each="book : ${books}">

选择(星号)表达式

像变量表达式，不过它们用一个预先选择的对象来代替上下文变量容器(map)来执行，如：*{customer.name}

被指定的 object 由 th:object 属性定义：

<div th:object="${book}">  
  ...  
  <span th:text="*{title}">...</span>  
  ...  
</div>

文字国际化表达式

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

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

URL 表达式

URL 表达式指的是把一个有用的上下文或回话信息添加到 URL，这个过程经常被叫做 URL 重写，如：@{/order/list}

URL还可以设置参数： @{/order/details(id=${orderId})}

相对路径： @{../documents/report}

页面写法如下：

<form th:action="@{/createOrder}">  
<a href="main.html" th:href="@{/main}">

变量表达式和星号表达有什么区别吗？

在不考虑上下文的情况下，两者没有区别，如下两个实例：

<div th:object="${sessionUser}">
  <p>firstName: <span th:text="*{firstName}">Sebastian</span>.</p>
  <p>lastName: <span th:text="*{lastName}">Pepper</span>.</p>
  <p>nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>

<div th:object="${sessionUser}">
  <p>firstName: <span th:text="${sessionUser.firstName}">Sebastian</span>.</p>
  <p>lastName: <span th:text="${sessionUser.lastName}">Pepper</span>.</p>
  <p>nationality: <span th:text="${sessionUser.nationality}">Saturn</span>.</p>
</div>

当然，美元符号和星号语法可以混合使用：

<div th:object="${sessionUser}">
  <p>firstName: <span th:text="*{firstName}">Sebastian</span>.</p>
  <p>lastName: <span th:text="${sessionUser.lastName}">Pepper</span>.</p>
  <p>nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>

表达式支持的语法

字面（Literals）

文本文字（Text literals）: 'one text', 'Another one!',…
数字文本（Number literals）: 0, 34, 3.0, 12.3,…
布尔文本（Boolean literals）:true, false
空（Null literal）:null
文字标记（Literal tokens）:one, sometext, main,…

文本操作（Text operations）

字符串连接(String concatenation):+
文本替换（Literal substitutions）:|The name is ${name}|

算术运算（Arithmetic operations）

二元运算符（Binary operators）:+, -, *, /, %
减号（单目运算符）Minus sign (unary operator):-

布尔操作（Boolean operations）

二元运算符（Binary operators）:and, or
布尔否定（一元运算符）Boolean negation (unary operator):!, not

比较和等价(Comparisons and equality)

比较（Comparators）:>, <, >=, <= (gt, lt, ge, le)
等值运算符（Equality operators）:==, != (eq, ne)

条件运算符（Conditional operators）

If-then:(if) ? (then)
If-then-else:(if) ? (then) : (else)
Default: (value) ?:(defaultvalue)

所有这些特征可以被组合并嵌套：

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

常见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}"`，此标签不太优雅，一般用的比较少

还有非常多的标签，这里只列出最常用的几个,由于一个标签内可以包含多个th:x属性，其生效的优先级顺序:

include,each,if/unless/switch/case,with,attr/attrprepend/attrappend,value/href,src ,etc,text/utext,fragment,remove

几种常用的使用方法

赋值、字符串拼接

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

条件判断 If/Unless

<a th:if="${myself=='yes'}" > yes </a>
<a th:unless=${session.user != null} th:href="@{/login}" >登录</a>

for 循环

<tr  th:each="collect,iterStat : ${collects}"> 
   <th scope="row" th:text="${collect.id}">1</th>
   <td >
      <img th:src="${collect.webLogo}"/>
   </td>
   <td th:text="${collect.url}">Mark</td>
   <td th:text="${collect.title}">Otto</td>
   <td th:text="${collect.description}">@mdo</td>
   <td th:text="${terStat.index}">index</td>
</tr>

iterStat称作状态变量，属性有：

index:当前迭代对象的 index（从0开始计算）
count: 当前迭代对象的 index(从1开始计算)
size:被迭代对象的大小
current:当前迭代变量
even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
first:布尔值，当前循环是否是第一个
last:布尔值，当前循环是否是最后一个

URL

Thymeleaf 对 URL 进行渲染，那么务必使用 th:href，th:src 等属性

<a  th:href="@{/standard/{type}(type=${type})}">view</a>
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

设置背景

<div th:style="'background:url(' + @{/<path-to-image>} + ');'"></div>

根据属性值改变背景

 <div class="media-object resource-card-image"  th:style="'background:url(' + @{(${collect.webLogo}=='' ? 'img/favicon.png' : ${collect.webLogo})} + ')'" ></div>

内联 js

内联文本：[[…]] 内联文本的表示方式，使用时，必须先用th:inline="text/javascript/none"激活，th:inline可以在父级标签内使用，甚至作为 body 的标签

<script th:inline="javascript">
/*<![CDATA[*/
...
var username = /*[[${sesion.user.name}]]*/ 'Sebastian';
var size = /*[[${size}]]*/ 0;
...
/*]]>*/
</script>

js 附加代码：

/*[+
var msg = 'This is a working application';
+]*/

js 移除代码：

/*[- */
var msg = 'This is a non-working template';
/* -]*/

内嵌变量

为了模板更加易用，Thymeleaf 还提供了一系列 Utility 对象（内置于 Context 中），可以通过 # 直接访问

dates ： java.util.Date的功能方法类。
calendars : 类似#dates，面向java.util.Calendar
numbers : 格式化数字的功能方法类
strings : 字符串对象的功能类，contains,startWiths,prepending/appending等等。
objects: 对objects的功能类操作。
bools: 对布尔值求值的功能方法。
arrays：对数组的功能类方法。
lists: 对lists功能类方法
sets
maps

${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}
${#dates.createNow()}
${#dates.createToday()}
${#strings.isEmpty(name)}
${#strings.arrayIsEmpty(nameArr)}
${#strings.listIsEmpty(nameList)}
${#strings.setIsEmpty(nameSet)}
${#strings.startsWith(name,'Don')}    
${#strings.endsWith(name,endingFragment)} 
${#strings.length(str)}
${#strings.equals(str)}
${#strings.equalsIgnoreCase(str)}
${#strings.concat(str)}
${#strings.concatReplaceNulls(str)}
${#strings.randomAlphanumeric(count)}

Thymeleaf 布局

引入模块

<dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>

定义代码片段

<footer th:fragment="copy"> 
© 2019
</footer>

在页面任何地方引入：

<body>
    <div th:insert="layout/copyright :: copyright"></div>
    <div th:replace="layout/copyright :: copyright"></div>
</body>

th:insert 和 th:replace 区别，insert 只是加载，replace 是替换

posted @ 2022-01-13 18:55 IT6889 阅读(541) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

IT6889

springboot系列04：Thymeleaf语法讲解

Thymeleaf 介绍

标准表达式语法

变量表达式

选择(星号)表达式

文字国际化表达式

URL 表达式

变量表达式和星号表达有什么区别吗？

表达式支持的语法

字面（Literals）

文本操作（Text operations）

算术运算（Arithmetic operations）

布尔操作（Boolean operations）

比较和等价(Comparisons and equality)

条件运算符（Conditional operators）

常见th标签

几种常用的使用方法

赋值、字符串拼接

条件判断 If/Unless

for 循环

URL

内联 js

内嵌变量

Thymeleaf 布局

公告