前后端用时间戳还是字符串传输

2020-05-07 本文已影响0人张德瘦嬢嬢

后端→前端

时间戳

在不知道前端需要什么时间格式的时候或者有的应用不同页面需要不同时间格式时，后台一般传时间戳给前台，然后前台根据自己的需要格式转换。

前端→后端

字符串

其实正常来说也应该传时间戳的，只是你传字符串也被Springmvc转化成Date格式了的，要是你直接用Servlet来写，传的字符串肯定是不会被转化成Date的。

总结

为什么这里java转一遍时间格式，为什么又要在js中转换一次时间格式？因为从java传输json格式的数据到前端，显示的格式就会是有问题的。？？？

例如：当后台转换格式成：2020-10-10 10:10:10 这个时间字符串时，传输到前台就只有2020-10-10这样的数据。这就因为是因为空格的问题

补充

后台为了有很好的传输，用时间戳格式。
比如你的服务器在美国，客户端收到是美国当地的时间，时区就不对了，前端还需要处理时区，还不如用时间戳
得到一个时间戳new Date().getTime();

js前台时间格式转换

但是我们使用的是一些特定的时间格式比如：2020-05-07 11:34:56

首先要知道：

new Date()：//获取当前时间，一种基本不用的时间格式。
// Thu May 07 2020 11:34:56 GMT+0800 (中国标准时间)
new Date().getTime();  
//获取毫秒时间。1588822496462
new Date("2020-05-07 11:34:56");  
//Thu May 07 2020 11:34:56 GMT+0800 (中国标准时间)

一个小案例：

var time = new Date("2020-05-07 11:34:50");  //2020-05-07 11:34:56
time = new Date("2020-05-07 11:34:50").getTime();  //1588822496462
time = new Date(1507601410000);//时间戳反转化

但是如何转换成我们需要的日期格式呢？

先略微的说一下Date的原型。

Date 构造函数的原型

MDN文档
或者 console.dir(Date().prototype)

image.png

为了兼容千禧年计算（也即考虑到 2000 年），应该总是指定完整的年份，例如，使用 1998，而不是 98。为了方便以完整的格式指定年份， JavaScript 包含了相应的方法getFullYear()，setFullYear()，getUTCFullYear() 和setUTCFullYear()。

Getter

Date.prototype.getDate()
根据本地时间返回指定日期对象的月份中的第几天（1-31）。
Date.prototype.getDay()
根据本地时间返回指定日期对象的星期中的第几天（0-6）。
...

Setter

Date.prototype.setDate()
根据本地时间为指定的日期对象设置月份中的第几天。
Date.prototype.setFullYear()
根据本地时间为指定日期对象设置完整年份（四位数年份是四个数字）。
....

以上的日期格式函数可以满足我们的部分需求，但是如果我们还是需要特定的日期格式如：2017-10-10 10:10就需要自定义Date的原型函数

一个js通用型时间转换函数

使用函数的方式进行定义

    var time = 0;
    time = new Date(1507601410256);//毫秒转日期格式
    console.log("time:"+time);
    function dateFormat(fmt,date){
        var o = {
            "M+" : date.getMonth()+1,                 //月份
            "d+" : date.getDate(),                    //日
            "h+" : date.getHours(),                   //小时
            "m+" : date.getMinutes(),                 //分
            "s+" : date.getSeconds(),                 //秒
            "q+" : Math.floor((date.getMonth()+3)/3), //季度
            "S"  : date.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)){
            fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o)
            if(new RegExp("("+ k +")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        return fmt;
    }

使用原型方法的方式定义

    Date.prototype.timeFormat = function(fmt){
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "h+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)){
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o)
            if(new RegExp("("+ k +")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        return fmt;
    }

3.调用



    console.log("dateFormat():"+dateFormat("MM-dd hh:mm 第q季度",time));
    console.log("dateFormat():"+dateFormat("yyyy-MM-dd hh:mm:s 第q季度",time));
    console.log("dateFormat():"+dateFormat("yyyy年MM月dd日 hh时mm分ss秒S毫秒 第q季度",time));
 
    console.log("time.timeFormat():"+time.timeFormat("MM-dd hh:mm 第q季度"));
    console.log("time.timeFormat():"+time.timeFormat("yyyy-MM-dd hh:mm:s 第q季度"));
    console.log("time.timeFormat():"+time.timeFormat("yyyy年MM月dd日 hh时mm分ss秒S毫秒 第q季度"));

以上两种形式，使用方式不同而已，功能一样。注意能够转换的格式只能由函数的var o ={...}定义的形式进行定制格式。