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”