最近搭建了基於的springboot的新項目，拋棄了jsp，使用了官方推薦的Thymeleaf(怎么讀？【taim】【li:f】)模板，在實際開發遇到了很多的坑，等項目告一段落，我再一一記錄一下，有交流的小伙伴歡迎加群：4060038
1.在進行each遍歷的時候,比如:
<tr th:each="unRequiredQuestions,iterStat: ${unRequiredQuestionsList}"> </tr>
並不會像<c:foreach>的那樣只遍歷標簽里面的內容,它會連tr標簽一起遍歷,假如tr標簽中有樣式,也會跟着一起遍歷,這樣就會有好多個帶樣式的tr導致樣式錯亂,解決辦法就是用無屬性的標簽span來循環tr里面的內容
即:
<tr> <span th:each="unRequiredQuestions,iterStat: ${unRequiredQuestionsList}"> </span> </tr>
2.解決Thymeleaf中ajax提交url相對路徑問題
和jsp一樣,Thymeleaf也有很多內置對象,百度~~
①ajax寫死url: localhost:8862/cache/cacheAnwserToxxxxxxx
②將端口號和ip變為動態獲取
springboot默認的html文件放在根目錄下templates文件夾下面,在下面新創建一個html文件
內容:
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <script type="text/javascript" th:inline="javascript"> /*<![CDATA[*/ var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/; function getBaseUrl() { $("#basePathUrl").val(basePath); var a = $("#basePathUrl").val(); return a; } /*]]>*/ </script> </head> <body> <!-- 引入url --> <input type="hidden" id="basePathUrl"/> </body> </html>
③然后在你需要用到url的頁面通過span標簽引入:
basepath.html文件在templates文件夾下
<!-- 獲取url --> <span th:include="basepath::html"></span>
④通過調用basePashUrl();方法來獲取url,無論在什么環境中都可以
例:
// 獲取baseUrl
var baseUrl = getBaseUrl();
$.ajax({
// 異步方式
url: baseUrl + '/question/commitQuestion',
async: true,
type: "post",
datatype: 'json',
data: {
"postData" : postData,
"realation" : realation
},
success: function (data) {
alert("保存成功...");
}
});
3. thymeleaf渲染layui.js的“col:[[]]”里面的內容失敗
這是因為"[["是thymeleaf的內置表達式,跟layui沖突了,應該這樣寫col-->
col:[
[
]
]
就ok了
4. 關於@{ }的問題：例如：<a th:href="${commons.permalink(article)}">，如果取出來的地址鏈接(www.nmyswls.com)沒有加上"http://"或者"https://"協議的話，導致報錯，因為thymeleaf默認會幫你加上域名和端口號(http://localhost:8080/www.nmyswls.com)，如果你想用${ }，那么取出來的內容僅寫資源名就可以了，不必帶域名和端口號。