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)常單獨(dú)作為一個頁面然后插入到主頁面中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頁面報(bào)錯，寫成如下格式 所有的.前面加個?就行了，如${list?.user?.name}
3、select選項(xiàng)標(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ù)選框功能實(shí)現(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ù)選框功能的實(shí)現(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、實(shí)現(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項(xiàng)目中假設(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計(jì)數(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計(jì)數(shù)
11、a標(biāo)簽格式
<a th:href="@{/book/page(book=${bookId}, page=${pageNumber})}" rel="external nofollow" //其中book和page為攜帶的參數(shù)12、點(diǎn)擊事件
th:onclick="'javascript:openBox(\''+${curCabNo}+'\',\''+${box.no}+'\')'"13、script格式
<script th:inline="javascript" type = "text/javascript">
var flag = [[${tip}]];
</script>總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Spring Boot創(chuàng)建可執(zhí)行jar包的實(shí)例教程
這篇文章主要介紹了Spring Boot創(chuàng)建可執(zhí)行jar包的實(shí)例教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
大家應(yīng)該都有所體會，在很多實(shí)際的web應(yīng)用中，都有需要定時實(shí)現(xiàn)的服務(wù)，下面這篇文章主要給大家介紹了關(guān)于spring中定時器的使用教程，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06
IDEA解決@Slf4j中l(wèi)og報(bào)紅問題
在IntelliJ IDEA中使用log.info()時,如果出現(xiàn)錯誤,通常是因?yàn)槿鄙貺ombok插件,以下是解決方法：打開IntelliJ IDEA,進(jìn)入設(shè)置（File > Settings 或者 Ctrl+Alt+S）,在Plugins部分點(diǎn)擊Browse repositories,搜索Lombok并安裝,安裝完成后,問題通?？梢越鉀Q2024-12-12
SpringCloud客戶端的負(fù)載均衡Ribbon的實(shí)現(xiàn)
微服務(wù)架構(gòu)，不可避免的存在單個微服務(wù)有多個實(shí)例，這篇文章主要介紹了SpringCloud客戶端的負(fù)載均衡Ribbon的實(shí)現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
在本篇文章中，我們獎通過?MyBatis?Plus?來對一張表進(jìn)行?CRUD?操作，來看看是如何簡化我們開發(fā)的。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-12-12
這篇文章主要介紹了SpringMVC注解@CrossOrigin跨域問題詳解,跨域是瀏覽同源策略的造成,是瀏覽器對JavaScript施加的安全限制CORS是一種可以解決跨域問題的技術(shù),需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了Java經(jīng)典排序算法之歸并排序，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細(xì)介紹了javaweb實(shí)現(xiàn)注冊登錄頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Java調(diào)用阿里身份證實(shí)現(xiàn)驗(yàn)證接口
這篇文章主要為大家詳細(xì)介紹了Java如何調(diào)用阿里身份證實(shí)現(xiàn)驗(yàn)證接口，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以了解一下2023-06-06
攔截器Interceptor，是SpringMVC中的核心內(nèi)容，在SpringBoot中使用Interceptor，同時采用全注解開發(fā)，這篇文章主要介紹了在springboot中使用攔截器的步驟,需要的朋友可以參考下2022-01-01