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

效果和上面一樣.

感謝您的閱讀，如果您覺得閱讀本文對您有幫助，請點贊"大拇指"按鈕。

作者：huiyi0521

原文：https://www.cnblogs.com/huiyi0521/p/10242930.html

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！