技术问题汇总：前端怎么往后端传一个日期？

场景

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

思路

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

参考代码

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

<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> 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); }; @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"); } }