【JavaWeb】109:分页栏优化

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

感谢你的观看,谢谢你。

话不多说,开始今天的学习:

看到了几个小需求,心里莫名地觉得痒痒,想把它们搞明白,到底具体是如何实现的?

一开始以为花个十几二十分钟就可以将其搞定,搞定后再接着学后面的知识点。

结果光这几个小问题就搞了我一晚上,唉,果然自己还是太笨了。

是哪些需求呢?容我慢慢道来。

一、业务需求与分析

一共有6个需求,乍一看超简单,当然事实上确实也不难,但是容易忽视一些小问题。

其中将需求做个整理,如下图:

分页栏上一共有10个按钮,选中按钮时将其动态置为特殊颜色。

按钮保证前五后四的原则:

当选中的按钮小于6时,那页面显示的按钮为1-10这十个按钮。

当选中的按钮大于6时,显示的按钮就得动态变化了。

选中按钮为1时:首页和上一页隐藏。

选中按钮为最后页时:末页和下一页隐藏。

点首页回到第1页,点末页回到最后一页。

点上一页在当前页往前移动一位,点下一页在当前页往后移动一位。

这些功能使用起来当然简单了,但是它具体用代码是如何实现的呢?

写代码之前,先做个小小的分析捋一捋思路:

中的四个参数

这几个参数前两天都仔细说明过,并且已经从服务器中响应了对应的数据。

中的四个参数

这是我们需要实现的6个小功能中,与之密切关联的4个变量。

其实在Java中,无外乎就是变量和方法。

遇到了一个需求,首先要考虑的就是将该需求中相关参数定义成Java中的一个变量。

再通过这些变量加上方法的使用实现具体的某个需求,这样的一个思路过程。

二、Java代码编写

因为是在分页基础上拓展了这些功能,所以只需要在Service层中添加代码即可。

都是一些简单的数学计算,但也正是这,让我意识到了数学在编程中的重要性:

计算上一页和下一页

说白了其实也就是小学数学中的分类讨论:

如果当前页码不为1,那么上一页也就是当前页码减1。

如果当前页码为1,那么上一页不变,还为1。

如果当前页码不为最后一页,那么下一页也就是当前页码加1。

如果当前页码为最后一页,那么下一页不变,还是最后一页。

这些在Java里就可以用三元运算符来表示,当然也可以用if条件语句判断。

计算起始页和结束页

这个要考虑到的就更多了,页面中展示的页码为10个并且保证前五后四的原则,那么:

如果总页数小于10,就没法展示10个了,起始页为1,结束页为总页数。

如果总页数大于10,起始页就等于当前页-5,结束页也就等于当前页+4。但是要注意:

如果起始页计算结果小于1,那么起始页为1,结束页为10。

如果结束页计算结果大于总页数,那么结束页为总页数,起始页为总页数-9。

这些在Java里就可以用if条件语句来判断。

最后将数据以键值对的形式封装到map中,再转换成json数据响应给前端即可。

三、JavaScript代码编写

1静态资源

这是最原始的静态页面,数据都是写死了的,按钮没有特殊效果,数据也不能动态变化。

而我们要做的事情就是:将服务器响应的数据动态拼接到该页面中。

将页面拼接好之后,要使用选择器找到该标签,并将拼接页面添加到该标签。

而如何定位该标签?有两种选择器可以用:

可以在标签中定义一个id,通过id选择器准确地定位该标签。

也可以通过层级选择器定位该标签。

2取出响应数据

以键值对的形式,将服务器响应的数据一一取出来,再将这些数据动态拼接到页面中。

3拼接页面

不用我们一个个字母敲,将静态资源中对应的代码复制过来,再利用“+”完成动态拼接。

其中getPageData()是我们自定义的一个函数,在该函数里面会向服务器发送请求,从而才会得到上面我们需要知道的这些数据。

在前天就详细讲解过该函数的功能,其有两个参数:起始页码数,每页显示数据量。

首页和上一页

只有当前页码大于1的时候,才会出现首页和上一页,使用if判断语句即可实现,其中:

首页也就是getPageData(1,8)

上一页也就是getPageData(prePage,8)

利用for循环完成动态拼接

从beginPage开始到endPage结束,这分别对应着分页栏上显示的按钮数值。

那么就需要使用到for循环遍历了,其中每次循环的值为i,每次循环完自增1:

对应的函数为getPageData(i,8)

标签内容也就是i,对应按钮显示的数值。

哪次循环等于当前页码数时,就利用css的类选择器给其设定样式,从而实现动态变化。

末页和下一页

只有当前页码数小于总页数的时候,才会出现末页和下一页,同样使用if判断语句,其中:

末页也就是getPageData(totalPage,8)

下一页也就是getPageData(nextPage,8)

以上也就是对一开始的6个小需求的思路分析、以及代码编写的一个完整过程。

最后

谢谢你的观看。

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

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

扫码关注云+社区

领取腾讯云代金券