社区论坛系统

项目简介

豆宝社区是一个基于SpringBoot + Vue技术栈开发的前后端分离多用户社区论坛系统。本项目类似简版的掘金技术社区,实现了用户注册、登录、发帖、回帖、评论、关注、用户中心等完整的社区功能。项目配套完整的视频教程,适合作为全栈开发学习项目或计算机设计参考。

技术栈

后端技术

技术	版本/说明
运行环境	Java 1.8
框架	Spring Boot 2.3.8
数据库	MySQL
ORM框架	MyBatis-Plus 3.4.2
安全框架	Spring Security
身份认证	JWT (jjwt 0.9.1)
工具库	Hutool 5.5.7
JSON处理	FastJSON 1.2.75
表情处理	emoji-java 5.1.1
数据验证	Hibernate Validator
缓存连接池	Commons Pool2

前端技术

技术	版本/说明
框架	Vue 2.6.11
路由管理	Vue Router 3.2.0
状态管理	Vuex 3.4.0
HTTP请求	Axios 0.21.1
UI组件库	Buefy 0.9.4 + Element UI 2.15.0
CSS框架	Bulma
Markdown编辑器	Vditor 3.8.1
暗黑模式	DarkReader 4.9.26
日期处理	date-fns 2.17.0 + dayjs 1.10.4
进度条	NProgress 0.2.0
Cookie管理	js-cookie 2.2.1

项目特点

• 前后端分离：后端提供RESTful API,前端独立开发部署
• 完整社区功能：涵盖发帖、评论、关注、用户中心全流程
• JWT认证：基于JWT的无状态身份认证机制
• Markdown支持：使用Vditor编辑器,支持富文本和Markdown
• 响应式设计：支持PC端和移动端自适应
• 暗黑模式：支持明暗主题切换
• 配套教程：提供完整的视频教程和代码提交记录

功能模块

用户功能

1. 用户认证

• 用户注册
• 用户登录
• 退出登录
• JWT Token管理

2. 用户中心

• 个人信息展示
• 个人信息编辑
• 头像修改
• 我的帖子
• 我的评论
• 我的关注
• 我的粉丝

3. 用户设置

• 基本信息设置
• 密码修改
• 账号安全

社区功能

1. 帖子管理

• 发表帖子
• 编辑帖子
• 删除帖子
• 帖子列表展示
• 帖子详情查看
• 帖子分页加载
• 帖子搜索

2. 评论功能

• 发表评论
• 评论列表展示
• 评论回复
• 评论删除

3. 标签系统

• 标签分类
• 按标签筛选帖子
• 标签云展示

4. 互动功能

• 关注用户
• 取消关注
• 查看关注列表
• 查看粉丝列表

首页功能

1. 公告板

• 系统公告展示
• 公告管理

2. 每日一句

• 每日励志语录
• 随机语录展示

3. 推广链接

• 友情链接展示
• 外部资源推荐

4. 随便看看

• 随机推荐帖子
• 热门帖子推荐

项目结构

java-community-forum/
├── java/                           # 后端项目 (Spring Boot)
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/
│   │   │   │   └── com/douyuehan/doubao/
│   │   │   │       ├── config/         # 配置类
│   │   │   │       ├── controller/     # 控制器
│   │   │   │       ├── service/        # 业务逻辑层
│   │   │   │       ├── mapper/         # 数据访问层
│   │   │   │       ├── model/          # 实体类
│   │   │   │       ├── dto/            # 数据传输对象
│   │   │   │       ├── vo/             # 视图对象
│   │   │   │       ├── common/         # 公共类
│   │   │   │       ├── jwt/            # JWT工具类
│   │   │   │       └── interceptor/    # 拦截器
│   │   │   └── resources/
│   │   │       ├── application.yml     # 配置文件
│   │   │       └── mapper/             # MyBatis映射文件
│   │   └── test/                       # 测试代码
│   ├── pom.xml                         # Maven配置
│   ├── doubao.sql                      # 数据库SQL文件
│   └── README.md                       # 项目说明
│
├── web/                                # 前端项目 (Vue)
│   ├── public/                         # 静态资源
│   ├── src/
│   │   ├── api/                        # API接口封装
│   │   ├── assets/                     # 静态资源
│   │   ├── components/                 # 公共组件
│   │   ├── router/                     # 路由配置
│   │   ├── store/                      # Vuex状态管理
│   │   ├── utils/                      # 工具函数
│   │   ├── views/                      # 页面视图
│   │   │   ├── Home.vue                # 首页
│   │   │   ├── Post/                   # 帖子相关页面
│   │   │   ├── User/                   # 用户相关页面
│   │   │   ├── Tag/                    # 标签相关页面
│   │   │   └── Search/                 # 搜索页面
│   │   ├── App.vue                     # 根组件
│   │   └── main.js                     # 入口文件
│   ├── package.json                    # 依赖配置
│   └── vue.config.js                   # Vue配置
│
└── 社区论坛.mp4                         # 演示视频

数据库设计

核心数据表

1. bms_user - 用户表

   • 用户基本信息
   • 登录凭证
   • 用户状态

2. bms_post - 帖子表

   • 帖子标题
   • 帖子内容
   • 发布时间
   • 作者信息

3. bms_comment - 评论表

   • 评论内容
   • 评论时间
   • 关联帖子
   • 评论用户

4. bms_tag - 标签表

   • 标签名称
   • 标签描述
   • 使用次数

5. bms_post_tag - 帖子标签关联表

   • 帖子ID
   • 标签ID

6. bms_follow - 关注关系表

   • 关注者ID
   • 被关注者ID
   • 关注时间

7. bms_billboard - 公告板表

   • 公告内容
   • 发布时间
   • 显示状态

8. bms_tip - 每日一句表

   • 语录内容
   • 作者
   • 显示状态

9. bms_promotion - 推广链接表

   • 链接标题
   • 链接地址
   • 显示顺序

运行环境要求

后端环境

• JDK 1.8+
• Maven 3.6+
• MySQL 5.7+

前端环境

• Node.js 12.0+
• npm 6.0+ 或 yarn

快速开始

1. 数据库配置

1. 创建MySQL数据库

CREATE DATABASE doubao CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

2. 导入数据库文件

mysql -u root -p doubao < java/doubao.sql

3. 修改数据库配置 编辑 java/src/main/resources/application.yml:

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/doubao?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8
    username: root
    password: your_password # 修改为你的密码
    driver-class-name: com.mysql.cj.jdbc.Driver

2. 启动后端服务

# 进入后端目录
cd java

# 使用Maven编译打包
mvn clean package

# 运行Spring Boot应用
java -jar target/doubao-0.0.1-SNAPSHOT.jar

# 或者使用Maven直接运行
mvn spring-boot:run

后端服务默认运行在 http://localhost:8080

3. 启动前端服务

# 进入前端目录
cd web

# 安装依赖
npm install

# 启动开发服务器
npm run dev

前端服务默认运行在 http://localhost:8081

4. 配置前端API地址

编辑 web/src/api/config.js,修改API基础地址:

export const BASE_URL = "http://localhost:8080"; // 修改为你的后端地址

默认账号

系统初始化后会自动创建管理员账号,可以通过注册功能创建新用户。

在线体验

在线演示地址: http://kamiba.gitee.io/doubao_deploy_frontend

视频教程

本项目配套完整的视频教程,共59集,从零开始手把手教学:

B站地址: https://www.bilibili.com/video/BV1Wz4y1U7vC

教程大纲

1. 项目介绍与基础知识
2. 前后端项目搭建
3. 公告板功能实现
4. 每日一句功能实现
5. 推广链接功能实现
6. 用户注册登录功能
7. JWT认证与授权
8. Vuex状态管理
9. 帖子列表与详情
10. 帖子发布与编辑
11. 评论功能实现
12. 标签系统实现
13. 搜索功能实现
14. 用户中心功能
15. 关注功能实现
16. 权限验证
17. 项目总结

学习建议: 每一集视频对应Github上的一次代码提交,建议配合提交记录学习。

代码开源地址

• 前端代码: https://github.com/songboriceman/doubao_community_frontend
• 后端代码: https://github.com/songboriceman/doubao_community_backend

界面预览

PC端

首页

• 公告板展示
• 每日一句
• 帖子列表
• 侧边栏推荐

发表文章

• Markdown编辑器
• 标签选择
• 实时预览

文章详情

• 文章内容展示
• 评论列表
• 作者信息
• 相关推荐

个人中心

• 用户信息
• 我的帖子
• 我的评论
• 关注/粉丝

用户设置

• 基本信息编辑
• 头像上传
• 密码修改

移动端

• 响应式布局
• 移动端优化
• 触摸友好

扩展建议

如需进一步完善项目,可考虑以下扩展:

1. 消息通知系统：站内信、评论通知、关注通知
2. 点赞功能：帖子点赞、评论点赞
3. 收藏功能：收藏帖子、收藏夹管理
4. 举报功能：内容举报、用户举报
5. 管理后台：用户管理、内容审核、数据统计
6. 图片上传：头像上传、帖子配图
7. 邮件验证：注册邮件验证、找回密码
8. 第三方登录：微信、QQ、GitHub登录
9. 积分系统：用户积分、等级体系
10. 热榜功能：热门帖子、热门标签
11. 全文搜索：Elasticsearch集成
12. Redis缓存：热点数据缓存

致谢

本项目大量借鉴了极光社区项目,在此感谢原作者的无私开源。

技术讨论

如有技术问题,欢迎加入QQ技术讨论群进行交流。

豆约翰团队

一群热爱分享技术,拥有多年开发经验及培训经验的开发者组成。

擅长领域: Java、Python、前端、C++、.NET

注意事项

1. 本项目为学习演示项目,适合作为学习资料或计算机设计参考
2. 生产环境部署需要进行安全加固和性能优化
3. 建议定期备份数据库数据
4. 注意保护用户隐私和数据安全

常见问题

Q: 数据库连接失败?

A: 检查MySQL服务是否启动,数据库配置是否正确,用户名密码是否匹配

Q: 前端无法请求后端?

A: 检查后端服务是否启动,前端API地址配置是否正确,是否存在跨域问题

Q: JWT Token过期?

A: 检查JWT配置,可以调整Token过期时间,或实现Token刷新机制

Q: 如何学习本项目?

A: 建议配合视频教程学习,每一集对应一次代码提交,可以逐步理解项目开发过程

Q: 可以用于商业项目吗?

A: 本项目为开源学习项目,商业使用请遵守开源协议

许可证

本项目采用开源协议,仅供学习交流使用。

---

祝学习愉快! 🎉