DateTimePicker + @DateTimeFormat("yyyy-MM-dd HH:mm:ss")日期格式转换异常

最近在学习,练习一个项目使用的日期格式是yyyy-MM-dd HH:mm:ss格式的,在后端Java与MySQL这边的转换中一开始格式没有统一间歇性的就会报异常,后面采用了一个@DateTimeFormat("yyyy-MM-dd HH:mm:ss")注解标注在属性上规范了 Date 类型属性的格式(埋坑~)

    // 开始时间
    @JsonFormat(shape = JsonFormat.Shape.STRING, pattern="yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    private Date startTime;
    // 结束时间
    @JsonFormat(shape = JsonFormat.Shape.STRING, pattern="yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    private Date endTime;

在前端这边使用的是ElementUI的日期时间组件DatePicker

<el-form-item label="开始时间：" prop="startTime">
    <el-date-picker 
        type="datetime" 
        placeholder="选择日期" 
        v-model="homeAdvertise.startTime">
        </el-date-picker>
</el-form-item>
<el-form-item label="到期时间：" prop="endTime">
    <el-date-picker 
        type="datetime" 
        placeholder="选择日期" 
        v-model="homeAdvertise.endTime">
    </el-date-picker>
</el-form-item>

使用该组件进行新增&修改操作的时候一直抛异常,如下所示

JSON parse error: Cannot deserialize value of type `java.util.Date` from String "2020-01-30T16:00:00.000Z": expected format "yyyy-MM-dd HH:mm:ss"

网上搜了好多资料,几乎都是说在后端属性上添加注解的

     @JsonFormat(shape = JsonFormat.Shape.STRING,
         pattern="yyyy-MM-dd HH:mm:ss",         
         timezone = "GMT+8")
     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
     @JsonField(format = "yyyy-MM-dd HH:mm:ss" )

这些注解都使过了，还是不能解决异常问题，花了好长时间找怎么解决bug好烦；

后面在大佬的提示下去看了Element官网文档,在DatePicker这个组件的Attributes中看到了format

原来输入框默认是Date对象  返回给后端是 "2020-01-30T16:00:00.000Z" ISO 日期格式

ISO 日期格式：
ISO 日期格式（ISODatetime）是 ISO 8601 标准规定的时间表示方式。云点播如无特别指定，所有时间相关参数统一采用 ISO 8601 表示的 UTC 时间，格式为 YYYY-MM-DDThh:mm:sssZ。如：2018-10-01T10:00:00Z，表示北京时间2018年10月01日18点00分00秒（北京时间值 = UTC 时间值 + 8小时）。

format 显示在输入框中的格式 string 见日期格式 yyyy-MM-dd HH:mm:ss

因为使用的是动态变量,所以在该组件中添加了value-format属性,设置了与后台对应的格式

<el-form-item label="开始时间：" prop="startTime">
    <el-date-picker 
        type="datetime" 
        placeholder="选择日期" 
        v-model="homeAdvertise.startTime"
        value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
</el-form-item>
<el-form-item label="到期时间：" prop="endTime">
    <el-date-picker 
        type="datetime" 
        placeholder="选择日期" 
        v-model="homeAdvertise.endTime"
        value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker>
</el-form-item>

这样前端响应给后端的数据就是"yyyy-MM-dd HH:mm:ss"了，Java与MySQL交互没有异常了。

翻了大半天的资料,终于解决了问题,得记录一下,学习起来才行!