Spring Boot2 (V): Use Spring Boot template engine to use in conjunction Thymeleaf summary

A, Thymeleaf Overview

In general, the commonly used template engines JSP, Velocity, Freemarker, Thymeleaf.

SpringBoot recommended Thymeleaf - grammar simpler, more powerful;

Thymeleaf is a Java XML / XHTML / HTML5 template engine, you can use the Web and non-Web environments.
It is more suited to provide XHTML / HTML5 in the view layer MVC-based Web applications, but even in an offline environment, it can also handle any XML file. It provides a complete Spring Framework integration.

Second, the 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'))

Third, the common label of th

Official documents detailed a number:
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

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。

Fourth, the expression

Simple expression

Variable expression: $ {...}
Select variable expression: {...} *
Message expression: {...} #
Link expressions: @ {...}
Expression of fragment: ~ {...}

The type of data

Text: 'one text', 'Another one!', ...
Numeric characters: 0, 34, 3.0, 12.3, ...
Boolean text: true, false
NULL text: null
Word mark: one, sometext, main, ...

Text manipulation

String concatenation: +
Literally replace: | The name is $ {name} |

Arithmetic

Binary operators: +, -, *, /,%
Minus (unary): -

Boolean operations

Binary operators: and, or
Boolean negation (unary operator):!, False

Conditional operator

Comparison value:>, <,> =, <=
Analyzing equal to: ==,! =

Conditional

(if) ? (then)
(if) ? (then) : (else)
三元：(value) ? value : defaultvalue

Fifth, the expression object

Expressions which objects can help us deal with the content to be displayed, such as expression tools class dates can be formatted time, skillfully use these built-in classes, you can let us use efficiency Thymeleaf improved a lot.

#ctx: operation current context.
#vars: operating context variables.
#request: (Only for Web projects) HttpServletRequest object.
#response: (Only for Web projects) HttpServletResponse object.
#session: (仅适用于Web项目) HttpSession 对象.
#servletContext: (仅适用于Web项目) ServletContext 对象.

表达式实用工具类：

#execInfo: 操作模板的工具类，包含了一些模板信息，比如：${ #execInfo.templateName }
#uris: url处理的工具
#conversions: methods for executing the configured conversion service (if any).
#dates: 方法来源于 java.util.Date 对象，用于处理时间，比如：格式化.
#calendars: 类似于 #dates, 但是来自于 java.util.Calendar 对象.
#numbers: 用于格式化数字.
#strings: methods for String objects: contains, startsWith, prepending/appending, etc.
#objects: 普通的object对象方法.
#bools: 判断bool类型的工具.
#arrays: 数组操作工具.
#lists: 列表操作数据.
#sets: Set操作工具.
#maps: Map操作工具.
#aggregates: 操作数组或集合的工具.

六、几种常用的使用方法

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、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)}

七、使用基本步骤

我认为可以大致分为四步：

pom.xml 添加 Thymeleaf 模板引擎。
application.yml 配置 Thymeleaf 信息。
创建controller类，编写代码。
创建模板，编写html代码。

1. pom.xml 添加依赖

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2. .properties 配置 Thymeleaf 信息

server:
  port: 8081
spring:
  thymeleaf:
    # 是否启用
    enabled: true
    # 模板编码
    encoding: UTF-8
    # 模板模式
    mode: HTML5
    # 模板存放路径
    prefix: classpath:/templates/
    # 模板后缀
    suffix: .html
    # 启用缓存，建议生产开启
    cache: false
    # 校验模板是否存在
    check-template-location: true
    # Content-type值
    servlet:
      content-type: text/html
  # 加配置静态资源
  resources:
    static-locations: classpath:/

3. 创建controller类，编写代码

@RequestMapping("/me")
public String kownMe(Map<String,Object> map) {
    List<String> list = new ArrayList<String>();
    list.add("鸟不拉屎：一个正在努力Coding的未来架构师");
    list.add("记录菜鸟的成长");
    list.add("个人博客：https://niaobulashi.com");
    list.add("github博客：https://niaobulashi.github.io");
    map.put("msg", "Yoyoyoyoyo");
    map.put("images", "Yoyoyoyoyo");
    map.put("lists", list);
    return "me";
}

注意：返回的”me″是我HTML文件 me.html的名称哦

4. 创建 page1.html 。编写html代码

只要把写好的HTML页面放在 classpath:/templates/ 下，thymeleaf就能自动渲染。

注意导入：

<html lang="en" xmlns:th="http://www.thymeleaf.org">

否则没提示哦~

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <meta content="text/html;charset=UTF-8"/>
    <title>鸟不拉屎</title>
    <link rel="stylesheet" href="static/layui/css/layui.css">
</head>
<body>
<div class="layui-container">
    <h1>templates示例</h1>
    <!-- th:text="" 将h2的文本值视为指定参数 -->
    <hr>
    <h2 th:text="${msg}">这是h2</h2>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>循环</legend>
    </fieldset>
    <table style="text-align: center" class="layui-table" lay-skin="line"  >
        <colgroup>
            <col width="350">
        </colgroup>
        <thead>
        <tr>
            <th>NAME</th>
        </tr>
        </thead>
        <tbody>
        <!-- th循环遍历传来的参数 -->
        <tr th:each="str : ${lists}" >
            <th th:text="${str}" ></th>
        </tr>
        </tbody>
    </table>
    <img th:src="${images}" >
</div>
</body>
</html>

运行效果（样式用的layUI~~）：

八、参考

Thymeleaf 使用详解

SpringBoot中的Thymeleaf 模板引擎

Thymeleaf官方文档