2022/4/21 盘点Thymeleaf遇到的坑

目录

1.当作用域的值为空时页面报错的问题

        1.1 问题描述

        1.2 解决方案

        1.3 详情请参考

2.使用th:src="@{}"获取不到动态的值

        2.1 问题描述

        2.2 解决方案

        2.3 关于thymeleaf img src动态参数赋值

3.使用控件传值传不到controller中

        3.1 问题描述

        3.2 解决方案

         3.3 那么如果我需要精确到秒呢？

        3.4 详情请参考

4.关于th:οnclick=""传值的问题

        4.1 问题描述

        4.2 解决方案

        4.3 更多解决方案请参考

5.关于下拉框动态选中对应选项的问题

        5.1 问题描述

        5.2 解决方案

        5.3 详情请参考

6. 更多Thymeleaf语法问题请参考(强烈推荐！)

---

1.当作用域的值为空时页面报错的问题

        1.1 问题描述

当用户登录成功后我们需要将登录用户的信息存入session中，然后跳到主界面，并显示对应的用户信息，此时并没有设置过滤器，拦截器时，我们可以在浏览器地址栏输入跳转到主页的controller层，但是主页并没有用户登录，所以页面就会报错。

        1.2 解决方案

我们可以在取出登录用户信息的时候，判断session中是否有登录用户的信息，如果有则显示用户信息，否则为空，或者当登录用户信息为空时设置默认值。

示例:

<div th:switch="${session.loginuser?.supper}">
    <h3 th:case="1">欢迎超级管理员：<span th:text="${session.loginuser?.nickname}"></span></h3>
    <h3 th:case="0">欢迎用户：<span th:text="${session.loginuser?.nickname}"></span></h3>
</div>

解析:

${session.loginuser?.supper}可以看做为${session.loginuser?.supper:""}

当session.loginuser不为空时输出session.loginuser.supper的值，反之输出空，类似java中的三元运算符。

        1.3 详情请参考

springBoot thymeleaf 属性为空时报错：EL1007E_蕃薯耀的博客-CSDN博客

2.使用th:src="@{}"获取不到动态的值

        2.1 问题描述

当我需要动态的显示图片，图片的名字为我存入的名字，但是使用th:src="@{}"却拿到存入的值，显示不了图片。

        2.2 解决方案

<img th:src="@{/statics/{name}(name=${session.loginuser?.picpath})}" style="width: 100px;height: 100px"/>

解析： 

因为我的图片是上传到静态文件中的，但是数据库中只存了图片的名字，所以需要先定义好路径，在用name变量取出存在session中的图片名字，然后在拼接好完整的图片路径，即可显示图片。

        2.3 关于thymeleaf img src动态参数赋值

详细请看：关于thymeleaf img src动态参数赋值_三月、的狮子的博客-CSDN博客_thymeleaf图片src

3.使用<input type="date">控件传值传不到controller中

        3.1 问题描述

当我创建好一个添加的表单时需要用到<input type="date">控件传值给controller但是controller接收不到值而且页面还报错

        3.2 解决方案

        给实体类Date类型字段设置格式为yyyy-MM-dd   对应数据库中的date类型

    @DateTimeFormat(pattern = "yyyy-MM-dd")
    @JsonFormat( pattern = "yyyy-MM-dd,timezone="GMT+8")
    private Date monitortime;

        (同步)当需要将查询出来的时间显示到<input type="date">控件中也需要转换时间格式

<input type="date" th:value="${#dates.format(session.aqi.lastmodifytime,'yyyy-MM-dd')}">

        (异步) 显示到页面中也需要转换日期格式

String str= JSON.toJSONStringWithDateFormat(getalllimit,"yyyy-MM-dd");
return str;

         3.3 那么如果我需要精确到秒呢？

设置日期控件：

<input type="datetime-local" step="1" name="monitortime" required>
//设置type="datetime-local"时控件为精确到yyyy-MM-dd'T'HH:mm
//同时设置type="datetime-local"与step="1"时控件为精确到yyyy-MM-dd'T'HH:mm:ss
//required为设置非空验证

实体类： 对应数据库中的datetime类型

    /**
     * 
     * 因为时间控件的默认格式为yyyy-MM-dd'T'HH:mm:ss所有实体类中的Date字段也要这样设置
     * 记住时间控件精确到时分秒后是默认带'T'的，不是yyyy-MM-dd HH:mm:ss格式
     * 如果写yyyy-MM-dd HH:mm:ss格式controller将接收不到时间控件传过来的值
     * 页面也会报错
     */
    @DateTimeFormat(pattern = "yyyy-MM-dd'T'HH:mm:ss")
    @JsonFormat( pattern = "yyyy-MM-dd'T'HH:mm:ss",timezone="GMT+8")
    private Date monitortime;

controller:

   /**
     * 添加空气监测
     * @param aqi
     * @return
     */
    @RequestMapping("/addaqi")
    public String addaqi(AirQualityIndex aqi){
        aqi.setLastmodifytime(new Date());
        airQualityIndexService.addaqi(aqi);
        return "redirect:index.html";
    }

 (同步)当需要将查询出来的时间显示到<input type="datetime-local" step="1" name="monitortime" required>控件中也需要转换时间格式，需要手动拼接字符"T"。

<input type="datetime-local" step="1" name="monitortime" required th:value="${#dates.format(session.aqi.monitortime,'yyyy-MM-dd')}+'T'+${#dates.format(session.aqi.monitortime,'HH:mm:ss')}">

(异步) 显示到页面中也需要转换日期格式

String str= JSON.toJSONStringWithDateFormat(getalllimit,"yyyy-MM-dd+"T"+HH:mm:ss");
return str;

//需要展示到页面上建议："yyyy-MM-dd HH:mm:ss"
//需要展示到时间控件上建议："yyyy-MM-dd+"T"+HH:mm:ss"

        3.4 详情请参考

input datetime-local 时间控件精确到秒_江北有野火的博客-CSDN博客_input时间控件

thymeleaf datetime-local 时间显示_smiler7887的博客-CSDN博客

 

4.关于th:οnclick=""传值的问题

        4.1 问题描述

我想通过th:οnclick=""传值到jQuery方法中但是却不能用${session.loginuser.supper}方式拿值

        4.2 解决方案

给方法加上II

<button th:onclick="|delByid(${session.aqi.id})|">删除</button>

        4.3 更多解决方案请参考

SpringBoot+Thymeleaf页面中使用th:onclick的几种方法_小浩MR.C的博客-CSDN博客

5.关于下拉框动态选中对应选项的问题

        5.1 问题描述

当我查询某个商品信息时我想实现动态绑定下拉框

        5.2 解决方案

使用th:selected判断

<select name="districtid" required>
    <option value="">请选择</option>
    <option value="1" th:selected="${session.aqi.districtid==1}">西城区</option>
    <option value="2" th:selected="${session.aqi.districtid==2}">东城区</option>
    <option value="3" th:selected="${session.aqi.districtid==3}">海淀区</option>
    <option value="4" th:selected="${session.aqi.districtid==4}">丰台区</option>
    <option value="5" th:selected="${session.aqi.districtid==5}">朝阳区</option>
</select>

注意:

• 当数据库的字段为int类型时==后面的值不能带双引号

        5.3 详情请参考

用thymeleaf用标签给页面select下拉框赋值_快乐缠绕的博客-CSDN博客_thymeleaf给select赋值

6. 更多Thymeleaf语法问题请参考(强烈推荐！)

thymeleaf 语法——th:text默认值、字符串连接、th:attr、th:href 传参、th:include传参、th:inline 内联、th:each循环、th:with、th:if_猎人在吃肉的博客-CSDN博客