MyBatisPlus分页插件实现分页功能

Bertha 。 2024-03-25 22:45 23阅读 0赞

本教程需要有MyBatisPlus基础

后端技术：SpringBoot2.7.9、MyBatisPlus3.5.1、[MySQL8][]  
前端技术：Vue2.5.16+axios、BootStrap3.3.7

## 一、后端开发 ##

### 1.1、配置MyBatisPlus ###

#### 1.1.1、在pom.xml中添加依赖 ####

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

#### 1.1.2、在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%2B8&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、在启动类中配置分页插件 ####

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 {
    
        /** 配置分页插件*/
        @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、后台开发 ###

#### 1.2.1、SQL脚本 ####

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, '扬子xx', NULL, 'eeeeeeee', '2023-01-02 00:00:00', 2);
    INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090618022400001, '扬子晚报1', NULL, 'dddsfjslfjalskd', '2023-01-03 00:00:00', 2);
    INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090625282740226, '扬子晚报2', NULL, 'dddsfjslfjalskd', '2023-01-04 00:00:00', 2);
    INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090625865748482, '扬子晚报3', NULL, 'dddsfjslfjalskd', '2023-01-05 00:00:00', 1);
    INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090626520059905, '扬子晚报4', NULL, 'dddsfjslfjalskd', '2023-01-06 00:00:00', 2);
    INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090627165982721, '扬子晚报5', NULL, 'dddsfjslfjalskd', '2023-01-07 00:00:00', 1);
    INSERT INTO `t_article` (`id`, `title`, `logo`, `descn`, `create_time`, `cid`) VALUES (1630090627736408066, '扬子晚报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, '头条', '2023-02-27 17:27:14');
    INSERT INTO `t_channel` (`id`, `channel_name`, `create_time`) VALUES (2, '头七', '2023-02-27 17:27:14');
    COMMIT;
    
    SET FOREIGN_KEY_CHECKS = 1;

#### 1.2.2、实体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.1、html代码 ###

<div class="container" id="app">
            <table class="table table-striped">
                <caption>文章列表</caption>
                <thead>
                <tr>
                    <th align="center">编号</th>
                    <th align="center">标题</th>
                    <th align="center">描述</th>
                    <th align="center">发布时间</th>
                    <th align="center">操作</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;">修改</button>
                        <button class="btn btn-link">删除</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代码 ###

## 案例效果 ##

![c85ff0ffe44846f48f16c2d6e05bb433.png][]

[MySQL8]: https://so.csdn.net/so/search?q=MySQL8&spm=1001.2101.3001.7020
[c85ff0ffe44846f48f16c2d6e05bb433.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3a258dc237244c868f582a87986b543b.png