thymeleaf使用心得

使用thymeleaf必须在HTML标签里加 xmlns:th="http://www.thymeleaf.org">

如：<html xmlns:th="http://www.thymeleaf.org">

深入学习可以下载：Thymeleaf中文参考手册

Maven

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>net.sourceforge.nekohtml</groupId>
            <artifactId>nekohtml</artifactId>
            <version>1.9.22</version>
        </dependency>

基础

1. 属性赋值

普通属性：在前加th:即可如：<div th:id='12'> (为id属性赋值)
自定义属性：要用 th:attr 如：<div th:attr="myParam='username'">

2. 获取后端传入对象属性

用${对象.属性}即可 ，不过若对线为空时就会报错，所以在后端渲染数据时最好做出判断，为null就new一个
对象。如 <input type='text' th:value='user.username'>

3. 逻辑语句

1.条件判断

th:if 、 th:unless
是相反的在if这边为true的在unless就会为false

写法：

<th:block th:if="${user.username eq 'admin'}"></th:block><br>

也可以用其他标签如：<a th:if="${user.username eq 'admin'}"></a> 如果判断为false的话这个a标签就不会显示

条件赋值判断

th:test = "${user.name eq 'admin'}?'管理员','游客'"

th:test = "${user.name}?:${other.name}"//字有就显示没有就显示后面的等同于
th:test = "${user.name}?${user.name}:${other.name}"

2. 循环语句

th:each="prod,iterStat : ${prods}"

其中iterStat可以获取到状态属性，如iterStat.index 获取迭代下标（0,1,2...）
iterStat 也可不写，像th:each="prod : ${prods}" 不写的话默认是别名加Stat，如：prodStat。

用模板拼凑页面

maven 引入

        <dependency>
            <groupId>nz.net.ultraq.thymeleaf</groupId>
            <artifactId>thymeleaf-layout-dialect</artifactId>
            <version>2.2.2</version>
        </dependency>

1.外部页面引入页面

//底部
<html xmlns:th="http://www.thymeleaf.org">

<div th:fragment="footer" id="footer" class="clear">
    <p>Copyright © 2017</p>
</div>

</html>



//页面想要引用底部
<div th:replace ="layouts/template/footer :: footer"></div>

2.内部页面引入外部页面

//内部页面
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layouts/table-template">//要引入的外部界面的路径


    <div layout:fragment="content">
            ...
            内容
            ...
    </div>
</html>

//要引入的外部界面
//<!DOCTYPE html>（如果用了h5的声明就有可能出现样式问题）
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
      
       <div layout:fragment="content"></div> //上面的内容就会出现在这里
      
</html>

语法表

1.基本语法

语法	功能介绍	实例
th:attr	给标签的属性赋值	<div th:attr="id='666',value='999'">
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}">conten</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:onclick=" 'getCollect()'"
th:each	循环	<tr th:each="item:${list}">
th:if	判断条件	<a th:if="${userld == collect.userid}" >
th:unless	和th:if判断相反	<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:href	链接地址	<a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:switch	多路选择配合th:case 使用被指定为默认选项用th:case="*"；相当于default	<div th:switch="${user.role}">
th:case	th:switch的一个分支	<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='xx'"></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="@{/subscribe}">
	table遍历	<tr th:each="item: ${list}"><br>\<td th:text="$ {item.tName}"></td> <td th:text=" ${item.tAge}">\</td><br>\<td th:text="$ {item.tAddress}"></td> </tr>
	下拉菜单遍历	<select class="name"> <option>请选择</option> <option th:each="item: ${list}" th:value="$ {item.tId}" th:text="${item.tName}" > </option> </select>
	日期格式化	<span th:text="${#dates.format(date,'yyyy-MM-dd hh:mm:ss')}">></span>
	三目运算符	<td th:text="${name=='zs'}? 张三 : zs"></td>
gt	大于(>)
ge	大于等于(>=)
eq	等于(==)
lt	小于(<)
le	小于等于(<=)
ne	不等于(!=)

2.内置对象常用语法

作用	实例	说明
日期格式化	<span th:text="${#dates.format(curDate, 'yyyy-MM-dd HH:mm:ss')}"></span>	使用内置对象dates的format函数即可对日期进行格式化，在format函数中，第一个参数是日期对象，对二两个参数为日期格式（规则跟SimpleDateFormat一样）
数字格式化	<span th:text="${#numbers.formatDecimal(money, 0, 2)}"></span>	此示例表示保留两位小数位，整数位自动
	<span th:text="${#numbers.formatDecimal(money, 3, 2)}"></span>	此示例表示保留两位小数位，3位整数位（不够的前加0）
获取列表长度	<span th:text="${#lists.size(datas)}"></span>	使用#lists.size来获取List的长度。
获取URL参数值	<span th:text="${#httpServletRequest.getParameter('page')}"></span>	当访问http://localhost:1105/index?page=5时页面将会得到page对应的值：5
定义变量	<div th:with="curPage= ${#httpServletRequest.getParameter('page')}"><br>\<h3>当前页码：\<span th:text="$ {curPage}"></span></h3> </div>	当访问http://localhost:1105/index?page=5时，页面将显示：当前页码：5，说明用th:with来定义变量，多个用,号隔开，使用范围在当前标签内。
自定义标签属性	<span th:attr="myDate= ${#dates.format(curDate, 'yyyy-MM-dd')},myMoney=$ {money}"></span>	在页面上查看源代码可以看到：<span myMoney="91.6059494319957" myDate="2016-31-02"></span>，说明自定义属性用：th:attr，多个属性用,隔开。

3.字符串操作

作用	实例
判断是否为空	${#strings.isEmpty(name)}<br>$ {#strings.arrayIsEmpty(nameArr)} ${#strings.listIsEmpty(nameList)}<br>$ {#strings.setIsEmpty(nameSet)}
是否包含	${#strings.contains(name,'ez')}<br>$ {#strings.containsIgnoreCase(name,'ez')}
以xx开始，以xx结束	${#strings.startsWith(name,'Don')}<br>$ {#strings.endsWith(name,endingFragment)}
	${#strings.indexOf(name,frag)}<br>$ {#strings.substring(name,3,5)} ${#strings.substringAfter(name,prefix)}<br>$ {#strings.substringBefore(name,suffix)} ${#strings.replace(name,'las','ler')}
去空格	${#strings.trim(str)}
获取长度	${#strings.length(str)}
是否相等	${#strings.equals(str)}
字符串转int(转成3位)	${#numbers.formatInteger(num, 3)<br>//判断大于4<br>th:if="$ {#numbers.formatInteger( num, 3) > #numbers.formatInteger('4',3) }"

踩过的坑

（1）路径要从templates下算起

（2）背景图片的添加

<li th:attr="style='background:url('+ @{/images/login_bg2.jpg} + ');background-size:cover;background-color: #074B7B;background-size: 100%;'">

（3）iframe内嵌页面height值太小导致的页面偏窄

解决办法：删除掉最外层页面的h5声明<!DOCTYPE html>

（4）引入spring security，

要先在maven中引入

 <dependency>
     <groupId>org.thymeleaf.extras</groupId>
     <artifactId>thymeleaf-extras-springsecurity4</artifactId>
 </dependency>

显示用户信息

<span th:text="${#authentication.principal.username}"> 管理员</span>

根据角色判别,==注意角色名必须要是以“ROLE_”开头，要不然识别不了==

<div th:if="${#authorization.expression('hasRole(''ROLE_ADMIN'')')}">
    管理员可见
</div>

<div th:if="${#authorization.expression('hasRole(''ROLE_BANK'')')}">
    银行账户可见
</div>

获取url上面的参数，如 /login?error

<div class="layui-form-item" th:if="${#httpServletRequest.getParameter('error')} " style="color: red;text-align: center">账号或密码不正确</div>

(5) 模板中标签必须要有结束符的解决办法

在application.yml添加

//使用非严格的html5标签
spring.thymeleaf.mode=LEGACYHTML5

maven 添加依赖

<dependency>
    <groupId>net.sourceforge.nekohtml</groupId>
    <artifactId>nekohtml</artifactId>
    <version>1.9.22</version>
</dependency>

(6) 拼接俩个参数的类容，其中有null时的处理办法

//在三目运算外加（）
th:text="(${item?.description eq null}?'': ${item?.description})  +${item?.phone}"

（7）获取动态字段的值， $里面嵌入$

//需要在外部  打双下滑线   __${}__ 预编译
//如：${projectData.__${child.name}__}
 <th:block th:each="child:${group.children}">
        <tr>
            <td style="border:0" class="s-dm-title" th:text="${child.label}">

            </td>
            <td style="border:0" class="s-dm-content" th:text="${projectData.__${child.name}__}">

            </td>

        </tr>
        </th:block>