【JavaWeb】108：昨天笔记有问题，今天完善

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

感谢你的观看，谢谢你。

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

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

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

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

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

最终决定花一个晚上将该知识点完善下。

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

一、前端页面渲染

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

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

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

1静态页面

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

<ul><li>：这是一个有序标签，就是一个页面中有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.routeIntroduce
• route.price。

最后通过加号完成数据的动态拼接。

③渲染页面

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

它的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选择器，这是最保险的。

最后

谢谢你的观看。

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