thymeleaf使用心得

thymeleaf使用心得

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

如:<html xmlns:th="none">

深入学习可以下载: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. 属性赋值

  1. 普通属性:在前加th:即可 如:<div th:id='12'> (为id属性赋值)
  2. 自定义属性:要用 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="none">

<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="none"
      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="none"
      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('/p/5dea7d70b42f/+ @{/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}"