校园圈

这是什么

「校园圈」是一个面向校园场景的社区平台：发图文动态、组织活动并打卡签到、私聊群聊、内容审核与管理，全部在一个产品里。它是我从零到一独立完成的毕业设计——从需求梳理、原型、前后端开发，到买域名、配 HTTPS、部署上线，都由我一个人完成，并且现在还在服务器上真实运行着。

系统架构

整体是一套经典的前后端分离 + 管理后台架构，部署在一台 Linux 服务器上：

• 用户端：Vue 3 + TypeScript + Vite + Element Plus + Pinia 的单页应用，自定义主题 token 体系支持一键换肤，移动端通过独立的 .mobile.less 样式层适配
• 管理后台：基于 RuoYi-Vue 二开的内容管理端，覆盖笔记、活动、评论、成员、相册、举报、审核、认证等域
• 服务端：Spring Boot 单体服务（8080），含定时任务模块（Quartz）与通用框架层，MySQL 持久化 + Redis 缓存
• 实时通信：自建 WebSocket 网关（/web/ws）支撑 IM 聊天与通知推送
• 网关与部署：Nginx 反向代理 + HTTPS，静态资源与 API 同域分发

功能亮点

• 图文动态与瀑布流：笔记/动态的发布、浏览，长列表用虚拟瀑布流滚动加载，图片支持九宫格、全屏预览
• 活动与打卡：活动发布、报名人数管理、扫码打卡签到，打卡状态弹窗全程可视化
• IM 实时聊天：单聊/群聊、消息实时推送、历史记录与未读处理
• 内容安全：发帖审核流、举报处理、登录日志，管理后台一键处置
• 细节体验：图片/视频压缩上传、封面裁剪定位、二维码扫码、AI 助手弹窗、深浅色主题切换

几个我解决过的难点

• IM 实时通信：WebSocket 长连接的心跳保活、断线重连、消息顺序与未读数的一致性，是在没有引入第三方 IM 服务的前提下自己实现的
• 性能：图片视频在客户端压缩后再上传，配合服务端查询优化与虚拟滚动，弱网下发帖和刷信息流都保持流畅；打包产物做 gzip 与代码分包
• 工程化：全站颜色、圆角、阴影、字号收敛为一套 CSS 变量 token，主题切换只改一处变量；每个页面配一个同名 .mobile.less 侧车文件管理移动端样式，桌面/移动互不干扰
• 运维：经历过一次完整的服务器迁移，域名、证书、反代、数据全部平滑搬移——也是这一次让我把部署这套东西真正吃透

我的位置

这个项目里没有团队分工：产品逻辑是我定的，界面是我画的，接口是我写的，服务器是我配的。它最大的价值不是某个单点技术，而是让我完整地走通了一个互联网产品从想法到线上运行的全流程。