Thymeleaf基础

最新推荐文章于 2024-09-13 23:32:49 发布

拥有翅膀的猿

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量181

点赞数

分类专栏： Thymeleaf 文章标签：前端

本文链接：https://blog.csdn.net/zeng_0825/article/details/106392755

版权

Thymeleaf 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Thymeleaf标准表达式语法：

变量表达式
选择或星号表达式
文字国际化表达式
URL表达式

变量表达式：${session.user.name}

选择（星号）表达式：用一个预先选择的对象来代替上下文变量容器（map）来执行：
*{customer：name}

文字国际化表达式
允许我们从一个外部文件获取区域文字信息.(properties),用Key索引Value，还可以提供一组参数（可选）
#{main.title}
#{message.entrycreated(${entryId})}

URL表达式
把一个有用的上下文或会话信息添加到URL，这个过程经常被叫做URL重写。
@{/order/list}
URL还可以设置参数：@{、order/details(id=${orderId})}
相对路径： @{../documents/report}

============================

变量表达式和星号表达式有什么区别吗？
- 如果不考虑上下文的情况下，两者没有区别；星号语法评估在选定对象上表达，而不是整个上下文。

<div th:object="${session.user}"> <p>Name: <span th:text="*{firstName}">xiaoge</span><p> <p>RelName: <span th:text="*{lastName}">zenghao</span></p> </div>

这完全等价于：

<div th:object="${session.user}"> <p>Name: <span th:text="${session.user.firstName}">xiaoge</span></P> <p>RelName: <span th:text="${session.user.lastName}">zenghao</span></p> </div>

当然美元符号可以和星号混合使用：

<div th:object="${session.user}"> <p>Name: <span th:text="${session.user.firstName}">xiaoge</span></P> <p>RealName: <span th:text="*{lastName}">zenghao</span></p> </div>

==================

表达式支持的语法：

文本文字

'one text' , 'Auonther one!'

数字文本

0 , 34 , 3.0 , 12.3

布尔文本

true , false

null

文本标记

one , sonetext , main

文本操作
- 字符串连接

- 文本替换

|The name is ${name}|

算术运算
- 二元运算符

+ ， - ， * ， / ， %

- 减号（单目运算符）

布尔操作
- 二元运算符

and , or

- 布尔否定（一元运算符）

! , not

比较和等价
- 比较

> , < , >= , <= , (gt,lt,ge,le)

- 等值运算符

== , != , (eq , ne)

条件运算符
- If-then:

(if) ? (then)

- If-then-else

(if) ? (then) : (else)

- Default:(value)?:

(defaultvalue)

组合使用：

'User is of type' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknow'))

=============

常用的th标签：

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

=======================

几种常用的使用方法

复制、字符串拼接

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

条件判断If/Unless

< a th:if="${myself =='yes'}" > </i> </a> <a th:unless="${session.user != null} th：href="@{/login}"> Login</a>

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="${coolect.description}">@mdo</td> <td th:text="${iterStat.index}">index</td> </tr>