Vue3+Spring Boot同学聚会报名系统开发实践

1. 项目背景与需求分析去年参加高中同学聚会时组织者还在用微信群接龙统计人数结果信息混乱不堪——有人重复报名、有人临时变更无法同步、还有人压根没看到消息。作为SSM212班的班长我决定开发一个专属的同学聚会报名系统让十年后的重聚能够井然有序。这个系统需要解决三个核心痛点报名信息结构化避免群聊刷屏导致的信息遗漏实时统计与可视化组织者随时掌握参与情况多终端适配方便不同使用习惯的同学操作2. 技术选型与架构设计2.1 前端方案采用Vue3Element Plus组合主要考虑因素响应式布局自动适配手机/PC测试数据显示班级同学移动端使用率78%表单验证内置规则如手机号、邮箱格式校验统计图表选用ECharts Lite版本打包后体积仅180KB关键代码示例// 报名表单验证规则 const rules { name: [{ required: true, message: 请输入真实姓名, trigger: blur }], phone: [ { pattern: /^1[3-9]\d{9}$/, message: 手机号格式错误 } ] }2.2 后端服务使用Spring Boot 3.x MyBatis Plus架构采用RESTful API设计接口版本控制通过路径/v1/实现数据库选择MySQL 8.0配置连接池参数spring: datasource: hikari: maximum-pool-size: 20 connection-timeout: 30000添加Swagger文档自动生成方便后续维护2.3 部署方案为控制成本选用轻量级方案2核4G云服务器年费约600元Nginx反向代理HTTPS证书Lets Encrypt免费版采用Docker Compose编排MySQL和Java服务3. 核心功能实现细节3.1 报名信息收集设计字段时特别注意隐私保护必填项姓名、届别、联系方式三选一选填项饮食禁忌、是否携带家属敏感信息如身份证号明确说明不收集数据库表设计CREATE TABLE registration ( id BIGINT AUTO_INCREMENT COMMENT 雪花ID, real_name VARCHAR(20) NOT NULL, contact_type ENUM(phone,email,wechat) NOT NULL, contact_value VARCHAR(50) NOT NULL, diet_restriction TEXT, companion_count TINYINT DEFAULT 0, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY idx_contact (contact_type,contact_value) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;3.2 实时统计看板开发过程中发现两个技术难点并发更新问题采用乐观锁控制报名人数统计Update(UPDATE event_info SET join_countjoin_count1 WHERE id#{eventId} AND join_count#{expectedCount}) int updateJoinCount(Param(eventId) Long eventId, Param(expectedCount) Integer expectedCount);图表性能优化使用WebWorker处理大数据量渲染3.3 消息通知模块实现多通道通知策略短信通知阿里云短信服务模板需提前审核邮件提醒配置Thymeleaf模板引擎微信模板消息需同学关注服务号消息发送记录表设计包含重试机制字段ALTER TABLE notification ADD COLUMN retry_count TINYINT DEFAULT 0; ALTER TABLE notification ADD COLUMN last_retry_time DATETIME;4. 安全防护措施4.1 防刷单机制IP限流Guava RateLimiter实现每分钟5次请求限制验证码采用行为验证滑动拼图而非传统数字验证码接口签名关键API增加时间戳MD5签名校验4.2 数据安全敏感字段加密联系方式采用AES加密存储日志脱敏自定义Logback过滤器定期备份每天凌晨3点全量备份到OSS5. 实际运营数据上线两周后的关键指标报名完成率92%46/50人平均填写时间2分18秒移动端占比81%通知到达率短信92%、邮件85%、微信98%遇到的典型问题及解决方案部分同学收不到短信原因运营商黑名单策略解决增加短信邮件双通道保障日期选择器时区问题现象海外同学看到的时间错误修复前端统一使用UTC时间传输6. 扩展优化方向根据用户反馈计划的迭代项纪念品选择功能接入微信支付活动相册模块七牛云存储集成座位预选系统SVG可视化选座关键经验同学录类系统要特别注意技术冷感用户的使用体验我们最终保留了电话报名通道这是5位年长老师能成功报名的重要因素。