文档章节

Web开发之分页算法,N(N>=3)种解决方案

jtn
 jtn
发布于 2015/04/13 15:07
字数 1511
阅读 27
收藏 0
在Web开发中,分页是最常用的一个功能了。但是,想简单、灵活、方便地解决分页这个问题,还是需要动点脑筋的。

   今天,简要梳理下,过去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日

湖北-武汉-循礼门 


原文首发:http://fansunion.cn/article/detail/541.html

© 著作权归作者所有

jtn

jtn

粉丝 12
博文 879
码字总数 879609
作品 0
武汉
程序员
私信 提问
【论题】+【方案】海量数据如何做分页处理

论题时间: 2012-11-27 论题参与: java 技术群(3 年以上) 95379959,所有成员 论题内容: 在软件开发中,大数据量的查询是一个常见的问题,经常会遇到对大量数据进行查询的场 景,项目实际开...

哑鸟
2013/05/22
1K
1
mysql 怎么实现随机查询并分页,不重复查询

需求: 企业应用中,一般数据量不是很特别多,同时大多在局域网内,性能不会有问题,一般不会分页处理,随机排序数据一般不会有问题 web网站中,一般都用到分页处理,目前数据量比较少,考虑...

solar.xie
2013/05/15
3.1K
0
Navi.Soft31.WinForm框架(含下载地址)

1概述 1.1应用场景 尽管互联网高速发展,互联网软件也随之越来越多,但桌面应用程序在某些领域中还是不可替代,如MIS,ERP,CRM等软件产品,同时,这类软件均包括一些通用的功能,如:与数据库操作,日...

小特工作室
2017/11/03
0
0
AOP 快速开发框架--IronFramework

IronFramework 基于 领域驱动设计 Domain Driven Design (DDD), 多层构架,Aspect-oriented programming(AOP) 快速开发框架 基于 Microsoft .Net Framework 企业级解决方案: 特点Features: N...

Megadotnet
2015/10/01
2.5K
1
面试:老师讲的递归解决斐波那契数列真的好吗

在搞「模拟面试」的日子,我发现大家普遍有个问题就是,感觉自己的能力总是到了瓶颈期,写了好几年代码,感觉只是会的框架比以前多了而已。去大公司面试,屡战屡败,问失败原因,大多数人的答...

nanchen2251
2018/07/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
今天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
今天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
今天
4
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
今天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部