项目场景:

示例代码后台是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,所以我们可以直接在配置文件中设置它的时间格式还有时区


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

前往低代码交流专区

更多推荐