SpringBoot分页插件：PageHelper+BootStrap+Vue+axios实现分页功能

欧皇夏老板

于 2023-03-21 17:28:20 发布

阅读量121

点赞数 1

分类专栏： RuoYi web前端文章标签： spring boot bootstrap vue.js

本文链接：https://blog.csdn.net/weixin_44203782/article/details/129692995

版权

web前端同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

RuoYi

3 篇文章 0 订阅

订阅专栏

pom.xml依赖

<!-- 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>

启动类中设置分页插件

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
@MapperScan("demo.mapper")
@Configuration//配置分页插件
public class Demo {
    public static void main(String[] args) {
        SpringApplication.run(Demo.class);
    }

    /** 配置分页插件*/
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }

}

entity层

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;
}

mapper层

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);
}

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>

controller层

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;
    }
}

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
    <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>

    <script>
        new Vue({
            el: '#app',
            data: {
                articleList: null,
                //用于分页
                pageIndex: 1, //页码
                pageSize: 3, //每页显示的条数
                pageTotal: 0, //总条数
                pageCnt: 0 //总页数
            },
            methods: {
                requestArticleList(){
                    axios.get("http://localhost:8070/list?pageIndex="+this.pageIndex+"&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>
</body>
</html>