分页查询与显示

分页查询与展示

在web项目中经常会有需要展示某个表中所有数据的需求,例如下面的场景:

image-20191219093548936

这个功能实现很简单,在MVC+DAO的结构下,为DAO增加一个查询所有的方法,执行select *from xxx就可以获取所有数据

问题

当表中数据很多时(成千上万),会不会有问题?

这个问题可以分阶段来思考:

  1. DAO层是否能够一次性从数据库查询出所有数据?

  2. 从数据库返回后,JVM内存是否能够保存这么多?

  3. View层是否能一次性显示全部?

  • 第一个问题,由于数据库底层存储的是一堆字符串,所以单条数据通常不会占用太多空间,但是一旦数据量超过十万级,数据大小也会在100MB左右,数据库底层走的是TCP链接,传输100MB左右的数据需要一些时间,但是也不会太久,问题不大,除非数据量达到百万千万,我们且假设数据没有这么多

    image-20191219102859676

  • 第二个问题,写个程序创建10w个对象看看行不行,速度很快,看起来问题不大
    image-20191219102026058

  • 第三个问题,在页面上显示10w个图片试试

image-20191219102405005

打开页面直接卡死了..

好吧,傻不拉几的测试过程结束了

最后的结论是客户端无法一次性展示过多数据,

另外即使一次性真的可以显示这么多,用户的使用体验其实也是很差的,眼花缭乱...

分页查询与展示

分页查询与展示就是用来解决上述问题

问题的根本原因就在于一次性展示的数据太多,那么解决方案也就是一次性显示一部分数据,这也是分页展示的本质

实现分页:

在MySQL中可以通过limit来对查询结果进行分段

SQL语法:

select *from tableName limit st,n;

参数解析:

st表示查询的起始位置,注意从0开始

n表示需要查询的记录条数

案例:

每页显示3条数据

image-20191219110223936

#如上述显示第一页的第1-3条数据,sql语句为:
select *from food limit 0,3;

#第二页第4-6条数据,sql语句为
select *from food limit 3,3;

#第三页第4-6条数据,sql语句为
select *from food limit 6,3;

计算起始位置:

可以发现n的值是固定的不会变,但是st的值一直变

开发中不可能在sql中把st的值写死,需要根据当前的页码(第几页)来进行计算,

公式:

#设当前页码为 p  每页条数为 n

st = (p-1) * n
#即当前页码减去1 乘以每页条数

计算总页数:

通常还需要显示页码进度当前页码/总页数

在计算总页数时必须先获取数据的总条数,借助聚合函数count来实现

sql语法:

select count(*) from tableName;

有了总条数后,就可以除以每页条数来得到总页数

公式:

#设总条数为 c 每页条数为 n 从页数为tp
tp = c / n

需要注意的是如果有小数,那么需要向上取整,例如总条数10 每页3条,10/3 = 3.3,意味着需要4页才能全部显示

ok到这里页面上所有需要的数据都准备好了

总结一下:

  • 要实现分页的关键,在于使用limit关键字

  • 页面需提供两个参数,当前页码, 每页条数

  • DAO层需要提供两个方法,获取某页的数据,获取总页数

请求交互流程

不分离:
image-20191219144144600

需要注意的是由于请求对象是瞬时的,请求完成立即销毁,所以JSP中的所有参数也就没有了,我们必须维护当前的页码,在JSP和Servlet之间传递,这个问题在前后端分离时不存在,前端可以自己维护页码

分离:

image-20191219144144600

SQL脚本:

#库
create database db1 charset utf8;
#表
 CREATE TABLE `food` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` char(20) DEFAULT NULL,
  `price` float DEFAULT NULL,
  `unit` char(10) DEFAULT NULL,
  PRIMARY KEY (`id`)
);
INSERT INTO `food` VALUES (1,'苹果',5.8,'500g'),(2,'香蕉',3,'1kg'),(3,'橘子',4,'1kg'),(4,'橙子',6,'500g'),(5,'哈密瓜',8.5,'500g'),(6,'榴莲',20,'500g'),(7,'雪莲',4.5,'500g'),(8,'黄瓜',3,'500g'),(9,'辣椒',5.5,'500g'),(10,'葡萄',7,'500g');

源码:

https://github.com/yangyuanhu/PagingShow.git
posted @ 2019-12-19 14:45  CoderJerry  阅读(...)  评论(...编辑  收藏