解析翻页设计的最佳实践和后端设计概要

文章目录

  • 解析翻页设计的最佳实践和后端设计概要
    • 缘起
      • BFF评审中的翻页问题
      • AuditLog翻页问题的处理
      • 分页设计思考
    • 关键点总结
    • 进一步思考

解析翻页设计的最佳实践和后端设计概要

缘起

在技术开发过程中,翻页操作的设计常常涉及到多种需求和技术考量。回顾最近的讨论和设计,我们可以得到一些关键观点和最佳实践。

BFF评审中的翻页问题

在Shopee的BFF评审会议中出现了翻页设计上的一些问题,其中包括遗漏了特定字段,以及分页方式选择的困惑。针对这些问题,提出了一种新的设计方案:

BE can always pass folllowing field to FE and ask FE to pass back + extra field (which is direction and limit) for next pagepagination: {
first_idx:{ctime, id}
last_idx:(ctime, id}
has_prev_element: bool
has_next_element: bool
}
this way FE can go first page, next page, prev page and check if has prev page & next page
this however wont support go to last page

这个方案的精妙之处在于它提供了一种相对简洁但非常有效的分页逻辑,并在前后端之间建立了一种互动方式,实现了基本的翻页需求。以下是这个方案的精妙之处:

  1. 字段传递与双向交互

    • 后端始终向前端传递特定字段,并期望前端传回额外字段(如方向和限制)以便进行下一页操作。这种字段的双向传递建立了一种有效的通信机制,确保了前后端在分页操作上的互动。
  2. 清晰的分页信息结构

    • 采用了清晰的分页结构,包括first_idxlast_idx字段,它们记录了当前页的首尾索引(以ctime和id表示)。同时还包含了has_prev_elementhas_next_element布尔字段,用于指示是否存在前一页和后一页的元素。
  3. 前端操作的灵活性

    • 这个方案赋予了前端相对较多的操作自由度。前端可以根据first_idxlast_idx字段,自由地进行首页、下一页、上一页的操作,同时可以检查是否存在前一页和后一页的元素,以进行相应的页面按钮状态展示。
  4. 简洁的设计与易于理解

    • 这种设计相对简洁,同时也易于理解。通过明确定义的字段和指示,清晰地传达了分页的相关信息,使得前后端在交互时能够快速理解并实现相应的逻辑。
  5. 不支持跳转到最后一页的合理性

    • 即使这个方案不支持直接跳转到最后一页,但这个设计决策是合理的。因为通过记录当前页的首尾索引和是否有前后页元素,已经提供了基本的翻页操作所需的信息,从而满足了绝大多数情况下的用户需求。

总的来说,这个方案在提供基本分页需求的同时,设计简洁、清晰,并且建立了一种前后端之间相对有效的交互方式,使得用户能够方便地进行常见的翻页操作。

AuditLog翻页问题的处理

在另一个场景中,针对AuditLog的翻页设计也提出了一些解决方案,特别是在使用分布式数据库时,对于LIMIT操作可能导致的效率问题。针对这些情况,提出了使用自增主键作为游标的设计方式,以优化翻页操作的性能。

后端可以始终将特定字段传递给前端,并要求前端传回额外字段(如方向和限制),用于下一页的操作。这种设计支持前端进行首页、下一页、上一页的导航,并检查是否有前一页和后一页。

分页设计思考

在交流中,还涉及到了一些关于翻页设计的思考和解决方案的尝试。特别是对于用户需求中对于总数和最后一页的坚持,提出了两种解决方案。同时也提到了过滤功能的重要性,使用户可以更轻松地找到他们需要的记录,而不是完全依赖于分页功能。
对有海量数据的电商场景来说,分页设计,性能是关键


关键点总结

总结这些讨论和实践中的关键点:

  • 灵活性与性能的平衡:设计翻页功能时,需要在用户体验和系统性能之间找到平衡点。
  • 数据库优化:使用自增主键等方式优化翻页功能的性能,尤其是在分布式数据库场景下。
  • 用户需求:理解和满足用户对翻页功能的实际需求,同时考虑用户操作习惯和便利性。(白话是产品经理提的需求,开发也要argue一下,有些性价比不高的功能,比如翻到最后一页,是可以在会上提出来消减或降低优先级的,减轻工作量又保持产品精简)

进一步思考

翻页本质上是一个有状态的服务,使用黑盒字符串传递方式类似于Session方案和Token方案之间的区别。

  1. Session 方案

    • Session 方案保持状态,服务器存储用户状态信息,并发送一个标识符(session ID)给客户端。客户端再次请求时,携带此标识符,服务器根据其获取相关状态信息。
    • 类似地,翻页利用黑盒字符串传递信息,后端能够根据该字符串重建状态,提供下一页所需信息。
  2. Token 方案

    • Token 方案是无状态认证机制,客户端携带令牌请求,服务器验证该令牌以授权。令牌通常不包含状态信息。
    • 翻页所采用的字符串传递方式类似于无状态传输,前端不解析字符串,原样传回给后端,后端根据此字符串提供下一页信息,不依赖于传输中的状态信息。

这种黑盒字符串传递方式使得翻页服务实现了一种无状态的前后端交互方式,类似于Token方案的无状态传输。这简化了通信流程,减少了服务器端保存状态信息的负担,同时降低了传输的复杂性。
所以,翻页设计,一是要无状态化,后端不能存储翻页位置信息,不然负担就大了,传递到前端让其返回是无状态化的思路之一;二是,这个传递过去的字符串,其实前端不必负责解析,因为前端主要负责展示数据和根据用户响应传递给后端翻页指示即可,翻页的正确性应该由后端保证,这套方案的好处是技术上实现最便利的前提下,将前后端职责划分的最清晰,方案中这点思考有泛化的价值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/577922.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里云 ECS Docker、Docker Compose安装

https://help.aliyun.com/document_detail/51853.html https://docs.docker.com/compose/install/ Centos https://blog.csdn.net/Alen_xiaoxin/article/details/104850553 systemctl enable dockerdocker-compose安装 https://blog.csdn.net/qq465084127/article/details/…

CentOS 8.2 安装 Mysql 5.7.26(单机)

Mysql二进制包: mysql-5.7.26-linux-glibc2.12-x86_64.tar.gz 1、卸载旧环境 rpm -qa|grep mysql rpm -qa|grep mariadb rpm -e XXX.rpm --nodeps # 强制卸载rpm包 rm -rf /etc/my.cnf rm -rf /etc/mysql rm -rf /usr/local/mysql 2、安装依赖包 yum -y install libaio yum…

vscode括号颜色突然变成白色的了,怎么解决

更新版本后发现vscode的各种括号都变成了白色,由于分色括号已经使用习惯,突然变成白色非常不舒服,尝试多次后,为大家提供一下几种解决方式,希望能帮到同样受到此种困惑的你: 第一种: 首先打开…

WebGL开发建筑和设计教育应用

使用 WebGL 开发建筑和设计教育应用可以为学生提供沉浸式的三维体验,使他们能够在虚拟环境中探索建筑结构、材料和设计理念。以下是开发建筑和设计教育应用的一般步骤,希望对大家有所帮助。北京木奇移动技术有限公司,专业的软件外包开发公司&…

计算机视觉基础(13)——深度估计

前言 本节是计算机视觉的最后一节,我们将学习深度估计。从深度的概念和度量入手,依次学习单目深度估计和双目/多目深度估计,需要知道深度估计的经典方法,掌握深度估计的评价标准,注意结合对极几何进行分析和思考。 一、…

【LeetCode刷题笔记】动态规划(四)

背包问题 0-1 背包问题 有一个背包,它的容量为 C现在有 n 种不同的物品,他们的编号分别是 0...n-1。每一种物品只有一个。在这 n 种物品中,第 i 个物品的重量是 w[i],它的价值为 v[i]问题是:可以向这个背包中放哪些物品,使得在不超过背包容量的基础上,背包中物品的总价…

【华为OD题库-110】反转每对括号间的子串-java

题目 给出一个字符串s(仅含有小写英文字母和括号)。 请你按照从括号内到外的顺序,逐层反转每对匹配括号中的字符串,并返回最终的结果。注意,您的结果中不应包含任何括号。 示例1: 输入: s “(abcd)” 输出: “dcba” 示例2: 输入: s “(u(l…

MongoDB视图的修改与删除

目录 修改视图 删除视图 视图,为mongodb的操作和数据安全上提供了便利。但伴随着业务逻辑的发展或数据库维护人员操作当中产生的错误,视图难免需要维护修改。例如增加字段,修改视图中的计算逻辑等。 修改视图 查询mongodb的官方文档&…

Linux的基本命令

文章目录 grep的基本查询grep的高亮查询 grep的基本查询 grep命令可以用于在文件中查找指定内容,并将包含该内容的行打印出来。以下是几种不同的实现方法: 使用基本语法格式: (1)grep “要查找的内容” 文件名 例如…

【SpringCloud笔记】(10)消息总线之Bus

Bus 前言 戳我了解Config 学习Config中我们遇到了一个问题: 当我们修改了GitHub上配置文件内容,微服务需要配置动态刷新并且需要手动向客户端发送post请求刷新微服务之后才能获取到GitHub修改过后的内容 假如有多个微服务客户端3355/3366/3377…等等…

Android 手机对于Arduino蓝牙控制解决方案

1、Android系统概述 ​ Android 系统是 Google 公司基于 Linux 内核开发的移动端操作系统,适用于智能手机智能手表平板电脑等设备,最新的版本为 7.1。Android系统具有免费开源的优势,任何企业与个人都可以查阅公开的 API 文档,并在自己开发的应用中通过调…

xlua源码分析(四) lua访问C#的值类型

xlua源码分析(四) lua访问C#的值类型 上一节我们主要探讨了C#是如何使用interface和delegate访问lua层的table和function的,本节我们跟着Examples 05_NoGc,来看看xlua是如何实现lua层无gc访问C#的值类型的。 首先例子中用到的lua…

使用OpenSSL生成自签名SSL/TLS证书和私钥

使用OpenSSL生成自签名SSL/TLS证书和私钥 前提: 系统安装了OpenSSL; 系统:windows、linux都可; 1 生成私钥 创建一个名为 server.key 的私钥文件,并使用 RSA 算法生成一个 2048 位的密钥。 openssl genrsa -out s…

敢问路在何方,路在脚下

运维工程师的出路到底在哪里? 他是谁 运维工程师(Operations)负责维护并确保整个服务的高可用性,同时不断优化系统架构提升部署效率、优化资源利用率提高整体的ROI。运维工程师面对的最大挑战是大规模集群的管理问题&#xff0c…

List那些坑

很多文章都介绍过这些坑,本文做个记录,并提供解决方案。 1.Arrays.asList的坑 1.1现象 情况1:通过Arrays.asList方法生成的List数据不支持添加操作 使用Arrays.asList方法生成的List数据,不能对其进行删除或者添加操作。代码示例…

学Java的第四天

一、switch语句 switch (表达式) { case 1: 语句体1; break; case 2: 语句体2; break; ... default: 语句体n1; break; } 首先计算表达式的值,然后和case 比较,有对应的值就执行对应的语句,遇到 break 就结束。 最后如果所有的cas…

【MySQL】数据库之存储引擎

目录 一、什么是存储引擎 MySQL 整个查询执行过程,即MySQL的工作原理? 二、MyISAM 与 InnoDB 的区别? 三、如何查看当前表的存储引擎? 1.查看当前的存储引擎 2.查看数据库支持哪些存储引擎 四、如何设置存储引擎?…

如何通过内网穿透实现远程访问本地Linux SVN服务

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…

树莓派编译uboot及内核

为了实验ebpf,需要自己编译内核开启相关选项,正好手头有树莓派的板子,所以正好用上。 更换内核 首先我自己用官方工具在sd卡上烧录了64位无桌面的系统,然后按照官方的文档,进行了内核的交叉编译,更换后使…

Vue3组合式-依赖注入provideinject

一、注意点 专门强调了是3.0且是组合式,不是2.0不支持也不是选项式不支持provide&&inject,是支持但是有很明显的弊端,不建议使用 二、场景 官方的解释: 通常情况下,当我们需要从父组件向子组件传递数据时,会…