前端JavaScript与后端Java中时间作为参数查询某一时间段的条件查询

本文链接：https://blog.youkuaiyun.com/walk_man_3/article/details/106696296

本文介绍如何在前端使用Vue的a-range-picker组件实现日期范围选择，并将选择的日期格式化后传递到后端SpringBoot应用。后端通过QueryWrapper进行数据库查询，实现了基于指定日期范围的Appointment数据检索。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端：vue

后端：springboot QueryWrapper

前端vue组件：a-range-picker

<a-range-picker
        :ranges="{ Today: [moment(), moment()],
 'This Month': [moment(), moment().endOf('month')] }"
        @change="onChange"
/>
import moment from 'moment';

data() {
    return {
        startValue: null,
        endValue: null,
            }
},
methods：{
moment,
onChange(dates, dateStrings) {
    // console.log('From: ', dates[0], ', to: ', dates[1]);
    console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
    this.startValue = dateStrings[0] + " 00:00:00";
    this.endValue = dateStrings[1] + " 23:59:59";
},
//提交方法
submitSearchForm(){
    if (this.startValue != null) { startDate = this.startValue; } 
    if (this.endValue != null) { endDate = this.endValue; }
    }
}

后端：

实体：AppointmentDto中的 startDate、endDate

/**
 * 开始时间
 */
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime startDate;
/**
 * 结束时间
 */
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime endDate;

appointmentDto作为实体类对象

if (appointmentDto.getStartDate() != null || appointmentDto.getEndDate() != null) {
    QueryWrapper<Appointment> queryWrapper = new QueryWrapper<>();
    queryWrapper.ge("appointment_time", appointmentDto.getStartDate());
    queryWrapper.le("appointment_time", appointmentDto.getEndDate());
}