java项目分页_Java项目实战第9天：分页功能的完善

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

感谢你的观看，谢谢你。

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

昨天太晚了，前端写完后根本都没来得及测试，结果今天发现了一堆的问题。

本来是打算将分页跳过直接学搜索的。

毕竟听说我现在的这种实现方式特low，我查了下教程，后面也确实会再次讲到分页。

但是现在看来是不行了，忽视的点挺多的，对于很多知识点自己掌握的也不扎实。

所以还是花一个晚上的时间将该知识点完善下。

关于后台代码我昨天的笔记中有说明，现在的问题主要是前端的一些问题。

一、前端页面渲染

个人一直对这块不太重视，毕竟主要是Java后台代码的编写，所以基本都是一笔带过。

但是昨天发现自己连基本的一些点都还搞错，这是我无法原谅自己的。

所以打算详细理一理这个实现的思路。

1静态页面

静态页面的代码编写和页面效果就是如下图：

• ：这是一个有序标签，就是一个页面中有8条这样的数据。

  当然这个8也是我们昨天自己定的，可以动态变化，其中有几个比较重要的参数。

  也就是上图中的①②③④。

  但是在静态页面中，这些数据是被写死了的，所以需要通过后台响应的数据动态拼接到页面中。

  2后台响应的数据

  通过浏览器F12可以打开控制台：

  

  json数据，我们就可以用键值对来理解它。

  ①key值为routeData

  这个是昨天后台设置的一个key，通过它可以取出其对应的value值。

  也就是上图中的Array(8)，一个存放有8条数据的集合。

  ②value值为集合

  8条数据各不相同，我们看其中的一条数据，内容也是一个个键值对。

  其中最先开始就说明了的4个参数分别为：rimage，rname，routeIntroduce，price。

  所以思路就出来了：

  先根据key值routeData，取出Array(8)。然后将该集合使用each()方法遍历。再根据上面4个参数的key取出对应的value。最后利用“+”将数据拼接到页面中。3前端页面拼接

  

  关于发送请求就不再赘述了，直接说返回值，也就是result。

  ①result.routeData

  这个取出的就是那个装有8条数据的集合，所以要将其遍历。

  ②遍历routeData

  这个就是我昨天犯的最蠢的一个错误，调用的是each()方法，其有两个参数：

  index：对应的是集合中的索引，该案例中也就是0-7。route：对应的是集合中的元素。还记上面一直在强调的4个重要参数么？

  就是通过这个route来取出来的，根据key来取：

  route.rimage。route.rname。route.routeIntroduceroute.price。最后通过加号完成数据的动态拼接。

  ③渲染页面

  通过id选择器找到对应的标签，也就是最先开始的那个有序标签

  • 它的id为routePageList。

    使用html()方法将拼接页面渲染到该标签中。

    4最后做一个测试

    

    点击其中一个分页页码数，

    就会从数据库中根据页码数和页面数据大小(这里是8)查询出对应的8条数据。

    每条数据各不相同，随着页码数动态变化。

    5功能完善

    前面的一个业务逻辑是，需要点击对应的页码之后才会发起请求，从而渲染出对应的数据。

    但是如果没有点击页面，页面加载时应该是要有一个默认的页面的。

    一般都是默认第一页数据，所以代码补全：

    

    在页面加载事件中，调用getPageData方法：页面数为1，每页展示数量为8条

    二、分页总页数

    有的时候为了用户体验，会在分页中说明总记录数和总页数，如下图：

    

    引入两个新的变量：总数据数totalCount，和总页数totalPage。

    这两者之间有什么关系呢？

    就又需要数学中的运算了，分类讨论：

    如果总数据能被每页数据量整数：总页数=总数据数/页面数据量。

    如果总数据不能被每页数据量整数：总页数=总数据数/页面数据量+1。

    既然如此，使用三元运算符即可完成该功能。

    好，思路分析完毕，开始写代码：

    2分页总页数后台代码

    因为是在分页中加入了一个小的功能，所以只需要在service层中增加代码即可：

    

    ①查询总数据数

    通过dao层查询数据库中对应数据的总条数。

    ②根据总数据数计算总页数

    用三元运算符表示，即：

    总数据数能被页面数据量整除么？能就是前面的计算方法：不能就是后面的计算方式。

    ③数据封装

    昨天只封装了routeData，今天等于是增加了一个小功能，还是以键值对的方式完成封装。

    通过浏览器控制台可以查看对应的数据。

    

    ①sql语句编写

    通过聚合函数count(*)可以编写查询数据量的sql语句。

    其中rflag这个字段在数据库中是表示上下架的意思，1即为上架。

    ②jdbcTemplate查询

    通过queryForObject()方法查询数据。

    因为查询的返回值是一个int类型，所以参数为integer的class对象。

    注意使用queryForObject方法需要主动的try…catch，具体原因我们几天前分析过源码。

    3前端渲染

    

    获取响应数据中的totalPage和totalCount，再将其动态拼接。

    最后通过类选择器，渲染到对应标签。

    当然这里类选择器不太准确，页面可能存在多个相同的类，最好在对应标签自定义一个id。

    再使用id选择器，这是最保险的。

    最后

    谢谢你的观看。

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