前后端时间相差8小时的情况分析

Post author:xfxia
Post published:2023年10月12日
Post category:其他

搞了快两个小时了，终于解决了这个问题，记录一哈。

问题：

前端pick一个时间，传出数据，到后端，此时发现前端选的是8点，后端输出的是0点，即晚了8小时。

前端pick的数据

前端pick数据

解决

1、找到痛点

打印出前端传出的数据和后端接收的数据

这一步很重要，否则很容易在错误的方向找答案！！！

前端传出数据

前端传出数据

后端接收数据

后端接收数据

2、若前端传出数据错误

2.1 检查前端时间pick控件

在这次Bug中，我用的element ui 中的 el-date-picker 控件，查阅资料后发现是这里的出的bug。

el-date-picker 默认的是国际标准时间（UTC），与北京时间（GMT）相差8小时。

解决方案：添加字段
value-format=“yyyy-MM-dd HH:mm:ss”

 <el-date-picker 
 		v-model="todoform.startTime" 
 		type="datetime" 
 		placeholder="请选择任务开始时间" 
 		value-format="yyyy-MM-dd HH:mm:ss">
 </el-date-picker>

2.2 利用moment格式化

添加moment插件

npm install moment --save

main.js
导入moment

import Moment from 'moment'
Vue.filter('formatDate', function(value) {
    return Moment(datetime).utcOffset(480).format('YYYY-MM-DD HH:mm:ss'); // 加上480分钟，即8小时
})

3、若后端传入数据错误

注：以下内容整合于自己查阅的博客，自己的问题不在于此，不清楚这种方法的有效度

3.1 SpringBoot 项目

application.properties
文件中添加配置

# 配置spring时区
spring.jackson.time-zone=GMT+8
# 时间戳配置
spring.jackson.date-format="yyyy-MM-dd HH:mm:ss"
# 数据库链接设置时区 serverTimezone=GMT%2B8
spring.datasource.url: jdbc:mysql://localhost:3306/[TableName]?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=GMT%2B8

注：在连接数据库的时候，也记得末尾加上
?serverTimezone=GMT%2B8

3.2 SpringMVC 项目

在time字段前添加注释

@JsonFormat(shape = JsonFormat.Shape.STRING,pattern = "yyyy-MM-dd HH:mm:ss" timezone = "GMT+8") 
private LocalDateTime endTime;

4、存入数据库数据错误

感谢大佬：https://blog.csdn.net/Architect_CSDN/article/details/93324225

如果有其他情况，欢迎评论补充~

问题：

解决