本文讨论了一个项目中遇到的大量数据查询导致服务器超时的问题，提出了两种解决方案。首先尝试了假分页查询，但用户体验不佳。然后采用谷歌分页策略，不显示总页数，只展示关键页码，通过动态调整分页列表来优化用户体验。核心代码展示了如何在Angular7+Antd环境中实现这一策略，确保在无法进行数据库优化的情况下提供流畅的分页体验。
背景
项目中的审核系统每天都有至少十几万条数据需要审核，因此列表的分页会有几万页，虽说数据还可以但是server端数据库这些年一直没有升级优化，因此大数据量查询server数据库压力太大导致线上经常报502超时或者500错误；而这个问题就出现在获取列表总条数上面。
解决思路（内部系统）
- 开始为了快速解决这个问题我们做了假分页查询，也就是server返回假的总条数（就是后端写死的一个值），报错的问题解决了，但是这样做对用户太不友好了。
- 这个问题最好是做数据库优化，但是由于种种原因暂时还做不了；所以第二种思路就是决定仿照谷歌分页，它不需要展示总页数，只要做好极值处理对用户还是很友好的（依然是返回假条数，只是改变的交互）；
具体方法
- 分析谷歌或者百度分页会有一个分页前五后四的概念，有很多种实现方式，但是原理都是一样的。
- 技术栈：Angular7+ Antd（任何技术栈都可以）
- 相关组件代码
// html部分
<div *
最低0.47元/天 解锁文章
扫一扫
1455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
