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

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

如果不考虑上下文的情况下,两者没有区别;星号语法评估在选定对象上表达,而不是整个上下文

什么是选定对象?就是父标签的值,如下:

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

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

几种常用的使用方法

1、赋值、字符串拼接

<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}!|">

2、条件判断 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) 这种语法来判断显示的内容

3、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:布尔值,当前循环是否是最后一个

4、内联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';

原文 

https://juejin.im/post/5c02368251882512d444fae7

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » Thymeleaf使用详解

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址