Thymeleaf 的简单语法和常用th标签

先说句有用的废话:
thymeleaf模板语法,都以 th 属性开头,如:

<span th:text="...">

一,thymeleaf-简单表达式

1.变量表达式
2.选择或星号表达式
3.文字国际化表达式
4.URL表达式
1,变量表达式

Thymeleaf模板引擎在进行模板渲染时,还会附带一个Context存放进行模板渲染的变量,在模板中定义的表达式本质上就是从Context中获取对应的变量的值

<p>Today is: <span th:text="${day}">2 November 2016</span>.</p>

假设day的值为2016年11月2日,那么渲染结果为:

<p>Today is: 2016112.</p>

注意 : 渲染后,模板中span值2 November 2016将被覆盖
2,选择(星号)表达式

可以简单理解为内层是对外层对象的引用

<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>

也可以混用,如下:

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

如何没有与th:object结合使用,*{}与 ${} 效果一样,因为其范围自动扩展到context。

3,URL表达式

URL表达式指的是把一个有用的上下文或会话信息添加到URL,这个过程经常被叫做URL重写。
Thymeleaf对于URL的处理是通过语法 @{…} 来处理的

<!— 绝对路径 —>
<!-- 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>

Thymeleaf 支持 相对路径 和 绝对路径
(orderId=${o.id}) 表示将括号内的内容作为URL参数处理
@{…} 表达式中可以通过 {orderId} 访问Context中的orderId变量
@{/order} 是Context相关的相对路径,在渲染时会自动添加上当前Web应用的Context名字,假设context名字为app,那么结果应该是 /app/order

4,文字国际化表达式

文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties)
使用Key-Value方式,还可以提供一组参数(可选).

.properties

#{main.title}
#{message.entrycreated(${entryId})}
模板引用:

<table>
    <th th:text="#{header.address.city}">...</th>
    <th th:text="#{header.address.country}">...</th>
</table>

二.thymeleaf-字面值
  1.文本文字:’one text’ , ‘Another one!’,…
  2.文字数量:0, 34, 3.0, 12.3,…
  3.布尔型常量:true, false
  4.空的文字:null
  5.文字标记:one, sometext, main,…

三:thymeleaf-文本处理
1.字符串拼接:+

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

2.文字替换:|The name is ${name}|

<span th:text="|Welcome to our application, ${user.name}!|">

相比以上两种方式都可以实现字符串合并,但是,|…|中只能包含变量表达式${…},不能包含其他常量、条件表达式等。

四.表达基本对象

1.#ctx:上下文对象

2.#vars:上下文变量

3.#locale:上下文语言环境

4.#httpServletRequest:(只有在Web上下文)HttpServletRequest对象

5.#httpSession:(只有在Web上下文)HttpSession对象。

例如:

<span th:text="${#locale.country}">US</span>.
th:text="${#calendars.format(today,'dd MMMM yyyy')}"

五,表达式预处理
表达式预处理,它被定义在_之间:
#{selection.${sel.code}}
${sel.code} 将先被执行,结果(假如是AAA)将被看做表达式的一部分被执行
结果 #{为selection.AAA}。

六,thymeleaf运算符
在表达式中可以使用各类算术运算符,例如+, -, *, /, %

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

逻辑运算符>, <, <=,>=,==,!=都可以使用
需要注意的是使用 > ,<, >=, <=时需要用它的HTML转义符(> gt; < lt; >= ge; gte; <= le; lte; == eq; != ne; neq;)

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

布尔运算符 and,or

七,thymeleaf循环
数据集合必须是可以遍历的,使用th:each标签:


  

Product list

NAME PRICE IN STOCK
Onions 2.41 yes

Return to home

被循环渲染的元素中加入th:each标签
th:each="prod : ${prods}" 对集合变量prods进行遍历,对象prod在循环体中可通过表达式访问。

八,thymeleaf条件求值
1, If/Unless
Thymeleaf中使用th:if和th:unless属性进行条件判断

设置标签只有在th:if中条件成立时才显示:

Login

th:unlessth:if相反,表达式条件不成立时显示内容。

2,Switch

多路选择Switch结构,默认属性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>

3.If-then-else: (if)?(then):else 三元运算符

三元运算控制class属性选择

 

三元运算嵌套


还可以省略else部分,当表达式结果为false,返回null,否则返回’alt’


    ...

4.If-then: (if) ? (then) ,省略了else部分,如果条件不成立,返回null

如果第一个表达式的计算结果为null,则取第二个表达式的结果

Age: 27.

等效于:

Age: 27.

条件表达式嵌套:

Name: Sebastian.

九,Thymeleaf-Utilities
Thymeleaf提供了套Utility对象,内置于Context中,可通过#直接访问:

  • #dates: java.util 的实用方法。对象:日期格式、组件提取等.
  • #calendars: 类似于#日期,但对于java.util。日历对象
  • #numbers: 格式化数字对象的实用方法。
  • #strings:字符串对象的实用方法:包含startsWith,将/附加等。
  • #objects: 实用方法的对象。
  • #bools: 布尔评价的实用方法。
  • #arrays: 数组的实用方法。
  • #lists: list集合。
  • #sets:set集合。
  • #maps: map集合。
  • #aggregates: 实用程序方法用于创建聚集在数组或集合.
  • #messages: 实用程序方法获取外部信息内部变量表达式,以同样的方式,因为他们将获得使用# {…}语法
  • #ids: 实用程序方法来处理可能重复的id属性(例如,由于迭代)。

常用th标签都有那些?

关键字 功能介绍 案例
th:id 替换id
th:text 文本替换

description

th:utext 支持html的文本替换

conten

th:object 替换对象
th:value 属性赋值
th:with 变量赋值运算
th:style 设置样式 th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
th:onclick 点击事件 th:onclick="'getCollect()'"
th:each 属性赋值 tr th:each="user,userStat:${users}">
th:if 判断条件
th:unless 和th:if判断相反 Login
th:href 链接地址 Login />
th:switch 多路选择 配合th:case 使用
th:case th:switch的一个分支

User is an administrator

th:fragment 布局标签,定义一个代码片段,方便其它地方引用
th:include 布局标签,替换内容到引入的文件 />
th:replace 布局标签,替换整个标签到引入的文件
th:selected selected选择框 选中 th:selected="(${xxx.id} == ${configObj.dd})"
th:src 图片类地址引入 App Logo
th:inline 定义js脚本可以使用变量

你可能感兴趣的:(thymeleaf,th:)