vue項目開發，前端傳入時間為UTC 通用標准時如2018-07-16T16:00:00.000Z，格式化為正常時間yyyy-MM-dd

vue開發項目時，前期已經根據需求定制好前后端接口數據格式。但當前后端進行接口調試，遇到時間傳入有問題，抓包發現是傳入的時間有問題，如2018-07-16T16:00:00.000Z。

<template>
    <el-date-picker v-model="dateValue1" type="date" placeholder="開始日期">
    </el-date-picker>
</template>

綁定的data值：

data() {
    return {
        dateValue1: "2018-07-01",
        dateValue2: "2018-11-05",
    }
}               

修改data值，beginTime：2018-07-17，endTime:2018-07-21

 

 　　在解決上述問題之前，我們首先要了解什么是UTC通用標准時：UTC即為世界標准時間，世界統一時間，國際協調時間，字母T是時間和日期的分隔符，T后面表示的即為時間，末尾的z表示UTC統一時間。
　　通過上述解釋UTC通用標准時，我們就可以針對此問題進行解決，有兩種方法可以將UTC通用標准時轉換為GST（北京時間），也就是我們正常使用傳給后台的時間：

1.傳統方法，利用函數格式轉換

//修改日期格式
            format(time, format) {
                var t = new Date(time);
                var tf = function (i) { return (i < 10 ? '0' : '') + i };
                return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
                    switch (a) {
                        case 'yyyy':
                            return tf(t.getFullYear());
                            break;
                        case 'MM':
                            return tf(t.getMonth() + 1);
                            break;
                        case 'mm':
                            return tf(t.getMinutes());
                            break;
                        case 'dd':
                            return tf(t.getDate());
                            break;
                        case 'HH':
                            return tf(t.getHours());
                            break;
                        case 'ss':
                            return tf(t.getSeconds());
                            break;
                    }
                })
            }
   //調用上述方法進行格式轉換：
   this.axios.post("personnelface/freq/getfreqstat", {
                            beginTime: this.format(me.dateValue1,'yyyy-MM-dd'),
                            endTime: this.format(me.dateValue2,'yyyy-MM-dd'),
                              ..........
                    })
                    .
                    .
                    .
                    .
                    .
                    省略

 

2.通過moment.js，進行格式轉換
首先安裝moment.js：
　　npm install moment -s
其次在main.js引入moment.js：
　　import moment from “moment”
　　Vue.prototype.$moment = moment;

//借助moment.js進行轉換
var dateValue1 = me.$moment(me.dateValue1).format('YYYY-MM-DD HH:mm:ss');
var dateValue2 = me.$moment(me.dateValue2).format('YYYY-MM-DD HH:mm:ss');
this.axios.post("personnelface/freq/getfreqstat", {
                            beginTime: dateValue1 
                            endTime: dateValue2 
                              ..........
                    })
                    .
                    .
                    .
                    .
                    .

 

 通過上述兩種方法，都可以將UTC通用標准時，轉換為正常時間，結果如圖所示：