Thymeleaf初探

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

Thymeleaf初探

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

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

<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等属性，下面是一个例子

<!-- 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参数处理，该语法避免使用字符串拼接，大大提高了可读性</li><li><code>@{...}</code>表达式中可以通过<code>{orderId}</code>访问Context中的<code>orderId</code>变量</li><li><code>@{/order}</code>是Context相关的相对路径，在渲染时会自动添加上当前Web应用的Context名字，假设context名字为app，那么结果应该是<code>/app/order</code></li></ul><h3 id="4">字符串替换</h3><p>很多时候可能我们只需要对一大段文字中的某一处地方进行替换，可以通过字符串拼接操作完成：</p><pre><code><span th:text="'Welcome to our application, ' +{user.name} + ‘!’”>

一种更简洁的方式是：
```
<span th:text="|Welcome to our application, ${user.name}!|">
```
当然这种形式限制比较多，|...|中只能包含变量表达式${...}</code>，不能包含其他常量、条件表达式等。</p><h3 id="5">运算符</h3><p>在表达式中可以使用各类算术运算符，例如+, -, *, /, %</p><pre><code>th:with="isEven=(${prodStat.count} % 2 == 0)"

逻辑运算符>, <, <=,>=，==,!=都可以使用，唯一需要注意的是使用<,>时需要用它的HTML转义符：
```
th:if="${prodStat.count} &gt; 1"

th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"
```
循环

渲染列表数据是一种非常常见的场景，例如现在有n条记录需要渲染成一个表格<table>，该数据集合必须是可以遍历的，使用th:each标签：
```
<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}"</code>意味着对集合变量<code>prods</code>进行遍历，循环变量是<code>prod</code>在循环体中可以通过表达式访问。</p><h2 id="7">条件求值</h2><h3 id="8">If/Unless</h3><p>Thymeleaf中使用<code>th:if</code>和<code>th:unless</code>属性进行条件判断，下面的例子中，<code><a></code>标签只有在<code>th:if</code>中条件成立时才显示：</p><pre><code><a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

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

Switch

Thymeleaf同样支持多路选择Switch结构：
```
<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可以用*表示：
```
<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
```
/*

 * 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)}
```
页面即原型

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

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

进一步阅读

Thymeleaf初探的更多相关文章

SpringBoot入门：新一代Java模板引擎Thymeleaf（理论）
Spring Boot 提供了spring-boot-starter-web来为Web开发予以支持,spring-boot-starter-web为我们提供了嵌入的Tomcat以及SpringMVC的 ...
thymeleaf 专题
Thymeleaf 之内置对象.定义变量.URL参数及标签自定义属性如标题所述,这篇文章主要讲述Thymeleaf中的内置对象(list解析.日期格式化.数字格式化等).定义变量.获取URL的参数 ...
springboot:Java模板引擎Thymeleaf介绍
Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎.类似JSP,Velocity,FreeMaker等,它也可以轻易的与Spring MVC等Web框架进行集成作为Web应用 ...
新一代Java模板引擎Thymeleaf
新一代Java模板引擎Thymeleaf-spring,thymeleaf,springboot,java 相关文章-天码营 https://www.tianmaying.com/tutorial/u ...
初探DispatcherServlet#doDispatch
初探DispatcherServlet#doDispatch 写在前面 SpringBoot其实就是SpringMVC的简化版本,对于request的处理流程大致是一样的, 都要经过Dispatche ...
初探领域驱动设计（2）Repository在DDD中的应用
概述上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...
CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探
CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...
spring boot(四)：thymeleaf使用详解
在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4. ...
从273二手车的M站点初探js模块化编程
前言这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

随机推荐

Rowlock、UPDLOCK
ROWLOCK 使用行级锁,而不使用粒度更粗的页级锁和表级锁. UPDLOCK 读取表时使用更新锁,而不使用共享锁,并将锁一直保留到语句或事务的结束.UPDLOCK 的优点是允许您读取数据(不阻塞 ...
Python3 Selenium自动化web测试 ==> 第六节 WebDriver高级应用 -- 操作web页面的滚动条
学习目的: 掌握页面元素定位以外的其他重要知识点. 正式步骤: 测试Python3代码 # -*- coding:utf-8 -*- from selenium import webdriver fr ...
自动化运维：（3）写一个简单的Shell脚本（案例）
一.需求 1.test.sh 脚本执行时候需要添加参数才能执行参数和功能详情如下: 参数执行效果 start 启动中... stop 关闭中... restart 重启中... * 脚本帮助信息. ...
Leetcode之动态规划（DP）专题-122. 买卖股票的最佳时机 II（Best Time to Buy and Sell Stock II）
Leetcode之动态规划(DP)专题-122. 买卖股票的最佳时机 II(Best Time to Buy and Sell Stock II) 股票问题: 121. 买卖股票的最佳时机 122. ...
shell-常用命令，重定向和文件包含
shell的知识点并不多,这里简单介绍一下常用的一些东西常用命令 echo 显示普通字符串 echo "test" 显示转义字符 echo "\"test\& ...
nRF5 SDK Bootloader and DFU moudles(2)
镜像的验证在执行设备固件更新之前,应验证新映像. 在传输实际固件(预验证)之前,可以检查某些信息(例如,兼容性). 其他信息,例如图像的散列,应在传输(验证后)后进行验证. Init packet ...
关于js中this指向的问题
this的绑定规则有4种默认绑定隐性绑定显性绑定 new绑定 this绑定优先级 new 绑定 > 显性绑定 > 隐性绑定 > 默认绑定 1.如果函数被new 修饰 this绑 ...
luoguP2634聪聪可可（点分治）
题目链接:https://www.luogu.org/problem/P2634 题意:给一颗树,求距离的模3为0的点对数量,注意(1,1)算一个点对,(1,2)和(2,1)算两个点对. 思路:和点分 ...
SQL Server中bcp命令的用法以及数据批量导入导出
原文:SQL Server中bcp命令的用法以及数据批量导入导出 1.bcp命令参数解析 bcp命令有许多参数,下面给出bcp命令参数的简要解析用法: bcp {dbtable | query} { ...
Linux系列：进阶之jdk、X window安装与使用
1.安装x window 分为两步: 1.安装 x window,执行指令yum groupinstall “X Window” 2.安装GNOME Desktop,执行指令yum groupinst ...

Thymeleaf初探

Thymeleaf初探

URL

循环

Switch

Utilities

`#dates`

`#strings`

页面即原型

进一步阅读

Thymeleaf初探的更多相关文章

随机推荐

热门专题