springboot后台获取不到前台Vue日期问题解决_springboot获取 element-ui日期-CSDN博客

本文链接：https://blog.csdn.net/weixin_43684214/article/details/121765426

本文讲述了在Java后端与Vue前端交互中遇到的日期格式问题。当Java实体类字段日期格式从'yyyy-MM-dd'改为'yyyy'时，前端无法正确获取数据。解决方案是，在Java后端属性及getter方法上都添加@JsonFormat注解，确保返回的JSON数据格式与前端预期一致，从而成功获取到数据。

摘要由CSDN通过智能技术生成

一、实体类字段写法如下：

@JsonFormat(pattern = "yyyy-MM-dd",timezone="GMT+8")
private Date sendTime;

Vue使用element-ui写法：

<el-form-item label="计划年份" prop="jhYear">
    <el-date-picker clearable size="small"
                    v-model="queryParams.jhYear"
                    type="year"
                    value-format="yyyy-MM-dd"
                    placeholder="选择年份">
    </el-date-picker>
</el-form-item>

后台可以拿到数据
二、当日期格式换位yyyy时，则获取不到数据，代码如下：
后台如下：

@JsonFormat(pattern = "yyyy")
private Date jhYear;

前台如下：

<el-form-item label="计划年份" prop="jhYear">
    <el-date-picker clearable size="small"
                    v-model="queryParams.jhYear"
                    type="year"
                    value-format="yyyy"
                    placeholder="选择年份">
    </el-date-picker>
</el-form-item>

则获取不到数据
三、经过对比，查询相关资料，java属性格式为yyyy-MM-dd，则get方法上默认为yyyy-MM-dd，当属性格式变为yyyy后，则get方法上不跟随改变，需要加注解@JsonFormat(pattern = "yyyy")，才能获取到数据。正确代码如下：
后台两个地方加注解：

@JsonFormat(pattern = "yyyy")
private Date jhYear;

//注意：这里也要加注解
@JsonFormat(pattern = "yyyy")
public Date getJhYear() {
    return jhYear;
}

前台不变

<el-form-item label="计划年份" prop="jhYear">
    <el-date-picker clearable size="small"
                    v-model="queryParams.jhYear"
                    type="year"
                    value-format="yyyy"
                    placeholder="选择年份">
    </el-date-picker>
</el-form-item>