element-ui日期时间选择器的日子格式化难题

2019-10-11 05:34 来源:未知
总结:
  • 日期从前端传到后端,由String类型解析成Date类型,从后端传到前端,由Date类型解析成String类型
  • 可以使用注解的方式,@DateTimeFormat、@JsonFormat
  • 可以使用配置文件方式,spring.mvc.date-format、spring.jackson.date-format/time-zone
  • 为什么要设置time-zone?因为Jackson默认使用UTC时区,所以需要手动指定时区为GMT 8

附:原时间2019-04-12 12:00:00,相差8个小时

图片 1不指定时区

ps:第一次在简书写文章,有点小紧张哈哈。

spring boot返回date类型,springboot返回date

数据库字段类型为datetime  实体保存的类型是date类型

我们把数据从数据库中读取返回给前端,发现date类型显示是毫秒,怎么格式化,下面给你两种方法:

全局在配置文件中添加:

spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT 8

一种是在某个字段之上添加:

@JsonFormat(timezone = "GMT 8", pattern = "yyyy-MM-dd HH:mm:ss")

在get方法上也添加:

@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT 08:00")

 

 

另一种:用阿里的  fastjson 进行序列化,控制器返回值 String。在返回值处反序列化时配置时间类型。

boot返回date类型,springboot返回date 数据库字段类型为datetime 实体保存的类型是date类型 我们把数据从数据库中读取返回给前端,发现d...

第二需要在SpringMVC配置xml文件中(一般是dispatchServlet.xml文件)中加入配置:<mvc:annotation-driven />。这一句配置是一种简写,其实是给Spring容器中注入了两个Bena,分别是:DefaultAnnotationHandlerMapping和AnnotationMethodHandlerAdapter。@DateTimeFormat注解的内部同样需要使用到前面注入的两个bean去处理,所以缺少这个配置,Spring容器中没有对应的bean去处理注解同样也会报错。至此,所有的步骤都完成了,可以跑了。

尝试3:我的后台项目使用SpringBoot搭建的,我在application.yml文件中添加如下配置
# 配置数据源spring: datasource: name: pet-hospital type: com.alibaba.druid.pool.DruidDataSource url: jdbc:mysql://localhost:3306/pet_hospital?serverTimezone=GMT+8 driver-class-name: com.mysql.cj.jdbc.Driver username: root password: 1741248769 # Vue前端传来的日期为String类型,下面的设置可以自动将其转换为Date类型,不需要手动转换 mvc: date-format: yyyy-MM-dd HH:mm:ss # 以下设置可以将Date类型自动转换为如下格式的日期,指定Jackson格式化日期使用的时区,Jackson默认使用UTC jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT 8
  • 显示效果

    图片 2显示

 

尝试2:
  • 在实体类字段添加@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")和@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT 8")
 /** * timezone = "GMT 8"指定时区 */ @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT 8") private Date orderDate;
  • 前端显示效果:这下就能显示成我们想要的效果了

    图片 3前端显示

<dependency><groupId>joda-time</groupId><artifactId>joda-time</artifactId><version>2.3</version></dependency>
看了控制台的输出信息,大概知道是前端将日期当做String类型传输的,但是我们后台定义日期用的是Date类型,因此这里报的转换异常。本来我想用SimpleDateFormat来转换的,但是觉得这样很麻烦,然后在网上查找相关资料发现可以有更简单的方法。

 

最近在做vue element-ui的后台管理页面,其中用到了DateTimePicker来选择日期时间,但是在将数据传回后台的过程中遇到了一些令人头疼的问题,在此记录一下解决方案,以免日后再次遇到。

图片 4前端页面

  • 前端代码
 submitForm { this.$refs[formName].validate => { let url = 'http://localhost:8088/pethospital/order-record' let data = qs.stringify({ title: this.orderForm.title, hospitalId: this.orderForm.hospitalId, orderDate: this.orderForm.orderDate, orderType: this.orderForm.orderType, petVariety: this.orderForm.petVariety, mobilePhone: this.orderForm.mobilePhone, supplement: this.orderForm.supplement }) if  { axios.post(url, data) .then(response => { }).catch(error => { this.$message({ message: '错误:'   error, type: true }) }) } else { this.$message('验证错误:请确认信息是否填写完整') } }); } 
  • 实体类代码
private Long id;private String title;private Integer hospitalId;private Date orderDate;private Integer orderType;private String petVariety;private String mobilePhone;private String supplement;
  • Controller代码
@PostMapping("/order-record") public CommonResult addOrderRecord(OrderRecordDO orderRecordDO) throws ParseException { System.out.println("添加的预约记录:"   orderRecordDO); orderRecordDOMapper.insertSelective(orderRecordDO); return null; }
  • 控制台输出
Field error in object 'orderRecordDO' on field 'orderDate': rejected value [2019-04-10 10:00:00]; codes [typeMismatch.orderRecordDO.orderDate,typeMismatch.orderDate,typeMismatch.java.util.Date,typeMismatch]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [orderRecordDO.orderDate,orderDate]; arguments []; default message [orderDate]]; default message [Failed to convert property value of type 'java.lang.String' to required type 'java.util.Date' for property 'orderDate'; nested exception is org.springframework.core.convert.ConversionFailedException: Failed to convert from type [java.lang.String] to type [java.util.Date] for value '2019-04-10 10:00:00'; nested exception is java.lang.IllegalArgumentException]]
  1. /**文章发布日期结束*/  
  2. @DateTimeFormat(pattern="yyyy-MM-dd")  
遇到的问题:从数据库获取数据后在前端显示不友好

           

尝试1:
  • 在实体类字段上添加@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
 @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") private Date orderDate;
  • 控制台输出
添加的预约记录:{"id":null,"title":"测试1","hospitalId":1001,"orderDate":"Wed Apr 10 10:00:00 CST 2019","orderType":2001,"petVariety":"哈士奇","mobilePhone":"1000","supplement":"二哈"}
  • 数据库记录

    图片 5数据库记录

 

注意:这个注解是属于jackson的,springmvc 完美集成了jackson,不过使用这个注解需要导入  jackson依赖的三个包,参考:

 

    摘要:        项目里经常需要用到日期和String之间的转换,比如后台的Date对象以Json形式返回给前端页面的时候,希望转换为yyyy-MM-dd HH:mm:ss格式的字符串,而前端页面在提交表单时日期字段希望能自动填充到后台controller方法的Date对象里。

  1. @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone="Asia/Shanghai")  
  2. public Date getCreateTime() {  
  3.     return createTime;  
  4. }  

 至此,不要以为完事大吉了,你还需要完成以下两个步骤才可以。

      后台date转换String,在你date类型属性get方法上添加@JsonFormat注解(一般不这么做,一般都是时间戳(日期毫秒值)转到jsp,前台利用标签转换成‘yyyy-MM-dd’格式),如下:

前端表单里的日期String转成后台的Date(方法不只这一种,见下一篇转载的博客):

 

Java代码  图片 6

Java代码  图片 7

   项目里经常需要用到日期和String之间的转换,比如后台的Date对象以Json形式返回给前端页面的时候,希望转换为yyyy-MM-dd HH:mm:ss格式的字符串,而前端页面在提交表单时日期字段希望能自动填充到后台controller方法的Date对象里。

第一需要加入joda的jar包。因为在@DateTimeFormat注解中使用到了joda包中的相关东西,所以缺少这个包也是会报异常的。如果使用的直接导入jar包的话,去下载joda-Jar导入即可,如果使用的是Maven管理项目的jar,那么在配置文件文件中加入依赖:

TAG标签: 时间 日期 选择器
版权声明:本文由彩民之家高手论坛发布于编程技术,转载请注明出处:element-ui日期时间选择器的日子格式化难题