Thymeleaf使用详解

时间 2019-11-17

标签 thymeleaf 使用详解繁體版

原文原文链接

Thymeleaf介绍

简单说，Thymeleaf是一个跟Velocity、FreeMarker相似的模板引擎，他能够彻底替代JSP。相较与其余的模板引擎，他有以下三个及吸引人的特色：

Thymeleaf在有网络和无网络的环境下皆可运行，即他可让美工在浏览器查看页面的静态效果，也可让程序员在服务器查看数据的动态页面效果。这是因为它支持HTML原型，而后在HTML标签里增长额外的属性来达到模板+数据的展现方式。浏览器解释HTML时会忽略未定义的标签属性，因此Thymeleaf的模板能够静态地运行；当有数据返回页面时，Thymeleaf标签会动态地替换掉静态内容，使页面动态显示
Thymeleaf开箱即用的特性。它提供标准和Spring标准两种方言，能够直接套用模板实现JSTL、OGNL表达式的效果，避免天天套模板、改JSTL、改标签的困扰，同时开发人员能够扩展和建立自定义的方言
Thymeleaf提供Spring标准方言和另外一个SpringMVC完美集成的可选模块，能够快速的实现表单绑定、属性编辑器、国际化等功能

标准表达式语法

它们分为四类：

1.变量表达式

2.选择或星号表达式

3.文字国际化表达式

4.URL表达式

变量表达式

变量表达式即OGNL表达式或Spring EL表达式(在Spring术语中也叫model attributes)。以下所示：

${session.user.name}

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

<span th:text="${book.author.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，还能够提供一组参数(可选).

#{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 th:action="@{/createOrder}">
 <a href="main.html" th:href="@{/main}">复制代码

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

若是不考虑上下文的状况下，二者没有区别；星号语法评估在选定对象上表达，而不是整个上下文

什么是选定对象？就是父标签的值，以下：javascript

<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>复制代码

这是彻底等价于：html

<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>复制代码

经常使用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

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:布尔值，当前循环是不是最后一个

四、内联js

内联文本：[[…]]内联文本的表示方式，使用时，必须先用th:inline=”text/javascript/none”激活，th:inline能够在父级标签内使用，甚至做为body的标签。内联文本尽管比th:text的代码少，不利于原型显示

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