zoukankan      html  css  js  c++  java
  • Web开发之分页算法,N(N>=3)种解决方案

    在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

  • 相关阅读:
    POJ2142:The Balance——题解
    POJ1061:青蛙的约会——题解
    接口测试结束后的小结
    接口测试结束后的小结
    如何进行需求测试/需求评审
    如何进行需求测试/需求评审
    测试人员掌握代码的重要性
    测试人员掌握代码的重要性
    测试人员掌握代码的重要性
    软件自动化测试开发-开班啦
  • 原文地址:https://www.cnblogs.com/qitian1/p/6463073.html
Copyright © 2011-2022 走看看