解决Vue ElementUI Springboot日期时间时区问题

最近我在一个项目中选择了Vue ElementUI作为前端框架，后端使用了Springboot和MSSQL。在开发过程中，遇到了一个问题：前端日期范围控件传入后端的时间是UTC时间，与我们所在的东八区相差8个小时。今天我来分享一下我是如何解决这个问题的，希望对大家有所帮助。

问题描述

当我点击日期控件并选择日期范围后，然后进行搜索操作，通过F12查看网络请求时，我发现控件自动将日期修改为UTC时间。而我们所在的东八区与UTC时间恰好相差8个小时。

前端代码

我的前端代码如图所示，日期范围被封装在一个数组`complainPeriod`中，并没有特殊处理。

后端处理

通过调用后端接口时，也没有添加其他特殊处理。在Springboot的REST接口中，我将`complainPeriod`接收为一个字符串数组，然后通过格式转换为`LocalDateTime`类型，再传入SQL查询语句的`between and`条件中。

问题分析

在这里出现的问题是，`LocalDateTime`本身是没有时区信息的，所以即使使用``来解析带时区格式的日期时间，它也不会自动转换时区。

而我的数据库中相关时间字段是通过`()`来设置的，没有设置时区信息，即使用的是当前我们所在的东八区时间。

解决方法

为了解决这个问题，我们需要使用`ZonedDateTime`来接收字符串，并将其转换为东八区的`LocalDateTime`，然后再传入SQL查询语句中进行查询。

参考下图，我给出两种解决方法，都可以实现目的。但是我更推荐第二种方法，因为它更加简洁。

通过以上的处理方法，我成功解决了Vue ElementUI Springboot日期时间时区问题。希望对大家有所帮助！如果喜欢，请记得点赞和分享哦！

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。