首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【JavaWeb】107:分页查询功能

今天是刘小爱自学Java的第107天。

感谢你的观看,谢谢你。

话不多说,开始今天的学习:

一、分页概述

我们现在在网络上查询数据,通过关键字查询,一次性会查询出很多数据。

比如在浏览器上搜“刘小爱”,会有12万条。

如果要将其一次性地展现出来太困难了,需要浏览器不停地渲染数据才行。

这样对浏览器的损耗也很大。

所以为了解决这个问题,就引入了分页的功能,基本上大家都应该见到过分页的应用:

现在网站一般涉及到查询功能时,都会使用到分页,关于分页其中牵扯到3个重要的参数:

当前页面的页码数pageNum。

每页展示的数据条数pageSize。

每页数据的起始索引startCount。

根据前端能得到的数据为:当前页码数和每页数据条数。

而去数据库中查询需要:数据的起始索引以及每页数据条数。

所以我们要找出其中的规律:

数据库中相关的数据有很多个,假设每页显示的数据为8个,那么

第1页:从索引位为0开始的8条数据。

第2页:从索引位为8开始的8条数据。

第3页:从索引位为16开始的8条数据。

从中我们可以找出其中的规律为:

每页初始索引位=(页码数-1)*页面数据量

使用limt这个关键字即可完成sql语句编写。

思路分析完毕就可以开始编写代码了。

前端发送请求

其中关于静态页面,将数据写死了。这边主要只暂时考虑分页的功能实现。

在每个显示页码的地方绑定一个点击事件,其对应的函数即为getPageData()。

getPageData(pageNum,pageSize):

pageNum当前页面页码数。

pageSize当前页面数据条数。

事件绑定成功后,一点击对应的页码数,就会发送请求到服务器:

请求对应后台中的RouteServlet。

在pageQuery方法中处理该请求。

请求中的参数数据为pageNum和pageSize这两个键值对。

二、后台代码编写

1web层

创建一个RouteServlet来接受请求,同时在pageQuery方法中编写具体的代码:

该层代码其实无外乎就是核心三步骤:获取请求数据、调用service层以及响应数据。

请求中有两个键值对数据,通过getParameter()方法分别获取对应的值。

再将它们作为参数,调用service层的方法具体处理。

最后响应处理后的数据。

2service层

分页数据三大参数

当前页面页码数pageNum。

当前页面数据条数pageSize。

当前页面数据起始索引startCount。

其默认值分别为1,8,0,即第1页的数据就是从0索引位开始查询8条数据。

在最开始也分析过,它们之间的关系为:

startCount=(pageNum-1)*pageSize

不过现在前端有请求参数了,所以跟随请求参数动态变化。

将字符串数据转换成int类型

请求中的数据是字符串,所以需要将其转化成int,在转换前需要对其做一个非空判断。

使用工具类StringUtils的isNotBlank()方法,可以对字符串做一个非空判断:

该工具类能够判断三种数据:字符串里什么都没有,null,字符串里只有空格。

所以功能更加地强大,也很实用。

封装数据

从dao层查询数据,返回值为一个route对象集合,将该集合封装到一个map中,

最后再转换成json数据并返回给web层。

3dao层

利用service传来的pageSize和startCount这两个参数从数据库中查询数据。

请求本来是pageNum和pageSize参数。

上述service层主要的作用其实也就是将它们转换成了数据库查询需要的参数。

注意sql语句中的Limt的使用,即从第startCount索引位数据开始,查询pageSize条数据。

三、前端渲染页面

前端在接受到后台响应的数据之后,要将数据处理并渲染到对应的页面标签中:

响应数据是一个集合,既然如此肯定需要遍历数据,使用jQuery的forEach方法遍历数据。

同时在每次遍历时获取对应元素的值,将该值拼接到静态页面中。

最后使用id选择器将拼接后的数据渲染到页面对应的标签中。

最后

因为个人精力和时间受限,分页查询并没有完整地实现,关于前端数据渲染也没详述。

不过实现思路基本上是这么一个思路。

并且我觉得吧,学习很多时候不是为了学某个知识点,对我来说,学习最大的意义在于:

学会如何去学习,以及我有面对一切问题并想办法将其解决的勇气。

谢谢你的观看。

如果可以的话,麻烦帮忙点个赞,谢谢你。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200730A04DKM00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券