今天是刘小爱自学Java的第109天。
感谢你的观看，谢谢你。
话不多说，开始今天的学习：
image
看到了几个小需求，心里莫名地觉得痒痒，想把它们搞明白，到底具体是如何实现的？
一开始以为花个十几二十分钟就可以将其搞定，搞定后再接着学后面的知识点。
结果光这几个小问题就搞了我一晚上，唉，果然自己还是太笨了。
是哪些需求呢？容我慢慢道来。
一、业务需求与分析
一共有6个需求，乍一看超简单，当然事实上确实也不难，但是容易忽视一些小问题。
其中将需求做个整理，如下图：
image
①分页栏上一共有10个按钮，选中按钮时将其动态置为特殊颜色。
②按钮保证前五后四的原则：
-
当选中的按钮小于6时，那页面显示的按钮为1-10这十个按钮。
-
当选中的按钮大于6时，显示的按钮就得动态变化了。
③选中按钮为1时：首页和上一页隐藏。
④选中按钮为最后页时：末页和下一页隐藏。
⑤点首页回到第1页，点末页回到最后一页。
⑥点上一页在当前页往前移动一位，点下一页在当前页往后移动一位。
这些功能使用起来当然简单了，但是它具体用代码是如何实现的呢？
写代码之前，先做个小小的分析捋一捋思路：
image
①中的四个参数
这几个参数前两天都仔细说明过，并且已经从服务器中响应了对应的数据。
②中的四个参数
这是我们需要实现的6个小功能中，与之密切关联的4个变量。
其实在Java中，无外乎就是变量和方法。
遇到了一个需求，首先要考虑的就是将该需求中相关参数定义成Java中的一个变量。
再通过这些变量加上方法的使用实现具体的某个需求，这样的一个思路过程。
二、Java代码编写
因为是在分页基础上拓展了这些功能，所以只需要在Service层中添加代码即可。
都是一些简单的数学计算，但也正是这，让我意识到了数学在编程中的重要性：
image
①计算上一页和下一页
说白了其实也就是小学数学中的分类讨论：
- 如果当前页码不为1，那么上一页也就是当前页码减1。
- 如果当前页码为1，那么上一页不变，还为1。
- 如果当前页码不为最后一页，那么下一页也就是当前页码加1。
- 如果当前页码为最后一页，那么下一页不变，还是最后一页。
这些在Java里就可以用三元运算符来表示，当然也可以用if条件语句判断。
②计算起始页和结束页
这个要考虑到的就更多了，页面中展示的页码为10个并且保证前五后四的原则，那么：
如果总页数小于10，就没法展示10个了，起始页为1，结束页为总页数。
如果总页数大于10，起始页就等于当前页-5，结束页也就等于当前页+4。但是要注意：
- 如果起始页计算结果小于1，那么起始页为1，结束页为10。
- 如果结束页计算结果大于总页数，那么结束页为总页数，起始页为总页数-9。
这些在Java里就可以用if条件语句来判断。
最后将数据以键值对的形式封装到map中，再转换成json数据响应给前端即可。
三、JavaScript代码编写
1静态资源
image
这是最原始的静态页面，数据都是写死了的，按钮没有特殊效果，数据也不能动态变化。
而我们要做的事情就是：将服务器响应的数据动态拼接到该页面中。
将页面拼接好之后，要使用选择器找到该<ul>标签，并将拼接页面添加到该标签。
而如何定位该标签？有两种选择器可以用：
-
可以在<ul>标签中定义一个id，通过id选择器准确地定位该标签。
-
也可以通过层级选择器定位该标签。
2取出响应数据
image
以键值对的形式，将服务器响应的数据一一取出来，再将这些数据动态拼接到页面中。
3拼接页面
不用我们一个个字母敲，将静态资源中对应的代码复制过来，再利用“+”完成动态拼接。
其中getPageData()是我们自定义的一个函数，在该函数里面会向服务器发送请求，从而才会得到上面我们需要知道的这些数据。
在前天就详细讲解过该函数的功能，其有两个参数：起始页码数，每页显示数据量。
image
①首页和上一页
只有当前页码大于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个小需求的思路分析、以及代码编写的一个完整过程。
最后
谢谢你的观看。
如果可以的话，麻烦帮忙点个赞，谢谢你。
网友评论