Use thymeleaf of SpringBoot learning

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, avoid sets per day template, troubled by the jstl, change the label. At the same time developers can extend and create custom dialect.

• 3.Thymeleaf standard dialect and provide a perfect spring and SpringMVC integrated optional modules, 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.

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
• 空（Null literal）: null
• Word mark (Literal tokens): one, sometext, main, ...

Operation text (Text operations)

• String concatenation (String concatenation): +
• Replacement 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)

• 比较（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?

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 is in force: 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} + '!'">

 

There is another simple string concatenation wording:

<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布局

使用thymeleaf布局非常的方便

定义代码片段

<footer th:fragment="copy"> 
&copy; 2016
</footer>

 

在页面任何地方引入：

<body> 
  <div th:include="footer :: copy"></div>
  <div th:replace="footer :: copy"></div>
 </body>

 

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

返回的HTML如下：

<body> 
   <div> &copy; 2016 </div> 
  <footer>&copy; 2016 </footer> 
</body>

 

下面是一个常用的后台页面布局，将整个页面分为头部，尾部、菜单栏、隐藏栏，点击菜单只改变content区域的页面 ``` html

Header
left
sidebar

footer

 任何页面想使用这样的布局值只需要替换中见的 content模块即可

``` html
 <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"