用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),如果你想用${ },那么取出来的内容仅写资源名就可以了,不必带域名和端口号。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值