SpringBoot学习笔记（四）：整合thymeleaf遇到的问题

问题六

问题描述：如何在js外联文件中，使用变量的值，比如[[${#request.getContextPath()}]]

解决办法：在论坛找见的，就是在当前html页面，写一个内联的js片段，然后通过方法传参（即变量的值）到js外联文件中；

论坛链接在：http://bbs.csdn.net/topics/392263835?page=1#post-402960814

问题五

问题描述：html点击按钮时，传值到js脚本中；本来想着直接：

<a type="button" th:onclick="modalShow(${cloth.id})">删除</a>

，但是不行；

原因分析：暂时不知道，反正就是解析不了；

解决办法：写成如下格式即可

<a type="button" th:onclick="'javascript:modalShow('+${cloth.id}+');'">删除</a>

问题4

问题描述：关于

th:inline="javascript"

的问题；今天在前端要获取项目的名称，用到了

#request.getContextPath()

，结果在拼接URL时老出错。而在没有加

th:inline="javascript"

的js中则不会出错，拼接如下：

"[[${#request.getContextPath()}]]/body/scanQRCode"

原因分析：是因为如果在有标签

th:inline="javascript"

的js中，thymeleaf会自动给变量

[[${#request.getContextPath()}]]

加一个”“，并且会将”/projectName”转义变成”\/projectName”；而没有标签

th:inline="javascript"

的js中，thymeleaf则直接返回变量的值 /projectName；

解决办法一：不加标签

th:inline="javascript"

，将url拼接如下:

"[[${#request.getContextPath()}]]/body/scanQRCode"

，在页面中会解析成：

"/projectName/body/scanQRCode"

；

解决办法二:加标签

th:inline="javascript"

，则url拼接如下：

[[${#request.getContextPath()}]]+"/body/scanQRCode"

，在页面中会解析成：

"\/projectName/body/scanQRCode"

；如果不想显示\转义字符，可以用[(${request.getContextPath()})]这种unescaped的方式，在页面中会解析成：

"/projectName/body/scanQRCode"

参考自：usingthymeleaf.pdf

图一是escaped方式，图二是unescaped方式

图一



图二



问题3：

描述：关于Property or field cannot be found on object of type “java.util.HashMap” ,may not be public的问题；比如我在前台接收到后台传来的一个Map对象test:{“a”,”1”},此时我在前台获取test.b，

<p th:text="${test.b}?:'(b not exists)'"></p>

就会报上面的错误；按理说我这里进行了判断是否为空的操作，应该不会发生这样的错误啊；

原因：是因为后台传来的是HashMap对象，而不是一个实体对象，所以要用${test[‘pro’]}这样的方式来获取比较安全；

解决办法：有一个暂时的解决办法，就是用test[‘b’]这样的方式来获取属性就可以了；也可以先用

${#maps.contains(test,'b')}

进行判断该key是否存在，然后再用

${test.b}

获取

<p th:text="${test['b']}?:'(b not exists)'"></p>

问题1

描述(版本问题)：spring-boot项目整合thymeleaf后，pom文件中的spring-boot-starter-thymeleaf中已经包含了thymeleaf，但是版本是2.0的，现在需要升级到3.0；

解决办法：在pom.xml的properties中添加thymeleaf的版本号

<properties>
<java.version>1.8</java.version>
<thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>
</properties>

问题2

描述（引入片段问题）：关于th:replace，现有head.hmtl和home.html；然后在home.html中引入head.html中的head；结果head.html中的header也显示在界面中；如果home.html中引入了head.html中的header，home.html界面就会显示两个header；

原因：是因为head.html中th:fragment=”header”，跟header标签名字重复了，导致home.html中引入的时候，把th:fragment=”header”片段和header标签的内容都引入了

解决办法：修改片段名称即可，th:fragment=”header_fragment”