前后端实现下拉框带条件查询（Vue+Java）

码农研究僧

已于 2024-06-23 12:39:26 修改

阅读量2.4k

点赞数 40

分类专栏：项目实战文章标签： vue.js java 前端

于 2024-04-02 08:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_47872288/article/details/137245926

版权

项目实战专栏收录该内容

23 篇文章 20 订阅

订阅专栏

本文介绍了前端使用Vue框架中的下拉框和日期选择器实现条件查询，通过Ajax将数据传递给后端SpringBoot接口，后端根据接收到的参数进行数据库查询并返回结果。同时提及了相关Java和数据库操作的基础知识。

摘要由CSDN通过智能技术生成

前言

对于该基本知识熟门熟路，对此总结一套自身的模版如下

总体逻辑如下：通过前端下拉框或者其他组合框（多选勾选查询），将条件返回给后端处理，后端查询数据库，查询得到的结果返回给前端页面显示

如果是下拉框单选，前端传输的是单个数据，后端只需要判断是否相等
如果是下拉框多选，前端传输的是字符串，后端通过split裁剪获取各个字符串数组来判断

总体界面如下：
在这里插入图片描述

（如下模版已默认有自身的一套数据库以及Entity类，主要供前后端接口的基本实现）
对于相关的Java知识推荐阅读：

1. 前端

<template>
  <el-form :inline="true" ref="formInline" :model="formInline" label-width="80px">
    <!-- 选择机种 -->
    <el-form-item label="机种">
      <el-select v-model="formInline.parentModel" multiple placeholder="机种">
        <el-option label="摩托车" value="摩托车"></el-option>
        <el-option label="汽车" value="汽车"></el-option>
        <el-option label="自行车" value="自行车"></el-option>
      </el-select>
    </el-form-item>

    <!-- 选择时间范围 -->
    <el-form-item label="周时间" prop="planTimePicker">
      <el-date-picker
        v-model="formInline.planTimePicker"
        type="daterange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="center">
      </el-date-picker>
    </el-form-item>

    <!-- 查询按钮和重置按钮 -->
    <el-form-item>
      <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
      <el-button size="small" @click="resetForm('formInline')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {getList} from "@/api/equipment/plan/weekplan";
import moment from 'moment'; // 导入日期处理库

export default {
  data() {
    return {
      // 表单数据模型
      formInline: {
        parentModel: [], // 选择的机种
        planTimePicker: null // 选择的时间范围
      },
      // 日期选择器配置
      pickerOptions: {
          shortcuts: [{
            text: '上周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              // 设置起始日期为本周的第一天
              start.setDate(end.getDate() - end.getDay() - 6);
              // 设置结束日期为本周的最后一天
              end.setDate(end.getDate() - end.getDay() );
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '这周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              // 设置起始日期为本周的第一天
              start.setDate(end.getDate() - end.getDay() + 1);
              // 设置结束日期为本周的最后一天
              end.setDate(end.getDate() - end.getDay() + 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '下周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              // 设置起始日期为下周的第一天
              start.setDate(end.getDate() - end.getDay() + 8);
              // 设置结束日期为下周的最后一天
              end.setDate(end.getDate() - end.getDay() + 14);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
    };
  },
  methods: {
    // 提交查询
    onSubmit() {
      var js;
      var mTime = this.formInline.planTimePicker;
      
      var newmodel = '';
      if(this.formInline.parentModel){//添加检查
        for(var i=0;i<this.formInline.parentModel.length;i++){
          if(i==0){
            newmodel=this.formInline.parentModel[i]
          }else{
            newmodel=newmodel+'-'+this.formInline.parentModel[i]
          }
        }
      }
      
      if(mTime != null && mTime.length != 1){
        js = {
          "parentModel": newmodel,
          "planStartTime":moment(mTime[0]).format('YYYY-MM-DD'),
          "planEndTime":moment(mTime[1]).format('YYYY-MM-DD')
        };
      }else {
        js = {
          "parentModel": newmodel
        };
      }
      
      this.query = js;
      this.page.currentPage = 1;
      this.onLoad(this.page, js);
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.formInline.parentModel = [];
      this.formInline.planTimePicker = null;
      this.onSubmit();
    },
    // 发起搜索请求方法
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        console.log(res.data.data);
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        }).catch(error => {
        console.log(error);
      }).finally(() => {
        this.loading = false;
        this.selectionClear();
      });
    },
  }
};
</script>

对应请求后端的接口如下：

import request from '@/router/axios';

export const getList = (current, size, params) => {
  return request({
    url: '/api/blade-equipment/weekplan/list',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

其中涉及的快捷键选项可看如下文章：【ElementUI】详细分析DatePicker 日期选择器

2. 后端

对于后端的接口判断只需要根据前端传输的数据以及数据库的属性进行判断即可：

@GetMapping("/list")
@ApiOperationSupport(order = 2)
@ApiOperation(value = "分页", notes = "传入weekPlan")
public R<IPage<WeekPlanVO>> list(WeekPlanVO weekPlan, Query query) {
	QueryWrapper<WeekPlan> wrapper = new QueryWrapper<>();
	String parentModel =  weekPlan.getParentModel();
	if(!StringHelper.isNullOrEmptyString(parentModel)){
		wrapper.in("parent_model",parentModel.split("-"));
	}
	String planStartTime =  weekPlan.getPlanStartTime();
	String planEndTime =  weekPlan.getPlanEndTime();
	if(planStartTime != null && planEndTime != null){
		wrapper.eq("plan_time",planStartTime + "~" + planEndTime);
	}

	wrapper.orderByDesc("plan_time");
	IPage<WeekPlan> pages = weekPlanService.page(Condition.getPage(query), wrapper);
	return R.data(WeekPlanWrapper.build().pageVO(pages));

}

对应的VO类如下：

@Data
@EqualsAndHashCode(callSuper = true)
@ApiModel(value = "WeekPlanVO对象", description = "WeekPlanVO对象")
public class WeekPlanVO extends WeekPlan {
	private static final long serialVersionUID = 1L;

	/**
	 * 时间搜索开始
	 */
	private String planStartTime;

	/**
	 * 时间搜索结束
	 */
	private String planEndTime;


}

Entity类：

@Data
@TableName("equipment_week_plan")
@EqualsAndHashCode(callSuper = true)
@ApiModel(value = "WeekPlan对象", description = "WeekPlan对象")
public class WeekPlan extends BaseEntity {

	private static final long serialVersionUID = 1L;
	
	/**
	 * 设备物种
	 */
	@ApiModelProperty(value = "设备物种")
	private String parentModel;
}

其Wrapper类：

public class WeekPlanWrapper extends BaseEntityWrapper<WeekPlan, WeekPlanVO>  {

	public static WeekPlanWrapper build() {
		return new WeekPlanWrapper();
 	}

	@Override
	public WeekPlanVO entityVO(WeekPlan weekPlan) {
		WeekPlanVO weekPlanVO = Objects.requireNonNull(BeanUtil.copy(weekPlan, WeekPlanVO.class));

		return weekPlanVO;
	}

}