【Spring Boot 3】Thymeleaf 使用详解

向右看齐 2021-08-24 22:09 408阅读 0赞

在上篇文章[【Spring Boot 2】web应用开发，实现CRUD][Spring Boot 2_web_CRUD]中简单介绍了一下 Thymeleaf，这篇文章将更加全面详细的介绍 Thymeleaf 的使用。Thymeleaf 是新一代的模板引擎，在 Spring4.0 中推荐使用 Thymeleaf 来做前端模版引擎。

# **一、Thymeleaf介绍** #

1、Thymeleaf是一个跟JSP类似的模板引擎，它可以完全替代JSP。

相较于其他引擎，它有三个极吸引人的特点：1、Thymeleaf在有网络和无网络的情况下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持HTML模型，然后在HTML标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释和HTML时会忽略未定义的标签属性，所以Thymeleaf的模板可以静态的运行；当有数

据返回页面时，Thymeleaf标签会动态地替换掉静态内容，使页面动态显示。

2、Thymeleaf开箱即用的特性。它提供标准和Spring标准两种方言，可以直接套用模板数显JSTL、OGNL表达式效果，避免每天套模板、改JSTL、改标签的困扰。同时开发人员可以扩展和创建自定义的方言。

3、Thymeleaf提供spring标准方言和一个与springMVC完美集成的可选模板，可以快速的实现表单绑定、属性编辑器、国际化等功能。

# **二、标准表达式语法** #

## 1、变量表达式 ##

变量表达式即OGNL表达式或spring EL表达式（在spring中的术语叫model attributes）。

如下所示：

${session.user.name}

他们讲以HTML标签的一个属性来表示：

## 2、选择（星号）表达式 ##

选择表达式很像变量表达式，不过它们用一个预先选择的对象来代替上下文变量容器（map）来执行，如下：

*{customer.name}

被指定的 object 由 th:object 属性定义：

## 3、文字国际化表达式 ##

文化国际化表达式允许我们从一个外部文件获取区域文字信息（.properties），用key索引value，还可以提供一组参数（可选）：

#{main.title}  
    #{message.entrycreated(${entryId})}

可以在模板文件中找到这样的表达式代码：

## 4、URL表达式 ##

URL表达式指的是把一个有用的上下文或会话信息添加到URL，这个过程经常被叫做URL重写。

@{/order/list}

URL还可以设置参数：

@{/order/details(id=${orderId})}

相对路径：

@{../documents/report}

让我们看这些表达式：

# **三、常用th标签简介** #

<table> 
 <tbody> 
  <tr> 
   <th>关键字</th> 
   <th>功能介绍</th> 
   <th>案例</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td>th:id</td> 
   <td>替换id</td> 
   <td><code>&lt;input th:id="'xxx' + ${collect.id}"/&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:text</td> 
   <td>文本替换</td> 
   <td><code>&lt;p th:text="${collect.description}"&gt;description&lt;/p&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:utext</td> 
   <td>支持html的文本替换</td> 
   <td><code>&lt;p th:utext="${htmlcontent}"&gt;conten&lt;/p&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:object</td> 
   <td>替换对象</td> 
   <td><code>&lt;div th:object="${session.user}"&gt;&nbsp;</code></td> 
  </tr> 
  <tr> 
   <td>th:value</td> 
   <td>属性赋值</td> 
   <td><code>&lt;input th:value="${user.name}" /&gt;&nbsp;</code></td> 
  </tr> 
  <tr> 
   <td>th:with</td> 
   <td>变量赋值运算</td> 
   <td><code>&lt;div th:with="isEven=${prodStat.count}%2==0"&gt;&lt;/div&gt;&nbsp;</code></td> 
  </tr> 
  <tr> 
   <td>th:style</td> 
   <td>设置样式</td> 
   <td><code>th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"&nbsp;</code></td> 
  </tr> 
  <tr> 
   <td>th:onclick</td> 
   <td>点击事件</td> 
   <td><code>th:onclick="'getCollect()'"&nbsp;</code></td> 
  </tr> 
  <tr> 
   <td>th:each</td> 
   <td>属性赋值</td> 
   <td><code>tr th:each="user,userStat:${users}"&gt;&nbsp;</code></td> 
  </tr> 
  <tr> 
   <td>th:if</td> 
   <td>判断条件</td> 
   <td><code>&nbsp;&lt;a th:if="${userId == collect.userId}" &gt;&nbsp;</code></td> 
  </tr> 
  <tr> 
   <td>th:unless</td> 
   <td>和th:if判断相反</td> 
   <td><code>&lt;a th:href="@{/login}" th:unless=${session.user != null}&gt;Login&lt;/a&gt;&nbsp;</code></td> 
  </tr> 
  <tr> 
   <td>th:href</td> 
   <td>链接地址</td> 
   <td><code>&lt;a th:href="@{/login}" th:unless=${session.user != null}&gt;Login&lt;/a&gt; /&gt;&nbsp;</code></td> 
  </tr> 
  <tr> 
   <td>th:switch</td> 
   <td>多路选择 配合th:case 使用</td> 
   <td><code>&lt;div th:switch="${user.role}"&gt;&nbsp;</code></td> 
  </tr> 
  <tr> 
   <td>th:case</td> 
   <td>th:switch的一个分支</td> 
   <td><code>&lt;p th:case="'admin'"&gt;User is an administrator&lt;/p&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:fragment</td> 
   <td>布局标签，定义一个代码片段，方便其它地方引用</td> 
   <td><code>&lt;div th:fragment="alert"&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:include</td> 
   <td>布局标签，替换内容到引入的文件</td> 
   <td><code>&lt;head th:include="layout :: htmlhead" th:with="title='xx'"&gt;&lt;/head&gt; /&gt;&nbsp;</code></td> 
  </tr> 
  <tr> 
   <td>th:replace</td> 
   <td>布局标签，替换整个标签到引入的文件</td> 
   <td><code>&lt;div th:replace="fragments/header :: title"&gt;&lt;/div&gt;&nbsp;</code></td> 
  </tr> 
  <tr> 
   <td>th:selected</td> 
   <td>selected选择框 选中</td> 
   <td><code>th:selected="(${xxx.id} == ${configObj.dd})"</code></td> 
  </tr> 
  <tr> 
   <td>th:src</td> 
   <td>图片类地址引入</td> 
   <td><code>&lt;img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" /&gt;&nbsp;</code></td> 
  </tr> 
  <tr> 
   <td>th:inline</td> 
   <td>定义js脚本可以使用变量</td> 
   <td><code>&lt;script type="text/javascript" th:inline="javascript"&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:action</td> 
   <td>表单提交的地址</td> 
   <td><code>&lt;form action="subscribe.html" th:action="@{/subscribe}"&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:remove</td> 
   <td>删除某个属性</td> 
   <td><code>&lt;tr th:remove="all"&gt; 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。</code></td> 
  </tr> 
  <tr> 
   <td>th:attr</td> 
   <td>设置标签属性，多个属性可以用逗号分隔</td> 
   <td>比如<code>th:attr="src=@{/image/aa.jpg},title=#{logo}"</code>，此标签不太优雅，一般用的比较少。</td> 
  </tr> 
 </tbody> 
</table>

还有非常多的标签，这里只列出最常用的几个,由于一个标签内可以包含多个th:x属性，其生效的优先级顺序为:

include,each,if/unless/switch/case,with,attr/attrprepend/attrappend,value/href,src ,etc,text/utext,fragment,remove。

# **四、几种常用的使用方法** #

## 1、赋值、字符串拼接 ##

<p  th:text="${collect.description}">description</p>
    <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` 等属性，下面是一个例子

<a  th:href="@{/standard/{type}(type=${type})}">view</a>
    
    
    <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`

## 5、内联js ##

内联文本：\[\[…\]\] 内联文本的表示方式，使用时，必须先用`th:inline="text/javascript/none"`激活，`th:inline`可以在父级标签内使用，甚至作为 body 的标签。内联文本尽管比`th:text`的代码少，不利于原型显示。

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>

定义代码片段

在页面任何地方引入：

th:insert 和 th:replace 区别，insert 只是加载，replace 是替换。Thymeleaf 3.0 推荐使用 th:insert 替换 2.0 的 th:replace。

返回的 HTML 如下：

下面是一个常用的后台页面布局，将整个页面分为头部，尾部、菜单栏、隐藏栏，点击菜单只改变 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">
      ...

也可以在引用模版的时候传参

layout 是文件地址，如果有文件夹可以这样写`fileName/layout:htmlhead`，htmlhead 是指定义的代码片段 如 th:fragment="copy"

[Spring Boot 2_web_CRUD]: https://blog.csdn.net/guorui_java/article/details/104181423