Java前后端时间处理全攻略(从格式化到时区转换)

 更新时间:2025年06月17日 09:15:17   作者:码农阿豪@新空间  
在现代Web开发中,时间处理是一个常见但容易出错的环节,本文将从前端(JavaScript/dayjs)和后端(Java)两个角度,详细介绍如何优雅地处理时间数据,需要的小伙伴可以了解下

引言

在现代Web开发中,时间处理是一个常见但容易出错的环节。无论是前端展示还是后端数据处理,时间格式的转换、时区的处理以及空值的判断都需要谨慎对待。本文将从前端(JavaScript/dayjs)和后端(Java)两个角度,详细介绍如何优雅地处理时间数据,解决诸如“2023-06-15T02:00:00.000+00:00 如何显示为 2023-06-15 10:00:00”等问题,并提供完整的代码示例和最佳实践。

1. 前端时间处理(JavaScript/dayjs)

1.1 时间格式化与空值处理

在前端,我们通常需要将后端返回的 UTC 时间(如 2023-06-15T02:00:00.000+00:00)转换为本地时间并格式化。推荐使用 dayjs 库(轻量级,API 友好)。

基本格式化函数

import dayjs from 'dayjs';

const formatDateTime = (timeStr) => {
  if (!timeStr) return '-'; // 空值返回占位符
  return dayjs(timeStr).format('YYYY-MM-DD HH:mm:ss');
};

说明:

  • dayjs(timeStr) 自动解析 ISO 8601 格式时间。
  • format() 方法指定输出格式(YYYY-MM-DD HH:mm:ss)。
  • 空值返回 '-',避免显示 null 或 undefined。

增强版(带错误处理)

const formatDateTime = (timeStr) => {
  if (!timeStr || timeStr === 'null' || timeStr === 'undefined') return '-';
  try {
    const date = dayjs(timeStr);
    return date.isValid() ? date.format('YYYY-MM-DD HH:mm:ss') : '-';
  } catch (e) {
    console.error('时间格式化失败:', e);
    return '-';
  }
};

1.2 时区转换

默认情况下,dayjs 使用本地时区。如果需要强制转换为特定时区(如 UTC),可以使用插件:

npm install dayjs utc plugin
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

// 转换为北京时间
const beijingTime = dayjs.utc(timeStr).tz('Asia/Shanghai').format('YYYY-MM-DD HH:mm:ss');

1.3 在 Ant Design 表格中渲染时间

在 Ant Design 的 Table 组件中,可以通过 customRender 或 render 列配置实现时间格式化:

const columns = [
  {
    title: '抓取时间',
    dataIndex: 'graspingTime',
    key: 'graspingTime',
    render: (text) => formatDateTime(text), // 直接调用格式化函数
  },
];

效果:

原始数据格式化结果
null-
2023-06-15T02:00:00.000+00:002023-06-15 10:00:00

2. 后端时间处理(Java)

2.1 使用 java.time API(Java 8+ 推荐)

Java 8 引入了 java.time 包,提供了更直观的日期时间操作方式。

核心代码

import java.time.*;
import java.time.format.DateTimeFormatter;
import java.util.Date;

public String formatGraspingTime(Date graspingTime) {
    if (graspingTime == null) {
        return "-";
    }
    // 转换为系统默认时区
    ZonedDateTime zonedDateTime = graspingTime.toInstant()
            .atZone(ZoneId.systemDefault());
    // 格式化
    return zonedDateTime.format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
}

说明:

  • toInstant() 将 Date 转换为 UTC 时间。
  • atZone() 转换为本地时区时间。
  • DateTimeFormatter 定义输出格式。

指定时区(如北京时间)

ZonedDateTime zonedDateTime = graspingTime.toInstant()
        .atZone(ZoneId.of("Asia/Shanghai"));

2.2 使用 SimpleDateFormat(兼容旧版 Java)

如果项目仍在使用旧版 Java,可以用 SimpleDateFormat,但需注意线程安全问题。

public String formatGraspingTime(Date graspingTime) {
    if (graspingTime == null) {
        return "-";
    }
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    sdf.setTimeZone(TimeZone.getTimeZone("Asia/Shanghai")); // 设置时区
    return sdf.format(graspingTime);
}

2.3 Spring Boot 中的 JSON 序列化

在 Spring Boot 中,可以通过 @JsonFormat 注解直接在 DTO 中定义时间格式:

public class MyEntityDTO {
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    private Date graspingTime;
    // Getter/Setter
}

效果:

  • 序列化时自动转换为 "2023-06-15 10:00:00" 格式。
  • 时区设置为东八区(北京时间)。

3. 常见问题与解决方案

3.1 时区不一致问题

问题:前端显示时间比数据库少 8 小时。

原因:后端返回 UTC 时间,前端未转换时区。

解决:

  • 后端:返回带时区的时间字段(如 @JsonFormat(timezone = "GMT+8"))。
  • 前端:使用 dayjs 自动转换时区。

3.2 空值处理

问题:时间字段为 null 时前端显示异常。

解决:

  • 前端:if (!timeStr) return '-'。
  • 后端:if (graspingTime == null) return "-"。

3.3 线程安全问题

问题:SimpleDateFormat 非线程安全。

解决:

  • 每次调用时新建实例。
  • 改用 java.time API(推荐)。

4. 总结与最佳实践

前端最佳实践

使用 dayjs 替代 moment.js(更轻量)。

所有时间渲染前必须格式化并处理空值。

时区转换尽量在前端统一处理。

后端最佳实践

优先使用 java.time API(Java 8+)。

在 DTO 中用 @JsonFormat 定义时间格式和时区。

数据库存储 UTC 时间,业务逻辑按需转换时区。

完整流程图

后端数据库 (UTC) 
  → 后端DTO (@JsonFormat) 
  → 前端API (JSON) 
  → dayjs 格式化 
  → 页面渲染

结语

时间处理看似简单,但涉及时区、格式、空值等问题时容易出错。通过本文的解决方案,你可以:

  • 在前端使用 dayjs 优雅地格式化时间。
  • 在后端用 java.time 或 @JsonFormat 规范时间输出。
  • 避免时区不一致、空值异常等常见问题。

到此这篇关于Java前后端时间处理全攻略(从格式化到时区转换)的文章就介绍到这了,更多相关Java时间处理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • MyBatis如何调用存储过程与存储函数

    MyBatis如何调用存储过程与存储函数

    这篇文章主要介绍了MyBatis如何调用存储过程与存储函数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-11-11
  • Java简单统计字符串中汉字,英文字母及数字数量的方法

    Java简单统计字符串中汉字,英文字母及数字数量的方法

    这篇文章主要介绍了Java简单统计字符串中汉字,英文字母及数字数量的方法,涉及java针对字符串的遍历、编码转换、判断等相关操作技巧,需要的朋友可以参考下
    2017-06-06
  • SpringIoC与SpringDI详解

    SpringIoC与SpringDI详解

    本文介绍了Spring框架中的IoC(控制反转)和DI(依赖注入)概念,以及如何在Spring中使用这些概念来管理对象和依赖关系,感兴趣的朋友一起看看吧
    2025-03-03
  • Java基础-Java基本数据类型

    Java基础-Java基本数据类型

    这篇文章主要介绍了Java基础-Java基本数据类型,变量就是申请内存来存储值。也就是说,当创建变量的时候,需要在内存中申请空间,下面我们就来对Java基本数据类型作简单的介绍,需要的朋友可以参考一下
    2022-01-01
  • java.lang.Runtime.exec的左膀右臂:流输入和流读取详解

    java.lang.Runtime.exec的左膀右臂:流输入和流读取详解

    这篇文章主要介绍了java.lang.Runtime.exec的左膀右臂:流输入和流读取详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-11-11
  • Spring Boot集成MyBatis-Plus 自定义拦截器实现动态表名切换功能

    Spring Boot集成MyBatis-Plus 自定义拦截器实现动态表名切换功能

    本文介绍了如何在SpringBoot项目中集成MyBatis-Plus,并通过自定义拦截器实现动态表名切换,此外,还探讨了MyBatis拦截器在其他场景中的应用,如SQL日志记录、多租户数据隔离、数据权限控制等,感兴趣的朋友跟随小编一起看看吧
    2024-11-11
  • Spring Boot 3.4.0 结合 Mybatis-plus 实现动态数据源的完整方案

    Spring Boot 3.4.0 结合 Mybatis-plus 实

    本文详细介绍了在 Spring Boot 3.4.0 项目中结合 Mybatis-plus 实现动态数据源切换的完整方案,通过自定义注解和AOP切面,我们可以优雅地实现方法级别的数据源切换,满足多数据源场景下的各种需求,感兴趣的朋友一起看看吧
    2025-04-04
  • Java实现线程通信的案例讲解

    Java实现线程通信的案例讲解

    所谓线程通信就是线程间相互发送数据,线程通信通常通过共享一个数据的方式实现。本文将通过案例详解Java中线程通信的实现,感兴趣的可以了解一下
    2022-05-05
  • java单向链表的实现实例

    java单向链表的实现实例

    java单向链表的实现实例。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-10-10
  • java thread start()和run()方法简析

    java thread start()和run()方法简析

    本文以java中thread的start()和run()的区别做详细介绍, 需要了解跟多的朋友可以参考下
    2012-11-11

最新评论