若依数据分页功能的实现

news2025/7/9 22:54:52

目录

一、问题引出

 二、原理分析:

①前端部分:

②后端部分:

三、总结


一、问题引出

我们可以注意到若依界面中处理大量数据时,一个页面展示不过来时,会采纳多页处理的方法。

此时我们拿若依里边的系统管理中的日志管理的登录日志浏览分页的效果。

 二、原理分析:

我们分别从前后端两方面去探讨一下这个分页功能的原理:

①前端部分:

先找到前端部分代码中的ruoyi-ui/src/views/monitor/operlog/index.vue中的这一串代码。

初始化了total为0 所返回的total的值取决于后台所传来的数据条数; @pagination所绑定的getList方法 负责处理所返回的数据 实现分页功能。

 getList方法中调用了List函数 

其中method:'get'为请求的访问方式即对应后端的GetMapping;

 页面端使用F12开发者工具查看了网络中的XHR和提取 可以看到后端返回了

其中pageNum和pageSize分别为页面数和每页所存放数据条数;

②后端部分:

startPage()和getDataTable(List)分别起到了分页功能的实现和返回数据库数据的功能。任何分页功能的实现都需先执行startPage()这个方法。

@RequestMapping("/monitor/operlog")

 其中startPage():

 getDataTable(List):

此时可以看到的后端的log输出结果如下所示

19:17:02.757 [http-nio-8080-exec-27] WARN  c.a.d.p.DruidAbstractDataSource - [testConnectionInternal,1494] - discard long time none received connection. , jdbcUrl : jdbc:mysql://localhost:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8, version : 1.2.8, lastPacketReceivedIdleMillis : 159511
19:17:02.786 [http-nio-8080-exec-27] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - ==>  Preparing: SELECT count(0) FROM sys_logininfor
19:17:02.787 [http-nio-8080-exec-27] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - ==> Parameters: 
19:17:02.792 [http-nio-8080-exec-27] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - <==      Total: 1
19:17:02.793 [http-nio-8080-exec-27] 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 ?, ?
19:17:02.793 [http-nio-8080-exec-27] DEBUG c.r.s.m.S.selectLogininforList - [debug,137] - ==> Parameters: 10(Long), 10(Integer)
19:17:02.797 [http-nio-8080-exec-27] DEBUG c.r.s.m.S.selectLogininforList - [debug,137] - <==      Total: 10

SQL 被MyBatis 拦截改变了,selectOperLogList 函数对应两句SQL:
*一句查询表的总行数[count(0)]
*一句对查询数据做了行数输出限制[LIMIT 10]


count(0):表数据的总行数
LIMIT 有两种形式:
*LIMIT num:数据的前num 个
*LIMIT offset,num:从offset 偏移位置开始的num 个数据

所以当我们取参数为pageNum=2&pageSize=10时 后端输出log为:

19:23:09.115 [http-nio-8080-exec-36] WARN  c.a.d.p.DruidAbstractDataSource - [testConnectionInternal,1494] - discard long time none received connection. , jdbcUrl : jdbc:mysql://localhost:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8, version : 1.2.8, lastPacketReceivedIdleMillis : 210976
19:23:09.140 [http-nio-8080-exec-36] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - ==>  Preparing: SELECT count(0) FROM sys_logininfor
19:23:09.140 [http-nio-8080-exec-36] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - ==> Parameters: 
19:23:09.144 [http-nio-8080-exec-36] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - <==      Total: 1
19:23:09.145 [http-nio-8080-exec-36] 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 ?, ?
19:23:09.145 [http-nio-8080-exec-36] DEBUG c.r.s.m.S.selectLogininforList - [debug,137] - ==> Parameters: 10(Long), 10(Integer)
19:23:09.148 [http-nio-8080-exec-36] DEBUG c.r.s.m.S.selectLogininforList - [debug,137] - <==      Total: 10

先SELECT count(0)从后台数据库sys_loginifor取出所有数据,然后再去筛选相应的数据值;

limit后面的10(Long)作用是显示当前页面比如此时我取到第二页面之前也有储存的数据多少,因为是第二页面所以已经储存了10个数据,即是10(Long);而后面的10(Integer)的作用就是等价于PageSize就是每页数据多少;Total:10就是表示当前页面数据总量多少。

三、总结

分页的效果:

分页处理一方面可以提高我们浏览数据的效率,符合我们浏览者的心理,减少了大量数据存在的杂乱问题;另一方面用sql进行数据查询时就实现分页,如mysql的limit,sql查询结果是第几页的数据,十分的效率;同时分页技术也可以,降低带宽使用,提高访问速度。

分页的原理:前端采用参数pageNum 和pageSize;后端采用函数startPage 和getDataTable;

后端分页原理的原理简析:先使用count(0)查询数据总数,再在查询语句之后加上LIMIT指令进行筛选。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406424.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Umi4 从零开始实现动态路由、动态菜单

Umi4 从零开始实现动态路由、动态菜单&#x1f355; 前言&#x1f354; 前期准备&#x1f4c3; 数据表&#x1f917; Mock数据&#x1f517; 定义类型&#x1f388; 开始&#x1f383; 获取路由信息&#x1f9f5; patchRoutes({ routes, routeComponents})&#x1f4f8; 生成动…

第二十一篇 vue组件引入使用

这篇内容是关于组件在Vue中的引入和使用&#xff1b;什么是组件以及做组件化的开发&#xff0c;在Vue中&#xff0c;组件是构成页面中独立结构单元&#xff0c;能够减少重复代码的编写&#xff0c;提高开发效率&#xff0c;降低代码耦合度&#xff0c;便于维护和管理&#xff1…

前端请求中body和query传参

前端发送请求最常用的是get请求和post请求 get请求只能传query参数&#xff0c;query参数都是拼接在请求地址上的。 post可以传body和query两种形式的参数。 get请求在url中传送的参数是有长度限制的&#xff0c;而post没有限制。 get比post更不安全&#xff0c;因为参数直接…

十、Echart图表 之 dataZoom区域缩放 基本使用与配置大全

&#x1f353; 作者主页&#xff1a;&#x1f496;仙女不下凡&#x1f496; &#x1f353; 前言介绍&#xff1a;以下&#x1f447;内容是我个人对于该技术的总结&#xff0c;如有不足与错误敬请指正&#xff01; &#x1f353;Echart官网地址&#xff1a;https://echarts.ap…

layui-icon各种常用动态图标

<buttonid"btnPrintDetail"class"<br/>layui-btnicon-btn"><iclass"<br/>layui-icon">&#xe66d;</i>明细打印</button> icon很多&#xff0c;选择起来纷繁复杂&#xff0c;罗列一点常用的&#xff0c;用…

uniapp scroll-view基础用法

前言 在uniapp日常开发的过程中经常会有局部滚动的需求&#xff0c;而scroll-view组件正好可以满足这一需求。需注意在webview渲染的页面中&#xff0c;区域滚动的性能不及页面滚动。 纵向滚动 将scroll-view组件中的属性scroll-y设定为true开启纵向滚动功能&#xff0c;给scr…

【vue2】axios请求与axios拦截器的使用详解

&#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;当我们在路由跳转前与后我们可实现触发的操作 【前言】ajax是一种在javaScript代码中发请…

SAP ABAP——SAP简介(三)【S/4 HANA前端显示界面】

&#x1f482;作者简介&#xff1a; Thunder Wang&#xff0c;一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学在读&#xff0c;同时任汉硕云&#xff08;广东&#xff09;科技有限公司ABAP开发顾问。在学习工作中&#xff0c;我通常使用偏后端的开发语言AB…

Ubuntu18.04安装Nvidia驱动【全网不坑,超全步骤】(亲测~)

Ubuntu18.04安装Nvidia驱动【全网不坑&#xff0c;超全步骤】亲测&#xff5e;为了方便以后回忆以及给像我一样的菜鸡提供思路&#xff0c;给出具体的步骤&#xff1a;No.1 查看自己的电脑显卡型号&#xff08;已知麻烦自动略过&#xff09;No.2 下载电脑对应的Nvidia版本驱动N…

Vue脚手架报错:‘v-model‘ directives require no argument 解决方案

1、报错&#xff1a; v-model directives require no argument 截图 2、原因&#xff1a; ESLint对vetur进行了eslint检查 3、解决方法 ① 修改模板中使用v-show 将 v-model:show"show" 改为 v-model"show" ② vetur插件的作者给出了解决办法 我们可…

【一起学Rust | 框架篇 | Viz框架】轻量级 Web 框架——Viz

文章目录前言特点一、Hello Viz1. 创建项目2. 引入viz3. 运行Hello Viz4. 运行结果注意二、Hello Viz代码详解导入组件处理请求主函数三、常见用法简单的处理程序实现处理程序特质路由传参链式组合程序中间件参数接收器路由一个简单的路由CRUD操作资源总结前言 Viz&#xff0c…

TS的类型声明

目录 1.TS把JS变成了静态类型的语言&#xff0c;可以给变量指定类型 2.JS中的函数是不考虑参数的类型和个数的&#xff0c;但是TS会考虑函数的参数类型和个数&#xff0c;且要规定返回值类型。 3.常见的TS类型 1.可以直接使用字面量进行类型声明 字面量声明的应用:可以使用…

讲解HTML和CSS(超详细)

讲解HTML和CSS&#xff08;超详细&#xff09;一、初始HTML和CSS1.html的发展历史2.html3.css二、HTML1.基本框架2.HTML5常用的标签和属性三、CSS1.css的使用2.css选择器总结提示&#xff1a;以下是我的一些经验之谈&#xff0c;下面案例可供参考 一、初始HTML和CSS 1.html的…

手撕前端面试题【javascript~ 总成绩排名、子字符串频次统计、继承、判断斐波那契数组等】

前端JavaScript面试题&#x1f353;&#x1f353;总成绩排名&#x1f353;&#x1f353;子字符串频次&#x1f353;&#x1f353;继承&#x1f353;&#x1f353;判断斐波那契数组&#x1f353;&#x1f353;js中哪些操作会造成内存泄漏?html页面的骨架&#xff0c;相当于人的…

Vue中的过滤器(filter)

一、Vue中的过滤器是什么 过滤器&#xff08;filter&#xff09;是输送介质管道上不可缺少的一种装置,大白话&#xff0c;就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据&#xff0c;只是对数据进行加工处理后返回过滤后的数据再进行调用处理&#xff0c;我们也可以理…

Java利用fastjson解析复杂嵌套json字符串、json数组;json字符串转Java对象,json数组转list数组

文章目录前言一、什么是JSON对象&#xff1f;二、什么是json字符串&#xff1f;二、什么是JSON数组&#xff1f;三、复杂、嵌套的json字符串四、json字符串转换4.1 简单json字符串转换为java对象4.2 简单json字符串数组转换为list数组4.3 复杂嵌套json字符串数组转换为Java对象…

十大常用web前端UI组件库,赶紧收藏

今天主要介绍web前端常用的UI库&#xff0c;这些网站基本都是背靠互联网大厂&#xff0c;值得web前端开发者收藏&#xff0c;当然还是要多多学习使用。 Vant 一款有赞出品轻量、可靠的的移动UI组件库&#xff0c;目前支持 Vue2、Vue3、React&#xff0c;微信和支付宝小程序&a…

Vue基础语法知识(自用,完整版)

Vue基础语法知识 1、想让Vue工作&#xff0c;就必须创建一个Vue实例&#xff0c;且要传入一个配置对象 2、root容器里的代码依然符合html规范&#xff0c;只不过混入了一些特殊的Vue语法 3、root容器中里的代码被称为【Vue模板】 4、Vue实例和容器是一一对应的 5、真实开发…

手机+PC电脑如何使用油猴插件和油猴脚本?

一、移动端使用油猴脚本 移动端可以不使用油猴插件&#xff0c;就可直接安装脚本&#xff08;需要浏览器支持&#xff09;&#xff0c;这样天然支持油猴脚本的移动浏览器还是很多&#xff0c;比如&#xff1a;书签地球、X浏览去、M浏览器等&#xff0c;但是各个浏览器的支持情…

前端Vue项目部署到服务器过程,以及踩坑记录

目录 需求 过程 踩坑 nginx服务器404错误的原因 404 Not Found nginx服务器500错误的原因 500 Internal Server Error nginx反向代理 需求 前后端完成项目后&#xff0c;需要部署到本地的服务器上。 第一次部署&#xff0c;以下是从0开始慢慢学着弄的详细过程 过程 …