首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

全栈角度看分页处理

分页是 web application 开发最常见的功能。在使用不同的框架和工具过程中,发现初始行/页的定义不同,特意整理记录。从这个技术点去看不同层的实现。以及不同语言实现的对比。

文章会从正常的web 结构分层的角度去梳理不同层的处理,分为数据库分页、服务端分页、前端分页三部分。

一、数据库分页

这里用mysql 举例整理。我们常用的数据库例如 Oracle/ SQL Server 等,对于分页语法的支持大同小异。不做具体一一举例。

先从数据库层梳理,也是从最根源去分析分页的最终目的,前端和后端的一起逻辑和适配,都是为了拼接合适的 SQL 语句。

1.MySQL LIMIT

语法:[LIMIT {[offset,]row_count}]

is equivalent to .

The offset of the initial row is 0 (not 1)

参考:MySQL :: MySQL 5.7 Reference Manual :: 13.2.9 SELECT Statement

二、服务端/后端分页

后端分页,简单讲,就是数据库的分页。对于mysql 来讲,就是上述 offset row_count 的计算过程。

这里选用了常用的框架组件来对比各自实现的细节。

pagehelper 是Java Orm 框架mybatis 常用的开源分页插件

spring-data-jdbc 是Java 框架常用的数据层组件

1.pagehelper

2.spring-data-jdbc

关键类:

spring-data-commons 提供 mvc 层的分页参数处理器

三、前端分页

前端展示层,分别从服务端渲染方案以及纯前端脚本方案去看分页最终的页面呈现逻辑。

这里选取的分别是Java 常用的模板引擎 thymeleaf 以及热门的前端框架 element-ui。

从用法以及组件源码角度,去理清终端处理分页的常见方式。

1.thymeleaf - 模板引擎

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

2.element-ui 前端框架

四、总结

技术永远是关联的,思路永远是相似的,方案永远是相通的。单独的去分析某个技术或者原理,总是有边界和困惑存在。纵向拉伸,横向对比才能对技术方案有深刻的理解。在实战应用中,能灵活自如。

分页实现的方案最终是由数据库决定的,对于众多的数据库,通过SQL 语法的规范去框定,以及我们常用的各种组件或者插件去适配。

纵向对比,我们可以看到不同技术层的职责和通用适配的实现过程,对于我们日常的业务通用开发以及不同业务的兼容有很大的借鉴意义。

横向对比,例如前端展示层的实现思路,其实差别非常大。如果使用 thymeleaf,结构简单清晰,但交互响应上都会通过服务器。如果选用element-ui,分页只依赖展示层,和服务端彻底解构。在技术选型中可以根据各自的优缺点进行适度的抉择。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20230308A07NP700?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券