后台date类型转换为json字符串时，返回前台页面的是long类型的时间戳问题解决

学习springboot框架,写个博客系统,在后台管理的日志管理中,遇到了后台查询的日期格式的结果返回到页面变成了日期的时间戳了。然后摸索了三种方法来解决。页面的显示问题如下图.

问题页面回顾:

 

本案例环境和框架：后端SpringBoot框架+jdk1.8,前端bootstrap3 

解决方案：

解决方案分为三种：

第一种：

如果pojo（实体类）对应的字段（日期）类型为Date类型，用Jackson的注解@JsonFormat。 

依赖需要的jar包是：jackson-core.jar,jackson-databind.jar,jackson-annotations.jar，如下如所示

我是SpringBoot项目,自带这三个,只要是maven项目,可以使用我提供的下面这三个jar包依赖

1.1:项目引入jackson依赖jar包

  　　　　<dependency>
             <groupId>org.codehaus.jackson</groupId>
             <artifactId>jackson-mapper-asl</artifactId>
             <version>1.9.13</version>
         </dependency>
 
         <dependency>
             <groupId>com.fasterxml.jackson.core</groupId>
             <artifactId>jackson-annotations</artifactId>
             <version>2.8.0</version>
         </dependency>
 
         <dependency>
             <groupId>com.fasterxml.jackson.core</groupId>
             <artifactId>jackson-databind</artifactId>
             <version>2.8.8</version>
         </dependency>

1.2:pojo实体类加注解

      //设置自定义日期格式,并设置时区
 
     @JsonFormat(pattern="yyyy-MM-dd HH:mm",timezone = "GMT+8")
     private Date createDate;

这个注解同样也可以打在get方法上如下

        // 打在get方法上   效果一样
         @JsonFormat(pattern="yyyy-MM-dd HH:mm",timezone = "GMT+8")
         public Date getCreateDate() {
         return createDate;
         }

 

1.3:第一种效果图

 

 

第二种：

如果pojo（实体类）对应的字段（日期）类型为String类型，则在set方法上用字符串截取方式。

这种就不需要引入上面那么多依赖jar包了只需要保留一个了

2.1:依赖包导入

        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-mapper-asl</artifactId>
            <version>1.9.13</version>
        </dependency> 

2.2:实体类编写

public class Log{
    
    private String createDate;
    
    // set and get
    public String getCreateDate() {
        return createDate;
    }
     
    public void setCreateDate(String createDate) {
        this.createDate= createDate.substring(0,10);
    }

2.3:效果展示

 

 

第三种:

利用bootstarp(前端实现)

1.1修改前端js

在你需要转换的日期部分按照如下格式写

{
    title: '操作时间',
    field: 'createDate',
    align: 'center',
    //获取日期列的值进行转换
    formatter: function (value, row, index) {
        return changeDateFormat(value)
    }
},

1.2:增加js方法

同时我们需要自定义这个changeDateFormat(obj)方法

//转换日期格式(时间戳转换为datetime格式)
    function changeDateFormat(obj) {
        var dateVal = obj+ "";
        if (obj!= null) {
            var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = 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 date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
        }
    }

 效果和上面一样.

---

 

感谢您的阅读，如果您觉得阅读本文对您有帮助，请点赞"大拇指"按钮。本文欢迎各位转载，但是转载文章之后必须在文章页面中给出作者和原文连接。