Thymeleaf的基本语法

时间 2019-11-06

标签 thymeleaf 基本语法繁體版

原文原文链接

Thymeleaf 的基本用法

属于我的整理的文档，大部份内容来源自网络css

在这里咱们没有打算使用SpringMVC进行整合使用或者说跟Spring Boot 一块儿使用html

咱们在这里单独使用Servelet版本-算是为了给一些初学者提供部分代码前端

Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎，相似JSP，Velocity，FreeMaker等，它也能够轻易的与Spring MVC等Web框架进行集成做为Web应用的模板引擎。java

Thymeleaf最大的特色是可以直接在浏览器中打开并正确显示模板页面，而不须要启动整个Web应用，可是老是看到说其效率有点低程序员

Thymeleaf 在有网络和无网络的环境下皆可运行，即它可让美工在浏览器查看页面的静态效果，也可让程序员在服务器查看带数据的动态页面效果。这是因为它支持 html 原型，而后在 html 标签里增长额外的属性来达到模板+数据的展现方式。浏览器解释 html 时会忽略未定义的标签属性，因此 thymeleaf 的模板能够静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，能够直接套用模板实现JSTL、 OGNL表达式效果，避免天天套模板、改jstl、改标签的困扰。同时开发人员也能够扩展和建立自定义的方言。
复制代码

1.引入提示

在html页面中引入thymeleaf命名空间，即，此时在html模板文件中动态的属性使用th:命名空间修饰。spring

<html lang="en" xmlns:th="http://www.thymeleaf.org">
复制代码

这样才能够在其余标签里面使用th:*这样的语法.这是下面语法的前提.express

2.变量表达式(获取变量值)

<div th:text="'你是否读过，'+${session.book}+'!!'">
    同EL表达式有些类似的效果，若是有数据，被替换
    完成先后端分离效果(美工代码)
</div>
复制代码

代码分析：
1.能够看出获取变量值用$符号,对于javaBean的话使用变量名.属性名方式获取,这点和EL表达式同样
2.它经过标签中的th:text属性来填充该标签的一段内容，意思是$表达式只能写在th标签内部,否则不会生效,上面例子就是使用th:text标签的值替换div标签里面的值,至于div里面的原有的值只是为了给前端开发时作展现用的.这样的话很好的作到了先后端分离.意味着div标签中的内容会被表达式${session.book}的值所替代，不管模板中它的内容是什么，之因此在模板中“画蛇添足“地填充它的内容，彻底是为了它可以做为原型在浏览器中直接显示出来。
3.访问spring-mvc中model的属性，语法格式为“${}”，如${user.id}能够获取model里的user对象的id属性 
4.牛叉的循环<li th:each="book : ${books}" >
复制代码

3.URL表达式(引入URL)

重点！重点！重点！后端

引用静态资源文件(CSS使用th:href，js使用使用th:src)数组

href连接URL(使用th:href)浏览器

代码分析
1.最终解析的href为：    
	/seconddemo/    
	/seconddemo/usethymeleaf?name=Dear 相对路径，带一个参数   
	/seconddemo/usethymeleaf?name=Dear&alis=Dear 相对路径，带多个参数
	/seconddemo/usethymeleaf?name=Dear&alis=Dear 相对路径，带多个参数
	/seconddemo/usethymeleaf/Dear 相对路径，替换URL一个变量
	/seconddemo/usethymeleaf/Dear/Dear 相对路径，替换URL多个变量
2.URL最后的(name=${name})表示将括号内的内容做为URL参数处理，该语法避免使用字符串拼接，大大提升了可读性
3.@{/usethymeleaf}是Context相关的相对路径，在渲染时会自动添加上当前Web应用的Context名字，假设context名字为seconddemo，那么结果应该是/seconddemo/usethymeleaf，即URL中以”/“开头的路径(好比/usethymeleaf将会加上服务器地址和域名和应用cotextpath，造成完整的URL。
4.th:href属性修饰符:它将计算并替换使用href连接URL 值，并放入的href属性中。
5.th:href中能够直接使用静态地址

复制代码

4.选择或星号表达式

表达式很像变量表达式，不过它们用一个预先选择的对象来代替上下文变量容器(map)来执行*{customer.name}

<div th:object="${session.user}">
    <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
    <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
    <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
  </div>

//等价于
<div>
  <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
  <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
  <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
</div>
复制代码

1.若是不考虑上下文的状况下，二者没有区别；星号语法评估在选定对象上表达，而不是整个上下文，什么是选定对象？就是父标签的值。上面的*{title}表达式能够理解为${book.title}。(父对象)  
2.固然，美圆符号和星号语法能够混合使用

复制代码

小插曲：三和四的变量表达式、URL表达式所对应的属性均可以使用统一的方式：th.attr=“属性名=属性值”的方式来设置，参考第“七.设置属性值”部分

5.文字国际化表达式

j简单看一下就能够，文字国际化表达式容许咱们从一个外部文件获取区域文字信息(.properties)，用Key索引Value，还能够提供一组参数(可选).

#{main.title}    
#{message.entrycreated(${entryId})} 能够在模板文件中找到这样的表达式代码：    
<table>
    <th th:text="#{header.address.city}">
    <th th:text="#{header.address.country}">
</table>
复制代码

6. 表达式支持的语法

字面量（Literals）
- 文本文字（Text literals）: 'one text', 'Another one!',…
- 数字文本（Number literals）: 0, 34, 3.0, 12.3,…
- 布尔文本（Boolean literals）: true, false
- 空（Null literal）: null
- 文字标记（Literal tokens）: one , sometext

文本操做（Text operations）

字符串链接（String concatenation）: +

文本替换（Literal substitutions）: |The name is ${name}|

<div th:class="'content'">...</div>
<span th:text="|Welcome to our application, ${user.name}!|">
//Which is equivalent to:
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">
<span th:text="${onevar} + ' ' + |${twovar}, ${threevar}|">
复制代码

算术运算（Arithmetic operations）
- 二元运算符（Binary operators）: + , - , * , / , %
- 减号（Minus sign (unary operator)）: -
布尔操做（Boolean operations）
- Binary operators: and , or
- Boolean negation (unary operator): ! , not
比较和等价(Comparisons and equality)
- Comparators: > , < , >= , <= ( gt , lt , ge , le )
- Equality operators: == , != ( eq , ne )

条件运算符（Conditional operators）三元运算符

If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)

示例一：    
<h2 th:text="${expression} ? 'Hello' : 'Something else'"></h2>
示例二：       
<!-- IF CUSTOMER IS ANONYMOUS -->    
<div th:if="${customer.anonymous}">        
    <div>Welcome, Gues!</div>    
</div>    
<!-- ELSE -->    
<div th:unless="${customer.anonymous}">        
    <div th:text=" 'Hi,' + ${customer.name}">Hi, User</div>    
</div>
复制代码

Special tokens:
- No-Operation: _
switch

循环

渲染列表数据是一种很是常见的场景，例如如今有n条记录须要渲染成一个表格或li列表标签该数据集合必须是能够遍历的，使用th:each标签
```
代码分析：
循环，在html的标签中，加入th:each=“value:${list}”形式的属性，如能够迭代prods的数据 又如带状态变量的循环：
复制代码
```

利用状态变量判断：

7.设置属性值

1. th:attr 
	任何属性值，语法格式：th:attr="属性名=属性值,[属性名=属性值]" 
	属性值若是是使用表达式的话：一般有URL表达式@{}和变量表达式${}        
	但此标签语法不太优雅    
	示例：        
th:attr="action=@{/subscribe}" //固然也能够直接使用th:action        			
th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" //可直接使用th:src  
th:attr="value=#{subscribe.submit}"//可直接使用th:value        
<input type="checkbox" name="active" th:attr="checked=${user.active}"/>        
设置多个属性在同一时间,有两个特殊的属性能够这样设置： 
	th:alt-title 和 th:lang-xmllang        
	th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}"      
2.前置和后置添加属性值  
	th:attrappend 和 th:attrprepend        
	主要对class和style两个属性        
	class="btn" th:attrappend="class=${' ' + cssStyle}"        
	转换后：class="btn warning"      
3.还有两个特定的添加属性 
	th:classappend 和 th:styleappend        
	与上面的attrappend功能同样        
	class="row" th:classappend="${prodStat.odd}? 'odd'"          
	转换后：奇数行class="row odd"，偶数行class="row"

复制代码

8.内嵌变量Utilities

为了模板更加易用，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(dateVar, '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')}    
${#dates.createNow()}    
${#dates.createToday()}    
${#strings.isEmpty(name)}    
${#strings.arrayIsEmpty(nameArr)}    
${#strings.listIsEmpty(nameList)}    
${#strings.setIsEmpty(nameSet)}    
${#strings.startsWith(name,'Don')}                  
// also array*, list* and set*    
${#strings.endsWith(name,endingFragment)}           
// also array*, list* and set*    
${#strings.length(str)}     
${#strings.equals(str)}    
${#strings.equalsIgnoreCase(str)}    
${#strings.concat(str)}    
${#strings.concatReplaceNulls(str)}    
${#strings.randomAlphanumeric(count)}//产生随机字符串
复制代码

9.thymeleaf布局

10.附录

thymeleaf_3.0.5_中文参考手册提取码：emk0