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

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

典型问题

典型问题包括：

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

正确的设计

对于时间，要有时区的概念

timezone.png

相同时间点，杭州是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

moment.png

npm install moment --save

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

import Moment from "moment";

export function tsFormat(ts) {
  return Moment(ts).format("YYYY-MM-DD HH:mm:ss");
}