MyBatisPlus paging plug-in realizes paging function

Back-end technology: SpringBoot2.7.9, MyBatisPlus3.5.1, MySQL8
Front-end technology: Vue2.5.16 + axios, BootStrap3.3.7

1. Backend development

1.1, configure MyBatisPlus

1.1.1, add dependencies in pom.xml

 <!-- Spring & SpringMVC -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- mybatis-plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>
        <!-- lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.20</version>
        </dependency>
        <!-- mysql-connector -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.32</version>
        </dependency>

1.1.2, configure the data source in application.yml

server:
  port: 8070
spring:
  datasource:
    type: com.zaxxer.hikari.HikariDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.01:3306/test_plus?useUnicode=true &characterEncoding=utf8 &zeroDateTimeBehavior=convertToNull &useSSL=false &serverTimezone=GMT+8 &allowPublicKeyRetrieval= true
    username: root
    password: 123456
mybatis-plus:
  type-aliases-package: demo.entity
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  global-config:
    db-config:
      table-prefix: t_
      id-type: auto
  mapper-locations: classpath:mappers/*.xml

1.1.3, configure the pagination plug-in in the startup class

package demo;
 
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
 
@SpringBootApplication
@Configuration
@MapperScan("demo.mapper")
public class Demo {
 
    /** Configure pagination plugin */
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
 
    public static void main(String[] args) {
        SpringApplication. run(Demo. class);
    }
}

1.2. Background development

1.2.1, SQL script

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
 
-- ----------------------------
-- Table structure for t_article
-- ----------------------------
DROP TABLE IF EXISTS `t_article`;
CREATE TABLE `t_article` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `title` varchar(50) DEFAULT NULL,
  `logo` varchar(255) DEFAULT NULL,
  `descn` varchar(160) DEFAULT NULL,
  `create_time` datetime DEFAULT NULL,
  `cid` bigint(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1630090627736408069 DEFAULT CHARSET=utf8;
 
-- ----------------------------
-- Records of t_article
-- ----------------------------
BEGIN;
INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1, 'Yangzi xx', NULL, 'eeeeeeee', \ '2023-01-02 00:00:00', 2);
INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090618022400001, 'Yangtze Evening News 1', NULL, 'dddsfjslfjalskd', '2023-01-03 00:00:00', 2);
INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090625282740226, 'Yangtze Evening News 2', NULL, 'dddsfjslfjalskd', '2023-01-04 00:00:00', 2);
INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090625865748482, 'Yangtze Evening News 3', NULL, 'dddsfjslfjalskd', '2023-01-05 00:00:00', 1);
INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090626520059905, 'Yangtze Evening News 4', NULL, 'dddsfjslfjalskd', '2023-01-06 00:00:00', 2);
INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090627165982721, 'Yangtze Evening News 5', NULL, 'dddsfjslfjalskd', '2023-01-07 00:00:00', 1);
INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090627736408066, 'Yangtze Evening News 6', NULL, 'dddsfjslfjalskd', '2023-01-08 00:00:00', 1);
INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090627736408068, 'qqq1w', 'kdsjlsfjieosjfiosjdfo', 'eeeee\ ', '2023-02-03 00:00:00', 2);
COMMIT;
 
-- ----------------------------
-- Table structure for t_channel
-- ----------------------------
DROP TABLE IF EXISTS `t_channel`;
CREATE TABLE `t_channel` (
  `id` bigint(20) NOT NULL,
  `channel_name` varchar(50) DEFAULT NULL,
  `create_time` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
 
-- ----------------------------
-- Records of t_channel
-- ----------------------------
BEGIN;
INSERT INTO `t_channel` (`id`, `channel_name`, `create_time`) VALUES (1, 'Headline', '2023-02-27 17:27:14');
INSERT INTO `t_channel` (`id`, `channel_name`, `create_time`) VALUES (2, 'first seven', '2023-02-27 17:27:14');
COMMIT;
 
SET FOREIGN_KEY_CHECKS = 1;

1.2.2, Entity Article

package demo.entity;
 
import lombok.Data;
 
@Data
public class Article {
    private Long id;
    private String title;
    private String logo;
    private String descn;
    private String createTime;
    private Long cid;
}

1.2.3, ArticleMapper.java

package demo.mapper;
 
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import demo.entity.Article;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
 
@Repository
public interface ArticleMapper extends BaseMapper<Article> {
 
    Page<Article> selectByPage(Page<Article> page, @Param("title") String title);
}

1.2.4, ArticleMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="demo.mapper.ArticleMapper">
    <select id="selectByPage" resultType="Article">
        select * from t_article where title like '%${title}%'
    </select>
</mapper>

1.2.5, ArticleController

package demo. controller;
 
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import demo.entity.Article;
import demo.mapper.ArticleMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
@CrossOrigin
public class ArticleController {
 
    @Autowired
    private ArticleMapper articleMapper;
 
    @GetMapping("/list")
    public Page<Article> findAll(Long pageIndex, Long pageSize){
        Page<Article> page = articleMapper. selectPage(new Page(pageIndex, pageSize), null);
        return page;
    }
 
    @GetMapping("/list_custom")
    public Page<Article> customFindAll(Long pageIndex, Long pageSize, String title){
        Page<Article> page = articleMapper. selectByPage(new Page(pageIndex, pageSize), title);
        return page;
    }
}

2. Front-end development

2.1, html code

 <div class="container" id="app">
        <table class="table table-striped">
            <caption>List of articles</caption>
            <thead>
            <tr>
                <th align="center">Number</th>
                <th align="center">Title</th>
                <th align="center">Description</th>
                <th align="center">Published</th>
                <th align="center">Operation</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="art in articleList">
                <td>{<!-- -->{art.id}}</td>
                <td>{<!-- -->{art.title}}</td>
                <td>{<!-- -->{art.descn}}</td>
                <td>{<!-- -->{art.createTime}}</td>
                <td align="center">
                    <button class="btn btn-link" style="margin-right: 10px;">Modify</button>
                    <button class="btn btn-link">Delete</button>
                </td>
            </tr>
            </tbody>
        </table>
        <ul class="pagination" v-for="p in pageCnt">
            <li v-if="p == pageIndex" class="active"><a href="#" @click="doGo(p)">{<!-- -- >{p}}</a></li>
            <li v-else="p == pageIndex"><a href="#" @click="doGo(p)">{<!-- -->{p}}</ a></li>
        </ul>
    </div>

2.2, Js code

 <script>
        new Vue({
            el: '#app',
            data: {
                articleList: null,
                //for pagination
                pageIndex: 1, //page number
                pageSize: 3, //Number of items displayed on each page
                pageTotal: 0, //total number of items
                pageCnt: 0 //Total number of pages
            },
            methods: {
                requestArticleList(){
                    axios.get("http://localhost:8070/list?pageIndex=" + this.pageIndex + " & amp;pageSize=" + this.pageSize).then(res => {
                        console. log(res. data)
                        this.articleList = res.data.records
                        this.pageCnt = res.data.pages
                        this.pageTotal = res.data.total
                        this.pageIndex = res.data.current
                        this.pageSize = res.data.size
                    })
                },
                doGo(p){
                    this.pageIndex = p
                    this. requestArticleList()
                }
            },
            created: function () {
                this. requestArticleList()
            }
        })
    </script>

Case effect