FindBack：校园失物招领平台

让失物更快回家 · 开源 · 前后端分离 · 社交互动

简介

FindBack 是一个面向校园场景的失物招领平台，提供物品发布、搜索、评论、收藏、好友聊天、弹幕互动等完整社交功能。基于 Vue 3 + Spring Boot 构建，具备智能取色、GSAP 动画、暗色模式等特色体验。

在线体验：https://findback.garfieldia.top
GitHub：https://github.com/xubochen520/FindBack

功能特性

物品发布与搜索：支持图片/视频上传（最多3个文件），关键词搜索，按类型筛选（丢失/捡到），匿名发布
物品详情：图片轮播，嵌套评论（多级回复），弹幕互动，收藏
个人管理：发布物管理（标记已解决/删除），收藏管理，快捷右键菜单
好友与私信：UUID 添加好友，申请/接受/拒绝，右侧滑入聊天面板（Emoji、地理位置）
消息中心：私信 + 系统通知，未读红点，点击跳转
用户体系：JWT 认证，BCrypt 加密，个人中心（封面/头像/资料编辑）
主题定制：亮/暗模式，6套预设配色，智能取色算法（从封面图自动提取）
管理后台：SVG 统计面板，用户权限管理，拖拽删除（级联清理）
体验细节：GSAP 动画（15+函数），骨架屏，移动端适配，Cookie 持久化，心跳在线状态，ID 编码防猜

技术栈

层级	技术
前端	Vue 3.5 + Vite 5.0 + Vue Router 4.6
动画	GSAP 3.12
HTTP	Axios 1.13
视频处理	@ffmpeg/ffmpeg 0.12（浏览器端缩略图）
后端	Spring Boot 2.7.18 + Spring Security + JWT
ORM	Spring Data JPA（自动建表）
数据库	MySQL 8.x（12张表）
文件存储	本地 uploads/（图片 ETag 缓存365天）

快速开始（本地开发）

环境要求：JDK 11+, Maven 3.6+, Node.js 16+, MySQL 8.0+

bash

# 克隆（含子模块）
git clone https://github.com/xubochen520/FindBack.git --recursive
cd FindBack

后端（端口 8081）：

bash

cd backend/findback-backend
# 修改 application.properties 中的数据库连接
mvn spring-boot:run

前端（端口 5173）：

bash

cd frontend/findback-frontend
npm install
npm run dev

首次启动后端 JPA 会自动创建所有表，无需手动执行 SQL。

API 接口（主要模块）

模块	路径前缀	功能
认证	`/api/auth`	注册、登录
物品	`/api/items`	CRUD、筛选、状态更新
评论	`/api/items/{itemId}/comments`	嵌套评论（回复）
聊天	`/api/chat`	物品聊天记录
用户	`/api/users/{userId}`	资料、头像、封面
收藏	`/api/favorites`	添加/取消/列表/检查
好友	`/api/friends`	搜索、申请、私信、未读计数
管理	`/api/admin`	统计、用户权限、清理
通知	`/api/notifications`	列表、已读标记

数据库设计（核心表）

表名	说明
`user`	用户（Bcrypt密码、UUID）
`item`	物品（类型、标题、描述、图片JSON、位置、状态）
`comment`	评论（自引用父ID、回复目标）
`favorite`	收藏（userId + itemId 唯一）
`chat`	物品聊天（发送/接收方、内容）
`friend`	好友关系（双向唯一）
`friend_request`	好友申请（状态）
`friend_chat`	私信聊天（已读标记）
`notification`	通知（类型、已读、关联物品）
`background_image`	背景图（URL、模糊度）
`user_online_status`	在线状态（最后活跃时间）
`site_statistics`	站点统计（访问量、活跃用户、日期聚合）

项目结构

text

FindBack/
├── backend/findback-backend/         # Spring Boot
│   ├── src/main/java/com/findback/
│   │   ├── config/                  # Security 配置
│   │   ├── controller/              # 9 个 REST 控制器
│   │   ├── service/                 # 业务层
│   │   ├── entity/                  # 12 个 JPA 实体
│   │   └── repository/              # 数据访问
│   └── pom.xml
└── frontend/findback-frontend/       # Vue 3
    ├── src/
    │   ├── pages/                   # 13 个页面组件
    │   ├── components/              # 核心组件（聊天、主题、弹幕等）
    │   ├── api/                     # API 接口定义
    │   ├── utils/                   # ID 编码、媒体压缩
    │   ├── animations.js            # GSAP 动画库
    │   └── router.js                # 路由守卫
    └── package.json

FindBack：校园失物招领平台，让失物更快回家

FindBack：校园失物招领平台

简介

功能特性

技术栈

快速开始（本地开发）

API 接口（主要模块）

数据库设计（核心表）

项目结构

许可证

评论