若依数据分页功能的实现

这篇具有很好参考价值的文章主要介绍了若依数据分页功能的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、问题引出

 二、原理分析:

①前端部分:

②后端部分:

三、总结


一、问题引出

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

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

若依分页,若依专栏,vue.js,前端,javascript

 二、原理分析:

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

①前端部分:

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

若依分页,若依专栏,vue.js,前端,javascript

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

若依分页,若依专栏,vue.js,前端,javascript

 getList方法中调用了List函数 

若依分页,若依专栏,vue.js,前端,javascript

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

若依分页,若依专栏,vue.js,前端,javascript

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

若依分页,若依专栏,vue.js,前端,javascript

若依分页,若依专栏,vue.js,前端,javascript

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

②后端部分:

若依分页,若依专栏,vue.js,前端,javascriptstartPage()和getDataTable(List)分别起到了分页功能的实现和返回数据库数据的功能。任何分页功能的实现都需先执行startPage()这个方法。

@RequestMapping("/monitor/operlog")

 其中startPage():

若依分页,若依专栏,vue.js,前端,javascript

 getDataTable(List):

若依分页,若依专栏,vue.js,前端,javascript

此时可以看到的后端的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就是表示当前页面数据总量多少。

若依分页,若依专栏,vue.js,前端,javascript

三、总结

分页的效果:

若依分页,若依专栏,vue.js,前端,javascript

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

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

后端分页原理的原理简析:先使用count(0)查询数据总数,再在查询语句之后加上LIMIT指令进行筛选。文章来源地址https://www.toymoban.com/news/detail-798812.html

到了这里,关于若依数据分页功能的实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页

    Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页:         当table的数据量比较大的时候,一个屏幕展示不出全部的数据,这个时候就需要分页显示。而多数情况下都是做的后端分页,就是将分页参数和查询条件一并传到后端,后端将当前页要

    2024年01月20日
    浏览(55)
  • 若依框架ruoyi前后端实现自定义分页功能(ES分页查询)

    若依 ruoyi 框架主要针对 Sql 进行了分页集成,像平时别的一些数据库或者中间件的分页,则需要自己实现. 本文主要使用 ES 的分页查询为例,展示前后端的基本操作,原理可以类推到其他中间件分页查询上.

    2024年02月12日
    浏览(53)
  • vue+face-api.js实现前端人脸识别功能

    近期做了一个前端vue实现人脸识别的功能,主要功能逻辑包含:人脸识别,人脸验证,唤起摄像头视频流之后从三个事件(用户点头、摇头、眨眼睛)中随机选中两个事件,待两个事件通过判断后人脸静止不动3秒钟后截取视频流生成图片,上传到阿里或者腾讯oss,通过oss返回

    2024年02月05日
    浏览(47)
  • 若依框架列表分页功能失效解决办法

    在近期针对若依框架进行开发的过程中,发现通过controller层对查询出的列表数据进行修改封装(将部分数据字段做了码值映射处理,整体条数未发生变化)后,分页功能会出现问题:查询列表的时候明明有上百条数据,但却显示total只有10条,且只有一页。经过debug分析发现主

    2024年02月16日
    浏览(43)
  • 若依RuoYi-Cloud框架前端vue安装时报 core-js/modules/es.error.cause.js错误怎么解决?

    如下所示,新手安装若依RuoYi-Cloud框架前端vue时会报如下错误: ERROR Failed to compile with 7 errors This dependency was not found: core-js/modules/es.error.cause.js in ./node_modules/@babel/runtime/helpers/createForOfIteratorHelper.js, ./src/directive/permission/hasRole.js and 5 others To install it, you can run: npm install --save core

    2024年02月12日
    浏览(48)
  • vue 前端 + 若依(ruoyi)后端 实现国际化

    记录一下,前端使用vue,后端使用若依(ruoyi,基于spring-boot)实现页面,后端返回提示信息国际化 vue:2.6.12 vue-i18n:^8.27.2 安装vue-i18n,注:最新的交于该版本有差异,所以指定使用版本:8.27.2 添加国际化js文件:language.en_US.js 添加国际化js文件:language.zh_CN.js 添加i18n.js ma

    2024年02月12日
    浏览(56)
  • 若依ruoyi前端vue使用jsencrypt.js加密后端java进行RSA解密(前后端交互RSA加解密)

    目录 1、前后端RSA加解密实现思路 2、前端 3、后端 按照约定来说公钥一般用来加密,大家都可以获取得到,私钥用来解密,当然你也可以混着用,以下示例是前端通过加密,后端解密.  -----BEGIN PUBLIC KEY----- MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ81AMIIBCgKCAQEA1+05vAf7m5NcLNLkRtsm gp+QdzcW6MVdayGTGBJG0v

    2024年02月06日
    浏览(76)
  • 【若依】框架搭建,前端向后端如何发送请求,验证码的实现,开启注册功能

    若依框架(Ruoyi)是一款基于Spring Boot和Spring Cloud的开源快速开发平台。它提供了一系列的基础功能和通用组件,能够帮助开发者快速构建企业级应用。若依框架采用了模块化的设计理念,用户可以选择需要的功能模块进行集成,也可以根据自己的业务需求进行扩展。若依框架

    2024年02月12日
    浏览(57)
  • Vue 怎样实现分页功能

    Vue是一款流行的前端框架,它提供了丰富的API和组件,可以帮助开发者快速地构建现代化的Web应用程序。在Web应用程序中,分页功能是一个非常常见的需求,它可以帮助用户快速地浏览和查找大量数据。本文将介绍Vue如何实现分页功能,包括数据的获取、分页器的实现、以及

    2024年02月11日
    浏览(36)
  • vue使用printJs实现前端打印,以及打印分页实现

    在web端可以直接使用原生调用方法调用打印,但是往往需要单独把需要打印的东西拎出来画一个单独的html,而使用printJs则可选中你需要打印的代码块,进行页面局部打印 我的需求为将表格打印出来,并且超过分页数进行分页展示 以下内容参考了其他博主的实现方法,仅供参考 1.可

    2024年02月03日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包