java-thymeleaf的使用方式
java-thymeleaf的使用
首先thymeleaf的引入
<html lang="en" xmlns:th="http://www.thymeleaf.org"> 引入依賴 <!--使用thymeleaf--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
常用語法
1、頁面插入，比如翻頁功能就經(jīng)常單獨作為一個頁面然后插入到主頁面中page.html中最外面加個div標(biāo)簽包住(使用fragment標(biāo)記)
<div th:fragment="flag"> <table width="95%" align="center" cellpadding="0" cellspacing="0"> </div> 主頁面中插入 <div th:insert="/common/page :: flag"></div> 意思是插入page頁面中的被包住的flag那一段
2、 為了防止user以及name為null頁面報錯，寫成如下格式 所有的.前面加個?就行了，如${list?.user?.name}
3、select選項標(biāo)簽
<select name="film_type_id" id="film_type_id" style="width:155px">
<option value="0">請選擇</option>
<option th:selected="${option.film_type_id} == ${film?.film_type_id}" th:each="option : ${filmTypes}" th:value="${option.film_type_id}" th:text="${option.film_type_name}"></option>
</select>- th:selected用于編輯頁面數(shù)據(jù)回顯
- th:each是遍歷filmTypes，option是遍歷出的單值
- th:value是提交上去的數(shù)據(jù)
- th:text是顯示在頁面上的數(shù)據(jù)
4、復(fù)選框功能實現(xiàn)
<span th:each="subString : ${'09:00、11:00、13:00、15:00、17:00、19:00、 21:00、23:00'.split('、')}">
<input type="hidden" id="film_scene" name="film_scene" th:value="${film?.film_scene}" />
<input th:value="${subString}" type="checkbox" name="film_scenes" th:checked=="${#strings.contains(film.film_scene==null?'1':film.film_scene, subString)}"/><label>[[${subString}]]</label>
</span>這個是圖片中 復(fù)選框功能的實現(xiàn)，th:each遍歷的數(shù)據(jù)是自己分割的，th:checked也是用于編輯頁面數(shù)據(jù)回顯，""中的判斷結(jié)果為true則選中，KaTeX parse error: Expected '}', got '#' at position 2: {#?strings.contain…{}]]常用于標(biāo)簽之間比如[[subString]]</label>,[[{}]]判空如下
<span>[[${film!=null && film.film_id!=0?'編輯':'添加'}]]電影</span>5、if判斷
<div th:if="${film!=null && film.film_id!=0}">
<input type="button" id="editBtn" Class="btnstyle" value="編 輯"/>
</div>這個是替換Jsp中的if標(biāo)簽
6、實現(xiàn)根據(jù)傳遞過來的film參數(shù)是否為null動態(tài)調(diào)整標(biāo)簽為 添加/編輯 頁面標(biāo)題功能
- 兩種，其一：直接在th:text里面判斷
<TD class="edittitle" th:text="${film!=null && film.film_id!=0?'編輯':'添加'}+'電影'"></TD>- 其二：使用th:if和th:unless，這兩個是個組合
<TD class="edittitle" th:if="${film!=null && film.film_id!=0}" th:text="編輯電影"></TD>
<TD class="edittitle" th:unless="${film!=null && film.film_id!=0}" th:text="添加電影"></TD>7、標(biāo)簽
<td align="left" colspan="3">
<img id="userImg" th:src="${('/upload/'+film.film_pic)}" width="70" height="80" style="border:0px;"/>
<span id="op" style="display:none"><img src="images/image/loading004.gif" height="80" /></span>
</td>th:src加載圖片，這里的/upload是虛擬路徑，映射到F盤的某個圖片文件，film是接收的參數(shù)
下面還有一個img加載的是本地的圖片就沒有必要用thymeleaf，要接收參數(shù)時用
8、iframe語法
將整個Html頁面引入到另一個html中去
<iframe name="uploadPage" th:replace="sys/uploadImg :: html" width="100%" height="50" marginheight="0" marginwidth="0" scrolling="no" frameborder="0"></iframe>
意思是將uploadImg.html整個html引入，不需要在uploadImg.html中標(biāo)記fragment
但是這樣引入是有些不好的地方(具體可見下一篇)，當(dāng)然一般情況下沒問題，建議用以下方法：
springboot項目中假設(shè)靜態(tài)資源指向static文件夾，直接將要引入的頁面放在static文件夾下，然后代碼如下
<iframe name="uploadPage" src="/uploadImg.html" width="100%" height="50" marginheight="0" marginwidth="0" scrolling="no" frameborder="0"></iframe>
意思是在resources根目錄下開始找uploadImg.html
9、${#lists.size()}內(nèi)置對象函數(shù)，判斷傳過來的list參數(shù)
<div th:if="${#lists.size(films)>0 && films!=null}"></div>10、遍歷中的count計數(shù)器
<tr class="list0" onmouseover="tr_mouseover(this)" onmouseout="tr_mouseout(this)" th:each="m,count:${films}">
<td width="" align="center"><input type="checkbox" name="chkid" th:value="${m.film_id}" style="vertical-align:text-bottom;"/></td>
<td width="" align="center">[[${count.index+1}]]</td>
<td width="" align="center">[[${m.film_name}]]</td>
<td width="" align="center">[[${m.film_type_name}]]</td>
<td width="" align="center">[[${m.film_actors}]]</td>
<td width="" align="center">￥[[${m.film_price}]]</td>
<td width="" align="center">[[${m.film_date}]]</td>
<td width="" align="center">[[${m.film_scene}]]</td>
<td width="" align="center">[[${m.film_room}]]</td>
<td width="" align="center">[[${m.film_score}]]</td>
<td width="" align="center">th:each=“m,count:${films}” 其中，m為遍歷單值，count計數(shù)
11、a標(biāo)簽格式
<a th:href="@{/book/page(book=${bookId}, page=${pageNumber})}" rel="external nofollow" //其中book和page為攜帶的參數(shù)12、點擊事件
th:onclick="'javascript:openBox(\''+${curCabNo}+'\',\''+${box.no}+'\')'"13、script格式
<script th:inline="javascript" type = "text/javascript">
var flag = [[${tip}]];
</script>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
SpringBoot三種方法接口返回日期格式化小結(jié)
本文介紹了三種在Spring Boot中格式化接口返回日期的方法,包含使用@JsonFormat注解、全局配置JsonConfig、以及在yml文件中配置時區(qū),具有一定的參考價值,感興趣的可以了解一下2025-01-01
Java線程局部變量ThreadLocal的核心原理與正確實踐指南
ThreadLocal是一個強大而精巧的工具,它通過線程隔離數(shù)據(jù)的方式,優(yōu)雅地解決了特定場景下的線程安全問題,本文給大家介紹Java線程局部變量ThreadLocal的核心原理與正確實踐指南,感興趣的朋友跟隨小編一起看看吧2025-11-11
LocalDateTime 和 Date 是 Java 中處理日期和時間的兩種不同的類,在 JDK8 中引入了 java.time 包,這篇文章主要介紹了SpringBoot整合LocalDateTime的過程,需要的朋友可以參考下2024-08-08
今天小編就為大家分享一篇java判斷字符串相等的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-07-07
springMVC 用戶登錄權(quán)限驗證實現(xiàn)過程解析
這篇文章主要介紹了springMVC 用戶登錄權(quán)限驗證實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
Java中利用BitMap位圖實現(xiàn)海量級數(shù)據(jù)去重
有許多方法可以用來去重,比如使用列表、集合等等,但這些方法通常只適用于一般情況,然而,當(dāng)涉及到大量數(shù)據(jù)去重時,常見的 Java Set、List,甚至是 Java 8 的新特性 Stream 流等方式就顯得不太合適了,本文給大家介紹了Java中利用BitMap位圖實現(xiàn)海量級數(shù)據(jù)去重2024-04-04
SpringBoot+MyBatisPlus+Vue 前后端分離項目快速搭建過程(前端篇)
這篇文章主要介紹了SpringBoot+MyBatisPlus+Vue 前后端分離項目快速搭建過程(前端篇),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-05-05
在現(xiàn)代軟件開發(fā)中,多線程編程已成為提高程序性能和響應(yīng)速度的重要手段,Java提供了豐富的多線程支持,使得在Java中實現(xiàn)并發(fā)操作變得相對簡單,本文將深入探討Java多線程編程的基本概念、常見問題和最佳實踐,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了使用Java注解模擬spring ioc容器過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
Spring?WebFlux?與?WebClient?使用指南及最佳實踐
WebClient是Spring WebFlux模塊提供的非阻塞、響應(yīng)式HTTP客戶端,基于Project Reactor實現(xiàn),適用于高并發(fā)場景spring?webclient,本文給大家介紹Spring?WebFlux與WebClient使用指南及最佳實踐,感興趣的朋友一起看看吧2025-07-07