后台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;
        }
    }

 效果和上面一樣.

---

 

感謝您的閱讀，如果您覺得閱讀本文對您有幫助，請點贊"大拇指"按鈕。本文歡迎各位轉載，但是轉載文章之后必須在文章頁面中給出作者和原文連接。