专栏首页零基础自学Java【JavaWeb】107:分页查询功能

【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选择器将拼接后的数据渲染到页面对应的标签中。

最后

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

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

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

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

谢谢你的观看。

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

本文分享自微信公众号 - 刘小爱(liuxiaoai946),作者:刘小爱

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【JavaWeb】106:导航栏的实现

    请求路径为:categoryServlet,其携带的methodName为queryAll。

    刘小爱
  • 【微服务】136:非常好用的前端框架Vue

    2005年开始,ajax逐渐被前端开发人员所重视,因为可以完成页面数据的动态渲染。

    刘小爱
  • 【微服务】140:刘小爱商城之后台管理系统

    正是因为如此,所以对网站的性能要求是比较高的,要知道现在淘宝用户可是有几亿,一旦性能不好,用户体验是很差的。

    刘小爱
  • 别被数据带进沟里:这才是应用数据的正确姿势!

    你以为数据能够告诉你一切?其实如果你不能用正确的姿势运用数据,很可能会被它蒙蔽,做出非常危险的错误决定。

    华章科技
  • 如何快速全面建立自己的大数据知识体系?

    本文转载自互联网金融干货 作者经过研发多个大数据产品,将自己形成关于大数据知识体系的干货分享出来,希望给大家能够快速建立起大数据产品的体系思路,让大家系统性学...

    iCDO互联网数据官
  • 网络营销大数据实操七步走

    大数据文摘
  • 激活私域数据,企业如何打造自己的数据银行

    A品牌是一家3C集团品牌,近年来,随着电商的发展,在拓展线下渠道的同时,也在开拓线上资源。他们希望在有限的预算下使广告尽可能覆盖到更多的目标用户,并且提升用户与...

    iCDO互联网数据官
  • 数字化营销时代:企业如何从“推时代”进阶“拉时代”

    随着互联网经济形态由消费到产业的进阶迭代,业务场景及商业逻辑从“推营销”时代向“拉营销”时代转变,推时代即平台利用信息推送的方式来获取和维系客户,拉时代则是平台...

    盒子菌
  • 吴军:机器智能时代,如何成为最先受益的2%?

    大数据文摘
  • Hacker基础之Linux篇:基础Linux命令十四

    su su命令用于切换当前用户身份到其他用户身份,变更时须输入所要变更的用户帐号与密码

    用户1631416

扫码关注云+社区

领取腾讯云代金券