Thymeleaf組件 · JAVA

[TOC] # 簡介 spring boot項目只有src目錄，沒有webapp目錄，會將靜態訪問(html/圖片等)映射到其自動配置的靜態目錄，如下 ~~~ /static /public /resources /META-INF/resources ~~~ 比如，在resources建立一個static目錄和index.htm靜態文件，訪問地址?[http://localhost:8080/index.html](http://localhost:8080/index.html) **配置** 動態頁面需要先請求服務器，訪問后臺應用程序，然后再轉向到頁面，比如訪問JSP。spring boot建議不要使用JSP，默認使用Thymeleaf來做動態頁面。在pom.xml中添加Thymeleaf組件 ~~~ <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> ~~~ ~~~ #開啟模板緩存（默認值：true） spring.thymeleaf.cache=false #Check that the template exists before rendering it. spring.thymeleaf.check-template=true #檢查模板位置是否正確（默認值:true） spring.thymeleaf.check-template-location=true #Content-Type的值（默認值：text/html） spring.thymeleaf.servlet.content-type=text/html #開啟MVC Thymeleaf視圖解析（默認值：true） spring.thymeleaf.enabled=true #模板編碼 spring.thymeleaf.encoding=UTF-8 #要被排除在解析之外的視圖名稱列表，用逗號分隔 spring.thymeleaf.excluded-view-names= #要運用于模板之上的模板模式。另見StandardTemplate-ModeHandlers(默認值：HTML5) spring.thymeleaf.mode=HTML5 #在構建URL時添加到視圖名稱前的前綴（默認值：classpath:/templates/） spring.thymeleaf.prefix=classpath:/templates/ #在構建URL時添加到視圖名稱后的后綴（默認值：.html）,控制器那return也要加 spring.thymeleaf.suffix=.html #Thymeleaf模板解析器在解析器鏈中的順序。默認情況下，它排第一位。順序從1開始，只有在定義了額外的TemplateResolver Bean時才需要設置這個屬性。 spring.thymeleaf.template-resolver-order= #可解析的視圖名稱列表，用逗號分隔 spring.thymeleaf.view-names= ~~~ **控制器** 這邊只能用`@Controller`這個注解 ~~~ import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; @Controller public class TemplatesController { @GetMapping("/abc") public String test(Model model) { //邏輯處理 model.addAttribute("say","歡迎歡迎,熱烈歡迎"); return "index.html"; //配置了 spring.thymeleaf.suffix=.html } } ~~~ **頁面** `spring.thymeleaf.prefix=classpath:/templates/` 這個路徑下注意標簽: `xmlns:th="http://www.thymeleaf.org"` ~~~ <!DOCTYPE html> <html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>第一個HTML頁面</title> </head> <body> <div>  <p th:text="${say}"></p> </div> </body> </html> ~~~ # js讀取 **script標簽中 th:inline 一定不能少** ~~~ <script th:inline="javascript" type="text/javascript"> var message = [[${say}]]; console.log(message); </script> ~~~ # 常用標簽 ~~~javascript 關鍵字　　功能介紹　　　　案例 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="user,userStat:${users}"> th:if 判斷條件　　　　　　　　<a th:if="${userId == 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 使用 <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}"> th:remove 刪除某個屬性　　　　<tr th:remove="all"> 　　　　　　　　　　　　　　　　　　　　1.all:刪除包含標簽和所有的孩子。　　　　　　　　　　　　　　　　　　　　2.body:不包含標記刪除,但刪除其所有的孩子。　　　　　　　　　　　　　　　　　　　　3.tag:包含標記的刪除,但不刪除它的孩子。　　　　　　　　　　　　　　　　　　　　4.all-but-first:刪除所有包含標簽的孩子,除了第一個。　　　　　　　　　　　　　　　　　　　　5.none:什么也不做。這個值是有用的動態評估。 th:attr 設置標簽屬性，多個屬性可以用逗號分隔比如 th:attr="src=@{/image/aa.jpg},title=#{logo}"，此標簽不太優雅，一般用的比較少。 ~~~ ## th:text 可對表達式或變量求值，并將結果顯示在其被包含的 html 標簽體內替換原有html文本。文本鏈接: 用 "+" 符號，若是變量表達式也可以用“|”符號 ~~~javascript <p th:text="#{home.welcome}">Welcome to our grocery store!</p> ~~~ 局限：只能在html5中使用 ~~~javascript <p data-th-text="#{home.welcome}">Welcome to our grocery store!</p> ~~~ `th：text`屬性，他聲明設置表達式的值，并使表達式返回的值來填充標簽內容，替換或設置標簽內部的內容 `#{home.welcome}`表達式，一個標準的表達式語法，指出在模板中，th:text屬性所對應Message的key，即使用home.welcome對應的value替換現有內容 ## `th:utext`（非轉義文本：`unescaped text`） (想要輸出轉義字符效果) ~~~javascript home.welcome=Welcome to our <b>fantastic</b> grocery store! ~~~ 執行此模板，默認使用來解析，結果為： ~~~javascript <p>Welcome to our <b>fantastic</b> grocery store!</p> ~~~ 解決方案 ~~~javascript <p th:utext="#{home.welcome}">Welcome to our grocery store!</p> ~~~ 等效于html：`Welcome to our fantastic grocery store!` ## th:href鏈接 `@{xxx}` ：鏈接url的表達式 ~~~javascript <a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a> ~~~ # 頁面取值 **循環取值：** ~~~ <tr th:each="list,stat : ${accountList}"> <td th:text="${stat.count}"></td> //序號，1，2，3，4，5 <td th:text="${list.account}"></td> <td th:text="${list.name}"></td> <td th:text="${list.password}"></td> <td th:text="${list.accountType}"></td> <td th:text="${list.tel}"></td> </tr> ~~~ **循環中狀態，男女，為0,1時，改為中文** status為0，1時 ~~~ <td th:switch="${status}"> <span th:case="0">否</span> <span th:case="1">是</span> </td> ~~~ ## if條件判斷 Thymeleaf 中使?用 th:if 和 th:unless 屬性進?行行條件判斷，在下?面的例例?子中， `<a>` 標簽只有在 th:if 中條件成立時才顯示: ~~~ <a th:if="${flag == 'yes'}" th:href="@{http://favorites.ren/}"> home </a> <a th:unless="${flag != 'no'}" th:href="@{http://www.ityouknow.com/}" >ityouknow</ a> ~~~ `th:unless` 與 `th:if` 恰好相反，只有表達式中的條件不成立,才會顯示其內容 ## for循環 ~~~ <h1>for 循環</h1> <table> <tr th:each="user,iterStat : ${users}"> <td th:text="${user.name}">neo</td> <td th:text="${user.age}">6</td> <td th:text="${user.pass}">213</td> <td th:text="${iterStat.index}">index</td> </tr> </table> ~~~ iterStat 稱作狀態變量量，屬性有: * index，當前迭代對象的 index(從 0 開始計算); * count，當前迭代對象的 index(從 1 開始計算); * size，被迭代對象的?大?小; * current，當前迭代變量量; * even/odd，布爾值，當前循環是否是偶數/奇數(從 0 開始計算); * first，布爾值，當前循環是否是第?一個; * last, 布爾值,當前循環是否是最后一個 ## 一般字符串取值 ~~~ <td th:text="${list.account}"></td> <td>[[${list.account}]]</td> <span th:text="${name}></span> <span>[[${name}]]</span> ~~~ ## 標簽屬性取值 input標簽的value值，id取值，屬性取值前面都加th: ~~~ <input type="text" name="adminname" th:value="${adminname}" th:id="${id}"> ~~~ ## 標簽循環標簽循環，以及循環選中，標簽屬性取值 ~~~ <ul> <li id="rolehtml"> <span th:each="list:${rolelist}"><input type="checkbox" th:checked="${list.remark1 eq 'checked'}" name="menuId" th:data-id="${list.id}" th:id="${list.id}" th:value="${list.id}" ><label th:for="${list.id}" th:text="${list.rolename}" class="qx-lable">值111</lable></span> </li> </ul> ~~~ ~~~ <select name="compId" id="compId"> <option th:each="list:${listc}" th:value="${list.compId}" th:selected="${admin.compId eq list.compId}" th:text="${list.compName }"></option> </select> ~~~ ## select選中標簽循環選中參考上面 ~~~ <select class="form-control" id="flag" name="flag"> <option value="0" th:selected="${admin.flag==0}">否</option> <option value="1" th:selected="${admin.flag==1}">是</option> </select> ~~~ ## js取值 ~~~ <script type="text/javascript"> var num = [[${num}]]; <script> ~~~ ## 字符串處理 **替換金額最后的.0** ~~~ <td th:text="${#strings.replace(user.loanmoney,'.0','')}">金額(萬元)</td> <td >[[${#strings.replace(user.loanmoney,'.0','')}]] 金額(萬元)</td> ~~~ **截取字符串** 將電話號碼18360554400顯示為183\*\*\*\*4400 ~~~ <td>[[${#strings.substring(userphone,0,3)}]]<span>****</span>[[${#strings.substring(userphone,7,11)}]] </td> ~~~ **if判斷** ~~~ <tr th:if="${pageInfoSize eq 0}"> <td colspan="12">沒有查詢相關記錄</td> </tr> ~~~ **checkbox選中** ~~~ <input type="checkbox" th:checked="${q.remark eq 'checked'}" name="remark1" id="z1" th:value="${}"> ~~~ **字符串拼接** ~~~ <span th:text="'Welcome to our application, ' + ${userName} + '!'"></span> ~~~ 字符串串拼接還有另外?一種簡潔的寫法: ~~~ <span th:text="|Welcome to our application, ${userName} !|"></span> ~~~ ## URL URL 在 Web 應?用模板中占據著?十分重要的地位，需要特別注意的是 Thymeleaf 對于 URL 的處理理是通過語法 @{...} 來處理理的。如果需要 Thymeleaf 對 URL 進?行行渲染，那么務必使?用 th:href、th:src 等屬性，下?面是?一個例例?子: ~~~ <a th:href="@{http://www.ityouknow.com/{type}(type=${type})}">link1</a> <a th:href="@{http://www.ityouknow.com/{pageId}/can-use-springcloud.html(pageId=${ pageId})}">view</a> ~~~ 也可以使?用 `@{...}` 設置背景: ~~~ <div th:style="'background:url(' + @{${img url}} + ');'"> ~~~ 幾點說明: * 上例例中 URL 最后的 `(pageId=${pageId}) `表示將括號內的內容作為 URL 參數處理理，該語法避免使 ?用字符串串拼接，?大提?高了了可讀性; * `@{...}` 表達式中可以通過{pageId}訪問Context中的pageId變量 ## 三目運算符在表單標簽中顯示內容使?用: `th:value="${age gt 30 ? '中年年':'年年輕'}" `表示如果 age ?大于 30 則顯示中年年，否則顯示年年輕。 * `gt:great than(?大于) ` * `ge:great equal(?大于等于)` * `eq:equal(等于)` * `lt:less than(?小于) ` * `le:less equal(?小于等于) ` * `ne:not equal(不不等于)` 結合三?目運算也可以將上?面的 if else 改成這樣: ~~~ <a th:if="${flag eq 'yes'}" th:href="@{http://favorites.ren/}"> favorites </a> ~~~ ## switch/case ~~~ <div th:switch="${sex}"> <p th:case="'woman'">她是?一個姑娘...</p> <p th:case="'man'">這是?一個爺們!</p>  <p th:case="*">未知性別的?一個家伙。</p> </div> ~~~ ## 傳遞list 我們都知道如果傳入的是一個list集合，前端就必須要展示list集合的屬性。 ~~~ public String index(Model model){ List<Student> list = ssi.findStudentByAge(15); model.addAttribute("s",list) return "index"; } ~~~ ~~~ <table th:each="i:${s}"> <tr > <td>學生Id</td> <td th:text="${i.id}"></td> </tr> <tr > <td>學生姓名</td> <td th:text="${i.name}"></td> </tr> <tr > <td>學生分數</td> <td th:text="${i.score}"></td> </tr> <tr > <td>教師建議</td> <td th:text="${i.suggestion}"></td> </tr> </table> ~~~ ## 傳遞對象 ~~~ public String index(Model model){ Student students = ssi.findStudentById(201713140001); model.addAttribute("s",students); return "index"; } ~~~ ~~~ <table th:each="i:${s}"> <tr > <td>學生Id</td> <td th:text="${i.getId(}"></td> </tr> <tr > <td>學生姓名</td> <td th:text="${i.getName()}"></td> </tr> <tr > <td>學生分數</td> <td th:text="${i.getScore()}"></td> </tr> <tr > <td>教師建議</td> <td th:text="${i.getSuggestion}"></td> </tr> </table> ~~~ # 在IDEA報紅色在IDEA中寫Thymeleaf的語法，經常會遇到IDEA提示Thymeleaf語法錯誤，我推薦三個方法解決。 ## 第一個方法：idea設置一勞永逸的，在File->Settings->Editor->inspections右邊找到Thymeleaf下的Expression variables validation（當然也可以搜索） ![](https://img.kancloud.cn/8c/ae/8caea3be714aff4d9575d5e89fadcf6a_679x534.png) ## 第二個方法：suppress ~~~ 在 <!DOCTYPE html> 下加上  ~~~ ~~~ <!DOCTYPE html>  ~~~ ## 第三個方法：寫注釋 ~~~  <p th:text="${say}"></p> ~~~