springboot项目中信息分页查询的常规操作流程

青旅半醒 2024-03-25 12:37 32阅读 0赞

#### 1、分页查询的执行过程 ####

在实际的项目开发过程中,分页显示是很常见的页面布局；下面我们来梳理一下常规操作中分页查询的执行过程：

*  1.  页面发送ajax请求，将分页查询参数（page、pagesize、name等额外信息）提交到服务端
 *  1.  服务端（controller）接收页面提交的数据并调用Service查询数据
 *  1.  Service调用Mapper操作数据库，查询分页数据
 *  1.  Controller将查询到的分页数据响应给页面
 *  1.  页面接收到分页数据并通过前端组件（例如：ElementUI的Table组件）展示到页面上

#### 2、页面发送ajax请求： ####

async init () {
        
                const params = {
        
                  page: this.page,
                  pageSize: this.pageSize,
                  name: this.input ? this.input : undefined
                }
                await getMemberList(params).then(res => {
        
                  if (String(res.code) === '1') {
        
                    this.tableData = res.data.records || []
                    this.counts = res.data.total
                  }
                }).catch(err => {
        
                  this.$message.error('请求出错了：' + err)
                })
              },

#### 3、创建mybaitisPlus的配置类 ####

首先创建一个mybaitisPlus的配置类，使用mplus提供的分页插件进行过滤查询

package com.tigerhhzz.wuaimai.config;
    
    import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
    import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    
    /**
     * 配置MP的分页插件
     */
    @Configuration
    public class MybatisPlusConfig {
        
    
        @Bean
        public MybatisPlusInterceptor mybatisPlusInterceptor(){
        
            MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
            mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
            return mybatisPlusInterceptor;
        }
    }

#### 3、写controller接口 ####

然后在controller中写一个接口

/**
         * 员工信息分页查询
         * @param page
         * @param pageSize
         * @param name
         * @return
         */
        @GetMapping("/page")
        public R<Page> page(int page, int pageSize, String name){
        
            log.info("page = {},pageSize = {},name = {}" ,page,pageSize,name);
    
            //构造分页构造器
            Page pageInfo = new Page(page,pageSize);
    
            //构造条件构造器
            LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper();
            //添加过滤条件
            queryWrapper.like(StringUtils.isNotEmpty(name),Employee::getName,name);
            //添加排序条件
            queryWrapper.orderByDesc(Employee::getUpdateTime);
    
            //执行查询
            employeeService.page(pageInfo,queryWrapper);
    
            return R.success(pageInfo);
        }

#### 4、测试 ####

响应给页面数据：

{
        
        "code":1,
        "msg":null,
        "data":{
        
            "records":[
                {
        
                    "id":1634812678390161409,
                    "username":"123456",
                    "name":"zhangsan",
                    "password":"xxxxxxx",
                    "phone":"13133333333",
                    "sex":"1",
                    "idNumber":"130111119801018111",
                    "status":1,
                    "createTime":[
                        2023,
                        3,
                        12,
                        15,
                        4,
                        51
                    ],
                    "updateTime":[
                        2023,
                        3,
                        12,
                        15,
                        4,
                        51
                    ],
                    "createUser":1,
                    "updateUser":1
                },
                {
        
                    "id":1,
                    "username":"admin",
                    "name":"管理员",
                    "password":"xxxxxx",
                    "phone":"13812312312",
                    "sex":"1",
                    "idNumber":"110101199001010047",
                    "status":1,
                    "createTime":[
                        2021,
                        5,
                        6,
                        17,
                        20,
                        7
                    ],
                    "updateTime":[
                        2021,
                        5,
                        10,
                        2,
                        24,
                        9
                    ],
                    "createUser":1,
                    "updateUser":1
                }
            ],
            "total":2,
            "size":10,
            "current":1,
            "orders":[
    
            ],
            "optimizeCountSql":true,
            "hitCount":false,
            "countId":null,
            "maxLimit":null,
            "searchCount":true,
            "pages":1
        },
        "map":{
        
    
        }
    }

![在这里插入图片描述][82df10b0037a4ea48333bf0ba35d5f79.png]

[82df10b0037a4ea48333bf0ba35d5f79.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/fac07e02cbe542fab1a1a6843ddcc80c.png