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

  • 相关阅读:
    Nginx日志切割
    Spring Cloud Alibaba基础教程:Nacos+Dubbo
    Spring Cloud Alibaba基础教程:Sentinel
    Gogs+Drone搭建CI/CD平台
    Spring事件机制
    OpenGL 安装
    Melkman's Algorithm
    Tools: python 安装
    Tools: windbg 使用指南
    Tools: java安装指南
  • 原文地址:https://www.cnblogs.com/zhangjianbing/p/8858506.html
Copyright © 2011-2022 走看看