In the last article Spring Boot (two): Web comprehensive development in a brief introduction about Thymeleaf, this article will be more comprehensive and detailed description of the use of Thymeleaf. Thymeleaf is a new generation template engine, it is recommended to do the front-end template engine Thymeleaf in Spring4.0 in.
Thymeleaf Introduction
Simply put, Thymeleaf with a Velocity, FreeMarker similar template engine, it can completely replace the JSP. Compared with other template engines, it has the following three very attractive feature:
- 1.Thymeleaf Jieke run under the environment of network and non-network that it allows artists to see the effect of static page in a browser, but also allows the programmer to see the effect of dynamic pages with data on the server. This is because it supports html prototype, and then add additional attributes to achieve in the html tag template + display of the data. The browser will ignore the interpretation of undefined html tag attributes, so Thymeleaf templates can be statically run; when there is data to return to the page, Thymeleaf label dynamically replace static content, dynamic display the page.
- 2.Thymeleaf-use out of the box characteristics. It provides standard and Spring standard two dialects, can directly apply a template to achieve JSTL, OGNL expressions effect, to avoid daily sets of templates, change Jstl, plagued change the label. At the same time developers can extend and create custom dialect.
- 3.Thymeleaf Spring provides standard dialect and a perfect integration with SpringMVC optional module, you can quickly achieve a form of binding, property editor, international and other functions.
Standard expression syntax
They are divided into four categories:
- 1. variable expression
- 2. Select an expression or an asterisk
- 3. The international character of expression
- 4.URL expression
Variable expression
Variable expression i.e. the EL Spring OGNL expression or expression (in terms Spring also called model attributes). As follows:
${session.user.name}
They will attribute to represent HTML tags:
<span th:text="${book.author.name}"> <li th:each="book : ${books}">
Select (asterisk) expression
Select expression variables like expressions, but they use a pre-selected target instead of a context variable container (Map) is performed as follows:*{customer.name}
Object designated by the th: defined object properties:
<div th:object="${book}"> ... <span th:text="*{title}">...</span> ... </div>
Text internationalization expression
Internationalization literal expression allows us to get a text message area (.properties) from an external file, use Key Index Value, can also provide a set of parameters (optional).
#{main.title}
#{message.entrycreated(${entryId})}
Such expression code can be found in the template file:
<table> ... <th th:text="#{header.address.city}">...</th> <th th:text="#{header.address.country}">...</th> ... </table>
URL Expressions
URL expression refers to add a useful contextual information or answer to the URL, this process is often called URL rewriting.
@{/order/list}
URL can also set the parameters:
@{/order/details(id=${orderId})}
relative path:
@{../documents/report}
Let's look at these expressions:
<form th:action="@{/createOrder}"> <a href="main.html" th:href="@{/main}">
Variable expression and expression asterisk Is there any difference?
If you do not consider the context of the case, the two no difference; star-syntax expression assessed on the selected object, not the entire context of
what is the selected object? Is the value of the parent label, as follows:
<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>
This is exactly equivalent to:
<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>
Of course, the dollar sign and the asterisk syntax can be mixed:
<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>
Expression syntax support
Literal (Literals)
- Text Text (Text literals):
'one text', 'Another one!',… - Digital text (Number literals):
0, 34, 3.0, 12.3,… - Boolean text (Boolean literals):
true, false - Empty (Null literal):
null - Word mark (Literal tokens):
one, sometext, main,…
Operation text (Text operations)
- String concatenation (String concatenation):
+ - Replace Text (Literal substitutions):
|The name is ${name}|
Arithmetic (Arithmetic operations)
- Binary operator (Binary operators):
+, -, *, /, % - Minus (unary) Minus sign (unary operator):
-
Boolean operations (Boolean operations)
- Binary operator (Binary operators):
and, or - Boolean negation (unary) Boolean negation (unary operator):
!, not
Comparison and equivalents (Comparisons and equality)
- Compare (Comparators):
>, <, >=, <= (gt, lt, ge, le) - Equivalence operator (Equality operators):
==, != (eq, ne)
Conditional operator (Conditional operators)
- If-then:
(if) ? (then) - If-then-else:
(if) ? (then) : (else) - Default: (value) ?:
(defaultvalue)
All of these features can be combined and nested:
'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))Common th tags are those?
| Keyword | Features | Case |
|---|---|---|
| th:id | Replace id | <input th:id="'xxx' + ${collect.id}"/> |
| th:text | Text Replacement | <p th:text="${collect.description}">description</p> |
| th: utext | Supports html text replacement | <p th:utext="${htmlcontent}">conten</p> |
| th:object | Replacing objects | <div th:object="${session.user}"> |
| th:value | Property assignment | <input th:value="${user.name}" /> |
| th:with | Variable assignment operator | <div th:with="isEven=${prodStat.count}%2==0"></div> |
| th:style | Setting styles | th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''" |
| th:onclick | Click event | th:onclick="'getCollect()'" |
| th:each | Property assignment | tr th:each="user,userStat:${users}"> |
| th:if | Analyzing conditions | <a th:if="${userId == collect.userId}" > |
| th:unless | And th: if the opposite determination | <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> |
| th:href | link address | <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> /> |
| th:switch | Multiplexer with th: case Use | <div th:switch="${user.role}"> |
| th:case | th: a branch of the switch | <p th:case="'admin'">User is an administrator</p> |
| th:fragment | Layout tab, define a snippet, cited elsewhere convenient | <div th:fragment="alert"> |
| th:include | Layout tab, introduced to replace the contents of a file | <head th:include="layout :: htmlhead" th:with="title='xx'"></head> /> |
| th:replace | Layout tab, introduced to replace the entire tag file | <div th:replace="fragments/header :: title"></div> |
| th:selected | selected in the selection marquee | th:selected="(${xxx.id} == ${configObj.dd})" |
| th:src | Picture categories introduced address | <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" /> |
| th:inline | Js script can use variable definitions | <script type="text/javascript" th:inline="javascript"> |
| th:action | Address form submission | <form action="subscribe.html" th:action="@{/subscribe}"> |
| th:remove | Delete a property | <tr th:remove="all"> 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。 |
| th:attr | Label attribute set, a plurality of attributes may be separated by commas | For example th:attr="src=@{/image/aa.jpg},title=#{logo}", this label is less elegant, less general use. |
There are a lot of labels, to name only a few of the most commonly used, because the tag may comprise a plurality of th: x attribute, the priority order which is in effect:include,each,if/unless/switch/case,with,attr/attrprepend/attrappend,value/href,src ,etc,text/utext,fragment,remove。
Some common uses
1, assignment, string concatenation
<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、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>
几点说明：
- 上例中 URL 最后的
(orderId=${o.id})表示将括号内的内容作为 URL 参数处理，该语法避免使用字符串拼接，大大提高了可读性 @{...}表达式中可以通过{orderId}访问 Context 中的 orderId 变量@{/order}是 Context 相关的相对路径，在渲染时会自动添加上当前 Web 应用的 Context 名字，假设 context 名字为 app，那么结果应该是/app/order
5、内联 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'; /* -]*/
6、内嵌变量
为了模板更加易用，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 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 布局
Spring Boot 2.0 将布局单独提取了出来，需要单独引入依赖：thymeleaf-layout-dialect。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<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 是替换。Thymeleaf 3.0 推荐使用 th:insert 替换 2.0 的 th:replace。
返回的 HTML 如下：
<body> <div> © 2019 </div> <footer>© 2019 </footer> </body>
下面是一个常用的后台页面布局，将整个页面分为头部，尾部、菜单栏、隐藏栏，点击菜单只改变 content 区域的页面
<body class="layout-fixed"> <div th:fragment="navbar" class="wrapper" role="navigation"> <div th:replace="fragments/header :: header">Header</div> <div th:replace="fragments/left :: left">left</div> <div th:replace="fragments/sidebar :: sidebar">sidebar</div> <div layout:fragment="content" id="content" ></div> <div th:replace="fragments/footer :: footer">footer</div> </div> </body>
任何页面想使用这样的布局值只需要替换中见的 content 模块即可
<html xmlns:th="http://www.thymeleaf.org" layout:decorator="layout"> <body> <section layout:fragment="content"> ...
也可以在引用模版的时候传参
<head th:include="layout :: htmlhead" th:with="title='Hello'"></head>
layout 是文件地址，如果有文件夹可以这样写fileName/layout:htmlhead，htmlhead 是指定义的代码片段 如th:fragment="copy"
文章示例项目
文章内容已经升级到 Spring Boot 2.x
参考
thymeleaf官方指南
新一代Java模板引擎Thymeleaf
Thymeleaf基本知识
thymeleaf总结文章
Thymeleaf 模板的使用
thymeleaf 学习笔记