项目简介

FindBack 是一个面向校园场景的前后端分离失物招领平台，核心理念是 “让失物更快回家” 。

它不只是简单的“发帖—查找”，而是围绕失物招领场景补齐了一整套社交与体验能力：物品发布、搜索筛选、嵌套评论、弹幕互动、收藏、好友机制、私信聊天、消息中心、主题定制、管理后台。目标用户既包括丢失物品的同学，也包括拾获物品后希望尽快找到失主的人。

传统失物招领大多停留在公告栏、微信群或简单的表单系统，信息分散、交互割裂、体验粗糙。FindBack 希望用现代 Web 技术把这件小事做好——既解决实际问题，也把细节打磨到值得展示的程度。

在线体验：<https://findback.garfieldia.top>

开源仓库：<https://github.com/xubochen520/FindBack>

功能特性

核心业务

- 物品发布与搜索 — 支持图片/视频上传（最多 3 个文件）、关键词搜索、按类型筛选（丢失 / 捡到）、匿名发布

- 物品详情 — 图片轮播（含视频播放）、嵌套评论系统（多级回复）、弹幕互动、收藏功能

- 我的管理 — 发布物管理、标记已解决、删除操作、快捷右键菜单

- 收藏系统 — 收藏感兴趣的物品、收藏数统计、GSAP 取消动画

社交系统

- 好友机制 — 唯一 UUID 标识添加好友、申请 / 接受 / 拒绝流程、双向关系管理

- 私信聊天 — 右侧滑入式聊天面板、Emoji 表情选择器、地理位置分享、消息时间格式化、乐观更新

- 消息中心 — 统一展示好友私信 + 系统通知、未读红点提醒、点击跳转对应内容

用户体系

- 注册登录 — JWT 无状态认证（7 天有效期）、BCrypt 密码加密、Canvas 粒子动画背景

- 个人中心 — 封面横幅、头像上传（WebP 自动压缩）、资料编辑、统计数据展示

- 主题定制 — 亮 / 暗模式切换、封面图上传、6 套预设配色方案、**智能取色算法**自动提取配色

- 管理员后台 — SVG 圆环统计面板、用户权限管理、拖拽删除用户（垃圾桶动画）、级联清理数据

体验细节

- GSAP 动画系统 — 15+ 动画函数库，覆盖页面入场、卡片弹跳、弹窗弹性、按钮脉冲、骨架屏 shimmer

- 弹幕引擎 — requestAnimationFrame 高性能多轨道弹幕，支持悬停暂停、点击定位评论

- 移动端适配 — FAB 浮动拖拽按钮、三档响应式断点、触摸优化

- 骨架屏加载 — 所有列表页 shimmer 渐变占位动画

- Cookie 持久化 — 分页、筛选条件刷新后恢复

- 心跳在线状态 — 30 秒心跳更新，5 分钟内活跃视为在线

- Easter Egg 彩蛋 — 隐藏入口触发感谢页（SVG Logo + 星空背景 + Timeline 动画）

- ID 编码防猜 — URL 中 ID 经加密编码，不暴露真实顺序 ID

项目结构

FindBack/

├── backend/findback-backend/ # Spring Boot 后端

│ ├── src/main/java/com/findback/

│ │ ├── config/SecurityConfig.java # 安全配置（JWT / CORS / 权限路径）

│ │ ├── controller/ # 9 个 REST 控制器

│ │ ├── service/ # 9 个业务服务层

│ │ ├── entity/ # 12 个 JPA 实体类

│ │ └── repository/ # Spring Data Repository

│ └── pom.xml

│

└── frontend/findback-frontend/ # Vue 3 前端

├── src/

│ ├── pages/ # 13 个页面组件

│ ├── components/ # 5 个核心组件

│ ├── api/ # Axios 实例 + 拦截器

│ ├── utils/ # ID 编码 / 媒体压缩

│ ├── animations.js # GSAP 动画函数库

│ ├── router.js # 路由配置

│ └── main.js

└── package.json

开发说明

- 启动顺序：先启动后端（8081），再启动前端（5173）

- 图片限制：单张最大 10MB，最多 3 张；头像自动转 WebP；封面图上限 5MB

- JWT 密钥：在 application.properties 中配置

- UUID 字符集：排除易混淆字符（O / 0 / I / 1 / l），使用 SecureRandom 生成

- MySQL 认证：如遇认证问题，尝试 sudo mysql 直接进入

- uploads 目录：确保有写权限（JPA 启动时自动创建）

总结与展望

FindBack 从“发布—查找”这个最小闭环出发，逐步补齐了社交系统、主题定制、弹幕互动、管理后台等模块，最终形成一个功能完备的校园失物招领平台。

项目中几个比较有意思的技术点：

- 智能取色算法 — 把色彩理论落到实际产品中，让主题定制不再是简单的预设切换

- 弹幕引擎 — 用 requestAnimationFrame 手写一个轻量级弹幕系统，兼顾性能与交互

- 安全设计 — JWT + BCrypt + ID 编码 + 双重校验，覆盖常见 Web 安全风险

后续可以考虑的方向：引入图像识别实现“以图搜物”、基于地理位置的智能推送、以及把本地文件存储迁移到对象存储以支持更灵活的部署。

项目完全开源，欢迎提交 Issue 或 PR 一起完善。

项目链接

GitHub 仓库：<https://github.com/xubochen520/FindBack>

在线体验：<https://findback.garfieldia.top>

许可证：MIT License

本文基于 FindBack 项目 README 整理，具体实现细节请以仓库代码为准。