ruoyi分页原理的前端后端简单分析

已于 2022-10-21 19:50:16 修改
阅读量1.2k 收藏 1
点赞数
文章标签： ajax java html
于 2022-10-21 19:46:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67434607/article/details/127452170
版权

目录

前端代码

找到书籍操作界面(使用自动生成代码功能生成)的分页组件

 进入listBooks触发ajax请求

 后端返回的Json数据​编辑

 后端代码

首先执行startPage函数(分页操作)

 通过getPageNum和getPageSize获取页数和每一页的列数

回到后端接口函数

下面的函数中将信息和列表数据写入resData对象中传递给前端

 PageSerializable的构造函数进行判断list和Page是否有继承关系

 selecttushuList没用使用pageNum和pageSize所以返回所有数据

 LIMIT对查询数据做了行数输出限制

当前端参数为pageNum=2和pageSize=10对应的后端Log

前端代码

找到书籍操作界面(使用自动生成代码功能生成)的分页组件

getList为分页组件页面改变时会触发的函数

 进入listBooks触发ajax请求

携带查询参数querParams给后端

之后将后端返回的rows(图书列表数据 )赋值给前端变量，total(总列数)赋值给前端变量

 

 后端返回的Json数据

 后端代码

首先执行startPage函数(分页操作)

 通过getPageNum和getPageSize获取页数和每一页的列数

再通过startPage执行分页操作

回到后端接口函数

执行selectBookList函数获取数据库中的book信息

执行getDataTable

下面的函数中将信息和列表数据写入resData对象中传递给前端

其中getTotal函数为PageInfo的父类PageSerializable中的函数

 PageSerializable的构造函数进行判断list和Page是否有继承关系

有则对list进行强转从而能使用子类Page中的getTotal函数获取total

 selecttushuList没用使用pageNum和pageSize所以返回所有数据

 LIMIT对查询数据做了行数输出限制

 

当前端参数为pageNum=2和pageSize=10对应的后端Log

 

R_SynG佰葉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于ruoyi框架web前端开发电商系统用例
11-13
将RuoYi与Vue.js结合，可以实现前后端分离的架构，前端负责展示和交互，后端专注于数据处理和业务逻辑，两者通过API进行通信。 在实际电商系统开发中，开发者可能会遇到以下关键知识点： 1. **组件化开发**：Vue....
结合ruoyi框架的前端代码
09-05
综合以上分析，我们可以推测“lc-mono-camas-vue”是一个使用Vue.js构建的，集成ruoyi框架的企业级后台管理系统，具备用户角色权限管理功能，并且利用ECharts进行数据可视化。项目的开发过程中，Vue的组件化、响应式...
分析若依的分页实现逻辑
IT小辉同学
01-18 1729
爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。
若依数据分页功能的实现
热门推荐
qq_53480941的博客
10-27 1万+
分页的效果：分页处理一方面可以提高我们浏览数据的效率，符合我们浏览者的心理，减少了大量数据存在的杂乱问题；另一方面用sql进行数据查询时就实现分页，如mysql的limit，sql查询结果是第几页的数据，十分的效率；同时分页技术也可以，降低带宽使用，提高访问速度。分页的原理：前端采用参数pageNum 和pageSize；后端采用函数startPage 和getDataTable；后端分页原理的原理简析：先使用count（0）查询数据总数，再在查询语句之后加上LIMIT指令进行筛选。
分页工具-若依（RuoYi）框架提供的startPage
最新发布
m0_65572741的博客
06-09 1262
我们要知道结果startPage（分页方法） +（view对象）----startPage我们上面一直都在说-----那getDataTable其实会封装TableDataInfo对象问题来了：为什么要？？？看看里面多全啊，那我们就不要自己再封装total、状态码啊，很方便！！
RuoYi框架分页拓展 10条数据分一页传给前端
山西没老板
04-30 2138
若依框架分页用的是 PageHelper 插件 若依本身也就封装好了 直接用即可 startPage(); // 这是若依直接封装好的 我们直接把它放到代码中要遍历集合上面即可在pc端完成分页 以上方法我自己有做过测试，需要和前端对应才能进行分页。 但如果是用来测试接口，startPage();回显出来的json 是 以一百条数据为一页的。 但是要实现 十条数据 该怎么去做呢 首先我们要在我们需要实现分页的表的实体类中创建两个参数并生成get set方法 private int pageN
Ruoyi的数据分页分析
Bamboo_243的博客
12-03 402
函数调用链：getList -> list -> request[axios]打开开发者工具，点击第二页，监测到了一个GET请求。④：同②，即返回③指定的位置处开始的10行数据。进入方式：系统管理→日志管理→登录日志。打开登录日志页面源码文件，如下图所示，③：同①，即从表中第10行开始返回数据。①：需显示的数据在表中的起始位置。后端log中的关键输出。②：需显示的数据的行数。
RuoYi-Vue中数据分页功能分析（前后端）
shenmeinan5di的博客
12-03 749
数据分页是指将一批数据按照指定的大小分割成多个页面或数据块，每个页面或数据块包含一部分数据，用于分批显示和处理数据。数据分页通常用于网站、应用程序等需要处理大量数据的场景，以提高数据的加载速度和响应速度。分页大小：每页显示的数据数量，通常设置为10、20、50、100等。数据排序：按照哪个字段进行排序，例如按照时间、价格、名称等。数据筛选：需要显示哪些数据，可以根据不同的条件进行筛选，例如按照类别、地理位置等。分页控制：需要提供分页控制功能，例如上一页、下一页、跳转等。
若依中的数据分页展示
weixin_72307613的博客
10-23 1141
新人的第n次博客
Ruoyi前端后端分离管理系统视频教程100多集
05-13
使用最流行的技术SpringBoot、SpringCloud、Shiro、Thymeleaf、Vue、Element、Bootstrap。绝对保障，买了不会亏，嘎嘎香，提取链接放在了txt文档里，放心好了，
结合ruoyi框架的后端代码
09-05
标题中的“结合ruoyi框架的后端代码”指出我们关注的是一个基于Ruoyi框架的Java后端项目。 Ruoyi是一个流行的开源Java快速开发框架，它为开发者提供了便捷的后端服务构建能力，包括但不限于用户管理、权限控制、数据...
ruoyi-cloud前端工程，使用ant design vue框架
11-04
Ruoyi-Cloud是一款基于Ant Design Vue框架的前端工程，主要应用于web应用开发，特别是后台管理系统的设计和构建。Ant Design Vue是阿里巴巴推出的一款Vue.js组件库，它将Ant Design的设计理念与Vue.js的轻量、易用性...
Springboot | 分页原理以ruoyi为例
Tuan_Better的博客
12-03 812
>后端接受参数并封装成Page类，最后用相关SQL语句(limit)查询数据库，并返回前端->前端接受数据并显示。在views->monitor->operlog->index.vue找到 操作日志 的源码后，找到分页组件。为什么SQL语句中没有写limit，找了下上下代码都没找到一个limit。以ruoyi为例，系统管理->日志管理->操作日志。e.g.LIMIT 5,10 截取从第6个开始，共10条数据。输出第6-16的数据。接着，找到重要的SQL相关的XML文件。，也就是第几页，每页的数据个数。
【学习】若依源码（前后端分离版）之 “ 分页以及查询的功能实现”
qq_44386537的博客
08-04 4396
分页处理一方面可以提高我们浏览数据的效率，符合我们浏览者的心理，减少了大量数据存在的杂乱问题；同时分页技术也可以降低带宽使用，提高访问速度。这次一起来学习ruoyi的分页功能实现
ruoyi数据分页
qq_68499935的博客
11-30 63
第一个问号对应的值（10）表示结果集的起始位置。在这里，它告诉数据库从第11行开始返回结果。函数调用链：getList -> list -> request[axios]第二个问号对应的值（10）表示要返回的行数。在这里，它告诉数据库返回10行结果。
若依框架分页
世界在我口袋的博客
12-03 1729
MyPage类方法定义方法返回的类型是List，返回值的类型是MyPage（使用多态思想）方法调用instanceof 是一个运算符，语法为：引用类型变量(object) instanceof 类(class)功能： 判断前面的对象是否属于后面的类，或者属于其子类；验证若访问接口返回值为100则正确，-1则不正确。
以RuoYi为例分析数据分页
weixin_64890968的博客
11-30 2083
在很多网站都有进行数据分页，那么大家一定有疑问为什么要进行数据分页，数据分页又是怎么实现的？本博客专门以RuoYi为例解释上面的问题
ruoyi若依框架分页功能实现分析
m0_63837020的博客
02-02 2701
ruoyi若依框架分页功能的实现分析，很全面，从基本分析。
RuoYi Vue 数据分页（2023.12.04）
m0_67347494的博客
12-04 154
综上所述，数据分页是一种优化数据处理和展示的重要手段，它提高了性能、优化了用户体验、减少了网络传输量，并且能够更好地控制资源消耗。当处理大量数据时，一次性加载所有数据会导致性能下降，包括长时间的加载等待和高内存消耗。通过数据分页，只加载当前页面所需的数据，可以显著提高页面加载速度和整体性能。数据分页可以提供更好的用户体验。用户可以通过分页指示器或搜索功能快速定位到特定页面或查找特定数据，提供了更好的数据导航和搜索体验。通过数据分页，可以控制每个页面加载的数据量，从而有效控制内存使用和查询性能。
ruoyi框架分离版后端代码下载
06-10
ruoyi框架的分离版后端代码可以在官方GitHub仓库中进行下载。以下是下载步骤： 1. 访问ruoyi官方GitHub仓库：https://github.com/ruoyi-project/ruoyi-cloud 2. 点击“Code”按钮，选择“Download ZIP”，将代码压缩包下载到本地。 3. 解压下载的代码压缩包，在解压后的文件夹中找到“ruoyi-cloud-admin”文件夹，这就是ruoyi框架分离版的后端代码。 4. 将“ruoyi-cloud-admin”文件夹导入到你的IDE中，然后配置好相关的数据库等环境，就可以运行ruoyi框架的分离版后端代码了。 注意：如果你只需要运行后端代码，不需要进行修改或二次开发，建议直接使用官方提供的打包好的jar包，可以在官方GitHub仓库的“releases”页面下载。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值