Spring Boot中如何使用thymeleaf呢?

下文笔者讲述SpringBoot中使用thymeleaf的方法分享,如下所示

thymeleaf简介

thymeleaf:
   是一个模板引擎
   spring4.0框架中曾经极力推荐大家使用thymeleaf作为前端模版引擎
thymeleaf是一个可以和Velocity、FreeMarker引擎想匹配,她可以完美的匹配JSP

thymeleaf具有以下特点:
     Thymeleaf的运行无需特定网络,可以很好的开发前端页面(因为她是所见即所得的效果)
	   只需在html页面加入相应的标签即可,Thymeleaf引擎可以很好的解析标签中的值

Thymeleaf:
     开箱即用
     它提供标准和spring标准两种方言
     可直接套用模板实现JSTL、 OGNL表达式效果

Thymeleaf表达式的语法

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

变量表达式

变量表达式:
   即OGNL表达式或Spring EL表达式

${session.user.name}:
    以HTML标签的一个属性来表示
<span th:text="${user.author.name}">  
<li th:each="user : ${users}">  

选择(星号)表达式

选择表达式很像变量表达式
  它们用一个预先选择的对象来代替上下文变量容器(map)来执行
  如下：

 *{user.name} 
被指定的object由th:object属性定义：

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

文字国际化表达式

文字国际化表达式
  允许我们从一个外部文件获取区域文字信息(.properties)
   用Key索引Value,其目的实现网页的多语言

#{main.title}  
#{message.entrycreated(${entryId})}  
可以在模板文件中找到这样的表达式代码：

<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表单中的url表达式
<form th:action="@{/createOrder}">  
<a href="main.html" th:href="@{/main}">

变量表达式和星号表达的区别说明

 
<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 th:object="${session.user}">
　　<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>

表达式支持的语法

字面（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: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

Thymeleaf中
   使用th:if和th:unless属性进行条件判断
    例:
	  <a>标签只有在th:if中条件成立时才显示

<a th:if="${myself=='yes'}" > </i> </a>
<a th:unless=${session.user != null} th:href="@{/login}" >Login</a>
th:unless于th:if恰好相反
   只有表达式中的条件不成立
    才会显示其内容
也可使用
   (if) ? (then) : (else) 三元表达式的形式显示内容

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

URL
   在Web应用模板中占据着十分重要的地位
   需要特别注意的是Thymeleaf对于URL的处理是通过语法@{…}来处理的
   当需要Thymeleaf对URL进行渲染
   务必使用th:href，th:src等属性
   
例:
<!-- Will produce 'http://localhost:8080/standard/unread' (plus rewriting) -->
 <a  th:href="@{/standard/{type}(type=${type})}">view</a>

<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<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

Thymeleaf之dates访问

/*
 * Format date with the specified pattern
 * Also works with arrays, lists or sets
 */
${#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')}

/*
 * Create a date (java.util.Date) object for the current date and time
 */
${#dates.createNow()}

/*
 * Create a date (java.util.Date) object for the current date (time set to 00:00)
 */
${#dates.createToday()}

strings

/*
 * Check whether a String is empty (or null). Performs a trim() operation before check
 * Also works with arrays, lists or sets
 */
${#strings.isEmpty(name)}
${#strings.arrayIsEmpty(nameArr)}
${#strings.listIsEmpty(nameList)}
${#strings.setIsEmpty(nameSet)}

/*
 * Check whether a String starts or ends with a fragment
 * Also works with arrays, lists or sets
 */
${#strings.startsWith(name,'Don')}                  // also array*, list* and set*
${#strings.endsWith(name,endingFragment)}           // also array*, list* and set*

/*
 * Compute length
 * Also works with arrays, lists or sets
 */
${#strings.length(str)}

/*
 * Null-safe comparison and concatenation
 */
${#strings.equals(str)}
${#strings.equalsIgnoreCase(str)}
${#strings.concat(str)}
${#strings.concatreplaceNulls(str)}

/*
 * Random
 */
${#strings.randomAlphanumeric(count)}

thymeleaf布局

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


在页面任何地方引入
<body> 
　　<div th:include="footer :: copy"></div>
　　<div th:replace="footer :: copy"></div>
</body>
th:include 和 th:replace区别，include只是加载，replace是替换

返回HTML信息:
<body> 
   <div> © 2023</div> 
  <footer>© 2023 </footer> 
</body>