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

￡神魔★判官ぃ 2023-03-06 05:52 15阅读 0赞

### 目录 ###

*   *   *  
     *  一、业务需求与分析
     *  二、Java代码编写
     *  三、JavaScript代码编写
     *  最后

###  ###

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

感谢你的观看，谢谢你。

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

![format_png][]

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

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

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

是几个小小需求呢？容我慢慢道来：

## 一、业务需求与分析 ##

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

其中将需求做个整理，如下图：

![format_png 1][]

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

②按钮保证前五后四的原则：

*  当选中的按钮小于6时，那页面显示的按钮为1-10这十个按钮。
 *  当选中的按钮大于6时，显示的按钮就得动态变化了。

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

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

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

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

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

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

![format_png 2][]

**①中的四个参数**

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

**②中的四个参数**

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

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

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

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

## 二、Java代码编写 ##

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

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

![format_png 3][]

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

*  如果当前页码不为1，那么上一页也就是当前页码－1。
 *  如果当前页码为1，那么上一页不变，还为1。
 *  如果当前页码不为最后一页，那么下一页也就是当前页码+1。
 *  如果当前页码为最后一页，那么下一页不变，还是最后一页。

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

**②计算起始页和结束页**

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

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

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

*  如果起始页计算结果小于1，那么起始页为1，结束页为10。
 *  如果结束页计算结果大于总页数，那么结束页为总页数，起始页为总页数-9。

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

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

## 三、JavaScript代码编写 ##

**1静态资源**

![format_png 4][]

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

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

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

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

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

**2取出响应数据**

![format_png 5][]

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

**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个小需求的思路分析 、以及代码编写的一个完整过程。

## 最后 ##

谢谢你的观看。

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

[format_png]: /images/20230208/f0a1cb627a154dd088b005bd6142e68a.png
[format_png 1]: /images/20230208/d2efe8b8697a4f84acfd0ea6b32d91f3.png
[format_png 2]: /images/20230208/97f2cf422df54297a2ffbce377939dd3.png
[format_png 3]: /images/20230208/4bf95c54750c4d06a31810761e77ab7d.png
[format_png 4]: /images/20230208/e614f4efa909462293ae76572a01d4cc.png
[format_png 5]: /images/20230208/042fef3fb9c3454383bc551c6d9bcce5.png