【JavaWeb】108:昨天笔记有问题,今天完善

今天是刘小爱自学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.routeIntroduce

route.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选择器,这是最保险的。

最后

谢谢你的观看。

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

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

扫码关注云+社区

领取腾讯云代金券