vue时间类型的格式化输出

项目场景：

示例代码后台是springboot+mybatis-plus，前端使用的vue，element UI的一个小项目

问题描述：

时间格式的输出格式是一个UTC通用标准时的格式，什么是UTC通用标准时：UTC即为世界标准时间，世界统一时间，国际协调时间，字母T是时间和日期的分隔符，T后面表示的即为时间，末尾的z表示UTC统一时间。

---

而我们需要的是类似“yyyy-MM-dd”或者“yyyy-MM-dd hh:mm:ss"或者其他自定义格式的

vue关键代码：

	<el-table :data="users" style="width: 100%">
		<!-- 省略其他列 -->
        <el-table-column prop="username" label="用户名">
        </el-table-column>
        <el-table-column prop="gender" label="性别">
        </el-table-column>
        <el-table-column prop="birthday" label="出生日期">
        </el-table-column>
    </el-table>

原因分析：

我们查看后台代码mybatis-plus记录的日志中，查出数据的时候还是好好的。
那么问题就只能出在controller数据交互的时候。
我们在浏览器中访问数据接口得到返回的json格式数据：

发现这时候关于时间类型的数值都变成了UTC通用标准时的格式，
所以问题就在于json格式数据类型的转换上。

解决方案：

解决方案一：

前端利用js进行数据的格式化
Element UI的表格中有formatter属性，我们来看看官方文档的解释

给我们表格中需要格式化的内容添加formatter属性：

<el-table :data="users" style="width: 100%">
		<!-- 省略其他列 -->
        <el-table-column prop="username" label="用户名">
        </el-table-column>
        <el-table-column prop="gender" label="性别">
        </el-table-column>
        <!-- 添加formatter属性绑定 -->
        <el-table-column prop="birthday" label="出生日期" :formatter="dateFormat">
        </el-table-column>
    </el-table>

在vue的methods中编写dateFormat方法

			//时间格式化的方法
            dateFormat(row, column, cellValue, index) {
                const daterc = row[column.property]
                if (daterc != null) {
                    var date = new Date(daterc);
                    var year = date.getFullYear();
                    /* 在日期格式中，月份是从0开始，11结束，因此要加0
                     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                     * */
                    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                    // 拼接
                    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
                }

效果：

你也可以自定义时间如何拼接，是否需要年月日时分秒，只需要你有一点点js知识。
这种方法适用范围广泛，例如我们性别实体类中是Integer类型，1和0表示男女，我们也可以利用这种方法格式化显示男女，格式化的方法同理：

//格式化性别
formatGender(row, column) {
      return row.gender == 0 ? "女" : "男";
}

如果你不是在element-ui的表格el-table中，没有formatter属性，也很好办，也是只需要你有点js知识：
1、首先我们为了重用，编写一个公共的js方法：

// 毫秒转换为 2020-02-12 17:26:11 的时间格式，参数为要转换的时间戳，返回值为格式化后的数据
var timeFormat = function (msTime) {
    let time = new Date(msTime);
    let yy = time.getFullYear();
    let MM = time.getMonth() + 1;
    let dd = time.getDate();
    let hh = time.getHours() < 10 ? "0" + time.getHours() : time.getHours();
    let min =
        time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
    let sec =
        time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
    return yy + "-" + MM + "-" + dd + " " + hh + ":" + min + ":" + sec;
}
export default timeFormat;

2、在main.js中我们导入这个js文件，这样我们就可以直接在这个项目中任何页面中直接使用这个方法了

// 导入格式化时间的js文件
import TimeFormat from "./utils/timeFormat"
Vue.prototype.$timeFormat = TimeFormat

3、使用：

<!-- 我们需要2020-02-12 17:26:11这种格式的数据 -->
<div class="date">{{ $timeFormat(hotComment.time) }}</div>

“hotComment.time”是我们格式化的数据，无论是时间戳格式的，还是我们上面说到的UTC通用标准时的格式都可以成功转换

---

---

解决方案二：

设置实体类中字段的数据类型，将Date改为sql包下的。

import java.sql.Date;
public class User implements Serializable {
	//省略其他代码
    private Date birthday;
}

效果：

至于为什么，可以查看一下上一篇博客
弊端：时分秒会丢失，但是例如我们这里的使用场景是出生日期，就是不需要时分秒

---

---

解决方案三：

配置springboot的配置文件application.yml

spring:
  jackson:
    date-format: yyyy-MM-dd
    time-zone: GMT+8

效果和方案二是一样的

相比来说最暴力，也是最有效舒服的方法，springboot内置是json格式转换用的就是jackson，所以我们可以直接在配置文件中设置它的时间格式还有时区

---

这三种方法依据情况选择，也感谢我朋友萌的分享和指教！