Thymeleaf的基本使用

曾经终败给现在 2023-05-30 09:10 6阅读 0赞

### Thymeleaf 介绍 ###

简单说，Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点：

*  1.Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 Thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
 *  2.Thymeleaf 开箱即用的特性。它提供标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL表达式效果，避免每天套模板、改 Jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
 *  3.Thymeleaf 提供 Spring 标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

**引入URL**

URL 在 Web 应用模板中占据着十分重要的地位，需要特别注意的是 Thymeleaf 对于 URL 的处理是通过语法 `@{...}` 来处理的。如果需要 Thymeleaf 对 URL 进行渲染，那么务必使用 `th:href`，`th:src` 等属性（以上是官方推荐的，经过测试也可以直接使用H5的语法），案例代码如下。

<a th:href="@{http://www.fkit.ory/fkjava.png}">绝对路径</a>
    <a th:href="@{/}">相对路径</a>
    <a th:href="@{css/bootstrap.css}">Content路径，默认访问static下的css文件夹</a>
    <a href = "地址">H5语法</a>

**设置背景**

**根据属性值改变背景**

### 表达式 ###

有一些专门的表达式，用来从模板中的WebContext获取请求参数、请求、会话和应用程序中的属性，这些操作和JSP的EL表达式非常相似。

1.  $\{X\}将返回存储在Thymeleaf上下文中的变量X或作为请求Request作用域中的属性。
2.  $\{param.x\}将返回一个名为x的请求参数（可能是多值的）。
3.  $\{session.x\}将返回一个名为x的会话HTTPSession作用域中的属性。
4.  $\{application.x\}将返回一个名为x的全局ServletContext上下文作用域中的属性。

获取变量值用$符号，对于JavaBean使用“变量名.属性名”方法获取，这点和EL表达式一样。另外，$表达式只能写在th标签内部，否则不会生效。

## 常用th标签 ##

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>功能介绍</th> 
   <th>案例</th> 
  </tr> 
 </thead> 
 <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;</code></td> 
  </tr> 
  <tr> 
   <td>th:value</td> 
   <td>属性赋值</td> 
   <td><code>&lt;input th:value="${user.name}" /&gt;</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;</code></td> 
  </tr> 
  <tr> 
   <td>th:style</td> 
   <td>设置样式</td> 
   <td><code>th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"</code></td> 
  </tr> 
  <tr> 
   <td>th:onclick</td> 
   <td>点击事件</td> 
   <td><code>th:onclick="'getCollect()'"</code></td> 
  </tr> 
  <tr> 
   <td>th:each</td> 
   <td>属性赋值</td> 
   <td><code>tr th:each="user,userStat:${users}"&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:if</td> 
   <td>判断条件</td> 
   <td><code>&lt;a th:if="${userId == collect.userId}" &gt;</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;</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;</code></td> 
  </tr> 
  <tr> 
   <td>th:switch</td> 
   <td>多路选择 配合th:case 使用</td> 
   <td><code>&lt;div th:switch="${user.role}"&gt;</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;</code></td> 
  </tr> 
  <tr> 
   <td>th:replace</td> 
   <td>布局标签，替换整个标签到引入的文件</td> 
   <td><code>&lt;div th:replace="fragments/header :: title"&gt;&lt;/div&gt;</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;</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>

## 几种常用的方法 ##

**1、字符串操作**

很多时候可能只需对一大段文字中的某一处或全部进行替换，可以通过字符串拼接或替换操作完成。

<p  th:text="${collect.description}">description</p>
    <span th:text="'Welcome to our application, ' + ${user.name} + '!'">

字符串拼接还有另外一种简洁的写法

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

**2、运算符**

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

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

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

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

**3、条件判断**

Thymeleaf中使用th:if和th:unless属性进行条件判断，标签只有在th:if中的条件成立时才显示，th:unless与th:if恰好相反，只有表达式中的条件不成立是，才会显示器内容。

<a th:href="main.html" th:if="${username != null}">Login1</a>
    <a th:href="main.html" th:unless="${username != null}">Login2</a>

Thymeleaf同样支持多路选中Switch结构，默认属性default可以用\*表示

<div th:switch="${role}">
        <p th:case="'admin'">user is an admin</p>
        <p th:case="'manager'">user is a manager</p>
        <p th:case="*">user is some other thing</p>
    </div>

**4、for 循环**

Thymeleaf中循环变量集合使用th:each标签

th:each属于用于迭代循环，迭代对象可以是java.util.List、java.util.Map或数组等，语法如下。

th:each="obj, iterStat:${objList}"

下面是一个简单的循环。

<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="${iterStat.index}">index</td>
    </tr>

iterStat称作状态变量，属性有：

*  index:当前迭代对象的 index（从0开始计算）
 *  count: 当前迭代对象的 index(从1开始计算)
 *  size:被迭代对象的大小
 *  current:当前迭代变量
 *  even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
 *  first:布尔值，当前循环是否是第一个
 *  last:布尔值，当前循环是否是最后一个

**5、内联 js**

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

### 内置对象 ###

Web下面中经常会传递一些数据，例如String类型的列表、日期对象和数值，这些在实际应用开发中应用非常广泛，所以Thymeleaf还提供了很多内置对象，可以通过\#直接访问。

【注意】：内置对象一般都以s结尾，如dates，lists，numbers等。在使用内置对象时需要在对象名前加\#号。

在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:操作消息的工具

**实例代码如下**

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

以下代码表示保留2位小数，整数为自动。

以下代码表示保留2位小数，3位整数（不够的在前面加0）。

以下代码表示获取变量str的长度。

以下代码表示使用\#list.size来获取名称为data的集合的长度。