Thymeleaf 学习

使用spring boot + thymeleaf 做前台页面

一、th简单表达式

1. ${...} 变量表达式
<input type="text" name="userName" value="Beyrl" th:value="${user.name}" />
上述代码为引用user对象的name属性值

2. *{...} 选择表达式
<div th:object="${session.user}">                                                                       
     <p>Nationality: <span th:text="*{nationality}">XXXX</span>.</p>    
</div>
选择表达式一般跟在th:object后 这是获取session里边的user  
   th:text后获取的是user里边的属性名

3. #{...} 消息文字表达式
<p th:utext="#{home.welcome}">Welcome to our grocery store!</p>
获取的是实体类的属性值

4. @{...} 链接url表达式
<a href="details.html" th:href="@{/webPage/details(orderId=${o.id})}">view</a>
@{...}支持绝对路径和相对路径。其中相对路径又支持上下文调用url和协议的引用
当URL为后台传入的参数时，代码如下
<img src="../../webPage/food/images/pizza.jpg" th:src="@{${path}}" alt="披萨" />

5.文字
    文字：'one text' , 'another text'
    数字： 1,2
    布尔： true,false
    空值： null

6.文本操作
    链接：+
    替换：|The name is ${name}|

        <a href="" th:href="@{|/name/${test.size()}|}">链接地址：</a> 
        //渲染后的结果 
        <a href="/name/3">链接地址：</a> 

7.数字操作
    二元操作：+，-，*，/，%
    一元操作：-（负）

8.布尔操作
    一元：and or
    二元：！，not

9.比较
    比较：>,<,>=.<=(gt,lt,ge,le)
    等于：==，！=（eq,ne）

10.条件
    if-then:(if)?(then)
    if-then-else:(if)?(then):(else)
    default:(value)?:(defaultvalue)

全部的标签
关键字	功能介绍	案例
th:id	替换id	<p th:text="${collect.description}">description</p>
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}"></div>
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:onclick="'getCollect()'"
th:each	属性赋值	<tr th:each="user,userStat:${users}"></tr>
th:if	判断条件	<a th:if="${userId == collect.userId}">
th:unless	和th:if判断相反	<a th:unless="${session.user != null}">Login</a>
th:href	链接地址	<a th:href="@{/login}" ></a>
th:switch	多重选择配合th:case 使用	<div th:switch="${user.role}">
th:case	th:switch的一个分支	<p th:case="'admin'">User is and administrator</p>
th:fragment	布局标签，定义一个代码片段，方便其他地方引用	<div th:fragment='alert'>
th:include	布局标签，替换内容到引入的文件	<head th:include="layout :: htmlhead" th:with="title='xx'" />
th:replace	布局标签，替换整个标签到引入的文件	<div th:replace="fragments/header :: title"></div>
th:selected	selected选择框选中	th:selected="(${xxx.id} == ${configObje.dd})"
th:src	图片类地址引入	<img class="img-responsice" alt="appp Logo" th:src="@{/img/logo.png}" />
th:inline	定义js脚本可以使用变量	<script type="text/javascript" th:action="@{/subscribe}">
th:remove	删除某个属性	<tr th:remove="all"> 1. all:删除包含标签和所有的孩子
th:attr	设置标签属性，多个属性可以用逗号分隔	比如：th:attr="src=@{/image/aa.jpg},title=#{logo}", 此标签不太优雅，一般用的比较少。

二、th常标用签

三、日期转换

猜你喜欢