Java项目实战第10天：分页栏的实现

今天是刘小爱自学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静态资源

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

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

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

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

• 可以在<ul>标签中定义一个id，通过id选择器准确地定位该标签。

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

2取出响应数据

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

3拼接页面

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aQu7xSvR-1596628951297)(https://static01.imgkr.com/temp/3718f9e115204a3b98dff6af6f1729e6.png )]

①首页和上一页

只有当前页码大于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个小需求的思路分析 、以及代码编写的一个完整过程。

最后

谢谢你的观看。

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