后端
新建 CourseVO.java:
/** * CourseVO类是一个课程的值对象,用于存储课程的相关信息。 * 它包含了课程的名称、类型、适用对象、最低价格和最高价格等属性。 */ public class CourseVO { private String name; // 课程名称 private String type; // 课程类型 private String applyTo; // 适用对象 private Double minPrice; // 最低价格 private Double maxPrice; // 最高价格 public String getName() { return name; } public void setName(String name) { this.name = name; } public String getType() { return type; } public void setType(String type) { this.type = type; } public String getApplyTo() { return applyTo; } public void setApplyTo(String applyTo) { this.applyTo = applyTo; } public Double getMinPrice() { return minPrice; } public void setMinPrice(Double minPrice) { this.minPrice = minPrice; } public Double getMaxPrice() { return maxPrice; } public void setMaxPrice(Double maxPrice) { this.maxPrice = maxPrice; } }
CourseController.java
更改列表查询方法:
@PreAuthorize("hasPermission('tienchin:course:list')") @GetMapping("/list") TableDataInfo list(CourseVO courseVO) { startPage(); return getDataTable(iCourseService.selectCourseList(courseVO)); }
ICourseService.java
/** * 查询课程列表 * * @param courseVO 课程信息 * @return {@code List<Course>} */ List<Course> selectCourseList(CourseVO courseVO);
CourseServiceImpl.java
@Override public List<Course> selectCourseList(CourseVO courseVO) { return courseMapper.selectCourseList(courseVO); }
CourseMapper.java
/** * 查询课程列表 * * @param courseVO 课程信息 * @return {@code List<Course>} */ List<Course> selectCourseList(CourseVO courseVO);
CourseMapper.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="top.it6666.course.mapper.CourseMapper"> <select id="selectCourseList" resultType="top.it6666.course.domain.Course"> SELECT * FROM tienchin_course WHERE del_flag = 0 <if test="name != null and name != ''"> AND name LIKE CONCAT('%', #{name}, '%') </if> <if test="type != null and type != ''"> AND type = #{type} </if> <if test="applyTo != null and applyTo != ''"> AND apply_to = #{applyTo} </if> <if test="minPrice != null"> AND price >= #{minPrice} </if> <if test="maxPrice != null"> AND price <= #{maxPrice} </if> </select> </mapper>
前端
index.vue:
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="70px"> <el-form-item label="课程名称" prop="name"> <el-input v-model="queryParams.name" placeholder="请输入课程名称" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="课程类型" prop="type"> <el-select v-model="queryParams.type" placeholder="请选择课程类型" clearable > <el-option v-for="ct in course_type" :key="ct.value" :label="ct.label" :value="ct.value" /> </el-select> </el-form-item> <el-form-item label="适用人群" prop="applyTo"> <el-select v-model="queryParams.applyTo" placeholder="请选择适用人群" clearable > <el-option v-for="cat in course_apply_to" :key="cat.value" :label="cat.label" :value="cat.value" /> </el-select> </el-form-item> <el-form-item label="最低价格" prop="minPrice"> <el-input-number v-model="queryParams.minPrice" placeholder="最低价格" clearable @keyup.enter="handleQuery" :precision="2" :step="100" :min="0" /> </el-form-item> <el-form-item label="最高价格" prop="maxPrice"> <el-input-number v-model="queryParams.maxPrice" placeholder="最高价格" clearable @keyup.enter="handleQuery" :precision="2" :step="100" :min="0" /> </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button> </el-form-item> </el-form>
完善一下搜索条件对应的字段即可。