场景

现在有一个笔记软件，需要根据用户设置的两个日期，删选出来创建日期位于这两个日期中间的笔记。

思路

把日期放到一个对象里边传到后端

参考代码

前端代码，提交一个含日期的对象。

<template><div class="demo-date-picker"><div class="block"><span class="demonstration">选择日期</span><el-date-picker v-model="dateObj.startDate" type="date" placeholder="Pick a day"format="YYYY-MM-DD"value-format="YYYY-MM-DD"/></div></div><div class="mb-4"><el-button type="primary" @click="test">提交日期</el-button></div>
</template><script setup>javascript">
import { ref } from 'vue'
import { testDate } from '@/api/notebook.js'const dateObj = ref({ startDate: '' })const test = async () => {if (!dateObj.value.startDate) {console.warn("请选择日期");return;}try {console.log("前端发送的对象：", dateObj.value);const response = await testDate(dateObj.value);console.log("后端返回的结果：", response);} catch (error) {console.error("请求失败：", error);}
}
</script><style scoped>
.demo-date-picker {display: flex;width: 100%;padding: 0;flex-wrap: wrap;
}
.demo-date-picker .block {padding: 30px 0;text-align: center;border-right: solid 1px var(--el-border-color);flex: 1;
}
.demo-date-picker .block:last-child {border-right: none;
}
.demo-date-picker .demonstration {display: block;color: var(--el-text-color-secondary);font-size: 14px;margin-bottom: 20px;
}
</style>

前后端的接口

// 测试传递日期
export const testDate = (data) => {return request.post(`${baseURL}/test`, data);
};

java">@PostMapping("/test")
public ResultData<LocalDate> testDate(@RequestBody Map<String, String> requestBody) {String startDateStr = requestBody.get("startDate");if (startDateStr == null || startDateStr.isEmpty()) {return ResultData.failure(ResultCodeEnum.FAIL, "日期不能为空");}try {LocalDate startDate = LocalDate.parse(startDateStr, DateTimeFormatter.ofPattern("yyyy-MM-dd"));System.out.println("后端收到的日期：" + startDate);return ResultData.success(startDate);} catch (Exception e) {return ResultData.failure(ResultCodeEnum.FAIL, "Invalid date format. Expected yyyy-MM-dd");}
}