条件查询分页

• 列表分页查询

当我们写项目时，往往少不了列表。根据我们看到的，生活大部分的列表都带有分页的效果，还有分页查询的效果，比如这样的
当数据多的时候，利用分页和查询就很好的找到想要的数据。

• 分页查询的实现

我写的这个在线教育这个项目，是用mybatis-plus的一个功能——代码生成器来写的，几乎一条sql都不用写（一些复杂的还是要写），这一切都全赖MP的功劳，对于大部分场景，MP已经可以满足我们。只需要写处理业务逻辑层的代码。

mp要想使用分页需要加一个分页的插件：创建一个工具类，写下以下代码

@Bean
    public PaginationInterceptor paginationInterceptor() {
        return new PaginationInterceptor();
    }

---

想要实现条件查询，首先要在数据库表中找到相应的条件，写在一个类中封装起来

@Data
public class CourseQuery implements Serializable {

    private static final long serialVersionUID = 1L;

    @ApiModelProperty(value = "课程名称")
    private String title;

    @ApiModelProperty(value = "二级类别id")
    private String status;

}

@Data注解可以为类提供读写功能，从而不用写get、set方法。他还会为类提供 equals()、hashCode()、toString() 方法

---

controller层的代码实现

@PostMapping("pageCourseCondition/{current}/{limit}")
    public R pageCourseCondition(@PathVariable Long current,
                                 @PathVariable Long limit,
                                 @RequestBody(required = false) CourseQuery courseQuery) {
        //创建page
        Page<EduCourse> pageCondition = new Page<>(current, limit);
        //QueryWrapper,构建
        QueryWrapper<EduCourse> wrapper = new QueryWrapper<>();
        //多条件组合查询，动态sql
        String status = courseQuery.getStatus();
        String title = courseQuery.getTitle();
        if (!StringUtils.isEmpty(title)) {
            wrapper.like("title", title);
        }
        if (!StringUtils.isEmpty(status)) {
            wrapper.eq("status", status);
        }
        wrapper.orderByDesc("gmt_create");
        //调用方法，实现分页查询
        courseService.page(pageCondition, wrapper);
        long total = pageCondition.getTotal();//总记录数
        List<EduCourse> records = pageCondition.getRecords();//数据list集合
        return R.ok().data("total",total).data("rows",records);
    }

最后使用postman或swagger进行测试。

• 前端部分

首先在api中引入接口

getListCourse(current,limit,courseQuery) {
        return request({
            url: `/eduservice/course/pageCourseCondition/${current}/${limit}`,
            method: 'post',
            data: courseQuery
            
        })
    },

下面是样式和方法

 <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="courseQuery.title" placeholder="课程名称" />
      </el-form-item>

       <el-form-item>
        <el-select v-model="courseQuery.status" clearable placeholder="课程状态">
          <el-option value="Normal" label="已发布" />
          <el-option value="Draft" label="未发布" />
        </el-select>
      </el-form-item>


      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table :data="list" border fit highlight-current-row>
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="title" label="课程名称" width="320" align="center"/>
      <el-table-column label="课程状态" width="110" align="center">
        <template slot-scope="scope"> {{ scope.row.status==='Normal'?'已发布':'未发布'}}</template>
      </el-table-column>

      <el-table-column prop="lessonNum" label="课时数"  width="80" align="center"/>

      <el-table-column prop="gmtCreate" label="添加时间" width="180" align="center"/>

      <el-table-column prop="ViewCount" label="浏览数量" width="100" align="center" />

      <el-table-column label="操作" width="571" align="center">
        <template slot-scope="scope">
          <router-link :to="'/course/info/' + scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">编辑课程的基本信息</el-button>
          </router-link>
           <router-link :to="'/course/chapter/' + scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">编辑课程的大纲</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeCourseById(scope.row.id)" >删除课程信息</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->

    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />
  </div>

import course from "@/api/edu/course";
export default {
  //写核心代码部分
  // data:{

  // },
  data() {
    return {
      list: null, //查询之后接口返回集合
      page: 1, //当前页
      limit: 5, //每页记录数
      total: 0,
      courseQuery: {}, //条件封装对象
    };
  },
  created() {
    this.getList();
  },

  methods: {
    //课程列表方法
    getList(page=1){
      this.page=page
      course.getListCourse(this.page,this.limit,this.courseQuery)
          .then(response => {
            //请求成功，response接口返回的数据
            this.list=response.data.rows
            console.log(this.list)    //返回数据集合
            this.total=response.data.total
            console.log(this.total)   //总记录数
          })
          .catch(error => {
            console.log(error)
          })//请求失败
    },
    resetData() {
      //表单输入项数据清空
      this.courseQuery = {};

      //查询所有课程数据
      this.getList();
    },
  },
};

最后效果如下