网站首页 > 技术文章 正文
现在很多 ToC 客户端,比如:滴滴、美团、携程等等,都有很多的弹窗,那后端怎么设计更合理、更方便、成本更低呢?
我这里说的弹窗是说一级页面的弹窗,比如客户端的首页、个人中心页面、订单页面等。这种一级页面一般都有专门的部门负责,其他业务方需要接入弹窗,需要通过这个部门来接入。这里定义两种角色:
- 接入方,是需要在首页等页面投放弹窗的业务部门。
- 公共,负责首页等公共页面的部门。
这里是我们的设计方案:
1 弹窗后端接口设计
1.1 弹窗类型很重要
首先要约束弹窗类型,
序号弹窗类型类型说明1单图片弹出一张图片,点击图片跳转2单Lottie弹出一个动图,点击动图或者按钮跳转3双Lottie弹出一个动图,点击或者自动跳转第二个动图,点击第二个动图跳转4其他弹窗1比如,需要前端拼接展示完整图片的类型5其他弹窗需要不同组合字段组合弹窗资源的都算一种类型
1.2 弹窗接口设计
字段名称二级字段字段类型说明statusint成功失败状态码messageString成功失败信息datapopNameString弹窗名称,可以用来埋点和弹窗区分popInfoObject弹窗资源资源,每个类型弹窗里面字段不一致
比如图片弹窗 popInfo
字段名称字段类型说明imgaeUrlString图片urlimageWidthint图片宽度imageHeight图片高度jumpUrlString跳转urlpopTypeint弹窗类型
其他类型弹窗按需设计字段即可
2 配置即弹窗
标准类型的弹窗要支持配置即可,不用重复开发,要支持配置,可以有两种类型:
- 是所有人都出的弹窗,直接配置静态资源即可。
- 种是根据各个接入方自己的条件判断是否出,弹窗资源接入方自己控制,这种需要接入方提供一个接口,这个接口是一个标准接口。
第一种方式比较简单,就不说了。直接说第二种,直接制定一个标准接口,接入方直接实现即可。
统一入参,仅供参考,按需设计即可:
字段名称字段类型说明userIdString用户iduserNameString用户昵称deviceIdString设备idlatString纬度lonString经度
统一出参,这里以单图片弹窗为例:
字段名称二级字段字段类型说明statusint成功失败状态码messageString成功失败信息dataimgaeUrlString图片urlimageWidthint图片宽度imageHeightint图片高度jumpUrlString跳转地址其他通用字段String埋点等通用字段
接入的时候,公共方配置接入方的接口地址即可。
3 频控的两种技术方案
基本上除了某些 APP 之外,所有 APP 的弹窗都不会无限制的弹,都需要频控,否则可能导致用户体验的下降和用户的流失。
3.1 redis setex 弹出缓存自动过期
用户每次弹窗都使用redis 的 setex 设置过期时间,这个时间就是业务允许两次弹窗之间的最小间隔时间。
key 设计:popName + userId
优点:
- 所有弹窗频控后端可控。
- 有问题,可操作性强,可以操作redis,去除某些用户的频控限制。
缺点:
- 需要redis,造成架构复杂度上升,如果其他功能不需要使用 redis 的情况下,造成成本上涨。
- 用户量大的情况,比如上亿:redis 的key会非常大,造成redis压力。
3.2 前端缓存每个弹窗的最近一次弹出时间
前端存储每个用户弹窗的时间,请求后端的时候,把所有弹窗的上次弹出时间带给后端,由后端计算是否在频控时间范围内。
新弹窗弹出时间,由后端返给前端,前端存储,下次请求的时候带给后端。
优点:
- 不需要额外的存储,弹窗上次弹出时间存储在用户的客户端中。
- 架构简单。
- 问题好排查,直接看请求参数即可。
缺点:
- 用户卸载重装客户端的时候,会导致数据丢失,造成频控失效;
- 整个频控需要前后端配合才能完成,任何一方有问题,都有可能导致功能出问题。
4 怎么保证速度
异步执行所有弹窗,按顺序返回第一个有数据的弹窗, 参考:Reactor 之 多任务并发执行,结果按顺序返回第一个
欢迎大家提供更好的实现
行数:122
字数:1257
主题:自定义主题1
猜你喜欢
- 2025-03-19 VUE前端编程:如何通过全局对话框引入动态组件
- 2025-03-19 BasicModal – 简单易用的 Web App 弹窗
- 2025-03-19 VUE弹窗的两种实现方式--初级篇(vue做弹窗)
- 2025-03-19 优雅轻量级的网页alert弹窗美化插件 alertify.js
- 2025-03-19 电脑桌面提醒事项软件哪些可以定时弹出窗口提醒
- 2025-03-19 VUE前端编程:简单实现一个通用等待弹窗
你 发表评论:
欢迎- 527℃Oracle分析函数之Lag和Lead()使用
- 526℃几个Oracle空值处理函数 oracle处理null值的函数
- 523℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 508℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 506℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 497℃【数据统计分析】详解Oracle分组函数之CUBE
- 477℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 475℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端富文本编辑器 (47)
- 前端路由 (61)
- 前端数组 (73)
- 前端排序 (47)
- 前端定时器 (47)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)