RuoYi-Vue的数据分页

K123465489

已于 2024-12-08 18:30:20 修改

阅读量1.9k

点赞数 41

文章标签： vue.js 前端 javascript

于 2024-12-08 18:29:24 首次发布

本文链接：https://blog.youkuaiyun.com/K123465489/article/details/144324397

版权

引言

数据分页是一种在显示大量数据时，将数据分割成多个小块（页）的技术。当用户访问一个包含大量信息的网站或应用程序时，一次性加载所有数据可能会导致页面加载时间过长，用户体验差，甚至可能因为数据量过大而影响系统的性能和稳定性。数据分页是提高Web应用和移动应用性能及用户体验的重要技术之一。正确实施分页机制可以极大地改善网站的可用性和效率。

在实现数据分页时，开发者需要考虑几个关键因素：

每页显示的项目数量：这个数量应该根据内容类型、用户预期以及屏幕尺寸来决定。
分页链接的设计：包括“上一页”、“下一页”按钮，数字页码链接等，应确保直观易用。
URL结构：为了保持SEO友好性，分页的URL应当清晰地反映出当前页码，同时避免创建过多重复内容。
性能优化：当处理海量数据集时，后端逻辑需要高效地查询和返回特定范围内的数据记录，以保证快速响应。

一、实例展示

1.1登录日志查询

进入方式：系统管理–>日志管理–>登录日志

进入若依管理系统登陆日志中我们可以看到，它将我们的登录信息进行了分页的设计。

1.2分析

何以见得呢，我们从一下几个方面进行剖析：

提升用户体验：
- 分页可以避免一次性加载过多信息，使得页面更加简洁明了，用户可以更容易地找到他们需要的信息。
- 通过提供清晰的导航选项（如“上一页”、“下一页”或具体的页码链接），用户可以轻松浏览不同部分的数据。
提高性能和响应速度：
- 对于大型数据集，分页能够减少每次请求的数据量，从而加快页面加载时间，降低服务器负担。
- 它还减少了客户端处理大量DOM元素的需求，提高了前端性能。
优化资源使用：
- 减少了不必要的网络传输，节省带宽。
- 减轻数据库的压力，因为不是所有记录都被同时读取出来；而是根据用户的请求逐步加载。
增强可访问性和SEO友好性：
- 正确实现的分页有助于搜索引擎更好地索引网站内容，因为每个页面都有一个独特的URL，这可以帮助改善网站在搜索结果中的表现。
- 对于屏幕阅读器等辅助技术而言，有序且结构化的页面也更易于解析和传达给残障人士。
支持更好的数据分析和决策：
- 在一些应用场景中，比如电子商务平台的商品列表或者社交媒体上的帖子流，分页可以让用户专注于最新的、最相关的内容，同时保持历史数据的可访问性。
- 对于管理员或分析师来说，分页也有助于管理大数据集，使得监控和分析特定时间段内的活动变得更加容易。

总之，数据分页是现代Web开发和移动应用设计中的一个重要组成部分，它对于确保高效的数据展示、提升用户体验以及维持系统的高性能都起着关键作用。

二、源码分析

2.1前端代码

2.1.1登录日志页面源码

2.1.2调用函数链

2.3开发者工具查看前端访问后端信息

2.2后端代码

2.2.1startPage()函数

2.2.2getDataTable()函数

2.2.3输出结果（后端log）

11:29:41.353 [http-nio-8080-exec-28] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - ==>  Preparing: SELECT count(0) FROM sys_logininfor
//开始准备执行查询总记录数的SQL语句，用于分页时计算总页数

11:29:41.356 [http-nio-8080-exec-28] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - ==> Parameters: 
// 查询总记录数时没有参数需要传递，因为是统计所有记录的数量

11:29:41.357 [http-nio-8080-exec-28] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - <==      Total: 1
// 成功执行了查询总记录数的SQL语句，并返回了结果，这里显示总共有1条记录

11:29:41.358 [http-nio-8080-exec-28] DEBUG c.r.s.m.S.selectLogininforList - [debug,137] - ==>  Preparing: select info_id, user_name, ipaddr, login_location, browser, os, status, msg, login_time from sys_logininfor order by info_id desc LIMIT ?, ?
// 准备执行另一个SQL查询，从sys_logininfor表中选择特定字段，并根据info_id降序排列，同时使用LIMIT子句限制返回的记录数量
// 这里的SQL语句使用了两个占位符（？，?），分别代表LIMIT子句的偏移量和限制数目

11:29:41.359 [http-nio-8080-exec-28] DEBUG c.r.s.m.S.selectLogininforList - [debug,137] - ==> Parameters: 10(Long), 10(Integer)
// 设置LIMIT子句中的参数值，第一个参数为偏移量（10），意味着跳过最初的10条记录；第二个参数为限制数目（10），意味着返回接下来的10条记录
// 注意这里使用了Long和Integer两种类型，这取决于应用程序或数据库驱动程序的具体实现

11:29:41.361 [http-nio-8080-exec-28] DEBUG c.r.s.m.S.selectLogininforList - [debug,137] - <==      Total: 10
// 成功执行了获取登录信息列表的SQL语句，并返回了结果，这里显示共返回了10条记录