毕业设计实战：基于Spring Boot的个人博客系统设计与实现，从需求到测试全流程拆解，新手也能轻松通关！毕业设计实战

毕业设计实战：基于Spring Boot的个人博客系统设计与实现，从需求到测试全流程拆解，新手也能轻松通关！

谁懂啊！当初做个人博客系统毕设时，光博主表和文章表的关联就卡了4天——一开始没设外键，查某博主的所有文章时数据全串了，导师看了直接让我“重画数据库E-R图”😫 后来踩遍无数坑才摸出一套高效落地流程，今天把需求分析、技术选型、功能实现到测试的细节全说透，宝子们不用再熬夜改代码，轻松搞定毕设！

一、先搞懂“个人博客系统要啥”！需求分析别瞎蒙

刚开始我跳过需求分析就写代码，花两周加了个“博主直播互动功能”，结果导师一句“核心是文章管理与用户交互，不是直播”直接打回重改！后来才明白，需求分析得先抓准“谁用系统、要干啥”，这步做对，后面少走90%弯路。

1. 核心用户&功能拆解（踩坑后总结版）

个人博客系统就三类核心用户：管理员、博主和普通用户（别加“游客角色”！我当初加了后，权限逻辑混乱，未登录就能删评论，最后砍掉才顺畅）：

管理员端（必做功能）：
- 用户管理：查看用户列表、新增用户、重置密码（支持按姓名/账号模糊查，我当初没加，查用户要翻几十页）
- 博主管理：维护博主信息（审核资质、修改状态）、重置博主密码（用下拉框选“正常/禁用”，效率翻倍）
- 内容管理：文章分类管理（新增/删除分类）、博主文章审核（筛选“待审核/已通过”）、系统公告发布（传封面图+写正文）
- 系统管理：轮播图配置（上传图片、调整顺序）、基础参数设置（博客名称、版权信息）
博主端（核心功能）：
- 文章管理：发布文章（填标题/选分类/传封面/写内容）、编辑已发布文章、删除无效文章（支持批量操作）
- 互动管理：查看文章评论、回复用户评论（标红未回复评论，避免遗漏）
- 个人中心：修改个人信息（头像、简介、联系方式）、查看文章数据（点击量、点赞数统计）
用户端（核心功能）：
- 内容浏览：查看博主文章（按分类/发布时间筛选）、阅读系统公告、浏览轮播图推荐
- 互动操作：对文章点赞/踩、发表评论、收藏喜欢的文章（支持取消收藏）
- 个人中心：查看我的收藏、修改个人信息（姓名、手机号）、重置登录密码

2. 需求分析避坑指南（血泪教训！）

别光靠“空想”！找2个同学模拟博主和用户提意见：比如有用户说“想快速找收藏的文章”，我才加了“收藏分类”，比瞎加“直播功能”实用多了
一定要画用例图！用DrawIO画简单版，标清“管理员-审核文章”“用户-收藏文章”，跟导师汇报时，比光说“我要做XX功能”直观10倍（当初没画，导师听20分钟还没get到逻辑）
写“需求规格说明书”！不用复杂，把“功能描述、约束条件”写清楚（比如“文章标题不能重复”“评论内容不能含敏感词”），编码时对着做，不会跑偏

3. 可行性分析别敷衍！3点写清楚就能过

导师超爱问“你这系统可行吗”，别只说“我觉得可行”，从3个角度写，显得专业：

技术可行性：Spring Boot、Vue、MySQL都是课堂学过的，图书馆有《Spring Boot实战》《Vue.js入门与实战》，遇到问题能查资料（别选Vue3！我当初想试，组件通信逻辑不熟，卡了一周，换回Vue2才顺利）
经济可行性：所有工具全免费！IDEA（社区版）、MySQL、Navicat（试用版）、Vue CLI官网直接下，不用花钱买版权，答辩时说“开发成本为0”，导师会觉得你懂成本控制
操作可行性：界面参考主流博客平台（如CSDN、掘金），按钮布局简洁，我找系里同学测试，2分钟就学会发布评论，导师直接认可

二、技术选型别跟风！这套组合稳到爆

刚开始我跟风用Spring Boot+Vue3+Redis，结果“文章缓存”卡了5天——Redis的过期策略没设对，新发布的文章刷不出来😫 后来换成Spring Boot+Vue2+MySQL+Tomcat9+Layui，新手友好度拉满，调试效率翻两倍！

1. 技术栈详细对比（附避坑提醒）

宝子们别盲目选“最新技术”，稳定比炫酷重要！我整理了5个核心工具的选择理由和坑点，直接抄：

技术工具	为啥选它	避坑提醒！（重点！）
Spring Boot	比SSM配置简单，自带依赖管理，开发效率高	别用3.x版本！2.7.x就行，3.x和Layui兼容性差，会报“样式加载失败”
MySQL 8.0	占内存小，存用户、文章、评论数据足够用	安装时设“utf8mb4”编码！我当初用默认编码，文章含emoji乱码，查2小时才解决
Tomcat 9.0	稳定！和Spring Boot、Vue适配最好，支持热部署	别用Tomcat 10！会出现“Servlet API包名变更”，答辩时系统崩了就完了
Vue 2	文档丰富，新手易上手，组件生态成熟（如Element UI）	别用Vue CLI 5！用4.x版本，5.x创建项目时依赖加载慢，还容易报“node-sass错误”
Layui	适合后端开发者，不用写复杂CSS，组件开箱即用	别用Layui 2.8+！用2.6版本，高版本部分组件废弃，比如轮播图组件报错

2. 开发环境搭建（step by step 实操）

很多宝子卡在“环境配置”，跟着步骤来超简单，我当初一次成功：

装JDK 1.8：记住安装路径（比如D:\Java\jdk1.8.0_301），配置“JAVA_HOME”环境变量别写错，不然IDEA认不到JDK
装IDEA（社区版）：选“Community Edition”，免费够用，首次打开勾选“Spring Boot”“Maven”插件，自动安装
装MySQL 8.0：用Navicat管理（可视化工具超方便，新建表直接选字段类型，比命令行快10倍），新建数据库“blog_system”，编码设“utf8mb4”
配Vue项目：用Vue CLI 4创建项目（命令：vue create blog-frontend），勾选“Router”“Vuex”“CSS Pre-processors”，启动后看到“Compiled successfully”就是成功
集成Layui：下载Layui 2.6压缩包，解压后把css、js文件夹复制到Vue项目的static目录，在index.html引入即可

3. 架构图一定要画！答辩加分项

用DrawIO画三层架构图（像论文里的“系统架构图”），标清“表现层-业务层-数据访问层”：比如用户点“收藏文章”→Vue页面传请求→Spring Boot Controller接收请求→Service校验权限→Mapper将数据存入MySQL。去年答辩时，评委特意夸这图“逻辑清晰”，比光说“我用了Spring Boot”专业多了！

三、数据库设计：别让表关联坑了你

这部分是毕设的“核心骨架”，我当初没关联“博主表”和“文章表”，查“某博主的所有文章”要写3层嵌套SQL，调试到凌晨1点😫 后来按“实体-属性-关系”设计，终于理清了。

1. 核心实体&属性（附ER图绘制技巧）

先确定“实体”（用户、博主、文章、评论），再想“属性”，别漏关键字段！我整理了必做的8张表，直接照着画ER图：

用户表（yonghu）：id（主键）、yonghuming（账号，唯一）、mima（MD5加密！存明文会被导师说“不安全”）、xingming（姓名）、shoujihao（手机号）
博主表（bozhu）：id（主键）、bozhuhao（博主号，唯一）、bozhuming（博主名）、mima（加密存储）、touxiang（头像路径）、jianjie（简介）
文章表（wenzhang）：id（主键）、wenzhangbiaoti（标题）、bozhuhao（关联博主，外键）、wenzhangfenlei（文章分类）、tupian（封面路径）、wenzhangneirong（内容）
评论表（pinglun）：id（主键）、refid（关联文章ID）、userid（关联用户ID）、content（评论内容）、reply（回复内容）

画ER图用Visio或亿图，记住3个规则：

矩形代表“实体”（比如“用户”“文章”）
椭圆代表“属性”（比如用户的“姓名”“手机号”）
菱形代表“关系”（比如“博主-发布-文章”是一对多，一个博主能发布多篇文章，一篇文章只属一个博主；“用户-评论-文章”是一对多，一个用户能评论多篇文章） 避坑提醒：别把“文章封面、用户头像”存数据库！我当初存二进制导致数据库崩溃，改成存“文件路径”（比如/static/avatar/bozhu1.jpg）才对。

2. 数据库物理设计（附建表SQL示例）

ER图画好后，转成实际表，字段类型和约束别瞎设！比如“文章标题”用VARCHAR(200)，别用TEXT，不然查询速度慢；“用户账号”设UNIQUE约束，避免重复。

给宝子们贴“文章表”的建表SQL，复制到Navicat就能用：

CREATE TABLE `wenzhang` (
  `id` INT NOT NULL AUTO_INCREMENT COMMENT '文章ID',
  `addtime` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `wenzhangbiaoti` VARCHAR(200) NOT NULL COMMENT '文章标题',
  `wenzhangfenlei` VARCHAR(50) DEFAULT NULL COMMENT '文章分类',
  `tupian` VARCHAR(200) DEFAULT NULL COMMENT '封面图片路径',
  `bozhuhao` VARCHAR(50) DEFAULT NULL COMMENT '关联博主号',
  `bozhuming` VARCHAR(50) DEFAULT NULL COMMENT '博主名',
  `fabushijian` DATETIME DEFAULT NULL COMMENT '发布时间',
  `jianshu` VARCHAR(500) DEFAULT NULL COMMENT '文章简述',
  `wenzhangneirong` TEXT DEFAULT NULL COMMENT '文章内容',
  `thumbsupnum` INT DEFAULT 0 COMMENT '点赞数',
  `crazilynum` INT DEFAULT 0 COMMENT '踩数',
  `clicknum` INT DEFAULT 0 COMMENT '点击量',
  PRIMARY KEY (`id`),
  KEY `fk_bozhu_wenzhang` (`bozhuhao`), -- 外键关联博主表
  UNIQUE KEY `uk_wenzhang_title` (`wenzhangbiaoti`,`bozhuhao`) -- 同一博主文章标题唯一
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='博主文章表';

3. 表关联测试！别等编码才发现错

建完表一定要测关联！比如在“评论表”插数据（关联文章ID=1，用户ID=1），用JOIN查询“某文章的所有评论及用户信息”：

SELECT u.xingming, p.content, p.addtime, p.reply
FROM pinglun p
JOIN yonghu u ON p.userid = u.id
JOIN wenzhang w ON p.refid = w.id
WHERE w.id = 1;

如果能查出“用户名+评论内容+评论时间+回复内容”，说明关联没问题；如果报错“Unknown column”，大概率是外键没设对，赶紧检查表结构。

四、功能实现：核心模块操作+页面设计

不用做所有功能！先搞定3个核心模块，答辩时足够出彩。每个模块我都附关键操作逻辑和页面设计要点，宝子们直接套就行。

1. 博主端：文章发布模块（必做！）

这是博主的核心功能，实现“填写文章信息、上传封面、提交发布”，重点说“标题去重校验”和“内容编辑器集成”——别漏这两步，我当初就是这里踩了大坑！

（1）关键操作逻辑

发布文章前，先校验“同一博主不能有同名文章”（避免重复发布）；
集成富文本编辑器（推荐KindEditor），支持插入图片、设置字体样式，满足博主排版需求；
上传封面时，限制格式（仅JPG/PNG）和大小（≤5MB），避免无效文件；
提交后自动关联博主信息（博主号、博主名），默认点击量、点赞数为0。

（2）页面设计要点（Vue+Layui）

页面标题：博主-文章发布页面
（插入图片位置：此处放“文章发布页面截图”，需包含以下元素）

表单元素：
- 文章标题（输入框，必填，提示“如：Spring Boot入门教程”）
- 文章分类（下拉框，加载所有分类，必填）
- 文章简述（文本域，必填，提示“简要介绍文章内容，不超过500字”）
- 封面图片（上传框，支持JPG/PNG，必填，上传后预览图片）
- 文章内容（富文本编辑器，必填，支持插入图片、表格）
按钮：“发布文章”（蓝色layui-btn-primary）、“保存草稿”（灰色layui-btn）、“取消”（白色layui-btn）
提示信息：红色显“标题重复/格式错误”，绿色显“发布成功”

（3）避坑提醒

禁止空提交！加校验逻辑：

if (StringUtils.isEmpty(wenzhang.getWenzhangbiaoti()) || StringUtils.isEmpty(wenzhang.getWenzhangneirong())) {
    return Result.error("文章标题和内容不能为空！");
}

处理富文本编辑器的XSS攻击！避免恶意代码注入：

// 过滤HTML标签
String content = HtmlUtils.htmlEscape(wenzhang.getWenzhangneirong());
wenzhang.setWenzhangneirong(content);

2. 用户端：文章互动模块（核心需求！）

用户用系统的核心是“与文章互动”，流程别复杂：看文章→点赞/评论/收藏，我当初加“多级评论回复”，代码量翻倍，其实“一级评论+博主回复”更实用。

（1）关键操作逻辑

用户点赞/踩时，先校验“是否已操作”（避免重复点赞/踩），操作后实时更新数量；
发表评论时，校验“内容是否含敏感词”（比如“垃圾”“广告”），含敏感词则提示修改；
收藏文章时，校验“是否已收藏”，已收藏则显示“取消收藏”，未收藏则显示“收藏”；
评论提交后，实时刷新评论列表，不用刷新页面。

（2）页面设计要点（Vue+Layui）

页面标题：文章详情页面
（插入图片位置：此处放“文章详情页面截图”，需包含以下元素）

文章信息区：封面图、标题、博主名（带头像）、发布时间、分类、点击量/点赞数/评论数
互动按钮区：“点赞”（带点赞数，点击后变红色）、“踩”（带踩数）、“收藏”（五角星图标，收藏后变黄色）
评论区：
- 评论输入框（文本域，提示“请输入评论内容”）、“提交评论”按钮（蓝色）
- 评论列表：显示用户名、评论时间、评论内容，博主回复标蓝并显示“博主回复”
相关推荐区：显示3篇同分类文章，带标题和封面图

（3）避坑提醒

防止重复点赞！加Redis缓存用户操作记录：

String key = "wenzhang:thumbsup:" + userId + ":" + wenzhangId;
if (redisTemplate.hasKey(key)) {
    return Result.error("您已点赞过该文章！");
}
// 点赞数+1
wenzhang.setThumbsupnum(wenzhang.getThumbsupnum() + 1);
wenzhangService.updateById(wenzhang);
// 缓存操作记录，有效期24小时
redisTemplate.opsForValue().set(key, "1", 24, TimeUnit.HOURS);

分页加载评论！避免评论太多导致页面卡顿：

// 分页查询评论
getComments(pageNum) {
  this.$axios.get("/pinglun/list", {
    params: {
      refid: this.wenzhangId,
      pageNum: pageNum,
      pageSize: 10
    }
  }).then(res => {
    this.commentList = res.data.list;
    this.total = res.data.total;
  });
}

3. 管理员端：博主管理模块（答辩亮点！）

这个功能最能体现“管理属性”，导师超爱问！核心是“维护博主信息、审核资质”，别漏“博主文章统计”，不然管理员没法掌握博主活跃度。

页面设计要点

页面标题：管理员-博主管理页面
（插入图片位置：此处放“博主管理页面截图”，需包含以下元素）

筛选条件：博主号（精确查）、博主名（模糊查）、状态（下拉框，“全部”“正常”“禁用”）
博主列表表格：列名“博主号、博主名、性别、年龄、联系电话、电子邮箱、状态、文章数量、操作”，状态“正常”标绿色，“禁用”标红色
操作按钮：“查看详情”“修改信息”“重置密码”“禁用/启用”“查看文章”
新增博主弹窗：含博主所有属性输入框（博主号、姓名、密码等），密码默认“123456”并提示“请提醒博主修改初始密码”
文章统计弹窗：点“查看文章”弹出，显“该博主各分类文章数量”柱状图，支持按发布时间筛选（近7天/近30天）

五、测试别敷衍！这3步让答辩不翻车

很多宝子觉得“功能能跑就行”，结果答辩时评委一测就出问题！我当初没测“重复收藏文章”，导致用户能无限收藏同一篇文章，导师说“不符合数据唯一性要求”，当场扣分😫 测试一定要针对性做！

1. 功能测试（必测3个模块）

别全测！重点测“核心功能”，我整理了测试用例表，直接填结果：

（1）文章发布测试（表1：文章发布测试用例）

测试场景	操作步骤	预期结果
同名文章提交	博主A发布“Spring Boot入门”→再次发布同名文章	提示“您已发布过该标题的文章，请勿重复提交！”
上传非图片文件	选文章分类→传TXT文件当封面→提交	提示“仅支持JPG/PNG格式图片！”
正常发布	填标题→选分类→传封面→写内容→提交	提示“发布成功！”，文章列表显该文章

（2）文章互动测试（表2：文章互动测试用例）

测试场景	操作步骤	预期结果
重复点赞	用户A点赞文章1→再次点击点赞按钮	提示“您已点赞过该文章！”
评论含敏感词	输入“这篇文章是垃圾”→提交评论	提示“评论内容含敏感词，请修改后提交！”
正常收藏	点击“收藏”按钮→查看我的收藏	收藏成功，我的收藏列表显该文章

（3）管理员登录测试（表3：登录测试用例）

测试场景	操作步骤	预期结果
密码错误	账号：admin→密码：12345（正确123456）→登录	提示“账号或密码不正确！”
未选角色	账号：admin→密码：123456→角色空→登录	提示“请选择登录角色！”
正常登录	账号：admin→密码：123456→选“管理员”→登录	登录成功，跳管理员首页

2. 兼容性测试（容易忽略的点）

别只在自己电脑测！答辩时评委可能用不同浏览器，我当初没测IE，结果富文本编辑器显示错乱，赶紧加兼容性CSS才好：

浏览器测试：Chrome、Firefox、Edge、IE11（重点测IE，兼容性最差）
分辨率测试：1920×1080、1366×768（别让页面出现横向滚动条，用Layui的响应式布局）

3. 测试报告要写好！答辩加分

把测试结果整理成“测试报告”，含“目的、范围、用例、结果、问题总结”，导师会觉得你“做事严谨”。比如：

问题总结：“IE浏览器下富文本编辑器错乱，通过引入兼容JS修复；未登录用户能访问博主管理页，加Spring Security拦截器控制”
测试结论：“核心功能（文章发布、互动、登录）均通过测试，无严重bug；兼容性问题已修复，系统可正常使用”

六、答辩准备：3个加分小技巧

毕设不仅要做出来，还要说清楚！我当初准备了这3点，导师直接给“良好”：

演示流程要顺畅：提前录演示视频（怕现场系统崩），按“管理员加博主→博主发文章→用户看文章+互动”的流程来，别跳步
重点讲“你解决了啥问题”：比如“一开始文章封面存数据库加载慢，改成存路径后，加载速度提升60%；用户能重复点赞，用Redis缓存解决”，比光说“我用了Spring Boot”有亮点
准备常见问题：导师大概率问“为啥选MySQL不选Oracle”“文章多了怎么优化”，提前答：“MySQL轻量适合个人博客，数据量小；文章多就加索引（如文章表的bozhuhao索引），优化查询速度”

最后：毕设通关的小私心

以上就是基于Spring Boot的个人博客系统从0到1的避坑干货！毕设没那么难，关键是找对方法，别瞎做复杂功能。

需要核心源码（带注释，直接能跑）、数据库脚本（含测试数据）、ER图模板的宝子，评论区扣“个人博客系统”，我私发你；卡在某个模块（比如文章发布、评论互动），也可以留言，我看到必回！

点赞收藏这篇，下次找流程不迷路～祝宝子们毕设顺利，轻松毕业！😘