不知道为什么,前端显示的所有数据项都没有错,就只有时间那一项很奇怪,是一串数字,而且这个数字在数据库怎么都找不到……

然后我在后端从service到controller都debug了一遍,发现数据都没有错,拿的都是时间啊。

后来百度知道,原来后台在返回json数据的时候,用自身的序列化机制会把时间变成一段很长的数字,就像上面的显示一样。

然后这里就要用到一个东西:

@JsonFormat,它的作用是,出参时,自动把Date型对象数据转化成正确的格式化后的字符串出去

效果:

然后又通过度娘知道,还有个注解

@DateTimeFormat

这个是用于将前台传到后台字符串变量转换为Date类型。请求报文只需要传入yyyymmddhhmmss字符串进来,则自动转换为Date类型数据。(不过好像前端要传的是json)

这里也有个小例子:

前端只传了一个 格式正确的  时间字符串

layer.open({
type : 2,
title : '归档详情',
//btn: ['选中', '取消'],
shade : false,
area : [ '900px', '600px' ],
maxmin : true,
content : gateUrl.UiUrl + '/productbaseEdition?eTime='
+ edition.table.bootstrapTable('getSelections')[0].eTime,// 这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content:['http://sentsin.com', 'no']
end : function() { }
});

这里就只是在请求url那里拼接了一个  eTime上去。

然后后台一开始直接用Date接,毫无疑问,无法成功,然后就用了这个@DateTimeFormat

看后端代码:

@Controller
@RequestMapping("")
public class ProductbaseEditionController extends BaseController { @GetMapping("/productbaseEdition")
public String productbaseEdition(@DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss")Date eTime) {
System.out.println("#################test time:"+eTime);
return "productbaseEdition/list";
}
}

接收成功!(这里不是json数据,然后用注解@JsonFormat似乎不能成功接收)

不过也有资料说,@JsonFormat不仅可以完成后台到前台参数传递的类型转换,还可以实现前台到后台类型转换。当content-type为application/json时,优先使用@JsonFormat的pattern进行类型转换。而不会使用@DateTimeFormat进行类型转换。

然后我也根据这个做了几个实验,

@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
//@DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss")
private Date eTime;//归档时间,也是归档的版本号

这是实体里面的一个属性,前端传用json传数据过来,然后Controller用这个实体来接收

                 var data = {};
data.id = edition.currentItem.id;
data.eTime = edition.currentItem.eTime;
layer.confirm('确定删除这个归档版本吗?', null, function (index) { $.ajax({
url: edition.baseUrl + "/editionDelete",
type: "POST",
data:JSON.stringify(data),
headers : {
'Content-Type' : 'application/json;charset=utf-8'
},
success: function (data) {
console.log(data);
if (data.code == '0') {
layerTips.msg("删除成功!");
edition.refresh();
} else {
layerTips.msg("删除失败!") }
}
});
layer.close(index);
});

结论是:

1.前端如果传来的是json数据,时间格式是正确的,那么@JsonFormat是可以正确将其转换成Date类型的。

2.前端如果传来的是json数据,时间格式是正确的,那么@DateTimeFormat是可以正确将其转换成Date类型的。

3.但是,用json出参时用注解@DateTimeFormat似乎行不通,就是前面的问题,json返回Date对象时,java的序列化会把date变成一串数字,然后@dataTimeFormat似乎无法解决这个问题。

结论:

1.如果前后端传的数据都是json,那么后台接数据,传数据都可以用@JsonFormat。

2.@DateTimeFormat适合后端  接收   前端传来的数据,不管是不是json都可以正确转换成Date型数据,只要前端传来的格式正确且后端@DateTimeFormat的pattern写正确了,但是这个注解无法将Date型数据用json传到后端去。

关于JavaDate数据返回到前端变数字的问题(并引申到前后端时间的传输)的更多相关文章

  1. 导出excel,并将数据返回给前端(包含权限判断)

    一.先写导出按钮接口 1.此接口对用户权限进行判断 2.此接口将前端的参数组合拼凑到下一个接口的url中去,用于条件筛选 3.用户有权限的情况下将用户的权限信息保存到redis中去,并将token写到 ...

  2. 循序渐进VUE+Element 前端应用开发(23)--- 基于ABP实现前后端的附件上传,图片或者附件展示管理

    在我们一般系统中,往往都会涉及到附件的处理,有时候附件是图片文件,有时候是Excel.Word等文件,一般也就是可以分为图片附件和其他附件了,图片附件可以进行裁剪管理.多个图片上传管理,及图片预览操作 ...

  3. 后台对象转化成json数据返回给前端

    一.介绍 JSON-lib包是一个beans,collections,maps,java arrays 和XML和JSON互相转换的包,主要就是用来解析Json数据 二.下载jar依赖包:可以去这里下 ...

  4. MVC使用Newtonsoft无需实体类,实现JSON数据返回给前端页面使用

    //引用using Newtonsoft.Json; using Newtonsoft.Json.Linq; public ActionResult JsonSample() { ResponseRe ...

  5. python后端从数据库请求数据给到前端的具体实现

    先来贴一窜代码让大家理解前端/后端/数据库的工作原理, 首先简要说明:前端向后端请求数据,后端根据前端请求数据的类别分析其需求,并连接到数据库获取相应数据: 来一段简单的实例代码模拟淘宝商城: 前端代 ...

  6. web前后端数据交互

    前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...

  7. Spring Security 前后端分离登录,非法请求直接返回 JSON

    hello 各位小伙伴,国庆节终于过完啦,松哥也回来啦,今天开始咱们继续发干货! 关于 Spring Security,松哥之前发过多篇文章和大家聊聊这个安全框架的使用: 手把手带你入门 Spring ...

  8. 基于Ajax技术的前后端Json数据交互方式实现

    前言 使用浏览器访问网站是日常生活中必不可少的一件事情,当我们在浏览器地址栏中输入网址后会看到网站的内容,那么这个过程中发生了什么?下面简单介绍下浏览器访问网站过程. 第一步:浏览器向DNS服务器发起 ...

  9. 把数据转化为JSON格式用ajax进行前后端交互

    接着在https://www.cnblogs.com/dong973711/p/10907733.html的基础上做验证. 从前端提交数据 前端页面,submit.html <!DOCTYPE ...

随机推荐

  1. CSS实现文字内容不被截断当超出指定长度时该字符串自动整体换到下一行

    效果图: 1.内容不被截断 span {       overflow:hidden;       white-space:nowrap;       text-overflow:ellipsis;  ...

  2. (转)vim 访问系统剪贴板

    原文出处:http://vim.wikia.com/wiki/Accessing_the_system_clipboard Please review this tip: This tip was i ...

  3. [CROATIAN2009] OTOCI

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1180 [算法] 动态树维护森林连通性 时间复杂度 : O(NlogN ^ 2) [代 ...

  4. JNI之JAVA调用C++接口

    1.JNI定义(来自百度百科) JNI是Java Native Interface的缩写,中文为JAVA本地调用.从Java1.1开始,Java Native Interface(JNI)标准成为ja ...

  5. Learning ReactNative (一) : JavaScript模块基本原理与用法

    在使用ReactNative进行开发的时候,我们的工程是模块化进行组织的.在npmjs.com几十万个库中,大部分都是遵循着CommonJS规则的.在ES6中引入了class的概念,从此JavaScr ...

  6. Ubuntu install JDK

    1.#下载JDK,记住保存的目录 2. sudo mkdir /usr/java 3. sudo tar zxvf jdk-7u75-linux-x64.tar.gz -C /usr/java 4. ...

  7. web开发并部署到Tomcat上

    1. eclipse配置tomcat https://jingyan.baidu.com/article/e4d08ffdabb0710fd2f60de9.html https://blog.csdn ...

  8. ubuntu删除g2o

    解决方法为:(1)删除/usr/local/include/g2o,指令为sudo rm -rf /usr/local/include/g2o:(2)删除/usr/local/lib下有关libg2o ...

  9. 让App飞久一点

    此文已由作者杨晓授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 本文从作者所在项目进行的耗电量测试入手,介绍了移动端App耗电量测试的一些基本概念和方法,重点介绍了iOS应用 ...

  10. 7 二分搜索树的原理与Java源码实现

    1 折半查找法 了解二叉查找树之前,先来看看折半查找法,也叫二分查找法 在一个有序的整数数组中(假如是从小到大排序的),如果查找某个元素,返回元素的索引. 如下: int[] arr = new in ...