springboot+Vue+ElementUI+PageHelper实现分页

1. springboot整合PageHelper
(1)加入依赖

<dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.3</version>
            <exclusions>
                <exclusion>
                    <groupId>org.mybatis</groupId>
                    <artifactId>mybatis</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.mybatis</groupId>
                    <artifactId>mybatis-spring</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

(2)修改配置文件

pagehelper:
  helperDialect: mysql
  reasonable: true
  supportMethodsArguments: true
  pageSizeZero: false #pageSize=0

(3)使用方法

@PostMapping(value = "/loginlog")
    public PageInfo getLoginLog(@RequestBody Page page)
    {
	//这里的page是因为我有其他需求自定义的，也可以直接获得参数

        PageHelper.offsetPage((page.getCurrentPage() - 1) * page.getPageSize(),page.getPageSize());

        PageInfo pageInfo = new PageInfo(tbLoginLogService.selectAll());//查询数据库

        return pageInfo;
    }

前端代码

<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 基础表格
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
           
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
               
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column  prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="username" label="用户名"></el-table-column>
                <el-table-column prop="ip" label="ip">
                </el-table-column>
                
                <el-table-column prop="location" label="location"></el-table-column>
                <el-table-column prop="createTime" label="时间"></el-table-column>
            
                <el-table-column :show-overflow-tooltip="true" prop="device" label="设备"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template>
                        <el-button
                            type="text"
                            icon="el-icon-view"
                         
                        >详情</el-button>
                       
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex" //当前页码
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handleCurrentChange" //切换页码触发的函数
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return {
            query:{
               pageIndex:1,
               pageSize:10,
            },
            tableData: [],
            pageTotal: 0,

        }
    },
    created() {
       
        this.getData(this.query.pageIndex,this.query.pageSize)
    },
    methods:{
        getData(currentPage,pageSize){
            axios({
                method:'post',
                url:'/loginlog',
                data:{
                  currentPage:currentPage,
                  pageSize:pageSize
                },
            })
            .then(res =>{
                console.log(res)
                this.tableData = res.list;
                this.pageTotal = res.total
            })
           
        },
         handleCurrentChange(value){
                this.query.pageIndex = value;//获得当前页码
                this.getData(this.query.pageIndex,this.query.pageSize);
        }
    }
}
</script>

效果