前后端分离时间数据和格式化的问题

时间格式化是软件开发的一件小事,但是根据多年经验,这件小事上出的问题不少。而且新的程序员不断重复着老的问题。

典型问题

典型问题包括:

  • 前端最终显示的时间和数据库里不一样,相差一天或者8个小时
  • 对于时间格式化谁来做这件事情,前端和后端都觉得是小事,反而没人做了,或者有的地方前端做,有的地方又是后端做,出了问题扯皮
  • 系统返回的时间格式生活中不常用, 例如 2020-12-21T04:09:31.000+00:00 形式

正确的设计

对于时间数据,要有时区的概念

在这里插入图片描述
相同时间点,杭州是1点04分,在东京是2点04分,伦敦是 5点04分。页面上的时间和数据库中时间相差几个小时往往是没注意时区的设置。
通常,后端jdbc连接上会写明用那个时区,例如serverTimezone=Asia/Shanghai

spring.datasource.url=jdbc:mysql://localhost:3306/rcdb?autoReconnect=true&failOverReadOnly=false&useUnicode=true&characterEncoding=UTF-8&zeroDateTimeBehavior=convertToNull&allowMultiQueries=true&serverTimezone=Asia/Shanghai

格式化的问题交给前端来做

现在的系统中,通常时间格式有两三种,常见的有 YYYY-MM-dd,YYYY-MM-dd HH:mm:ss 和 “几分钟前” 这种形式。具体用哪个格式,该有由前端根据页面场景来灵活使用。所以用什么形式属于展现层面的问题,展现是前端的范畴。 后端接口负责的是数据

后端接口中统一使用时间戳形式 Timestamp

时间戳是从格林威治时间 1970 年 1 月 1 日至当前时间的总秒数,例如 1608523771000。注意这个基准是带时区的,格林威治时间也就是零时区,我们是东八区。

前端日期格式化

可以自己造轮子,但何必呢,推荐用 Moment.js
在这里插入图片描述

npm install moment --save

写一个工具类,覆盖系统中最常用的日期格式

import Moment from "moment";

export function tsFormat(ts) {
  return Moment(ts).format("YYYY-MM-DD HH:mm:ss");
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值