用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,无论在什么环境中都可以
例:
// 获取baseUrlvar 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在实际项目中遇到的坑相关推荐
- vue项目中onscroll的坑
vue项目中onscroll的坑 在项目中需要监听一个组件的scroll事件,以触发到底时加载更多. 但是实际操作下来发现scroll事件并没有被监听到. 通过查询资料得知,监听的目标元素elemen ...
- SpringBoot+Vue博客项目中遇到的坑
shiro整合jwt,用于用户登录逻辑流程: 登录流程: 用户登录:输入用户名和密码–>后端校验: –>有异常:处理异常 –>正常,生成jwt 访问接口时,统一被jwtFilter, ...
- 记录项目中遇到的坑(三)兼容IE浏览器
做PC端项目,有时候需要兼容IE浏览器,所以很多写法都要改变,以下是个人总结的一些写法(兼容到IE9,因为vue.js最低支持到IE9,再往下,需要使用原生JS) PS:项目是通过引入 vue.js ...
- 记录某项目中的踩坑与解决(持续更新)
前言 最近参加了某个比赛, 我所选的赛题就是个类似知乎这样的安卓app,由于着手近一个月了,踩了不少坑,之前没怎么记录,估计事后也会忘记干净. 因此特开一帖,在此记录下相关的坑. 记录 Recycle ...
- 【记vue项目中的踩坑日记】一杯茶一包烟,一个bug搞一天
昨天在复习B站coderwhy老师的项目时,偶然发现了一个问题,弄了半天,最后才发现问题出在哪. 封装完底部的导航栏之后实现路由跳转出现了问题,在浏览器中既不报错,也不输出内容,路由跳转也没有用 整了 ...
- vue 项目中使用粘性布局不起作用_做vue项目中遇到的坑总结与学习
1.出现跨域问题(已经进行跨域设置的情况下) 这个问题找了半天....最后的解决方式:查看后台支持的编码格式和前端axios发送过去的的编码格式是否一致.不一致就会出现跨域问题.至于为什么也不明白,可 ...
- vue+elementui项目中遇到的坑/难题
记录日常遇到的一些问题,持续更新哈,有用的话点赞收藏~ 1.Pagination 分页 需求: 不需要这么多只需要展示3个 但是传:pager-count="3"会报错,因为官方限 ...
- create-react-app 搭建react项目中的小坑
刚买的电脑 安装了 16.3的 node版本 然后 就装了一个 create-react-app 脚手架 然后就出了个问题 就是 搭建react项目的时候 一直报错 一直报错 就很奇怪 后来 我换了个 ...
- Android项目中遇到的坑之(Android圆角圆形图 二)
接着上一篇的问题来研究研究: **问题来了:效果是有了,但有发现么?我设置的scaleType只有fitxy 是有效果的,其他的都没有效果了.设置为其他的scaleType都变成matrix那种效果了 ...
最新文章
- 概念艺术绘画学习教程 Schoolism – Foolproof Concept Painting with Airi Pan
- linux svn missingargument -m,缺少參數-m在windows powershell中使用svn。
- C++ class实现顺序栈(完整代码)
- C学习杂记(四)sizeof计算联合体大小
- nginx忽略文件名大小写
- 中飞院计算机学院的宿舍,广州民航职业技术学院宿舍怎么样 住宿条件好不好...
- [mark] first shellcode
- C#抓取网页数据、分析并且去除HTML标签(转载)
- Java与C++的区别
- ExtJs6 combo下拉框分页、提示、换行提示等增强功能
- 软考计算机硬件知识,软考程序员考点计算机硬件基础知识之存储器简介
- antdesign图片点击放大_vue图片点击放大功能
- idea 一直不停的updating index
- 相机取相,如何给类似圆柱的侧面打光均匀
- Mac OS配置python虚拟环境
- 资料,丰富资料,丰富资料(模式识别......)
- 1036. 跟奥巴马一起编程(15)
- 简约大方的HTML表格样式
- 【强化学习】Actor-Critic算法详解
- 为什么越来越多明星开始关注加密货币?