当前位置：首页 > news >正文

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

news 来源：原创 2025/6/12 18:45:33

场景

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

思路

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

参考代码

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

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