手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

Vue+ElementUI+Springboot日期时间时区处理

时间:2024-10-11 19:33:20

1、点击日期控件,选择日期范围后,然后搜索调后台。F12查看网络请求,发现控件自动将日期修改为UTC时间,和我们东八区刚好差了8个小时。

Vue+ElementUI+Springboot日期时间时区处理

2、我的前端代码如图,日期范围封装在了一个数组complainPeriod中。

Vue+ElementUI+Springboot日期时间时区处理
Vue+ElementUI+Springboot日期时间时区处理

3、如图所见,调用后端接口的时候也没有出其它特殊处理。

Vue+ElementUI+Springboot日期时间时区处理

4、配图中为我Springboot REST接口,将complainPeriod接收到一个字符串墙绅褡孛数组中,然后通过格式转换为LocalDateTime传到sql中用between and进行查询。

Vue+ElementUI+Springboot日期时间时区处理
Vue+ElementUI+Springboot日期时间时区处理

5、这里出现的问题是,LocalDateTime本身是没有时区的,所以LocalDateTime.parse即便是解析带时区格式日期时间也不会自动转变,如图所示。

Vue+ElementUI+Springboot日期时间时区处理

6、因为我数据库中相关时间字段是通过LocalDateTime.now()设置的,没有时区,也就是当前我们东八区时间。这里我们需要使吹涡皋陕用ZonedDateTime接收字符串,然后转变为东八区的LocalDateTime再传入sql中进行查询。参考方法如图,两种方法都可以,推荐第二种,更简洁一些。

Vue+ElementUI+Springboot日期时间时区处理
© 手抄报圈