前后端时间正确传递

本文主要是介绍前后端时间正确传递，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

引言：后端传递给前端去展示时间的时候将时间转化为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注解

这篇关于前后端时间正确传递的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---