用Thymeleaf在实际项目中遇到的坑
最近搭建了基于的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)，如果你想用${ }，那么取出来的内容仅写资源名就可以了，不必带域名和端口号。
