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

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

1、分页查询的执行过程

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

  1. 页面发送ajax请求,将分页查询参数(page、pagesize、name等额外信息)提交到服务端
  2. 服务端(controller)接收页面提交的数据并调用Service查询数据
  3. Service调用Mapper操作数据库,查询分页数据
  4. Controller将查询到的分页数据响应给页面
  5. 页面接收到分页数据并通过前端组件(例如: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":{
    }
}

目录
相关文章
|
3天前
|
小程序 JavaScript Java
高校宿舍信息|基于Spring Boot的高校宿舍信息管理系统的设计与实现(源码+数据库+文档)
高校宿舍信息|基于Spring Boot的高校宿舍信息管理系统的设计与实现(源码+数据库+文档)
11 0
|
23小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的社区医院信息平台附带文章和源代码
基于SpringBoot+Vue的社区医院信息平台附带文章和源代码
9 1
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的科研项目验收管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的科研项目验收管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
1天前
|
SQL Java 数据库连接
1天搞定SpringBoot+Vue全栈开发 (4)多表查询及分页查询
1天搞定SpringBoot+Vue全栈开发 (4)多表查询及分页查询
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的大学生就业信息平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的大学生就业信息平台的详细设计和实现
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的信息学科平台系统的设计与实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的信息学科平台系统的设计与实现(源码+lw+部署文档+讲解等)
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的学生宿舍信息的系统的设计与实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的学生宿舍信息的系统的设计与实现(源码+lw+部署文档+讲解等)
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的创新创业教育中心项目申报管理系统的设计与实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的创新创业教育中心项目申报管理系统的设计与实现(源码+lw+部署文档+讲解等)
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的社区医院信息平台的设计与实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的社区医院信息平台的设计与实现(源码+lw+部署文档+讲解等)
|
3天前
|
JavaScript NoSQL Java
毕业就业信息|基于Springboot+vue的毕业就业信息管理系统的设计与实现(源码+数据库+文档)
毕业就业信息|基于Springboot+vue的毕业就业信息管理系统的设计与实现(源码+数据库+文档)
14 0