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

最新推荐文章于 2025-02-14 15:58:48 发布

Maxpicca

最新推荐文章于 2025-02-14 15:58:48 发布

阅读量3.4k

点赞数 10

分类专栏： java应用开发笔记文章标签： java vue.js spring boot

本BLOG上原创文章未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。

本文链接：https://blog.youkuaiyun.com/Maxpicca/article/details/114422965

版权

java应用开发笔记专栏收录该内容

1 篇文章

订阅专栏

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

问题：

前端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.youkuaiyun.com/Architect_优快云/article/details/93324225

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