功能文档汇总

# 42-校园交友系统 - 功能说明

# 项目概述

校园交友系统是一个集社交互动、博客分享、即时通讯于一体的综合性Web应用系统。采用前后端分离架构,基于Vue 3和Spring Boot技术栈,为校园师生提供便捷的社交平台。系统支持用户发布博客动态、添加好友、关注互动、实时聊天、内容评论点赞等全方位社交功能。

# 项目概览

# ✨ 创新点

# 1. 完善的社交关系体系

  • 双向好友机制:基于好友请求-接受-确认的标准好友添加流程,建立双向好友关系。
  • 关注粉丝系统:支持单向关注,无需对方同意,灵活的社交关系模式。
  • 好友请求管理:完整的好友请求审核机制,支持接受/拒绝操作,状态实时更新。
  • 社交关系可视化:清晰展示我的好友、我的关注、我的粉丝列表。

# 2. 博客内容社区生态

  • 博客分类管理:前端开发、Java开发、服务器开发、数据库开发等专业技术分类。
  • 富文本编辑:支持图文并茂的博客内容创作,封面图设置,内容排版自由。
  • 社区互动:点赞、收藏、评论、浏览量统计,完整的内容互动体系。
  • 个人中心:展示个人发布的博客、收藏的博客、我的反馈等个人数据。

# 3. 实时聊天通讯系统

  • 一对一即时通讯:支持好友之间实时文字聊天,消息即时推送。
  • 多媒体消息:支持文本、图片、文件等多种消息类型。
  • 会话管理:聊天会话列表,未读消息提醒,最后消息时间显示。
  • 消息已读状态:支持消息已读/未读状态标记,未读消息计数。

# 4. 智能化内容管理

  • 博客浏览历史:自动记录用户浏览的博客,方便回溯查看。
  • 内容收藏系统:收藏喜欢的博客内容,构建个人知识库。
  • 留言板功能:公共留言板,用户之间自由交流互动。
  • 意见反馈:问题反馈、功能建议分类管理,审核状态跟踪。

# 5. 完善的系统管理

  • 登录历史记录:记录用户登录IP、时间、状态,系统安全监控。
  • 系统公告:管理员发布系统公告,通知所有用户重要信息。
  • 轮播图管理:首页轮播图展示,系统内容推广。
  • 数据统计分析:博客浏览量、点赞量、收藏量等数据统计。

# ✨ 项目亮点

# 一、业务功能亮点

  1. 完整的社交生态闭环:从好友添加、关注互动到实时聊天,构建完整社交链路。
  2. 博客+社交双驱动:博客内容创作+社交互动,激发用户创作和分享热情。
  3. 多维度互动机制:点赞、收藏、评论、关注、聊天等多种互动方式。
  4. 技术社区定位:聚焦技术博客分享,打造校园技术交流平台。
  5. 实时通讯体验:基于WebSocket的即时聊天,消息实时推送。

# 二、技术实现亮点

  1. 现代化前端技术栈:Vue 3 + Element Plus + Vite,开发高效体验流畅。
  2. 稳定可靠的后端架构:Spring Boot + MyBatis,构建稳健后端服务。
  3. 完善的数据库设计:15张核心表,utf8mb4字符集,支持完整业务流程。
  4. 安全性设计:JWT Token认证、密码加密存储、接口权限控制。
  5. 实时通讯技术:WebSocket实时消息推送,聊天消息即时送达。

# 三、用户体验亮点

  1. 双端界面设计:
    • 前台:水平导航,简洁直观,适合用户社交互动。
    • 管理后台:侧边导航,功能集中,高效管理。
  2. 交互优化:
    • 实时消息提醒。
    • 未读消息红点提示。
    • 点赞收藏实时反馈。
    • 博客浏览历史记录。
  3. 内容展示优化:
    • 博客卡片式布局,封面图展示。
    • 富文本内容排版美观。
    • 评论楼层嵌套展示。
  4. 移动端适配:响应式设计,支持手机、平板等多端访问。

# 管理员

# 系统管理

管理员管理:管理全部管理员账号,支持新增、编辑、删除、启用/禁用操作。

普通用户管理:管理全部用户账号,可修改用户信息、状态,支持重置密码。

登录历史管理:查看所有用户的登录记录,包括登录IP、时间、状态、结果,系统安全监控。

# 内容管理

博客分类管理:管理博客分类(前端开发、Java开发、服务器开发、数据库开发等),支持新增、编辑、删除。

博客管理:管理全部用户发布的博客内容,可查看、编辑、删除博客,查看博客浏览量、点赞量等数据。

轮播图管理:管理首页轮播图,设置标题、图片、跳转链接、排序。

系统公告管理:发布系统公告通知,管理公告内容、发布时间。

# 互动管理

评论管理:查看和管理所有博客的评论内容,支持删除不当评论。

意见反馈管理:查看用户提交的意见反馈,审核状态管理(待审核/已采纳),反馈类型分类(问题反馈/功能建议)。

# 数据统计

博客数据统计:统计博客浏览量、点赞量、收藏量等数据。

用户活跃度分析:统计用户登录频率、发博数量、互动数据等。

# 普通用户

# 博客内容

浏览博客:

  • 首页浏览轮播图、最新博客推荐
  • 按分类浏览博客(前端开发、Java开发、服务器开发、数据库开发等)
  • 搜索博客内容
  • 查看博客详情,阅读富文本内容

发布博客:

  • 创建博客内容,选择博客分类
  • 设置博客标题、封面图
  • 使用富文本编辑器编写博客内容
  • 发布博客并分享到社区

我的博客管理:

  • 查看自己发布的博客列表
  • 编辑博客内容
  • 删除博客
  • 查看博客浏览量、点赞量、收藏量等数据

博客互动:

  • 点赞喜欢的博客
  • 收藏优质博客内容
  • 发表评论,与作者和其他读者互动
  • 回复评论,进行深度讨论

# 社交功能

好友管理:

  • 搜索用户,发送好友请求
  • 接收好友请求,接受/拒绝操作
  • 查看我的好友列表
  • 删除好友

关注粉丝:

  • 关注感兴趣的用户
  • 查看我的关注列表
  • 查看我的粉丝列表
  • 取消关注

实时聊天:

  • 与好友进行一对一聊天
  • 发送文字消息
  • 发送图片、文件
  • 查看聊天历史记录
  • 未读消息提醒

# 个人中心

个人主页:

  • 展示个人信息(昵称、头像、个性签名)
  • 展示个人发布的博客列表
  • 展示粉丝数、关注数、好友数

个人信息:修改个人信息(用户名、昵称、头像、电话、邮箱)。

修改密码:修改登录密码。

我的收藏:查看收藏的博客列表,快速访问收藏内容。

浏览历史:查看博客浏览历史记录,方便回溯查看。

我的反馈:查看自己提交的意见反馈,查看审核状态。

# 社区互动

留言板:

  • 公共留言板,自由发表留言
  • 查看其他用户的留言
  • 与其他用户互动交流

意见反馈:

  • 提交意见反馈(问题反馈/功能建议)
  • 填写反馈内容和联系方式
  • 查看反馈审核状态(待审核/已采纳)

系统公告:查看系统公告通知,了解系统动态。

# 功能权限对照表

功能模块 管理员 普通用户
首页 ✓ ✓
管理员管理 ✓ -
用户管理 ✓ -
登录历史管理 ✓ -
博客分类管理 ✓ -
博客管理(全部) ✓ -
博客浏览 ✓ ✓
博客发布 - ✓
我的博客管理 - ✓
博客点赞 - ✓
博客收藏 - ✓
博客评论 ✓ ✓
评论管理(全部) ✓ -
好友管理 - ✓
好友请求 - ✓
关注粉丝 - ✓
实时聊天 - ✓
留言板 - ✓
意见反馈(提交) - ✓
意见反馈管理 ✓ -
系统公告(发布) ✓ -
系统公告(查看) ✓ ✓
轮播图管理 ✓ -
个人信息管理 ✓ ✓

# 默认账号

# 管理员

用户名: admin
密码: 123456
1
2

# 测试用户

用户名: user
密码: 123456
昵称: user
1
2
3
用户名: user1
密码: 123456
昵称: user1
1
2
3
用户名: user2
密码: 123456
昵称: user2
1
2
3

# 核心业务流程

# 用户注册流程

1. 填写注册信息(用户名、密码、昵称、邮箱)
2. 系统创建用户账号(状态:启用)
3. 跳转到登录页
1
2
3

# 发布博客流程

1. 进入"发布博客"页面
2. 填写博客标题
3. 选择博客分类(前端开发/Java开发/服务器开发/数据库开发)
4. 上传博客封面图
5. 使用富文本编辑器编写博客内容
6. 提交发布,博客状态:已发布
7. 博客展示在社区首页
8. 其他用户可浏览、点赞、收藏、评论
1
2
3
4
5
6
7
8

# 添加好友流程

1. 搜索或浏览用户列表,找到目标用户
2. 点击"添加好友",填写好友请求内容
3. 提交好友请求(状态:待处理)
4. 对方收到好友请求通知
5. 对方接受好友请求(状态:已接受)
6. 系统在friends表中建立双向好友关系
   - 插入两条记录:user_id-friend_id 和 friend_id-user_id
7. 双方成为好友,可以进行聊天
1
2
3
4
5
6
7
8

# 关注用户流程

1. 浏览用户主页或博客详情
2. 点击"关注"按钮
3. 系统在follows表中插入关注记录(follower_id, followed_id)
4. 关注成功,用户成为我的关注,我成为用户的粉丝
5. 可在"我的关注"中查看,对方可在"我的粉丝"中看到
1
2
3
4
5

# 实时聊天流程

1. 进入"好友列表",选择好友
2. 点击"发消息",进入聊天界面
3. 系统创建或查找聊天会话(chat_conversations表)
4. 发送消息(文本/图片/文件)
5. 消息存储到chat_messages表(sender_id, receiver_id, content)
6. WebSocket推送消息给接收方
7. 接收方实时收到消息
8. 消息状态更新:is_read(0:未读 → 1:已读)
9. 未读消息计数更新(user1_unread_count/user2_unread_count)
1
2
3
4
5
6
7
8
9

# 博客互动流程

1. 用户浏览博客详情
2. 点赞操作:
   - 点击"点赞"按钮
   - 系统在likes表插入点赞记录(user_id, blog_id)
   - 博客点赞数+1
   - 再次点击取消点赞,删除记录,点赞数-1
3. 收藏操作:
   - 点击"收藏"按钮
   - 系统在favorites表插入收藏记录(user_id, blog_id)
   - 可在"我的收藏"中查看
4. 评论操作:
   - 填写评论内容
   - 提交评论,存储到comments表(user_id, blog_id, content)
   - 评论展示在博客详情页
   - 支持回复评论(parent_id关联父评论)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 意见反馈流程

1. 进入"意见反馈"页面
2. 选择反馈类型(问题反馈/功能建议)
3. 填写反馈内容
4. 填写联系方式
5. 提交反馈(审核状态:待审核)
6. 管理员在后台查看反馈
7. 管理员审核反馈(状态:已采纳/待审核)
8. 用户在"我的反馈"中查看审核状态
1
2
3
4
5
6
7
8

# 技术说明

# 系统架构

  • 前端:Vue 3 + Element Plus + Vite
  • 后端:Spring Boot + MyBatis
  • 数据库:MySQL 5.7+
  • 认证:JWT Token
  • 实时通讯:WebSocket

# 访问地址

  • 后端API:http://localhost:1000
  • 前端页面:http://localhost:5173(开发环境)

# 数据库

  • 数据库名:forum_system
  • 字符集:utf8mb4
  • 总表数:15张表

# 核心表说明

  • admin:管理员表
  • user:普通用户表
  • blog:博客内容表
  • blog_type:博客分类表
  • comments:评论记录表
  • likes:点赞记录表
  • favorites:收藏记录表
  • follows:关注关系表
  • friends:双向好友关系表
  • friend_requests:好友请求表
  • chat_messages:聊天消息表
  • chat_conversations:聊天会话表
  • feedback:意见反馈表
  • system_notice:系统公告表
  • sys_login_history:登录历史表

# 系统特色

# 社交功能特色

  • 双向好友机制:完整的好友请求-接受-确认流程,建立可靠的社交关系
  • 关注粉丝系统:单向关注,灵活的社交互动模式
  • 实时聊天通讯:基于WebSocket的即时消息推送,支持文本、图片、文件
  • 社交关系可视化:清晰展示好友、关注、粉丝列表

# 博客社区特色

  • 技术博客定位:聚焦技术内容分享(前端、Java、服务器、数据库)
  • 富文本编辑:图文并茂的博客创作体验
  • 多维度互动:点赞、收藏、评论、浏览量统计
  • 内容推荐:首页轮播图推荐优质博客

# 互动体验特色

  • 评论嵌套回复:支持评论的层级回复,深度讨论
  • 实时消息提醒:未读消息红点提示,消息即时通知
  • 收藏与历史:博客收藏+浏览历史,构建个人知识库
  • 留言板功能:公共留言板,自由交流互动

# 内容管理特色

  • 博客分类管理:技术领域分类,方便内容检索
  • 意见反馈系统:问题反馈+功能建议,用户反馈渠道畅通
  • 系统公告发布:管理员发布系统通知,及时传达信息
  • 登录历史追踪:安全监控,登录记录完整

# 项目优势

# 1. 解决校园社交需求

  • 技术交流平台:为技术爱好者提供博客分享和讨论平台
  • 校园社交圈子:建立校园内部的社交网络,促进师生交流
  • 即时沟通工具:实时聊天功能,方便快捷的沟通方式
  • 知识分享社区:优质技术博客分享,共同学习进步

# 2. 完善的社交生态

  • 双模式社交关系:好友+关注双模式,满足不同社交需求
  • 多维度互动机制:点赞、收藏、评论、聊天,丰富的互动方式
  • 内容驱动社交:优质博客内容吸引关注,以内容建立社交关系
  • 实时通讯支持:WebSocket实时聊天,增强用户粘性

# 3. 技术实现完善

  • 前后端分离:开发效率高,维护方便
  • 响应式设计:适配手机、平板、电脑
  • 安全认证:JWT Token,保障账户安全
  • 数据库设计规范:15张表,关系清晰,数据完整
  • 实时通讯技术:WebSocket长连接,消息即时推送

# 4. 用户体验优秀

  • 操作简单:界面清晰,流程顺畅
  • 实时反馈:消息实时提醒,互动即时反馈
  • 多端适配:手机端、PC端都能流畅使用
  • 内容丰富:博客、留言板、聊天多种内容形式
Java导航网   |