手撸一个分页查询接口

引言

  为了提高用户的浏览体验，列表显示往往会进行分页显示，因此后端也需要编写分页查询接口。在网上查阅了一番分页相关的资料，发现了许多数据库分页查询的插件，但一般都有些许复杂，想了想直接自己手撸一个岂不妙哉，在此记录一下此次小小的尝试。

需求分析

​ 如上图所示，点击向左的箭头可向前翻页，点击数字可跳转至指定页面，点击向右箭头可向后翻页。

实现思路

前端：使用element ui里的 pagination组件，简单进行封装一下就可使用

pagination组件链接：https://element.eleme.cn/#/zh-CN/component/pagination

代码如下：

<el-pagination
  :page-size="20"
  :pager-count="11"
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

阅读代码我们不难发现，前后端所需要交互的参数为total（数据总数），page(当前页面)，page-size（每页包含数据条数）可根据需求自行决定是否进行交互。

后端：通过select * from 表名 limit start,end 来进行分页查询，因此只需要count(*)来计算数据总数，通过page和page-size来计算起始数据和结束数据

代码实现

application.propertie里配置数据库

#配置启动端口
server.port=9000

#==============================数据库相关配置========================================
spring.datasource.driver-class-name =com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/wx_user?useUnicode=true&characterEncoding=utf-8&useSSL=false
spring.datasource.username =root
spring.datasource.password =123456

#使用阿里巴巴druid数据源，默认使用自带的
#spring.datasource.type =com.alibaba.druid.pool.DruidDataSource
#开启控制台打印sql
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

# mybatis 下划线转驼峰配置,两者都可以
#mybatis.configuration.mapUnderscoreToCamelCase=true
mybatis.configuration.map-underscore-to-camel-case=true

封装两个实体类，一个与数据表相对应，一个封装成利于交互的数据类。

//User.java
package com.example.test.domain;

/**
 * @Author: ck
 * @Description:
 * @Date: Create in 20:23 2020/7/25
 */
public class User {
   
    private Integer id;
    private String name;
    private String pwd;

    public Integer getId() {
   
        return id;
    }

    public void setId(Integer id) {
   
        this.id = id;
    }

    public String getName