如何实现日期选择器的自动查询数据（暴力版本）

我想通过刷卡时间来筛选数据，例如，我想查询2024/04/16号到2024/04/20号的所有数据。那么我通过日期选择器来自动帮我筛选。

一、后端数据的类型以及准备工作

controller层

实体类

private Date time;

service层与impl

public interface AttaendanceService extends IService<Attaendance> {
    IPage pageCC(IPage<Attaendance> page, Wrapper wrapper);
}

public class AttaendanceServiceImpl extends ServiceImpl<AttaendanceMapper, Attaendance> implements AttaendanceService {
    @Resource
    private AttaendanceMapper attaendanceMapper;

    @Override
    public IPage pageCC(IPage<Attaendance> page, Wrapper wrapper) {
        return attaendanceMapper.pageCC(page, wrapper);
    }
}

mapper层（这个报错不用理会）

@Mapper
public interface AttaendanceMapper extends BaseMapper<Attaendance> {
    IPage pageCC(IPage<Attaendance> page, @Param(Constants.WRAPPER) Wrapper wrapper);
}

.xml

<mapper namespace="com.wms.mapper.AttaendanceMapper">
    <select id="pageCC" resultType="com.wms.entity.Attaendance">
        select * from attaendance ${ew.customSqlSegment}
    </select>

    

</mapper>

sql是datetime类型，实体类private Date time;（注意这里的Date我用的是java.util.Date）

二、前端

1.日期选择器

我这里用的是elementui的日期选择器，这里的value1要写在data里（注意value是个数组，用来保存开始和结束时间），我想到是在我选择日期后自动查询这里就用到了监听， 完成日期选择后@change它会被监听，调用loadRecord函数。

<template>  
  <!-- Element UI 的日期范围选择器组件 -->  
  <el-date-picker  
    <!-- 绑定 v-model 到 value1，用于双向数据绑定，即选择日期后会更新 value1 的值，反之亦然 -->  
    v-model="value1"  
    <!-- 设置选择器类型为日期范围选择器 -->  
    type="daterange"  
    <!-- 设置日期范围之间的分隔符为“至” -->  
    range-separator="至"  
    <!-- 设置开始日期的占位符 -->  
    start-placeholder="开始日期"  
    <!-- 设置结束日期的占位符 -->  
    end-placeholder="结束日期"  
    <!-- 设置默认的时间范围，从 00:00:00 到 23:59:59 -->  
    :default-time="['00:00:00', '23:59:59']"  
    <!-- 设置选择器的值格式，这里设置为 "yyyy-MM-dd HH:mm" -->  
    value-format="yyyy-MM-dd HH:mm"  
    <!-- 当选择器的值改变时，触发 handleDateChange 方法 -->  
    @change="handleDateChange"  
  >  
  </el-date-picker>  
</template>

2.handleDateChange函数

  handleDateChange(value) {  
//如果日期选择器不是空的就调用loadRecod函数查询符合的数据
      if (value ) {  
        this.loadRecord(); 
      }
        else{
//如果日期选择器是空的就查询所有数据
          this.loadPost(); 
      }   
    }, 

3.loadRecord函数

// 定义 loadRecord 方法，用于加载
loadRecord() {  
  // 使用 $axios 进行 POST 请求  
  this.$axios  
    // 请求的 URL，由基础 URL 和具体接口路径拼接而成  
    .post(this.$httpUrl + "/atqwewqce/liweqbytime", {  
      // 请求体中的 pageSize，表示每页显示的记录数  
      pageSize: this.pageSize,  
      // 请求体中的 pageNum，表示当前页码  
      pageNum: this.pageNum,  
      // 请求体中的 param 对象，包含开始日期和结束日期  
      param: {  
        // 开始日期，从 value1 数组的第一个元素获取  
        startDate: this.value1[0],  
        // 结束日期，从 value1 数组的第二个元素获取  
        endDate: this.value1[1]  
      },  
    })  
    // .then 返回一个 Promise，其 resolve 值为请求的响应数据  
    .then((res) => res.data)  
    // .then 再次处理响应数据      .then((res) => {  
      // 在控制台打印响应数据   
      // 检查响应状态码  
      if (res.code == 200) {  
        // 如果状态码为 200，表示请求成功  
        // 将响应数据中的 data 赋值给 tableData，用于表格展示  
        this.tableData = res.data;  
        // 将响应数据中的 total 赋值给 total，用于分页展示  
        this.total = res.total;  
      } else {  
        // 如果状态码不是 200，则弹出警告提示获取数据失败  
        alert("获取数据失败");  
      }  
    });  
},

4.loadpost函数

// 定义一个名为loadPost的方法  
loadPost() {  
  
  // 使用axios库发送一个POST请求  
  this.$axios  
    .post(  
      // 请求的URL，由基础URL和具体的路径拼接而成  
      this.$httpUrl + "/qweqwence/listPagqwece",  
      // 请求的数据体，包含以下三个属性  
      {  
        // 每页显示的记录数  
        pageSize: this.pageSize,  
        // 当前页码  
        pageNum: this.pageNum,  
        // 额外的查询参数，这里只有一个name属性  
        param: {  
          name: this.name,  
        },  
      }  
    )  
    // 请求成功后，获取响应体中的数据  
    .then((res) => res.data)  
    // 对获取到的数据进行处理  
    .then((res) => {  
      // 在控制台打印响应数据  
      console.log(res);  
      // 检查响应中的code字段，判断请求是否成功  
      if (res.code == 200) {  
        // 如果请求成功，将响应数据赋值给tableData变量  
        this.tableData = res.data;  
        // 将响应中的total字段赋值给total变量，可能表示总记录数  
        this.total = res.total;  
      } else {  
        // 如果请求失败，则弹出警告框提示用户  
        alert("获取数据失败");  
      }  
    });  
},  
  
// 方法的结束  
},

三、后端

至此前端已经可以把开始时间和结束时间传给后端，后端接收后先处理数据然后比时间的大小返回给后端。注意我的pagecc在准备工作中有。

@PostMapping("/listPagebytime")  
public Result listBytime(@RequestBody QueryPageParam query) {  
    try {  
        // 获取请求体中的参数集合  
        HashMap param = query.getParam();  
  
        // 从参数集合中获取开始日期和结束日期字符串  
        String startDate = (String) param.get("startDate");  
        String endDate = (String) param.get("endDate");  
  
        // 初始化分页对象  
        Page<Attaendance> page = new Page<>();  
  
        // 设置当前页码  
        page.setCurrent(query.getPageNum());  
  
        // 设置每页大小  
        page.setSize(query.getPageSize());  
  
        // 初始化日期格式化对象  
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");  
  
        // 将开始日期字符串转换为java.util.Date对象  
        java.util.Date startDateUtil = sdf.parse(startDate);  
  
        // 将结束日期字符串转换为java.util.Date对象  
        java.util.Date endDateUtil = sdf.parse(endDate);  
  
        // 将java.util.Date对象转换为java.sql.Date对象，用于数据库查询  
        java.sql.Date startDateSql = new java.sql.Date(startDateUtil.getTime());  
        java.sql.Date endDateSql = new java.sql.Date(endDateUtil.getTime());  
  
        // 创建LambdaQueryWrapper对象，用于构建查询条件  
        LambdaQueryWrapper<Attaendance> lambdaQueryWrapper = new LambdaQueryWrapper<>();  
  
        // 设置查询条件：时间字段大于等于开始日期  
        lambdaQueryWrapper.ge(Attaendance::getTime, startDateSql);  
  
        // 设置查询条件：时间字段小于等于结束日期  
        lambdaQueryWrapper.le(Attaendance::getTime, endDateSql);  
  
        // 执行分页查询，获取结果  
        IPage<Attaendance> result = attaendanceService.pageCC(page, lambdaQueryWrapper);  
  
        // 返回查询结果，包括记录列表和总记录数  
        return Result.suc(result.getRecords(), result.getTotal());  
    } catch (Exception e) {  
        // 捕获并打印异常信息  
        e.printStackTrace();  
    }  
    // 如果发生异常，则返回失败结果  
    return Result.fail();  
}