条件查询分页

2023-11-15 15:37| 来源: 网络整理| 查看: 265

列表分页查询

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

分页查询的实现

我写的这个在线教育这个项目，是用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 pageCondition = new Page(current, limit); //QueryWrapper,构建 QueryWrapper 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 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 }) },

下面是样式和方法

查询清空 {{ (page - 1) * limit + scope.$index + 1 }} {{ scope.row.status==='Normal'?'已发布':'未发布'}} 编辑课程的基本信息编辑课程的大纲删除课程信息 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(); }, }, };

最后效果如下在这里插入图片描述

【本文地址】

公司简介

联系我们