thymeleaf 专题

时间：2023-12-24 23:21:37

Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 JSP，Velocity，FreeMaker 等，它也可以轻易的与 Spring MVC 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

Thymeleaf 初探

相比于其他的模板引擎，Thymeleaf 最大的特点是通过 HTML 的标签属性渲染标签内容，以下是一个 Thymeleaf 模板例子：

XHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>Good Thymes Virtual Grocery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all"
          href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
  </head>
  <body>
    <p th:text="#{home.welcome}">Welcome to our grocery store!</p>
  </body>
</html>

这是一段标准的 HTML 代码，这也就意味着通过浏览器直接打开它是可以正确解析它的结构并看到页面的样子。相比去其他的模板引擎在指定的位置通过${}等表达式进行渲染，Thymeleaf 则是一种针对 HTML/XML 定制的模板语言（当然它可以被扩展），它通过标签中的th:text属性来填充该标签的一段内容。上例中，<p th:text="#{home.welcome}">Welcome to our grocery store!</p>意味着<p>标签中的内容会被表达式#{home.welcome}的值所替代，无论模板中它的内容是什么，之所以在模板中 “多此一举 “地填充它的内容，完全是为了它能够作为原型在浏览器中直接显示出来。

标准表达式语法

变量

Thymeleaf 模板引擎在进行模板渲染时，还会附带一个 Context 存放进行模板渲染的变量，在模板中定义的表达式本质上就是从 Context 中获取对应的变量的值：

XHTML
1
<p>Today is: <span th:text="${today}">13 february 2011</span>.</p>

假设today的值为2015年8月14日，那么渲染结果为：<p>Today is: 2015年8月14日.</p>。可见 Thymeleaf 的基本变量和 JSP 一样，都使用${.}表示获取变量的值。

URL

URL 在 Web 应用模板中占据着十分重要的地位，需要特别注意的是 Thymeleaf 对于 URL 的处理是通过语法@{...}来处理的。Thymeleaf 支持绝对路径 URL：

XHTML
1
<a th:href="@{http://www.thymeleaf.org}">Thymeleaf</a>

同时也能够支持相对路径 URL：

  • 当前页面相对路径 URL——user/login.html，通常不推荐这样写。
  • Context 相关 URL——/static/css/style.css

另外，如果需要 Thymeleaf 对 URL 进行渲染，那么务必使用th:href，th:src等属性，下面是一个例子

XHTML

1
2
3
4
5
6
7
8
9
<!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html"
   th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a>
<!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

几点说明：

  • 上例中 URL 最后的 (orderId=${o.id}) 表示将括号内的内容作为 URL 参数处理，该语法避免使用字符串拼接，大大提高了可读性
  • @{...}表达式中可以通过{orderId}访问 Context 中的orderId变量
  • @{/order}是 Context 相关的相对路径，在渲染时会自动添加上当前 Web 应用的 Context 名字，假设 context 名字为 app，那么结果应该是/app/order

如果 URLs 写在 style 的属性里，那么

XHTML
1
<div class="fill" style="background-image:url('../../style/images/bg_shadow_left.png');"></div>

替换写成 style 前面加 th: 链接的前后加上 ＋ 号运算符，如下：

XHTML
1
<div class="fill" th:style="'background-image:url(' + @̣{/images/bg_shadow_left.png} + ');'"></div>

字符串替换

很多时候可能我们只需要对一大段文字中的某一处地方进行替换，可以通过字符串拼接操作完成：

XHTML
1
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">

一种更简洁的方式是：

XHTML
1
<span th:text="|Welcome to our application, ${user.name}!|">

当然这种形式限制比较多，|...|中只能包含变量表达式${...}，不能包含其他常量、条件表达式等。

运算符

在表达式中可以使用各类算术运算符，例如 +, -, *, /, %

XHTML
1
th:with="isEven=(${prodStat.count} % 2 == 0)"

逻辑运算符>, <, <=,>=，==,!=都可以使用，唯一需要注意的是使用<,>时需要用它的 HTML 转义符：

XHTML
1
2
th:if="${prodStat.count} &gt; 1"
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"

循环

渲染列表数据是一种非常常见的场景，例如现在有 n 条记录需要渲染成一个表格<table>，该数据集合必须是可以遍历的，使用th:each标签：

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
  <h1>Product list</h1>
  <table>
    <tr>
      <th>NAME</th>
      <th>PRICE</th>
      <th>IN STOCK</th>
    </tr>
    <tr th:each="prod : ${prods}">
      <td th:text="${prod.name}">Onions</td>
      <td th:text="${prod.price}">2.41</td>
      <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
    </tr>
  </table>
  <p>
    <a href="../home.html" th:href="@{/}">Return to home</a>
  </p>
</body>

可以看到，需要在被循环渲染的元素（这里是<tr>）中加入th:each标签，其中th:each="prod : ${prods}"意味着对集合变量prods进行遍历，循环变量是prod在循环体中可以通过表达式访问。

条件求值

If/Unless

Thymeleaf 中使用th:if和th:unless属性进行条件判断，下面的例子中，<a>标签只有在th:if中条件成立时才显示：

XHTML
1
<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

th:unless于th:if恰好相反，只有表达式中的条件不成立，才会显示其内容。

<a th:href="@{/login}" th:if=${session.user==null}>Login</a>

Switch

Thymeleaf 同样支持多路选择 Switch 结构：

XHTML

1
2
3
4
<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
</div>

默认属性 default 可以用*表示：

XHTML

1
2
3
4
5
<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
  <p th:case="*">User is some other thing</p>
</div>

Utilities

为了模板更加易用，Thymeleaf 还提供了一系列 Utility 对象（内置于 Context 中），可以通过#直接访问：

  • #dates
  • #calendars
  • #numbers
  • #strings
  • arrays
  • lists
  • sets
  • maps
  • …

下面用一段代码来举例一些常用的方法：

#dates

XHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
* 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

XHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/*
* 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)}

页面即原型

在 Web 开发过程中一个绕不开的话题就是前端工程师与后端工程师的协作，在传统 Java Web 开发过程中，前端工程师和后端工程师一样，也需要安装一套完整的开发环境，然后各类 Java IDE 中修改模板、静态资源文件，启动 / 重启 / 重新加载应用服务器，刷新页面查看最终效果。

但实际上前端工程师的职责更多应该关注于页面本身而非后端，使用 JSP，Velocity 等传统的 Java 模板引擎很难做到这一点，因为它们必须在应用服务器中渲染完成后才能在浏览器中看到结果，而 Thymeleaf 从根本上颠覆了这一过程，通过属性进行模板渲染不会引入任何新的浏览器不能识别的标签，例如 JSP 中的<form:input>，不会在 Tag 内部写表达式。整个页面直接作为 HTML 文件用浏览器打开，几乎就可以看到最终的效果，这大大解放了前端工程师的生产力，它们的最终交付物就是纯的 HTML/CSS/JavaScript 文件。

Thymeleaf 之 内置对象、定义变量、URL参数及标签自定义属性

如标题所述，这篇文章主要讲述Thymeleaf中的内置对象（list解析、日期格式化、数字格式化等）、定义变量、获取URL的参数和在页面标签中自定义属性的应用。

如果对Thymeleaf的基本使用、maven依赖等不清楚的可以先阅读我的另一篇文章《Thymeleaf 之 初步使用》。

  • Controller部份
@Controller

public class IndexController {

    @GetMapping(value = "index")

    public String index(Model model, HttpServletRequest request) {

        List<String> datas = new ArrayList<String>();

        datas.add("知识林");

        datas.add("http://www.zslin.com");

        datas.add("393156105");

        model.addAttribute("datas", datas);

        model.addAttribute("curDate", new Date());

        model.addAttribute("money", Math.random()*100);

        return "index";

    }

}

在这个控制器的Model中存放了这样几个数据：一个String类型的列表、一个日期对象和一个数值，这些东西在实际应用开发过程中应用非常广泛，下面具体看一下在Thymeleaf中是如何解析这些数据的。

  • 日期格式化
<span th:text="${#dates.format(curDate, 'yyyy-MM-dd HH:mm:ss')}"></span>

说明： 使用内置对象dates的format函数即可对日期进行格式化，在format函数中，第一个参数是日期对象，对二两个参数为日期格式（规则跟SimpleDateFormat一样）

需要注意的是：

· 内置对象一般都以s结尾，如dates、lists、numbers等

· 在使用内置对象是在对象名前都需要加#号。

  • 数字格式化
<span th:text="${#numbers.formatDecimal(money, 0, 2)}"></span>

说明： 此示例表示保留两位小数位，整数位自动；

<span th:text="${#numbers.formatDecimal(money, 3, 2)}"></span>

说明： 此示例表示保留两位小数位，3位整数位（不够的前加0）

  • 获取列表长度
<span th:text="${#lists.size(datas)}"></span>

说明： 使用#lists.size来获取List的长度。

  • 获取URL参数值
<span th:text="${#httpServletRequest.getParameter('page')}"></span>

说明： 当访问http://localhost:1105/index?page=5时页面将会得到page对应的值：5。

  • 定义变量
<div th:with="curPage=${#httpServletRequest.getParameter('page')}">

    <h3>当前页码：<span th:text="${curPage}"></span></h3>

</div>

说明： 同样，当访问http://localhost:1105/index?page=5时，页面将显示：当前页码：5，说明用th:with来定义变量，多个用,号隔开，使用范围在当前标签内。

  • 自定义标签属性

在Thymeleaf中可以使用th:加上标签的任何属性进行赋值，但有些时候会遇到自定义的属性，再用th:加自定义的属性则会无效。比如：需要对<span>标签增加objName和objId这样的属性，在非Thymeleaf情况下是这样：

<span objId="1" objName="知识林"></span>

变量情况是：

<span objId="${obj.id}" objName="${obj.name}"></span>

在Thymeleaf下则是：

<span th:attr="myDate=${#dates.format(curDate, 'yyyy-MM-dd')}, myMoney=${money}"></span>

说明： 在页面上查看源代码可以看到：<span myMoney="91.6059494319957" myDate="2016-31-02"></span>，说明自定义属性用：th:attr，多个属性用,隔开。

  • 内置对象

上面简单描述了比较常用的dates、lists、numbers这几个内置对象，在Thymeleaf还有很多的内置对象，像strings也非常常用，用法跟java.lang.String类的用法一样。

在Thymeleaf中的内置对象有：

#dates：日期格式化内置对象，具体方法可以参照java.util.Date；

#calendars：类似于#dates，但是是java.util.Calendar类的方法；

#numbers： 数字格式化；

#strings：字符串格式化，具体方法可以参照java.lang.String，如startsWith、contains等；

#objects：参照java.lang.Object；

#bools：判断boolean类型的工具；

#arrays：数组操作的工具；

#lists：列表操作的工具，参照java.util.List；

#sets：Set操作工具，参照java.util.Set；

#maps：Map操作工具，参照java.util.Map；

#aggregates：操作数组或集合的工具；

#messages：操作消息的工具。

thymeleaf+bootstrap，onclick传参

<span title="删除"

      th:onclick="'javascript:delCfmModel(\'/user/' + ${user.id} + '/delete\')'"

      style="cursor: pointer"

      class="glyphicon glyphicon-trash">

</span>

或 使用字符串拼接的另外一种简洁写法：<span th:text="|Welcome to our application, ${user.name}!|">

<span title="删除"

    th:onclick="|javascript:delCfmModel('/sys/user/${user.id}/delete')|"

      style="cursor: pointer"

      class="glyphicon glyphicon-trash">

</span>

如果参数是字符串，需要加引号，如上图所示。否则会报错：Uncaught SyntaxError:Invalid regular expressiong flags

thymeleaf 专题

如果只传数字，可以不加引号，如下图所示：

<a href="#editModal"

   role="button"

   data-toggle="modal"

   th:onclick="'javascript:editUser('+${prod.id}+');'">

    Edit

</a>

<script>

    function editUser(id) {

        $.get("/projectName/user/edit",

                {objectid: id},

                function (data) {

                    $("#frm_container1").html(data);

                });

    }

</script>

https://yq.aliyun.com/articles/60696

<!-- 信息删除确认 -->

<div class="modal fade" id="deleteModal">

    <div class="modal-dialog">

        <div class="modal-content message_align">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                    <span aria-hidden="true">×</span>

                </button>

                <h4 class="modal-title">Delete</h4>

            </div>

            <div class="modal-body" style="text-align: center">

                <p>

                    <i class="glyphicon glyphicon-alert"></i>

                    Do You Really Want to Delete This?

                </p>

            </div>

            <div class="modal-footer">

                <input type="hidden" id="modalUrl"/>

                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

                <a id="modalConfirmBtn" class="btn btn-success" data-dismiss="modal">Delete</a>

            </div>

        </div><!-- /.modal-content -->

    </div><!-- /.modal-dialog -->

</div><!-- /.modal -->
<script type="text/javascript">

    function delCfmModel(url) {

        $('#modalUrl').val(url);//给会话中的隐藏属性URL赋值

        $('#deleteModal').modal();

    }

    $("#modalConfirmBtn").click(function () {

        $.get($('#modalUrl').val(),function () {

            window.location.reload(); //重新加载页面

        });

    });

</script>

如果需要弹出的Modal窗口垂直居中，水平居中，可以添加以下css样式（这个样式是覆盖了bootstrap的。tips，这个css是为上面的Modal div深度定制的，如需更改，需确定上面的html是否同步更改）

        .modal {

            text-align: center;

        }

        @media screen and (min-width: 768px) {

            .modal:before {

                display: inline-block;

                vertical-align: middle;

                content: " ";

                height: 100%;

            }

        }

        .modal-dialog {

            display: inline-block;

            text-align: left;

            vertical-align: middle;

        }
Standard Expression syntax

Most Thymeleaf attributes allow their values to be set as or containing expressions, 
which we will call Standard Expressions because of the dialects they are used in. These can be of five types:

${...} : Variable expressions.

*{...} : Selection expressions.

#{...} : Message (i18n) expressions.

@{...} : Link (URL) expressions.
~{...} : Fragment expressions.
2017-09-06 23:06:20.026  WARN 9824 --- [nio-8081-exec-1] n.n.u.t.expressions.ExpressionProcessor  : 
Fragment expression "layout/default" is being wrapped as a Thymeleaf 3 fragment expression (~{...}) for backwards compatibility purposes.  "
This wrapping will be dropped in the next major version of the expression processor, 
so please rewrite as a Thymeleaf 3 fragment expression to future-proof your code.  
See https://github.com/thymeleaf/thymeleaf/issues/451 for more information.

消除掉上面的WARN日志，

use：

<html lang="zh"

      xmlns:th="http://www.thymeleaf.org"

      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"

      layout:decorate="~{layout/default}">

replace

<html lang="zh"

      xmlns:th="http://www.thymeleaf.org"

      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"

      layout:decorate="layout/default">

http://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

Create a common layout to be used for several pages, defining extension points in the body with the layout:fragment/data-layout-fragment processors:

<!DOCTYPE html>

<html>

<head>

  <title>Layout page</title>

  <script src="common-script.js"></script>

</head>

<body>

  <header>

    <h1>My website</h1>

  </header>

  <section layout:fragment="content">

    <p>Page content goes here</p>

  </section>

  <footer>

    <p>My footer</p>

    <p layout:fragment="custom-footer">Custom footer here</p>

  </footer>

</body>

</html>

Create a content page that will use the layout, defining any HTML to use for the extension points in the layout, and specified by a layout:decorate/data-layout-decorate processor at the root element of your page:

<html layout:decorate="~{layout.html}">

<head>

  <title>Content page</title>

  <script src="content-script.js"></script>

</head>

<body>

  <section layout:fragment="content">

    <p>This is a paragraph from the content page</p>

  </section>

  <footer>

    <p layout:fragment="custom-footer">This is some footer content from the content page</p>

  </footer>

</body>

</html>

Get Thymeleaf to process your content page. The result will be the layout template decorated by your content page, meaning that the content page will fill out the layout's extension points, replace titles, and merge <head> items:

<!DOCTYPE html>

<html>

<head>

  <title>Content page</title>

  <script src="common-script.js"></script>

  <script src="content-script.js"></script>

</head>

<body>

  <header>

    <h1>My website</h1>

  </header>

  <section>

    <p>This is a paragraph from the content page</p>

  </section>

  <footer>

    <p>My footer</p>

    <p>This is some footer content from the content page</p>

  </footer>

</body>

</html>

Intrigued? Check out the documentation links near the top of this readme to learn more.

https://github.com/ultraq/thymeleaf-layout-dialect

https://ultraq.github.io/thymeleaf-layout-dialect/

[Please make sure to select the branch corresponding to the version of Thymeleaf you are using]

Status

This is a thymeleaf extras module, not a part of the Thymeleaf core (and as such following its own versioning schema), but fully supported by the Thymeleaf team.

This repository contains two projects:

  • thymeleaf-extras-springsecurity3 for integration with Spring Security 3.x
  • thymeleaf-extras-springsecurity4 for integration with Spring Security 4.x

Current versions:

  • Version 3.0.2.RELEASE - for Thymeleaf 3.0 (requires Thymeleaf 3.0.3+)
  • Version 2.1.3.RELEASE - for Thymeleaf 2.1 (requires Thymeleaf 2.1.2+)

Features

This module provides a new dialect called org.thymeleaf.extras.springsecurity3.dialect.SpringSecurityDialect or org.thymeleaf.extras.springsecurity4.dialect.SpringSecurityDialect (depending on the Spring Security version), with default prefix sec. It includes:

  • New expression utility objects:
  • #authentication representing the Spring Security authentication object (an object implementing the org.springframework.security.core.Authentication interface).
  • #authorization: a expression utility object with methods for checking authorization based on expressions, URLs and Access Control Lists.
  • New attributes:
  • sec:authentication="prop" outputs a prop property of the authentication object, similar to the Spring Security <sec:authentication/> JSP tag.
  • sec:authorize="expr" or sec:authorize-expr="expr" renders the element children (tag content) if the authenticated user is authorized to see it according to the specified Spring Security expression.
  • sec:authorize-url="url" renders the element children (tag content) if the authenticated user is authorized to see the specified URL.
  • sec:authorize-acl="object :: permissions" renders the element children (tag content) if the authenticated user has the specified permissions on the specified domain object, according to Spring Source's Access Control List system.

Configuration

In order to use the thymeleaf-extras-springsecurity3 or thymeleaf-extras-springsecurity4 modules in our Spring MVC application, we will first need to configure our application in the usual way for Spring + Thymeleaf applications (TemplateEngine bean, template resolvers, etc.), and add the SpringSecurity dialect to our Template Engine so that we can use the sec:* attributes and special expression utility objects:

    <bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">

      ...

      <property name="additionalDialects">

        <set>

          <!-- Note the package would change to 'springsecurity3' if you are using that version -->

          <bean class="org.thymeleaf.extras.springsecurity4.dialect.SpringSecurityDialect"/>

        </set>

      </property>

      ...

    </bean>

And that's all!

Using the expression utility objects

The #authentication object can be easily used, like this:

    <div th:text="${#authentication.name}">

        The value of the "name" property of the authentication object should appear here.

    </div>

The #authorization object can be used in a similar way, normally in th:if or th:unlesstags:

    <div th:if="${#authorization.expression('hasRole(''ROLE_ADMIN'')')}">

        This will only be displayed if authenticated user has role ROLE_ADMIN.

    </div>

The #authorization object is an instance of org.thymeleaf.extras.springsecurity[3|4].auth.Authorization, see this class and its documentation to understand all the methods offered.

Using the attributes

Using the sec:authentication attribute is equivalent to using the #authentication object, but using its own attribute:

    <div sec:authentication="name">

        The value of the "name" property of the authentication object should appear here.

    </div>

The sec:authorize and sec:authorize-expr attributes are exactly the same. They work equivalently to a th:if that evaluated an #authorization.expression(...) expression, by evaluating a Spring Security Expression:

    <div sec:authorize="hasRole('ROLE_ADMIN')">

        This will only be displayed if authenticated user has role ROLE_ADMIN.

    </div>

These Spring Security Expressions in sec:authorize attributes are in fact Spring EL expressions evaluated on a SpringSecurity-specific root object containing methods such as hasRole(...), getPrincipal(), etc.

As with normal Spring EL expressions, Thymeleaf allows you to access a series of objects from them including the context variables map (the #vars object). In fact, you are allowed to surround your access expression with ${...} if it makes you feel more comfortable:

    <div sec:authorize="${hasRole(#vars.expectedRole)}">

        This will only be displayed if authenticated user has a role computed by the controller.

    </div>

Remember that Spring Security sets a special security-oriented object as expression root, which is why you would not be able to access the expectedRole variable directly in the above expression.

Another way of checking authorization is sec:authorize-url, which allows you to check whether a user is authorized to visit a specific URL or not:

    <div sec:authorize-url="/admin">

        This will only be displayed if authenticated user can call the "/admin" URL.

    </div>

For specifying a specific HTTP method, do:

    <div sec:authorize-url="POST /admin">

        This will only be displayed if authenticated user can call the "/admin" URL

        using the POST HTTP method.

    </div>

Finally, there is an attribute for checking authorization using Spring Security's Access Control Lists, which needs the specification of a domain object and the permissions defined on it that we are asking for.

    <div sec:authorize-acl="${obj} :: '1,3'">

        This will only be displayed if authenticated user has permissions "1" and "3"

        on domain object referenced by context variable "obj".

    </div>

In this attribute, both domain object and permission specifications are considered to be thymeleaf Standard Expressions.

Namespace

The namespace for both Spring 3 and 4 versions of this dialect is http://www.thymeleaf.org/extras/spring-security.

<html xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

Getting the namespace incorrect won't impact processing of your template. It might however impact your IDE when it comes to things like suggestions/auto-completion in your templates.

https://github.com/thymeleaf/thymeleaf-extras-springsecurity

https://github.com/ultraq/thymeleaf-layout-dialect

http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#including-template-fragments

https://github.com/zsl131/thymeleaf-study

https://github.com/kolorobot/spring-boot-thymeleaf

http://docs.spring.io/spring-boot/docs/1.5.4.RELEASE/reference/htmlsingle/#howto-use-thymeleaf-3

https://github.com/spring-projects/spring-boot/blob/v1.4.1.RELEASE/spring-boot-samples/spring-boot-sample-web-thymeleaf3/src/main/resources/application.properties

http://blog.imyxiao.com/2016/11/26/Spring-Boot-thymeleaf-3/

https://github.com/kolorobot/spring-boot-thymeleaf

在spring-boot1.4之后,支持thymeleaf3,可以更改版本号来进行修改支持. 
3相比2极大的提高了效率,并且不需要标签闭合,类似的link,img等都有了很好的支持,按照如下配置即可

解决下面的问题的办法是升级到Thymeleaf3

74.9 Use Thymeleaf 3

By default, spring-boot-starter-thymeleaf uses Thymeleaf 2.1. If you are using the spring-boot-starter-parent, you can use Thymeleaf 3 by overriding thethymeleaf.version and thymeleaf-layout-dialect.version properties, for example:

    <properties>

        <thymeleaf.version>3.0.7.RELEASE</thymeleaf.version>

        <thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>
        <thymeleaf-extras-springsecurity4.version>3.0.2.RELEASE</thymeleaf-extras-springsecurity4.version>
    </properties>

Tips:

如果不同时更改thymeleaf-extras-springsecurity4的version,则 thymeleaf spring security4相关的标签会不生效

 
thymeleaf 专题

if you are managing dependencies yourself, look at spring-boot-dependencies for the list of artifacts that are related to those two versions.

To avoid a warning message about the HTML 5 template mode being deprecated and the HTML template mode being used instead, you may also want to explicitly configure spring.thymeleaf.mode to be HTML, for example:

spring.thymeleaf.mode: HTML

Please refer to the Thymeleaf 3 sample to see this in action.

If you are using any of the other auto-configured Thymeleaf Extras (Spring Security, Data Attribute, or Java 8 Time) you should also override each of their versions to one that is compatible with Thymeleaf 3.0.

http://docs.spring.io/spring-boot/docs/1.5.4.RELEASE/reference/htmlsingle/#howto-use-thymeleaf-3

It's much simpler, just read this: http://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#howto-use-thymeleaf-3

<properties>

<thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>

<thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>

</properties>

You might also want to add <thymeleaf-extras-java8time.version>3.0.0.RELEASE</thymeleaf‌​-extras-java8time.ve‌​rsion> – Samuel EUSTACHI Jun 6 at 9:42

https://*.com/questions/37439369/spring-boot-and-thymeleaf-3-0-0-release-integration

http://blog.imyxiao.com/2016/11/26/Spring-Boot-thymeleaf-3/

http://www.thymeleaf.org/doc/articles/thymeleaf3migration.html

https://github.com/spring-projects/spring-boot/tree/v1.4.1.RELEASE/spring-boot-samples/spring-boot-sample-web-thymeleaf3

org.xml.sax.SAXParseException: 元素类型 "img" 必须由匹配的结束标记 "</img>" 终止。

1、必须要有结束标签，这个很烦，不加就报错，像下面这样：

org.xml.sax.SAXParseException: 元素类型 "input" 必须由匹配的结束标记 "</input>" 终止。

org.xml.sax.SAXParseException: 元素类型 "img" 必须由匹配的结束标记 "</img>" 终止。

org.xml.sax.SAXParseException: 元素类型 "hr" 必须由匹配的结束标记 "</hr>" 终止。

org.xml.sax.SAXParseException: 元素类型 "br" 必须由匹配的结束标记 "</br>" 终止。

2、包含的模板，也必须有闭合标签。我要引入公共的头部和底部，头部还好说，外面有个<head>包着，底部必须得在外面套个div，引入js的代码也得包括在div里，不爽啊，像这样：

<div class="container" th:fragment="footer">
    <hr></hr>
    <div>
      <p>AntsClub 2013-2015</p>
    </div>
    <script th:src="@{bootstrap334/js/jquery.min.js}"></script>
    <script th:src="@{bootstrap334/js/bootstrap.min.js}"></script>
</div>

3、引入个css文件，js文件也得用thymeleaf的标签，就像上面的例子

如果你的代码使用了 HTML5 的标准，而Thymeleaf 版本来停留在 2.x ，那么如果没有把<input>闭合，如下：

<form>

 First name:<br>

<input type="text" name="firstname">

<br>

 Last name:<br>

<input type="text" name="lastname">

</form>

就会抛出如下错误。

org.xml.sax.SAXParseException: 元素类型 "input" 必须由匹配的结束标记 "</input>" 终止。

解决方案

1. 沿用 Thymeleaf 老版本

如果你的 Thymeleaf 不能变更，那么你的 HTML 标准也只能停留在老版本了。你必须严格遵守 XML 定义，在<input>加上结束标记</input>。这显然，对于 HTML5 不友好。

2. 升级至 Thymeleaf 3 新版本

是时候尝试下使用 Thymeleaf 3 了。Thymeleaf 3 使用了新的解析系统。

Thymeleaf 3 不再是基于XML结构的。由于引入新的解析引擎，模板的内容格式不再需要严格遵守XML规范。即不在要求标签闭合，属性加引号等等。当然，出于易读性考虑，还是推荐你按找XML的标准去编写模板。

Thymeleaf 3 使用一个名为 AttoParser 2的新解析器。 一个新的、基于事件（不符合SAX标准）的解析器，AttoParser由 Thymeleaf 的作者开发，符合 Thymeleaf 的风格。

AttoParser 提供 Thymeleaf 3 两个重要功能：

  • 完全支持XML和HTML5（非XML化）标记，从而不再需要外部标记平衡操作。
  • 无损解析，以便在处理的输出的标记类似于具有最高精度的原始模板。

所以下面的格式在 Thymeleaf 3 里面是合法的：

<div><img alt=logo th:src='@{/images/logo.png}'>

Thymeleaf 3 其他方面的解析改进

1. 启用验证的解析

在 Thymeleaf 2.1提供了两种VALID*模板模式，名为VALIDXHTML和VALIDXML，在而 Thymeleaf 3 中将不再存在。 新的解析基础结构不提供HTML或XML验证，即在解析期间无法验证模板标记是否符合指定的DTD或XML模式定义。

2. 不再需要<![CDATA[ ... ]]>

Thymeleaf 2.1 要求将<script>标记的内容封装在 CDATA 中，以便所使用的任何<或>符号不会干扰基于XML的解析：

<script>

/*<![CDATA[*/

  var user = ...

  if (user.signupYear < 1990) {

    alert('You\'ve been here for a long time!');

  }

/*]]>*/

</script>

而在 Thymeleaf 3 中则不需要这样做，代码立马变得简洁干净：

<script>

  var user = ...

  if (user.signupYear < 1990) {

    alert('You\'ve been here for a long time!');

  }

</script>

参考文献

  • https://github.com/thymeleaf/thymeleaf/issues/390

https://waylau.com/thymeleaf-3-adopts-a-new-parsing-system/

THYMELEAF 3 - GET STARTED QUICKLY WITH THYMELEAF 3 AND SPRING MVC

Thymeleaf 3 release arrived. The new version brings plenty of new features like HTML5 support as well as Text templates support with no markup - [# th:utext="${thymeleaf.version}" /] , improved inline capabilities - <p>Thymeleaf [[${thymeleaf.version}]] is great!</p>, performence improvements and much more.

The easiest way the get starter with Thymeleaf 3 and Spring MVC is by using Spring MVC 4 Quickstart Maven Archetype. The archetype was updated to support Thymeleaf 3. The changes that are made to the archetype are described below.

Dependencies

The project uses Spring Platform BOM for dependencies management, but it does not yet (as time of writing this post) declare dependency on Thymeleaf 3, so I needed to declare the versions manually.

  • Thymeleaf:
<dependency>

    <groupId>org.thymeleaf</groupId>

    <artifactId>thymeleaf</artifactId>

    <version>3.0.0.RELEASE</version>

</dependency>
  • Thymeleaf Spring 4:
<dependency>

    <groupId>org.thymeleaf</groupId>

    <artifactId>thymeleaf-spring4</artifactId>

    <version>3.0.0.RELEASE</version>

</dependency>
  • Thymeleaf Spring Security 4:
<dependency>

    <groupId>org.thymeleaf.extras</groupId>

    <artifactId>thymeleaf-extras-springsecurity4</artifactId>

    <version>3.0.0.RELEASE</version>

</dependency>

The application generated with the archetype uses Java 8 Time Dialect and since Thymeleaf API changed, the dialect dependency must be updated too. Before it is available in Maven Central, we must add snapshot repository to POM:

<repository>

    <id>sonatype-nexus-snapshots</id>

    <name>Sonatype Nexus Snapshots</name>

    <url>https://oss.sonatype.org/content/repositories/snapshots</url>

    <snapshots>

        <enabled>true</enabled>

    </snapshots>

</repository>

And then declare the dependency:

<dependency>

    <groupId>org.thymeleaf.extras</groupId>

    <artifactId>thymeleaf-extras-java8time</artifactId>

    <version>3.0.0-SNAPSHOT</version>

</dependency>

Configuration changes

  • Template resolver

Template resolver before:

@Bean

public TemplateResolver templateResolver() {

   TemplateResolver resolver = new ServletContextTemplateResolver();

   resolver.setPrefix(VIEWS);

   resolver.setSuffix(".html");

   resolver.setTemplateMode("HTML5");

   resolver.setCacheable(false);

   return resolver;

}

Template resolver after:

@Bean

public ITemplateResolver templateResolver() {

    SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();

    resolver.setPrefix(VIEWS);

    resolver.setSuffix(".html");

    resolver.setTemplateMode(TemplateMode.HTML);

    resolver.setCacheable(false);

    return resolver;

}
  • Template Engine
@Bean

public SpringTemplateEngine templateEngine() {

    SpringTemplateEngine templateEngine = new SpringTemplateEngine();

    templateEngine.setTemplateResolver(templateResolver());

    templateEngine.addDialect(new SpringSecurityDialect());

    templateEngine.addDialect(new Java8TimeDialect());

    return templateEngine;

}
  • View Resolver:
@Bean

public ViewResolver viewResolver() {

    ThymeleafViewResolver thymeleafViewResolver = new ThymeleafViewResolver();

    thymeleafViewResolver.setTemplateEngine(templateEngine());

    thymeleafViewResolver.setCharacterEncoding("UTF-8");

    return thymeleafViewResolver;

}

Templates

The templates did not change in this project. But if you are migrating a real project, you may be interested in reading migration guide.

References

You may be also interested in

http://blog.codeleak.pl/2016/05/thymeleaf-3-get-started-quickly-with.html

相关文章