前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >迁移到Thymeleaf3.x,布局方言2.x

迁移到Thymeleaf3.x,布局方言2.x

作者头像
JavaEdge
发布2018-05-16 15:13:21
1.6K0
发布2018-05-16 15:13:21
举报
文章被收录于专栏:JavaEdge

环境:

  • springboot1.5.4
  • win10
  • intellij IDEA2017.1

迁移到Thymeleaf3

如果你的spring boot应用继承spring-boot-starter-parent, 那么只需要添加spring-boot-starter-thymeleaf这个starter依赖,即可使用thymeleaf模板引擎.

从spring-boot-dependencies中的dependencyManagement中可以看到:spring-boot-starter-thymeleaf,默认使用Thymeleaf 2.1.5版本

盗图

总所周知,2.x版本有许多坑,与HTML5有很多冲突,迁移到3.x版本势在必行 如果要改为Thymeleaf 3,只需要重写thymeleaf.versionproperties和添加thymeleaf-layout-dialect 2.x依赖,

代码语言:javascript
复制
    <properties>
        <thymeleaf.version>3.0.3.RELEASE</thymeleaf.version>
    </properties>
代码语言:javascript
复制
    <dependency>
        <groupId>nz.net.ultraq.thymeleaf</groupId>
        <artifactId>thymeleaf-layout-dialect</artifactId>
        <version>2.1.2</version>
    </dependency>

或者都改properties

代码语言:javascript
复制
<properties>
    <thymeleaf.version>3.0.3.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.1.2</thymeleaf-layout-dialect.version>
</properties>

布局方言的1.x和2.x之间的最大变化是2.x是重写布局方言以支持Thymeleaf3. Thymeleaf3大大向后兼容于Thymeleaf2,因此布局方言已经消失摆脱了向后兼容的方式。

装饰处理器改名为装饰

虽然布局方言是依据装饰器模式来进行装饰,但是在整个1.x版本中,它错误地将布局/父模板认做为装饰器,而根据设计模式,扩展(在这种情况下为内容模板)是装饰器.

此更改只是布局的重命名:layout:decorator/data-layout-decorator到layout:decorate/data-layout-decorate,所以指定的模板是正在被装饰的模板,而不是装饰器.

$DECORATOR_TITLE 改名为 $LAYOUT_TITLE

上述的结果是,标题模式处理器中的特殊标记也被错误地命名,因此已经引入了新的标记来解决这个问题。

不推荐使用 include, introduced insert

Thymeleaf 3不推荐使用th:include / data-th-include处理器,并引入th:insert / data-th-insert处理器作为替代。 因为布局方言在Thymeleaf之后对其模板包含处理器的命名进行了图案化,所以它做了相同的处理 弃用的布局:include / data-layout-include和引入布局:insert / data-layout-insert

  • Full HTML5 markup support(完整的HTML5 标记支持) Thymeleaf 2.1中,html代码必须严格遵守XML规范,必须是XML-well-formed HTML5 code,比如: 标签必须闭合,<br> 是错误的 属性必须有值,<span v-cloak/> 是不被允许的 不是所有的人都会完全的遵守XML规范,Thymeleaf2中要解决这个问题,可以将spring.thymeleaf.mode这个属性改为LEGACYHTML5,然后添加nekoHTML这个库。如果使用直接Thymeleaf3,就不会存在这个问题,因为Thymeleaf3使用新的解析引擎。
  • Template modes(模板类型) HTML、XML、TEXT、JAVASCRIPT、CSS、RAW 分为三类:标记型模板(HTML,XML),文本型模板(TEXT, JAVASCRIPT和CSS),无操作(no-op)模板 (RAW)。 Thymeleaf2.1中的HTML5, XHTML, VALIDXHTML和LEGACYHTML5相当于3.0中的 HTML Thymeleaf2.1中的VALIDXML也就是3.0中的XML 所以在Thymeleaf3中使用HTML包括了HTML5,HTML4和XHTML在内的所有类型的HTML标记,此时,标记的作用范围按可能的最大化处理。 Improved inlining mechanism(增强的内联机制) Thymeleaf3中可无需额外的标签,直接在文本中输出数据
代码语言:javascript
复制
<p>This product is called [[${product.name}]] and it's great!</p>

Thymeleaf2.1中则需要使用内联标签th:inline

代码语言:javascript
复制
<p th:inline="text">
   This product is called [[${product.name}]] and it's great!
</p>

上面的代码中也可以使用[(${product.name)]来代替,[[...]]和[(...)]区别在于[(...)]中的文本不会被Escape,就相当于th:text和th:utext的区别

  • Fragment Expressions(片段表达式) Thymeleaf 3.0 引入了一个新的Fragment Expressions。像是这样:~{commons::footer}。例如,我们定义一个模版页面base.html
代码语言:javascript
复制
<head th:fragment="common_header(title,links)">
 
  <title th:utext="${title}">The awesome application</title>
 
  <!-- Common styles and scripts -->
  <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
  <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
  <script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
 
  <!--/* Per-page placeholder for additional links */-->
  <th:block th:replace="${links} ?: ~{}" />
 
</head>

在我们页面中使用这个模板

代码语言:javascript
复制
<head th:replace="base :: common_header(~{::title},~{::link})">
 
  <title>Awesome - Main</title>
 
  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
 
</head>

结果会输出:

代码语言:javascript
复制
<head>
 
  <title>Awesome - Main</title>
 
  <!-- Common styles and scripts -->
  <link rel="stylesheet" type="text/css" media="all" href="/awe/css/awesomeapp.css">
  <link rel="shortcut icon" href="/awe/images/favicon.ico">
  <script type="text/javascript" src="/awe/sh/scripts/codebase.js"></script>
 
  <link rel="stylesheet" href="/awe/css/bootstrap.min.css">
  <link rel="stylesheet" href="/awe/themes/smoothness/jquery-ui.css">
 
</head>

这个特性解决了通用的header和footer的问题,详细说明参考:https://github.com/thymeleaf/thymeleaf/issues/451

  • Decoupled Template Logic(模板逻辑解耦)

定义一个完全的html模版home.html

代码语言:javascript
复制
<!DOCTYPE html>
<html>
  <body>
    <table id="usersTable">
      <tr>
        <td class="username">Jeremy Grapefruit</td>
        <td class="usertype">Normal User</td>
      </tr>
      <tr>
        <td class="username">Alice Watermelon</td>
        <td class="usertype">Administrator</td>
      </tr>
    </table>
  </body>
</html>

然后只需要定义一个home.th.xml

代码语言:javascript
复制
<?xml version="1.0"?>
<thlogic>
  <attr sel="#usersTable" th:remove="all-but-first">
    <attr sel="/tr[0]" th:each="user : ${users}">
      <attr sel="td.username" th:text="${user.name}" />
      <attr sel="td.usertype" th:text="#{|user.type.${user.type}|}" />
    </attr>
  </attr>
</thlogic>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.01.31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 环境:
  • 迁移到Thymeleaf3
  • 装饰处理器改名为装饰
  • $DECORATOR_TITLE 改名为 $LAYOUT_TITLE
  • 不推荐使用 include, introduced insert
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档