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

用Thymeleaf在实际项目中遇到的坑的更多相关文章

  1. 详讲H5、WebApp项目中常见的坑以及注意事项

    首先我们中会有一些常用的meta标签,如下: <!--防止手机中网页放大和缩小--> <meta name="viewport" content="wi ...

  2. iview在项目中遇到的坑

    1.下拉框选中某一项搜索发现总是搜不到,最后发现是选中后选中值后边莫名多了很长的空格,原因很简单,在代码中opction闭合标签和主体没有在一行. 2.iview+vue项目中,用百分比或者displ ...

  3. thymeleaf教程-springboot项目中实现thymeleaf自定义标签

    转载: http://www.9191boke.com/466119140.html    91博客网 开始: 在使用thymeleaf的过程中有时候需要公共部分渲染页面,这个时候使用自定义标签实现自 ...

  4. react项目中遇到的坑

    1,touchStart和touchEnd 如果touchstart和touchend改变的是同一个state,那么在首次加载渲染的时候组件会陷入死循环,原因是touchstart会直接触发,但此时s ...

  5. android开发过程中项目中遇到的坑----布点问题

    我们在红点push 的到达和点击的地方,都加了布点.后来功能上了线,发现,每天的点击都比到达高! 这肯定不科学. 赶紧查问题,打开程序,发红点,关闭程序,布点上传.没问题.数据部门可以收到红点啊! 从 ...

  6. [Android Studio Problems]记录克隆项目中遇到的坑(问题)以及解决方法

    ①Migrate project to Gradle? 问题描述: This project does not use the Gradle build system. We recommend th ...

  7. SpringMVC项目中获取所有URL到Controller Method的映射

    Spring是一个很好很强大的开源框架,它就像是一个容器,为我们提供了各种Bean组件和服务.对于MVC这部分而言,它里面实现了从Url请求映射控制器方法的逻辑处理,在我们平时的开发工作中并不需要太多 ...

  8. Spring Boot项目中使用 TrueLicense 生成和验证License(服务器许可)

    一 简介 License,即版权许可证,一般用于收费软件给付费用户提供的访问许可证明.根据应用部署位置的不同,一般可以分为以下两种情况讨论: 应用部署在开发者自己的云服务器上.这种情况下用户通过账号登 ...

  9. 在 Spring Boot 项目中使用 activiti

    新建springBoot项目时勾选activiti,或者在已建立的springBoot项目添加以下依赖: <dependency> <groupId>org.activiti& ...

随机推荐

  1. 学习记录:《C++设计模式——李建忠主讲》7.“领域规则”模式

    领域规则模式:在特定领域中,某些变化虽然频繁,但可以抽象为某种规则.这时候,结合特定的领域,将问题抽象为语法规则,从而给出该领域下的一般性解决方案. 典型模式:解释器模式(Interpreter). ...

  2. js原生导出excel和csv

    ​ 严格意义来说并不是真正的excel文件,只是可以用excel打开查看而已,实际上的格式是逗号分隔文件即csv文件. 这里有几个坑要说一下: 不加Unicode的utf8头部标识excel打开文件会 ...

  3. [转帖]JAVA虚拟机和安卓虚拟机的区别

    作者:天光链接:https://www.zhihu.com/question/20207106/answer/14654536来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  4. Kibana配置安装

    学习网站 https://discuss.elastic.co https://github.com/elastic 配置 server.port: 5601 server.host: "l ...

  5. Linux基础-02-目录文件管理

    1. Linux文件系统的层次结构 1) Linux文件系统的树状结构: 在Linux或UNIX操作系统中,所有的文件和目录都被组织成一个以根节点开始的倒置的树状结构. 2) 目录的定义: 目录相当于 ...

  6. Python调用API接口的几种方式

    Python调用API接口的几种方式 相信做过自动化运维的同学都用过API接口来完成某些动作.API是一套成熟系统所必需的接口,可以被其他系统或脚本来调用,这也是自动化运维的必修课. 本文主要介绍py ...

  7. fatfs系统的移植

    integer.h   FATFS的数据类型定义(一般不需要更改,其他的文件都需要引用这个文件的内容) ffcon.h FATFS的配置文件,配置项的各个参数都需要在这里修改 一个细致的讲解fatfs ...

  8. vue-cli3+mand-mobile svg 配置

    // vue.config.js chainWebpack: config => { config.resolve.alias // key,value自行定义,比如.set('@assets' ...

  9. nginx 禁止浏览器缓存

    如果我们使用Nginx作为静态资源服务器,那么可以使用expires进行缓存控制. location /{ expires 1s; } 如果Get页面未做任何修改,服务器就是对客户端返回304 Not ...

  10. Python-demo(抖音)

    # -*- coding:utf-8 -*- from mitmproxy import ctx import json import requests import time import os p ...