提示：文章参考。

文章目录

• 前言
• 一、pagehelper基础配置
• • 1.添加依赖
  • 2.分页实体类
  • • 2.1 PageRequest.java
    • 2.2 PageResult.java
  • 3.分页工具类PageUtils.java
• 二、后端使用
• • 1.sql语句
  • 2.mapper接口
  • 3.controller
  • 4.Service
  • 5.ServiceImpl
• 三、前端vue利用axios传参和接收分页结果，利用element-plus控件展现
• • 1.前端数据格式的基础设置
  • 2.axios传参和接收分页结果
  • 3.完整的.vue文件参考（仅实现分页展示功能。编辑、删除等功能没有实现）

前言

本篇主要介绍。

一、pagehelper基础配置

1.添加依赖

pom.xml文件中添加pagehelper依赖

		com.github.pagehelperpagehelper-spring-boot-starter1.2.5

2.分页实体类

2.1 PageRequest.java

接收当前页码和每页数量的请求

import lombok.Data;
import org.springframework.stereotype.Component;//标注一个类为Spring容器的Bean，（把普通pojo实例化到spring容器中，相当于配置文件中的）
@Component
//导入lombok包，加入注解@Data，无需添加get()、set()、toString()方法
@Data
public class PageRequest {/**当前页码*/private int pageNum;/**每页数量*/private int pageSize;
}

2.2 PageResult.java

得到分页结果

import lombok.Data;
import org.springframework.stereotype.Component;
import java.util.List;//标注一个类为Spring容器的Bean，（把普通pojo实例化到spring容器中，相当于配置文件中的）
@Component
//导入lombok包，加入注解@Data，无需添加get()、set()、toString()方法
@Data
public class PageResult {/** 当前页码 */private int pageNum;/** 每页数量 */private int pageSize;/** 记录总数 */private long totalSize;/** 页码总数 */private int totalPages;/** 数据模型*/private List content;
}

3.分页工具类PageUtils.java

工具类目录util下新建PageUtils.java

import com.fk.digitaltwin.pojo.PageResult;
import com.github.pagehelper.PageInfo;public class PageUtils {/*** 将分页信息封装到统一的接口* @param pageInfo* @return*/public static PageResult getPageResult(PageInfo pageInfo) {PageResult pageResult = new PageResult();pageResult.setPageNum(pageInfo.getPageNum());pageResult.setPageSize(pageInfo.getPageSize());pageResult.setTotalSize(pageInfo.getTotal());pageResult.setTotalPages(pageInfo.getPages());pageResult.setContent(pageInfo.getList());return pageResult;}
}

二、后端使用

查询的实体类：MeshPosition
查询的表名：MeshPosition

1.sql语句

根据用户名查询MeshPosition信息

select * from MeshPosition where username = #{username}

2.mapper接口

根据用户名查询MeshPosition信息

List findMeshPositionListByPage(String username);

3.controller

接收前端的pageQuery参数，包含当前页码和每页数量。

@RequestMapping(value = "/routeByPage", method = RequestMethod.POST)@ResponseBodypublic PageResult routeByPage(HttpSession session, @RequestBody PageRequest pageQuery){return manyouService.MeshPositionListByPage(session, pageQuery);}

4.Service

public PageResult MeshPositionListByPage(HttpSession session, PageRequest pageRequest);

5.ServiceImpl

实现分页，传给前端分页结果。

@Overridepublic PageResult MeshPositionListByPage(HttpSession session, PageRequest pageRequest) {return PageUtils.getPageResult(getPageInfo(session,pageRequest));}/*** 调用分页插件完成分页* @param pageRequest* @return*/private PageInfo getPageInfo(HttpSession session,PageRequest pageRequest) {int pageNum = pageRequest.getPageNum();int pageSize = pageRequest.getPageSize();PageHelper.startPage(pageNum, pageSize);List sysMenus = manyouMapper.findMeshPositionListByPage((String) session.getAttribute("username"));return new PageInfo(sysMenus);}

三、前端vue利用axios传参和接收分页结果，利用element-plus控件展现

1.前端数据格式的基础设置

前端数据格式的基础设置

2.axios传参和接收分页结果

axios传参和接收分页结果，data里的数据为传到后端参数。

let data = {pageNum: query.pageIndex, pageSize: query.pageSize};
let getData = () => {data = {pageNum: query.pageIndex, pageSize: query.pageSize};routeData(data).then(res => {console.log("分页信息:",res.data);tableData.value = res.data.content;pageTotal.value = res.data.totalSize || 50;});
};
getData();

打印前端res.data为接收的分页信息。

3.完整的.vue文件参考（仅实现分页展示功能。编辑、删除等功能没有实现）