安平县外贸网站建设,百度短网址,如何登录我的wordpress,排版设计的网站本文主要分享了如何设计一个具有高可扩展性的弹窗功能。
本设计参考了优惠券功能的设计思路#xff0c;有兴趣的朋友可以看看优惠券的分享#xff1a;如何设计一个可扩展的优惠券功能_java优惠券系统设计-CSDN博客
一、需求介绍
假如你的项目需要实现以下弹窗#xff0c;…本文主要分享了如何设计一个具有高可扩展性的弹窗功能。
本设计参考了优惠券功能的设计思路有兴趣的朋友可以看看优惠券的分享如何设计一个可扩展的优惠券功能_java优惠券系统设计-CSDN博客
一、需求介绍
假如你的项目需要实现以下弹窗你会怎么去实现 需求
1.展示1张图片点击图片后跳转到另外1个页面支持H5、小程序、其他小程序有个关闭按钮点击关闭按钮停留在当前页面
2.该弹窗功能提供给运营通过管理后台进行配置
3.弹窗频率需要有所控制比如1天1次有优先级比如运营配置了3个弹窗不能同时弹需要按优先级每次进入页面的时候才弹参考某团的体验
4.支持灵活配置弹窗条件比如地域属性、平台属性、时间属性、指定某些用户、用户来源等
5.在配置弹窗过程中有些变量属性需要运行时才能确定比如跳转链接中增加当前登录用户ID或者token作为参数
二、数据库设计存储设计好坏往往决定一个功能日后的可维护、可扩展
1.错误的表设计按需求一一列举各种条件作为表结构的字段 id 有效期 图片url H5链接 小程序链接频率控制 优先级 条件1 条件2 ... 条件n 1 2023-09-24 https://image.com/aa/bb.jpg /page/mini 1次/天 99 ios 深圳市
相信很多朋友都是这样设计弹窗表的这种表设计非常大的问题就是每次需要增加1个新的弹窗条件的话就要新增1个字段非常不利于功能扩展。
2.正确的表设计抽象区分‘配置数据’和‘弹窗条件’
配置数据使用1个字段以json结构进行存储可以做到灵活增加数据或改变数据配置数据不涉及数据过滤所以不涉及性能问题 id 有效期 优先级 背景图json 1 2023-09-24 99 {imgUrl:https://image.com/aa/bb.jpg,type:redirct_mini,value:/page/mini}
弹窗条件由列式转化为行式存储增加条件不需要增加字段而是加1行数据 id popup_id 条件 条件值 1 1 条件1 1次/天 2 1 条件2 ios 3 1 条件3 深圳市
核心设计思想
1.把数据库表的列式条件转化为行式条件比如 where a? and b?转化为2行数据作为条件当然转化后不再是sql能表达的
2.运用设计模式类似责任链模式把1中的行式条件转化为一段代码可简单可复杂通过关联关系来做到可插拔
3.完整的表结构设计remark、create_time、update_time是固定字段
CREATE TABLE mk_popup_pop_condition (id int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT ID,bean_name varchar(32) NOT NULL DEFAULT COMMENT bean名称(PopCondition的实现类),descrpition varchar(255) DEFAULT NULL COMMENT 描述,remark varchar(255) DEFAULT NULL COMMENT 备注,create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间,update_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间,PRIMARY KEY (id) USING BTREE,UNIQUE KEY uniq_beanname (bean_name)
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT弹窗条件;CREATE TABLE mk_popup (id int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT ID,begin_time datetime NOT NULL COMMENT 有效期开始时间,end_time datetime NOT NULL COMMENT 有效期结束时间,status varchar(8) NOT NULL DEFAULT COMMENT 状态(off:下架,on:上架),priority int(11) NOT NULL DEFAULT 0 COMMENT 优先级(值越大优先级越高),title varchar(32) NOT NULL DEFAULT COMMENT 标题,text varchar(128) NOT NULL DEFAULT COMMENT 文案,bg_img varchar(255) NOT NULL DEFAULT COMMENT 背景图json数据,close_btn varchar(255) NOT NULL DEFAULT COMMENT 关闭按钮json数据,remark varchar(255) DEFAULT NULL COMMENT 备注,create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间,update_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间,PRIMARY KEY (id) USING BTREE,KEY idx_begintime (begin_time),KEY idx_endtime (end_time)
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT弹窗;CREATE TABLE mk_popup_condition (id int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT ID,popup_id int(11) NOT NULL COMMENT mk_popup.id,pop_condition varchar(32) NOT NULL DEFAULT COMMENT 弹窗条件(bean名称,mk_popup_pop_condition.bean_name),pop_condition_value varchar(255) DEFAULT COMMENT 弹窗条件值,remark varchar(255) DEFAULT NULL COMMENT 备注,create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间,update_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间,PRIMARY KEY (id),KEY idx_popupid (popup_id)
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT弹窗-弹窗条件;CREATE TABLE mk_popup_log (id int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT ID,business_type varchar(64) NOT NULL DEFAULT COMMENT 业务类型(popup:mk_popup,user_popup:mk_user_popup),business_id int(11) unsigned NOT NULL DEFAULT 0 COMMENT 业务ID,user_id int(11) NOT NULL DEFAULT 0 COMMENT bu_user_info.id,deviceid varchar(64) NOT NULL DEFAULT COMMENT 设备号,remark varchar(255) DEFAULT NULL COMMENT 备注,create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间,update_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间,PRIMARY KEY (id) USING BTREE,KEY idx_userid (user_id),KEY idx_deviceid (deviceid),KEY idx_businessid_businesstype (business_id,business_type)
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户弹窗记录;
表说明
mk_popup_pop_condition主要是记录有哪些弹窗条件管理后台中配置弹窗时有用
mk_popup弹窗配置运营配置数据就往这里写数据
mk_popup_condition某个弹窗的弹窗条件1对多条件组合配置就是利用该表
mk_popup_log用户弹窗记录用于控制弹窗频率
数据样例说明
弹窗配置 弹窗条件 1 弹窗1只有1个条件FrequencyCondition可以理解为只控制弹窗频率为2次/天
2 弹窗2有3个条件需要符合场景为小程序首页地域属性为深圳才弹并且控制弹窗频率为1次/天
三、代码设计
1.抽象弹窗条件定义一个接口其子类对应mk_popup_pop_condition的数据 PopParam说明 2.核心代码PopService中提供1个方法‘用户最优的弹窗’此处代码过多只贴核心部分完整的可以通过gitee查看源码 设计思想
1.查询有效期内上架的所有弹窗按优先级倒排找到第1个就是最优的了遍历每个弹窗的多个弹窗条件判断有1个条件不满足就放弃该弹窗进入下一个判断
2.运行时替换一些配置的参数简单的如{userId}复杂的参数就实现ReplaceParam接口下文有响应结果demo
tips此处利用CompletableFuture优化性能实现了多线程并发判断每个弹窗条件只要有1个条件不满足就立马返回。
3.如何新增1种弹窗条件
实现接口PopCondition重写canPop方法以下为‘场景’弹窗条件的代码 把Bean名称配置到弹窗条件表mk_popup_condition即可使用该条件无需新增其他代码也不改动主流程代码。
4.Controller固定入口 5.API定义
前端将弹窗封装成1个公共组件只需请求固定接口/popup/best即可在需要弹窗的页面直接引用该组件
入参 字段 说明 sence 前端每个页面定义1个唯一值 经纬度 非固定参数可不传 地域信息 非固定参数可不传 渠道信息 非固定参数可不传 ... 非固定参数可不传
响应 字段 说明 model 前端渲染模板定义需要与前端协商不同的值代表不同的渲染模板 title 标题本来想用于背景图的标题但其实可以把标题设计到背景图中 text 文案同标题 bgImg 背景图JSON存储背景图位置的数据和动作 bgImg.imgUrl 背景图 bgImg.type 点击背景图做什么close:关闭,api:请求API,subscribe:订阅消息,redirect_http:跳转http链接,redirect_mini:跳转小程序链接,redirect_other_mini:跳转其他小程序链接 bgImg.value 点击背景图做什么携带的信息 closeBtn 关闭按钮JSON存储关闭按钮位置的动作一般都是关闭也可以做一些骚操作比如点击关闭按钮跳转到某个页面或者没有关闭按钮一定要点击背景图 popupLogId 弹窗记录ID本设计中查询到弹窗就会往mk_popup_log插入记录而不是用户看到弹窗才记录如果需要了解用户是否有真正看到弹窗需要与前端协商一起实现这个ID可以作为下个api的传参
示例
https://domain.com/popup/best?sencemini_homecityCode440300 四、需求升级
1.点击图片后不跳转到另外1个页面而是实现特殊逻辑如拉起小程序订阅消息
解需要前端协作实现增加bgImg.type的定义值数据通过bgImg.value返回给前端
2.点击图片后不跳转到另外1个页面而是切换到下一张图片点击后下一张图片后才跳转页面比如发优惠券第一张图片展示立即领取点击后请求api进行发券随后切换至去使用的图片点击后再跳转到对应用券页面
解增加下一步操作设计next结构与最外层的响应一样类似递归结构 3.图片位置除了背景图还需要展示其他的信息比如新人礼包弹窗展示优惠券需要实现ReplaceParam来完成 1实现接口ReplaceParambean名称为参数名重写replace方法以下为‘新人券包’的demo代码 2配置demo即bg_img字段值{newUserCoupon}是一个动态参数运行过程中替换掉
{imgUrl: {\imgUrl\:\https://img.domain.com/aaa.png\,\newUserCoupon\:{newUserCoupon}},type: api,value: https://domain.com/api/coupon/recive?id8
}
问imgUrl为什么要配置为json字符串
答灵活运用固定字段响应数据给到前端不同业务场景可定义不同的字段返回只要跟前端约定好即可
数据响应示例 4.在运行时给用户做一些弹窗埋点比如完成某个事件后给用户埋一个弹窗用户下次进入应用就给他弹
解增加1张表mk_user_popup字段与mk_popup差不多但是不需要配置mk_popup_condition因为这种弹窗只弹1次已经能满足需求如有特殊需求也可以特殊设计
CREATE TABLE mk_user_popup (id int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT ID,user_id int(11) NOT NULL COMMENT bu_user_info.id,begin_time datetime NOT NULL COMMENT 有效期开始时间,end_time datetime NOT NULL COMMENT 有效期结束时间,status varchar(8) NOT NULL DEFAULT COMMENT 状态(off:下架,on:上架),priority int(11) NOT NULL DEFAULT 0 COMMENT 优先级(值越大优先级越高),title varchar(32) NOT NULL DEFAULT COMMENT 标题,text varchar(128) NOT NULL DEFAULT COMMENT 文案,bg_img varchar(255) NOT NULL DEFAULT COMMENT 背景图json数据,close_btn varchar(255) NOT NULL DEFAULT COMMENT 关闭按钮json数据,remark varchar(255) DEFAULT NULL COMMENT 备注,create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间,update_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间,PRIMARY KEY (id) USING BTREE,KEY idx_userid (user_id),KEY idx_userid_begintime (user_id,begin_time),KEY idx_userid_endtime (user_id,end_time)
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户弹窗;
PopService中增加以下代码 tips还有些步骤型的逻辑每步骤都有1个弹窗比如进行到第1步给用户埋了1个弹窗但用户一直没有进入应用后面流转到第2步了又埋了1个弹窗。此时如果用户进入应用就会先后看到2个弹窗其实第1步的弹窗对于用户来说已经没有意义了造成不好的用户体验直接给用户弹第2步的弹窗即可。所以可以设计取消弹窗的操作在埋第2步弹窗的同时把第1步弹窗取消掉。
扩展思考
1.弹窗做成不同的表现形式比如提示框效果过一段时间自动消失
2.弹窗自动关闭比如倒计时n秒后自动关闭 怎么样如果你觉得有用的话还不快快收藏起来 附涉及的代码目录
githubhttps://github.com/897665787/springcloud-template
giteespringcloud-template: 一个基于springcloud netflix微服务框架记录了关于微服务开发的一些最佳应用欢迎大家学习指导。 springcloud-template └── template-tool └──controller └── PopupController -- 最优弹窗查询API └── popup └── PopCondition -- 抽象定义使用条件 └── PopParam -- 弹窗条件参数 └── PopService -- 弹窗查询的核心代码 └── ReplaceParam -- 参数替换接口 └── condition -- 弹窗条件实现类条件就新增到这下面 └── FrequencyCondition -- 弹窗频率 └── PushAreaCondition -- 推送地区 └── ... -- 其他弹窗条件 └── param -- 参数替换实现类复杂条件就新增到这下面 └──NewUserCouponReplaceParam -- 新人券包 └── ... -- 其他参数替换
