前后端时间正确传递
引言:后端传递给前端去展示时间的时候将时间转化为String类型的时间数据去返回。此时就需要加上 @JsonFormat 注解来解决这个问题。
框架环境配置中,时间配置为
情形一:
- 数据库字段exam_time类型为date
- 后端实体类中examTime类型为Date
1.前端绑定的examTime类型type设置为datetime,以String类型进行传递
<el-date-picker v-model="dataForm.examTime" type="datetime" :picker-options="pickerOptions" placeholder="考试时间"></el-date-picker>
若以上面的前后端字段设置,在进行时间传递的时候,交互会报错。
解决方法:
(1)如果需要页面展示日期时间字符串,则需要在前端页面的DateTimePicker日期时间选择器组件中加入属性value-format:"yyyy-MM-dd HH:mm:ss"
<el-form-item label="考试时间" prop="examTime">
<el-date-picker v-model="dataForm.examTime" type="datetime" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" placeholder="考试时间">
</el-date-picker>
</el-form-item>
显示效果:
(2)如果需要在前端页面仅仅只展示日期,加入属性value-format:"yyyy-MM-dd ",这样后端控制台会报Json解析错误,必须在后端字段上面加入注解@JsonFormat(timezone="GMT+8", pattern = "yyyy-MM-dd")才能防止报错
@JsonFormat(timezone="GMT+8", pattern = "yyyy-MM-dd")
private Date examTime;
最后显示效果:
2.前端绑定的examTime类型type设置为date,以String类型进行传递
el-date-picker v-model="dataForm.examTime" type="date" :picker-options="pickerOptions" placeholder="考试时间"></el-date-picker>
这样设置的话,在后端会报错
解决方法:
(1)解决的方法依旧是如果页面需要展示日期字符串,后端实体字段加上注解@JsonFormat(timezone="GMT+8", pattern = "yyyy-MM-dd"),前端属性value-format:"yyyy-MM-dd ",最后页面展示的是以日期字符串展示的。
(2)若要展示日期时间字符串,前端加上属性value-format:"yyyy-MM-dd HH:mm:ss",后端什么注解都不加,最后页面是以日期时间字符串展示
情形二:
- 数据库字段exam_time类型为datetime
- 后端实体类中examTime类型为Date
1.前端绑定的examTime类型type设置为datetime,以String类型进行传递
<el-date-picker v-model="dataForm.examTime" type="datetime" :picker-options="pickerOptions" placeholder="考试时间"></el-date-picker>
(1)若页面展示考试时间为日期时间字符串,前端加上属性value-format:"yyyy-MM-dd HH:mm:ss",后端加上注解@JsonFormat(timezone="GMT+8", pattern = "yyyy-MM-dd HH:mm:ss"),代码不会报错
(2)若页面展示考试时间为日期字符串,前端加上属性value-format:"yyyy-MM-dd ",后端加上注解@JsonFormat(timezone="GMT+8", pattern = "yyyy-MM-dd "),代码不会报错
2.前端绑定的examTime类型type设置为date,以String类型进行传递
(1)若页面展示考试时间为日期时间字符串,前端加上属性value-format:"yyyy-MM-dd HH:mm:ss",后端不加注解,不会报错
(2)若页面展示考试时间为日期字符串,前端加上属性value-format:"yyyy-MM-dd",后端不加注解会报错,加上注解@JsonFormat(timezone="GMT+8", pattern = "yyyy-MM-dd"),不会报错
总结:前端属性都加value-format,按自己想要转换的类型设置
后端在时间字段上都加上@JsonFormat注解