写给PM及UI的PHP教程丨文章管理系统
【文章摘要】这一节课程讲的依然是分页功能,但我取了个《你的需求说清楚了吗?》这样的副标题,目的是通过做分页功能的例子学习一个PM如何从程序员的角度思考,如何把自己的需求精准的表达出来。《你的需求说清楚了吗?》,为什么取一个这样的副标题?当作为PM的你把原型画好,写好,丢给技术去开发之后,技术经常会找你问这样的问题,《XXX的情况下怎么处理?》,《这个地方逻辑走不通!》。
系列推荐
写给产品经理及UI设计师的PHP教程丨文章管理系统-创建栏目(1)
写给产品经理及UI的PHP教程丨文章管理系统【1】-创建栏目(2)
写给PM及UI的PHP教程丨文章管理系统【2】-后台界面框架设计
写给产品经理及UI的PHP教程丨文章管理系统【3】-栏目列表
写给产品经理及UI的PHP教程丨文章管理系统【4】-修改&删除栏目
给产品经理及UI的PHP教程丨文章管理系统【5】-创建文章(关联数据)
给产品经理及UI的PHP教程丨文章管理系统【6】-文章列表(二维数组)
写给PM及UI的PHP教程丨文章管理系统【7】-修改文章(遍历数组)
写给产品经理及UI的PHP教程丨文章管理系统【8】-简易分页
《你的需求说清楚了吗?》,为什么取一个这样的副标题?
当作为PM的你把原型画好,PRD写好,丢给技术去开发之后,技术经常会找你问这样的问题,《XXX的情况下怎么处理?》,《这个地方逻辑走不通!》。
WHY?是因为程序猿同学太笨?这么明显的情况还要回来问你?你感觉你只是忽略了一些小细节?或者是你根本不觉得具体细节的判断处理需要你考虑?
NO!不要觉得你把中心思想说明白了,条件判断什么的是在程序里实现的,程序猿同学应该替你考虑。妄想,这都是PM你需要考虑的事情!
程序猿同学找你问你并不是因为他不知道解决方法,那是因为他负责!他完全有办法处理掉一些细节,但鬼知道你心里具体是要的什么!他问你只不过是为了再确认一遍而已,生怕做错误了耽误项目进度。
如果他这么跟你说,《XXX情况你没有考虑到,你看这样处理可以吗?》,《因为XXX原因,这块儿的逻辑走不通,我觉得可以这么改,BLABLA》。那你真应该请这位同学吃饭,或者说他抽烟的最起码给人家买包烟,因为他实在是太有节操了。
但是反过来说,如果他把这些东西都替你考虑到了,你是什么?你该做的事情被人家做了!该你想的东西人家替你想好了!
既然这节课程要做分页功能,我们就拿这个分页功能来举例子吧。
假设下面这个图片是我们想要的分页功能的原型图:
这简直可以说是一个随处可见的分页功能,一看都知道是什么意思!作为PM的你也觉得很简单,但你还是认真的考虑了几个不同的可能性,在原型图里画了几种可能性,PRD里关于可能性也描述了,弄好把原型和PRD丢给了程序猿同学。
程序猿同学二话没说就帮你做出来了,然后发生了如下情况。
情况一
当文章一共有9页,并翻到5页的时候显示成了如下样子:
作为PM的你很敏锐的察觉到了,1和3之间只有一个2,7和9之间也只有一个8,用…也太多余了,然后你找程序员说《这个太多余了,要不在10页以内就不要用…了吧,直接显示数字吧!》,程序猿:《噢,好吧!》
情况二
当文章一共有11页,并且在第一页的时候显示成了如下样子。
然后你又找程序员了,你说:《空间挺多的,为什么这时候前面就显示了3个页数啊?》,程序猿:《根据你的原型来看的话,在当前页面后面显示2个页数,我还帮你处理了这时候没有-1和-2呢!》。
你说:《噢,不好意思,那能不能保证最少有5条页码连在一起?》,程序员叹气说:《好吧!》
情况三
他根据你的第二个要求改好了之后出现了下面的情况。
你又觉得只有一个2要显示成…也多余了,然后你找程序猿同学说:《中间只有一个页码的时候能不能不显示…直接显示页码?》,程序猿同学终于怒了:《你丫能不能一口气说完,You can you do!No can no bb!》,你也不服啊:《我是有些地方没有想的足够周全,但不也都是为了提高交互体验吗!》,程序猿同学更怒:《交互体验个P,照你这么改下去,猴年马月能改好?这项目还能不能做完了?》
撕B就这样开始了…………………………(请自行脑洞)
其他情况
除了上面这些,还有可能出来很多奇葩的情况!请围观下方!
这也太搞笑了吧?没什么好搞笑的,这完全有可能发生!
好了我们现在来看一下实现一个笔者自认为比较合理的分页功能需要考虑到哪些情况。
上一页:
当前处在第一页的时候,上一页是多余的没有必要出现。
下一页:
当前处在最后一页的时候,下一页是多余的没有必要出现。
第一页码:
无论什么情况下都会出现,可以独立写死。(那一条数据都没有的时候不是多余的吗?数据都没有你还要这页面干嘛?不考虑!)
最后页码:
除了总共只有一页的情况以外都会出现。只有一页的时候最后页码=第一页码。
中间页码情况一:
当总页数小于3页,只有1页或者2页的时候,没有中间部分
中间页码情况二:
当总页数在3页以上10页以下。也就是3<=总页数<=10的时候,中间部分以纯页码的形式出现,不含“…”。且中间部分页码从2开始,以(总页数-1)结束。
中间页码情况三:
当总页数在11页以上,也就是总页数>=11的时候。
1. 如果当前页在第1页的时候,显示为 1,2,3,4,5,6,7…11的形式。
2. 如果当前页在第2页的时候,显示为 1,2,3,4,5,6,7…11的形式。
3. 如果当前页在第3页的时候,显示为 1,2,3,4,5,6,7…11的形式。
4. 如果当前页在第4页的时候,显示为 1,2,3,4,5,6,7…11的形式。
5. 如果当前页在第5页的时候,显示为 1,2,3,4,5,6,7…11的形式。
以上可以合并成:如果当前页<=5的情况下,显示为1,2,3,4,5,6,7…11的形式。此时中间页码是固定的值从2到7。且7后面有符号“…”
中间页码情况四:
当总页数在11页以上,也就是总页数>=11的时候。
1. 如果当前页在最后一页,显示为 1…5,6,7,8,9,10,11
2. 如果当前页在倒数第二页,显示为 1…5,6,7,8,9,10,11
3. 如果当前页在倒数第三页,显示为 1…5,6,7,8,9,10,11
4. 如果当前页在倒数第四页,显示为 1…5,6,7,8,9,10,11
5. 如果当前页在倒数第五页,显示为 1…5,6,7,8,9,10,11
以上可以合并成:总页码 – 当前页码<=4的时候,显示为1…5,6,7,8,9,10,11。此时中间页码的 开始页码 = 总页码 – 6,结束页码 = 总页码 – 1,且开始页码前有符号“…”
中间页码情况五:
当总页数在11页以上,也就是总页数>=11的时候。且当前页码不属于情况二、情况三的时候。也就是else
显示为1…4,5,6,7,8…11的形式,此时 中间页码的 开始页码 = 当前页码 – 2,结束页码 = 当前页码 + 2,并且前后有符号“…”
以上部分就是把需求分析好并拆解需求的过程了。
PS:为什么我选择了在情况二好情况三连着显示7个数字,仔细想一想,当前页码为6的时候是不是不会和情况三、情况四重复?并且刚好能满足页码有2个以上不显示的时候才出现“…”的需求?
看到这里,想必很多新人PM已经很蛋疼了吧?但没办法,既然你决定当PM了,考虑各种各样的情况就是你的事情。当然PM也根据职能分很多种类型,有些人只需要做文字方面的创作就行,但是当你成为PM组的头儿的时候,你的组员没考虑到的东西,连你也没考虑的到的话…………,当然你也可以选择招一个百分百可以帮你考虑好的人的。但是!有吗?!
可能经常听到程序猿说:《只要你想的足够清楚了,什么都能实现!》,估计很多人都听过,真的,这句话还真不是闹着玩的!不考虑性能层面,只考虑功能层面来说的话,真没有实现不了的需求,只有你没想清楚的需求。
下面就来把我们想清楚了的需求实现出来吧。
先扮演前端工程师的角色,把静态效果做出来。打开article_list.php页,把上一节做好的页码部分的DIV删除掉换成如下代码:
其中2行是上一页功能,3行是第一页功能,4行是中间部分功能,5行是最后一页功能,6行是下一页功能。
打开admin.css,输入如下代码:
运行之后可以看到如下效果:
开始套程序吧,一个一个实现。
上一页,代码如下:
当前页在第一页的时候,上一页按钮不需要出现,可以反过来理解,只要不在第一页上一页按钮就出现。“!=”表示不等于。
下一页,代码如下:
这也是一个道理,只要不在最后一页,下一页按钮就出现。
第一页,代码如下:
什么时候都有,不过在当前页是第一页的时候输出class=”selected”来表示当前页样式。
最后一页,代码如下:
当总页数大于1的时候显示最后一页,并且当前页等于总页数的时候显示被选中样式。
其中各个变量都是从上一节课程中保留下来的,所以不再重复解释了!
保存后之后大家可以先运行试试看上面4个功能。
接下来要实现中间部分了,实现中间部分需要用到新的知识,for循环:
for循环:
当你可以指定需要循环的次数的时候,就需要用到for循环,先看一个例子。
为了不跟其他代码弄混,建议大家新建一个test.php页面保存到站点根目录下,然后输入以下代码:
运行可以看到如下结果:
括号中$i=1是为变量$i设置一个初始值,在循环中第一次循环的时候$i的值会从这个初始值开始。
$i<=5是循环执行时需要满足的条件,只有在条件范围内才会循环,不满足条件停止循环。
$i++部分是循环执行的过程中,定义每一次的循环迭代要让变量$i产生的变化,在这里我们定义成了自增1。
所以在第一次循环里,变量$i是1,第五次循环里变量$i就变成那个了5,当要执行第六次循环的时候因为变量$i变成6显示不能满足$<=5的条件,所以停止了循环。
我们根据上面陈列过的中间部分的物种条件,结合for循环语句写出如下代码:
代码分析:
第2行、第4行、第12行是第一层次的if…elseif…else语句。
第2行显然总页数<3的时候中间部分是空,满足情况一。
第4行$pages>=3 & $pages<=10是用来表述情况二中3页以上10页以下的,中间的符号“&”代表着and,也就是说要同时满足这2个条件才行。不可以写成3<=$pages<=10这样噢。
第12行,我们有五中不同的情况,但为什么在第一层及的条件中只有3种情况呢?因为情况三、四、五中有一个共同的条件那就是总页数是11页以上的时候。在第2行和第4行两个条件中已经包含了总页数在1-10范围内的情况,而且页码没有小于1的情况,所以完全没有必要写成elseif($pages>=11),直接else就可以了。
然后第13行、第22行、第31行就是第二层级的条件语句依次对应情况三、情况四、情况五。
其他部分的代码,相信大家能理解,我也不重复解释了。
如何?一个很常见的分页功能,没你想象的那么简单吧?
把变量$pnum(每页显示的文章数)的值修改成不同的数值,来看一下我们的成果吧。
PS:如果觉得上一页下一页消失会带来一种跳来跳去的感觉,可以设计成一直显示,但无法点击的样子。但一般来说连着翻页的需求是不存在的。
这节就不留作业了,好好的把这节课的内容消化好。如果你无法消化这节内容的话,恐怕你做为PM的瓶颈也不远了,因为你的逻辑能力着实有点问题。