Java项目实战第8天：分页查询功能

你的名字 2023-03-06 03:19 7阅读 0赞

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

感谢你的观看，谢谢你。

话不多说，开始今天的学习：

![format_png][]

## 一、分页概述 ##

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

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

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

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

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

![format_png 1][]

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

*  当前页面的页码数pageNum。
 *  每页展示的数据条数pageSize。
 *  每页数据的起始索引startCount。

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

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

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

![format_png 2][]

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

*  第1页：从索引位为0开始的8条数据。
 *  第2页：从索引位为8开始的8条数据。
 *  第3页：从索引位为16开始的8条数据。

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

**每页初始索引位=（页码数-1）\*页面数据量**

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

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

**前端发送请求**

![format_png 3][]

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

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

getPageData(pageNum,pageSize)：

*  pageNum当前页面页码数。
 *  pageSize当前页面数据条数。

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

*  请求对应后台中的RouteServlet。
 *  在pageQuery方法中处理该请求。
 *  请求中的参数数据为pageNum和pageSize这两个键值对。

## 二、后台代码编写 ##

**1web层**

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

![format_png 4][]

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

*  请求中有两个键值对数据，通过getParameter()方法分别获取对应的值。
 *  再将它们作为参数，调用service层的方法具体处理。
 *  最后响应处理后的数据。

**2service层**

![format_png 5][]

**①分页数据三大参数**

*  当前页面页码数pageNum。
 *  当前页面数据条数pageSize。
 *  当前页面数据起始索引startCount。

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

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

startCount=(pageNum-1)\*pageSize

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

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

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

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

![format_png 6][]

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

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

**③封装数据**

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

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

**3dao层**

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

![format_png 7][]

请求本来是pageNum和pageSize参数。

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

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

## 三、前端渲染页面 ##

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

![format_png 8][]

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

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

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

## 最后 ##

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

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

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

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

谢谢你的观看。

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

[format_png]: /images/20230208/2e3416d407e8484fb2a604a781be563b.png
[format_png 1]: /images/20230208/dba4520c8e4f4d698d98f271136434ab.png
[format_png 2]: /images/20230208/c4e04e7e8d6f4e42a34b8204f5084862.png
[format_png 3]: /images/20230208/b79cc3bc35eb47d694b8537304389189.png
[format_png 4]: /images/20230208/8f3e4456ad6e4d52bb663103eadb0885.png
[format_png 5]: /images/20230208/c5d97877211845239271b0e37b3d1081.png
[format_png 6]: /images/20230208/f2957b091baa441599465f560cfb315c.png
[format_png 7]: /images/20230208/8b143de2b6c2497189fff1077b0c6a11.png
[format_png 8]: /images/20230208/76a92985ef0d4d1999a80b4fe98024ff.png