后端MyBatis与前端Vue时间筛选实践-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_62831598/article/details/128784634

本文介绍如何使用MyBatis的映射文件实现基于时间段的查询，并展示了如何在Vue前端通过日期选择器组件传递参数，实现与后端的有效交互。

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

后端：在映射文件XML上注意if条件参数为params.beginTime and params.endTime

<if test="params.beginTime != null ">
             and date_format(FROM_UNIXTIME(work_seniority),'%y%m%d') &gt;= date_format(#{params.beginTime},'%y%m%d')</if>
            <if test="params.endTime != null and params.endTime != ''"><!-- 结束时间检索 -->
                and date_format(FROM_UNIXTIME(work_seniority),'%y%m%d') &lt;= date_format(#{params.endTime},'%y%m%d')</if>

前端：在Vue文件修改

<el-form-item label="定位时间" prop="workSeniority">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @keyup.enter.native="handleQuery"
        ></el-date-picker>
      </el-form-item>

//添加查询 区间列表
dateRange: []

在查询列表的方法上添加ruoyi.js的addDateRange方法

再添加dateRange参数

getList() {
      this.loading = true;
      listInfo(this.addDateRange(this.queryParams,this.dateRange)).then(response => {
        this.infoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

区间time查询