当前位置: 首页 > news >正文

Vue+ElementUI+SpringBoot项目配合分页插件快速实现分页(简单暴力)

  1. 首先需要在项目中引入Element-UI的组件库,使用以下命令,不会引入的请自行百度。

npm i element-ui -S
Element官网地址:https://element.eleme.cn/#/zh-CN/component/changelog

  1. 去Element-UI官网组件库找到合适的分页插件,并把他引入到你的Vue项目中,比如下面的是我的项目中使用的插件(注意div包裹的全部内容以及div需要在<template></template>标签里面)
<!--分页插件--><div class="block"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 15, 20]":page-size="5"layout="total, sizes, prev, pager, next, jumper":total="totalPage"></el-pagination></div

官网链接:https://element.eleme.cn/#/zh-CN/component/pagination
其中分页插件属性官网有介绍,可以详细的去看看。

其中最重要的是图片中的两个函数方法的调用在这里插入图片描述
比如在我的项目中代码如下,其中val值就是我们需要传给后端的。

  //改变每页条数handleSizeChange(val) {let that = this ;this.axios.get('http://localhost:8081/eom/selectBoxAndMeter?pageSize='+val).then(function(res){that.totalPage=res.data.data.total;that.dataList = res.data.data.list;}).catch(function(err){console.log(err);});},
//改变页数handleCurrentChange(val) {let pageNum=val;let that = this ;this.axios.get('http://localhost:8081/eom/selectBoxAndMeter?pageNum='+pageNum).then(function(res){that.totalPage=res.data.data.total;that.dataList = res.data.data.list;}).catch(function(err){console.log(err);});},

方法里面的axios的get请求详细的地址在图片中有展示,接下来就是后端代码部分

  1. 首先需要引入分页插件PageHelper,引入坐标如下:
 		<!--分页插件--><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.1</version></dependency>

引入插件后在SpringBoot项目中无需任何配置,需要值得注意的是,如果引入PageHelper插件后项目运行报错或者启动报错,那大概就是版本冲突问题,比如我的版本是1.4.1,解决办法可以参考链接:开发中遇到的问题合集

我的Controller层代码如下:

 @RequestMapping(value = "selectBoxAndMeter")public Result selectBoxAndMeter(@RequestParam(value = "pageNum",required = false,defaultValue = "1")Integer pageNum,@RequestParam(value = "pageSize",required = false,defaultValue = "5")Integer pageSize){return eomService.selectBoxAndMeter(pageNum,pageSize);}

需要注意的是@RequestParam接受的pageNum和pageSize名称需要和前端请求的名称相同,还有请求路径映射一般要用 @RequestMapping(value = “”)的形式。

接下来就是最重要的service层代码:

		PageHelper.startPage(pageNum,pageSize);List<TgInfoDto> infoLists = eomMapper.selectBoxAndMeter();//分页集合PageInfo<TgInfoDto> pageInfo=new PageInfo<>(infoLists);if (infoLists.isEmpty()){return Result.fail(400,"集合为空");}return Result.success(pageInfo);

我们只需要关注PageHelper.startPage(pageNum,pageSize)方法和 PageInfo pageInfo=new PageInfo<>(infoLists)方法,虽然我们需要查询和返回的集合是infoLists,但是使用分页插件后我们需要把他封装进 PageInfo对象中,最终返回的是 PageInfo对象,其中 PageInfo源码如下:
在这里插入图片描述
其中图片上面的数据,系统会给我们封装好,并且返回给前端,并且包括你自己封装好的集合。
接下来我们使用Postman测试一下,结果如下:
在这里插入图片描述
在这里插入图片描述
经过测试可以看到,插件已经把我们需要的数据已经封装好了。

相关文章:

Vue+ElementUI+SpringBoot项目配合分页插件快速实现分页(简单暴力)

首先需要在项目中引入Element-UI的组件库&#xff0c;使用以下命令&#xff0c;不会引入的请自行百度。 npm i element-ui -S Element官网地址&#xff1a;https://element.eleme.cn/#/zh-CN/component/changelog 去Element-UI官网组件库找到合适的分页插件&#xff0c;并把他引…...

【回眸】牛客网刷刷刷!嵌入式软件中也会遇到的嵌入式硬件,通讯,通讯协议专题(一)

前言 最近继续刷题&#xff0c;看看嵌入式软件还需要了解一些嵌入式硬件中的通讯协议和常用接口协议 比如说SPI CAN I2C 通讯协议专题 1.波特率 波特率 每秒传送的字符数 * 字符位数。串口的工作模式为1个起始位&#xff0c;7个数据位&#xff0c;1个校验位&#xff0c;1个…...

使用Vue展示数据(动态查询)

学习内容来源&#xff1a;视频P4 本篇文章进度接着之前的文章进行续写 精简前后端分离项目搭建 Vue基础容器使用 目录选择组件修改表格组件修改分页组件增加后端接口前端请求数据接口页面初始化请求数据点击页码请求数据选择组件 在官方文档中选择现成的组件&#xff0c;放在页…...

构建数据库测试数据——mysql

建表脚本 -- 建表 CREATE TABLE test_table (id INT(11) NOT NULL AUTO_INCREMENT,varchar_col VARCHAR(50),char_col CHAR(10),text_col TEXT,tinyint_col TINYINT(4),smallint_col SMALLINT(6),mediumint_col MEDIUMINT(9),int_col INT(11),bigint_col BIGINT(20),float_col…...

你想要的Android性能优化系列:启动优化 !

App启动优化为什么要做App的启动优化&#xff1f;网页端存在的一个定律叫8秒定律&#xff1a;即指用户访问一个网站时&#xff0c;如果等待打开的时间超过8秒&#xff0c;超过70%的用户将会放弃等待。同样的&#xff0c;移动端也有一个8秒定律&#xff1a;如果一个App的启动时间…...

python3的基础入门3:基本数据类型

基本数据类型 python 中的变量不需要声明。每个变量在使用前都必须赋值&#xff0c;变量赋值以后该变量才会被创建。 在 Python 中&#xff0c;变量就是变量&#xff0c;它没有类型&#xff0c;我们所说的"类型"是变量所指的内存中对象的类型。 等号&#xff08;&…...

消息队列原理与实战-学习笔记

消息队列&#xff1a;保存消息的一个容器&#xff0c;本质是个队列&#xff0c;但是需要支持高吞吐、高并发、高可用。 1 前世今生 1.1 业界消息队列对比 Kafka:分布式的、分区的、多副本的日志提交服务&#xff0c;在高吞吐场景下发挥较为出色RocketMQ:低延迟、强一致、高性…...

Linux权限相关知识(大量图文展示,及详细操作)

Linux权限相关概念 Linux下有两种用户&#xff1a;一种是超级用户&#xff08;root&#xff09;、一种是普通用户。 超级用户&#xff1a;可以在linux系统下做任何事情&#xff0c;不受限制 普通用户&#xff1a;在linux下做有限的事情。 超级用户的命令提示符是“#”&#xf…...

Ep_操作系统面试题-什么是协程

协程 是一种 比线程更加轻量级的存 在&#xff0c;一个线程可以拥有多个协程。是一个特殊的 函数 &#xff0c;这个函数可以在某个地方挂起&#xff0c;并且可以重新在挂起处外继续运行。协程 不是被操作系统内核所管理 &#xff0c; 而完全是由程序所控制&#xff08;也就是在…...

在C#中使用互斥量解决多线程访问共享资源的冲突问题

在阿里云上对互斥量的概述&#xff1a;互斥量的获取是完全互斥的&#xff0c;即同一时刻&#xff0c;互斥量只能被一个任务获取。而信号量按照起始的计数值的配置&#xff0c;可以存在多个任务获取同一信号量的情况&#xff0c;直到计数值减为0&#xff0c;则后续任务无法再获取…...

JavaEE进阶第六课:SpringBoot配置文件

上篇文章介绍了SpringBoot的创建和使用&#xff0c;这篇文章我们将会介绍SpringBoot配置文件 目录1.配置文件的作用2.配置文件的格式2.1 .properties语法2.1.1.properties的缺点2.2 .yml语法2.2.1优点分析2.2.2配置与读取对象2.2.3配置与读取集合2.2.4补充说明3.设置不同环境的…...

MySQL基础(一)SQL分类、导入、SELECT语句,运算符

目录 MySQL安装以及相关工具 SQL分类 导入数据 最基本的SELECT语句 SELECT FROM 列的别名 去除重复行 着重号 查询常数 描述表结构 过滤数据&#xff08;重要&#xff09; 运算符 算数运算符 比较运算符 符号运算符 非符号运算符 逻辑运算符 位运算符 MySQL安…...

反激与正激的区别

之前学习了正激开关电源&#xff0c;但是对于正激和反激一直不是很清楚&#xff0c;网上找了一篇&#xff0c;觉得感觉该可以&#xff0c;以此记录。正激和反激是两种不同的开关电源技术一、正激&#xff08;1&#xff09;概述正激式开关电源是指使用正激高频变压器隔离耦合能量…...

王道操作系统课代表 - 考研计算机 第四章 文件管理 究极精华总结笔记

本篇博客是考研期间学习王道课程 传送门 的笔记&#xff0c;以及一整年里对 操作系统 知识点的理解的总结。希望对新一届的计算机考研人提供帮助&#xff01;&#xff01;&#xff01; 关于对 “文件管理” 章节知识点总结的十分全面&#xff0c;涵括了《操作系统》课程里的全部…...

前端开发规范,你真的了解吗?一起来学习一下前端开发规范,让你的代码高级起来!

代码规范 1 编码风格规范 1.1 使用ES6风格编码源码 定义变量使用let ,定义常量使用const 使用export &#xff0c;import 模块化 1.2 组件 props 原子化 提供默认值 使用 type 属性校验类型 使用 props 之前先检查该 prop 是否存在 1.3 避免 this.$parent 1.4 谨慎使用 …...

Licode—基于webrtc的SFU/MCU实现

1. webrtc浅析webrtc的前世今生、编译方法、行业应用、最佳实践等技术与产业类的文章在网上卷帙浩繁&#xff0c;重复的内容我不再赘述。对我来讲&#xff0c;webrtc的概念可以有三个角度去解释&#xff1a;&#xff08;1&#xff09;.一个W3C和IETF制定的标准&#xff0c;约定…...

开发运维工具推荐 --- 解决远程访问局域网服务的问题。开发调试推荐

一、FastNat 可为您解决的问题1. 没公网服务器&#xff0c;需要发布本地的站点或网络程序到公网上&#xff0c;供他人访问&#xff1b;此项功能大大方面开发人员进行远程调试&#xff0c;微信小程序等开发工作进行。2. 需要远程到在其他网络中的设备&#xff0c;但两处的网络不…...

【华为OD机试 】单词倒序(C++ Java JS Python)

文章目录 题目描述输入描述输出描述备注用例题目解析C++ 解法JavaScript算法源码Java算法源码Python解法题目描述 输入单行英文句子,里面包含英文字母,空格以及,.?三种标点符号,请将句子内每个单词进行倒序,并输出倒序后的语句。 输入描述 输入字符串S,S的长度 1 ≤ N…...

PLC 诊断故障的基本原理

(1)东欢坨选煤厂机电设备故障信号主要取自开关量信号,PLC 通过开关量的通和断对设备进行故障诊断。PLC 对开关量的识别是通过输入模块来实现的。PLC 控制设备运行时,设备中的温度、压力、急停、跑偏、速度、过热以及各种按钮和行程开关的传感器与 PLC 输入模块相连接,输入模块的…...

QT打开外部程序并嵌入Qt子窗口的缺点

首先可以参考如下文章&#xff1a; QT打开外部程序并嵌入Qt界面_qt界面嵌入外部应用程序_初学小白Lu的博客-CSDN博客 Qt嵌入外部程序界面初探_qt嵌入其他程序窗口_liming4675的博客-CSDN博客 QT 如何把外部程序嵌入到QT界面_qt嵌入其他程序窗口_hellokandy的博客-CSDN博客 Qt界…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...