今天,简要梳理下,过去6年中,亲自遇到的分页问题和解决办法。
1. 定义问题
原由:在页面中需要展示若干数据,但不可能一次展示所有的,想通过每次只展示若干条。分页数,pageNo,是为了标记,当前访问的内容在哪里。
后端需要做的:后端需要分页查询数据,把数据返回给前端
前端需要做的:根据后端的数据,构造“1、2、3”等分页面板,并且要响应事件,比如点击“2”,就跳转到第2页
2. 2种思路
解决方法有很多种,我只想根据几个指标,列出几种典型的解决方法。
2.1分页所有相关逻辑,全部由“后端实现”
a. 获取数据库中的数据
根据totalPage(需要先查询一次数据库)和pageSize,计算总共有多少也totalPage。
然后生成前端js分页,前端直接显示分页js代码${pagejs}。
点击前端分页链接时,后端再根据当前页数pageNo和每页显示的条数pageSize,获取数据。
默认显示第1页。
注:这种全部由后端生成分页的方法,我见过,不过,我不喜欢这种做法。由后端生成前端分页js,感觉太别扭了。
我的观点:前端负责前端的事,后端负责后端的事,尽量不互相影响。
2.2后端只负责数据查询,前端负责构造分页js。
后端计算count,获取一页数据list。如果用Mybatis,可以写一个拦截器,或者工具方法,自动去查询count。因为count的sql可以根据list的sql来构造,所以能自动化。
前端根据分页完整信息page,构造js。
3.同步or异步
前端的分页,可以选择“同步刷新“,每次打开新的页面(可能直接覆盖当前页,让人看起来没有重新刷新页面)。
也可以选择“异步刷新”,发送AJAX请求,替换分页内容。
不同点在于,同步刷新,需要构造“URL”,URL带上了分页信息pageNo,pageSize,也可能需要带上各种查询参数,比如用户名username.
异步刷新,需要给分页“1”绑定事件响应函数,分页组件需要把这个“回调函数”,提取出来,可以由分页调用者传入。另外一点,分页组件会自动记住查询参数和分页信息。这一点,比同步构造url要简单一些。
4.表格型or内容型
分页展示的内容可能是表格型,比如“uid uname time money”,一个用户的资金记录,也可能是一页内容,比如一篇文章下方展示10条评论。
表格型的布局展示相对更加“标准化” ,而内容型则变化较大,通常需要自己去构造。
或者,对表格型的组件进行改进,把“渲染一行内容” 提取成函数,可以让调用者自己传入“渲染方法”,从而达到“复用”的目的。
5.我的实践与选择
a.前端与后端分离,后端查询数据,前端负责展示数据,后端不会生成前端需要的js和html等内容。
b.表格型-异步
参考秒针前同事写的st-grid,即网上最流行的标准化表格型grid分页组件。
或者从网上找,比如jquery等各种整套前端框架,都会有这个组件
c.表格型-同步
前端用JSTL、Freemarker、Struts标签、JSP标签等模版技术,生成分页条,表格内容写个for循环。
这个地方的分页条,也可以用JS来实现,不过麻烦一点。
同步型的,需要在URL中带上各种分页参数和查询条件,想做成通用的,有一定难度。
d.内容型-异步
后端都一样,前端写AJAX方法,构造html,再渲染。
这个是我在写个人官网时,遇到的“新场景”,全部代码,都由我根据其它方式的代码,改造而来。
显示1篇文章,下方显示若干评论,点击下一页,评论刷新,文章不刷新。
e.内容型-同步
与“表格型-同步” 类似,唯一不同的是,for循环生成的不是table,而是div,布局更好看。
6.扯点别的
代码,我就不贴了,排版很麻烦,而且代码一大堆。这么多种场景,每一种场景的实际代码,都不少。有机会,今后再详细阐述。
通过分页这个事,我再次发现,技术的一个难点就在于,实际的业务或需求有很多种场景,不同场景下的技术实现思路是不同的。想“一次编写,处处使用”非常难。可行的方法是,“一种场景,尽量只编写一次代码,保证这个场景下是万能的就很厉害了”。
写完这篇文章,我猛然发现,可能以前就发现了,在某些领域,我比很多“高级工程师”都要厉害。为什么呢?每个技术工作者在实际工作中遇到的问题是不同的,“术业有专攻”,每个人都在自己的兴趣和工作范围内的事情更为擅长。
今天就扯到这吧,更多关于“技术观点” 的,将放在“雷观”中详细阐述。
总之,我比2年前,刚刚毕业的时候,要强太多了。青春流逝了,我也成长了。
小雷FansUnion-博学的互联网技术工作者
个人官网:http://FansUnion.cn
2014年12月6日
湖北-武汉-循礼门