- 博客(294)
- 收藏
- 关注
原创 环境切换像魔术!揭秘汇丰前端项目中的「一键多环境切换术」!
错误点描述❌ Vite 构建时将 baseURL 固定死导致无法切换❌ 页面刷新后丢失环境配置没有用 localStorage 持久化❌ 环境 key 写死在代码中不好扩展,建议统一从envMap动态生成选项环境变量统一抽象页面展示 + 持久化 + 动态刷新一条龙打包时支持预配置默认值(如默认走test1复刻汇丰前端多环境切换机制用 Vite + Axios + localStorage 构建了灵活可控的环境系统支持打包后动态切换后端地址,适用于复杂测试流程。
2025-06-04 14:16:43
247
原创 【爆款级大屏揭秘】Vue + ECharts 打造“会说话”的银行数据可视化系统!
错误点描述❌ 图表不响应父容器大小变化缺少resize()处理,需监听 window 变化或使用组件包装❌ 高频刷新导致页面卡顿setInterval 未清除或拉取太频繁,建议做 debounce❌ 图表颜色过多建议最多用 3~4 个主色调,符合银行审美:蓝 / 金 / 深灰图表中嵌入 tooltip 故事化文案(如“周五交易异常高涨,原因:工资日”)加入数据标记点(如上升箭头、Top 标识)本文通过 Vue + ECharts 构建了一个“能讲故事”的数据大屏。
2025-06-04 14:16:13
234
原创 [特殊字符] 构建安全稳定的风控接口服务:Node.js + JWT 权限验证实战
错误点描述❌ 不加权限字段,仅校验身份导致普通用户也能发起风控操作❌ Token 无过期时间长期有效,容易泄露风险大❌ Token 被复制可复用建议加 token jti / redis 黑名单做一次性令牌每个接口应带上permission粒度控制Token 加入exp和jti字段使用 Redis 黑名单实现注销本文实现了一个“权限 + 签名”控制的风控接口使用 JWT 实现身份认证与权限校验可扩展为银行内部多角色、多接口风控系统基础框架。
2025-06-03 15:59:33
386
原创 Kafka 在汇丰通知系统中的应用:高可用消费者实战
错误点描述❌ groupId 相同多消费者抢同一份消息,只有一个会收到❌ 消费 offset 未手动提交重启后重复消费或错过消息❌ partition 配置不当所有消息都挤在一个消费者上,无法并行每个子系统用不同 groupId(保证各自都能收到)多分区+多个消费者实现负载均衡手动提交 offset 以提升稳定性(如需强一致性)本文用 Kafka + Node.js 构建了“支付通知系统”实现了多系统并发消费、日志审计与客户提醒结构可扩展性强,适用于银行类中间服务通信场景。
2025-06-03 15:58:41
495
原创 DevOps 实战:Docker + Jenkins 搭建“汇丰级”自动化部署流水线
错误点描述❌ Dockerfile 写错路径镜像构建失败❌ npm 依赖未锁版本每次构建行为不一致❌ Jenkins 未配置权限拉取代码、推送镜像失败❌ pipeline 忽略错误错误被吞,导致部署了有问题的版本用set -e保证每一步失败就终止加入版本号和 Git commit ID 标识部署来源多环境部署支持(如 test / prod 区分)本文从零构建了 HSBC 级别的 CI/CD 自动化部署流程。
2025-05-30 10:57:12
530
原创 构建“银行级审批系统前端架构”:Vue 3 + Naive UI 实战封装
本文实现了银行通用审批页面的前端结构使用了 Naive UI、组合式 API、动态权限渲染支持灵活复用在不同类型的审批任务中。
2025-05-30 10:54:06
241
原创 [特殊字符]️ 构建“类汇丰级”大数据 ETL 调度系统:Airflow 实战入门
print("✅ 模拟:加载到账户汇总表 -> PostgreSQL")print("✅ 模拟:加载异常记录 -> ElasticSearch")with DAG(schedule_interval='0 1 * * *', # 每天1点执行) as dag:错误点说明❌ CSV 路径或格式错误Airflow 无法读取文件❌ 任务未定义依赖关系会导致顺序错乱或跳过❌ 时区错配Airflow 默认使用 UTC,需配置start_date明确时区❌ DAG 更新无效。
2025-05-29 14:44:26
251
原创 [特殊字符] 构建高可用的“资金调拨任务调度器”:从分布式任务队列说起
本文模拟了汇丰银行中典型的“资金调拨队列系统”使用了 Bull + Redis 构建任务分发与处理系统你学会了构建可靠的任务队列的基础框架,并能通过它扩展成完整金融调度系统。
2025-05-29 14:43:45
261
原创 为你的博客加上评论区 + 富文本编辑器!Vue3 + Node.js 实战全流程(含完整源码与坑点分析)
问题可能原因解决方法富文本无法提交HTML 内容为空使用v-html展示、判断空值时用评论顺序错乱未排序MongoDB评论闪烁多次请求使用 loading 标志避免重复请求本文基于 Vue3 + Quill 实现富文本输入,结合 Node.js + MongoDB 构建了一个轻量通用型的博客评论系统,具备良好的扩展性和实战意义。
2025-05-27 20:16:08
26
原创 从 0 构建全栈博客系统:Vue3 + Node.js + MongoDB 实战教程(附完整源码与部署流程)
✅ Vue3 + Pinia 实现响应式前端✅ Node.js + Express 构建 RESTful API✅ MongoDB 存储文章和用户数据✅ JWT 实现登录注册与权限校验✅ 前端支持 Markdown 编辑与高亮预览✅ Docker 一键部署(附完整 Dockerfile)💡 适合希望从业务项目中精通全栈架构的开发者,真正落地可用。前后端分离架构的构建思维实战权限控制与用户认证流程使用 MongoDB 存储结构化数据利用 JWT 构建安全认证体系。
2025-05-27 20:12:03
101
原创 爆改传统表单!用 Vue3 + Naive UI 实现动态多级表单(附完整源码与坑点分析)
本文从动态表单设计的核心思想出发,结合 Vue3 的组合式 API 与组件化策略,提供了一种高复用、强扩展的方案。如何给这个表单接入 AI 实时辅助填写建议,变身智能表单助手!
2025-05-27 20:07:25
420
原创 HarmonyOS 5.0.0 或以上:封装 useDeviceType,实现多端设备识别与适配
问题说明忘记处理未知类型非主流设备上显示空白或报错设备类型未统一小写处理判断失效,应统一与混用混淆用于逻辑切换,适合响应式布局,二者结合更强大。
2025-05-25 09:30:14
301
原创 HarmonyOS 5.0.0 或以上:封装 useNetwork,实现网络状态监听与断网提示
问题说明忘记订阅或卸载导致事件监听残留、内存泄漏无 toast 或 UI 提示用户对网络变化无感知,体验差状态变量未响应式管理页面不会自动更新连接状态。
2025-05-25 09:29:41
280
原创 HarmonyOS 5.0.0 或以上:封装 useLongPress,实现长按触发交互逻辑
问题说明未绑定onTouch无法响应长按事件忘记松手后仍会触发回调多个组件共用一个会导致状态错乱,应为每个组件创建独立实例。
2025-05-25 09:29:04
299
原创 HarmonyOS 5.0.0 或以上:封装 useMediaQuery,实现响应式布局监听(适配手机/平板)
问题说明未调用无法获取窗口宽度窗口变化未实时监听可扩展等事件监听写死布局样式不利于响应式适配,应根据mediaState控制组件显示隐藏或样式切换。
2025-05-25 09:28:03
118
原创 HarmonyOS 5.0.0 或以上:封装 useTheme,实现深色/浅色主题动态切换
);console.info('已切换主题:', mode);return {setTheme,toggle,isDarkreturn {问题说明未使用响应式变量控制颜色切换后 UI 无法更新组件中硬编码颜色值无法随主题变化自动适配全局状态未统一管理多组件不一致、切换失效。
2025-05-25 09:27:24
222
原创 HarmonyOS 5.0.0 或以上:封装 useClipboard 实现文本复制与提示反馈
在开发中常遇到“复制邀请码”“复制链接”等需求,若复制成功后能即时提示用户,体验更佳。是系统级模块,需保证已有相关权限。
2025-05-25 09:26:07
132
原创 HarmonyOS 5.0.0 或以上:封装 useEventBus,实现组件间解耦通信(高级事件总线)
当组件层级较深或跨页面通信时,传递变得复杂,此时可以用。
2025-05-25 09:25:13
248
原创 HarmonyOS 5.0.0 或以上:封装 useForm,实现表单状态管理与实时校验
问题说明忘记为每个字段配置 rules字段不会校验校验后未更新error字段UI 无法展示错误字段value未使用响应式输入无法双向绑定。
2025-05-25 09:24:28
167
原创 HarmonyOS 5.0.0 或以上:封装 useDialog,实现全局弹窗控制(Hook + 弹窗组件)
在大型项目中,弹窗种类繁多(确认框、提示框、表单弹窗等),如果每个页面都单独控制显隐、内容和按钮,会导致逻辑分散且难以统一。
2025-05-25 09:23:19
272
原创 HarmonyOS 5.0.0 或以上:封装 usePagination 实现滚动分页加载(ArkTS 分页 Hook 实战)
问题说明未判断finished会无限加载接口返回空数组未处理页面看起来卡住push数据重复重复调用未校验时可能数据重复展示。
2025-05-25 09:19:00
116
原创 HarmonyOS 5.0.0 或以上:useRequest + useDebounce 实现防抖搜索接口请求实战
问题说明绑定错误请求参数错误或未更新忘调用输入无反应接口中reject()未被捕捉页面报错或无提示。
2025-05-25 09:18:17
226
原创 HarmonyOS 5.0.0 或以上:封装 useThrottle 实现节流控制(ArkTS 高频触发优化)
节流(Throttle)与防抖不同,它是在固定时间间隔内最多执行一次,常用于按钮点击、页面滚动等高频触发的场景,避免短时间内执行过多操作。
2025-05-25 09:16:54
240
原创 HarmonyOS 5.0.0 或以上:封装 useDebounce 实现输入防抖(ArkTS 实用 Hook)
在搜索框、输入框等组件中,频繁触发函数会带来性能问题。,使函数在停止输入一段时间后才执行,减少不必要的调用。
2025-05-25 09:16:22
253
原创 HarmonyOS 5.0.0 或以上:封装 useRequest,统一处理异步请求状态(loading + error + data)
在开发中,我们经常会请求接口并处理三个状态:✅ 加载中(loading)✅ 数据(data)❌ 错误(error)我们将封装一个useRequestHook,实现接口调用逻辑的复用。
2025-05-25 09:15:48
141
原创 HarmonyOS 5.0.0 或以上:实现图文穿插式展示的卡片进入动画
本篇将实现一个图文交错排列的卡片列表,在页面加载或滑动进入时以交错动画逐步进入,广泛用于内容流展示、商品推荐、AI生成内容等场景。
2025-05-24 11:40:36
233
原创 HarmonyOS 5.0.0 或以上:实现多 Tab 页面切换的内容滑入滑出动画
本篇实现一个带有滑入滑出过渡动效的 Tab 页面切换效果,适用于设置页、推荐内容页、任务列表等具有多视图切换的场景,增强界面切换的空间感与节奏感。
2025-05-24 11:39:16
381
原创 HarmonyOS 5.0.0 或以上:实现图表数据动态增长与数值跳动动效
本篇实现一个数据图表柱状图动画,在加载或切换数据时通过柱状增长动效与数值跳动过渡,增强数据反馈的视觉节奏感。适用于 dashboard、KPI 报告、教学分析等场景。
2025-05-24 11:38:18
243
原创 HarmonyOS 5.0.0 或以上:实现任务流程中多节点连线的动态扩展动效
本篇实现一个带有动态连线动画的多节点任务流程图,用于展示任务执行路径、审批流程、AI推荐链路等,强调“过程性”和“节点联动”。
2025-05-24 11:29:57
164
原创 HarmonyOS 5.0.0 或以上:实现 AI内容生成加载节奏动画与渐显展示
本篇实现一个用于AI生成过程的节奏加载动画,通过动态圆点节奏动效 + 渐显文本,模拟 ChatGPT、Siri 等生成中场景的自然过渡体验,适用于对话助手、推荐卡片、内容生成等。
2025-05-24 11:00:15
369
原创 HarmonyOS 5.0.0 或以上:实现底部抽屉式弹窗的拖动展开与收起动效
本篇实现一个支持上滑展开、下滑关闭的底部抽屉弹窗组件,支持拖动范围控制、吸附回弹、滑动关闭等交互体验,常用于选项面板、AI推荐卡片、文件操作框等场景。
2025-05-24 10:42:53
126
原创 HarmonyOS 5.0.0 或以上:实现语音波形动画与音量反馈动效
本篇将模拟实现语音录入时的波形动效,并根据动态“音量值”实时调整波形高度,适用于语音助手、语音输入、语音识别等待界面等人机交互入口。
2025-05-24 10:41:49
207
原创 HarmonyOS 5.0.0 或以上:实现背景模糊动画与弹窗蒙层融合动效
本篇将实现一个支持背景模糊过渡与弹窗渐入融合的效果,用于构建高质量的浮层交互体验,适用于分享面板、确认提示、设置切换、AI对话窗等场景。
2025-05-24 10:41:05
236
原创 HarmonyOS 5.0.0 或以上:实现弹性滑块解锁动效与成功反馈
本篇将实现一个支持拖动滑块解锁的交互动画组件,结合拖拽动画、成功确认、归位弹性反馈,常用于安全验证、登录确认、界面切换等交互场景。
2025-05-24 10:40:06
340
原创 HarmonyOS 5.0.0 或以上:实现 AI助手打字动效与渐进展示内容
本篇将实现一个模拟 AI 助手“逐字打字”展示的效果,常见于智能问答、聊天机器人、AI提示系统等场景,可有效提升人机交互的真实感与趣味性。
2025-05-24 09:35:19
309
原创 HarmonyOS 5.0.0 或以上:实现多图预览与拖拽缩放过渡动画
本篇将实现一个多图点击放大预览与拖拽缩放退出动效,模拟微信、抖音、图库类图片查看体验。用户可点击缩略图放大,拖拽图片可缩放+透明度渐隐,松手退出。
2025-05-24 09:34:30
131
原创 HarmonyOS 5.0.0 或以上:实现任务进度轨迹动画与关键节点状态变化
本篇将实现一个任务流程轨迹动画,通过状态节点依次激活的动效展示任务进度,适用于发货流程、审批流程、安装引导等“阶段式任务跟踪”场景。
2025-05-24 09:33:02
262
原创 HarmonyOS 5.0.0 或以上:实现登录流程的渐变进度与过渡动效
本篇将实现一个包含渐变进度动画与页面内容平滑切换的登录流程。适用于用户登录、身份验证、加载跳转等场景,提升体验的连贯性与专业感。
2025-05-24 09:29:37
325
原创 HarmonyOS 5.0.0 或以上:实现图片轮播滑动动画与自动播放切换
本篇将实现一个支持左右滑动 + 自动轮播的图片轮播组件,结合滑动切换动画与时间驱动切换,适用于首页 Banner、图文推荐、教程引导等视觉焦点区域。
2025-05-24 09:23:31
304
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人