基于Spring Boot + Vue的校园博客系统设计与实现全解析-北京尧图网络

简介基于Spring Boot与Vue的校园博客系统设计与实现源码是一套面向高校计算机专业毕业设计或课程设计的完整项目内含前后端代码与数据库脚本。系统提供管理员、博主和前台游客三类角色覆盖文章发布与分类、举报投诉、收藏、个人中心、在线客服等常见博客功能能够直接用于校园博客场景的快速搭建。压缩包共收录797个文件体积约88.77MB内部以Java源码、Vue前端页面、JS/CSS静态资源以及SQL数据库脚本为主并附带开发说明文档、操作演示视频、答辩PPT和安装、启动、打包三阶段脚本便于学习者按流程完成环境配置与项目部署。目前已有314人学习适合希望通过完整案例掌握前后端分离开发的在校学生和初级开发者。借助完整源码与配套文档可以梳理从环境准备到前后端联调直至部署上线的整体思路代码结构与功能模块划分清晰即使基础薄弱也能对照文档视频快速上手从而在毕业设计或课程答辩中充分体现系统完整性与实现细节。1. 为什么校园博客系统绕不开 Spring Boot Vue 这个组合打开任何代码托管平台搜索校园博客系统返回结果几乎都是同一套方案Spring Boot 暴露 REST 接口Vue 渲染页面MySQL 存储数据。这个组合之所以能成为毕业设计和数据库课程设计里的常客不是因为它新而是因为它的职责切得够清楚后端只处理鉴权、文章、评论和权限前端只处理路由、状态和页面交互。对需要独立完成全流程的开发者来说这套技术栈是投入产出比最高的选择。面对“基于 Spring Boot Vue 的校园博客系统”这个题目真正的工作量不在代码量而在数据模型是否合理、接口是否能覆盖页面所有操作、部署后是否能跑起来。下面按拿到需求后的真实顺序推进先定数据库表再搭后端骨架然后做 Vue 前端页面最后讲发布和排错。无论你拿到的是别人的源码还是从零手写这套流程都能直接套用。2. 数据库设计与 Spring Boot 工程骨架先定表再写代码2.1 六张核心表把博客需求翻译成数据模型校园博客系统的常见角色有三类游客能浏览文章和评论登录用户能发评论、管理自己的文章管理员能发文章、审核或删除评论、维护分类。把这些行为拆开就能得出最基本的六张表用户表、文章表、分类表、评论表、标签表、文章标签关联表。我一般不会用外键只保留逻辑关联字段理由是后续做分页查询、批量删除时不用被数据库外键约束绑住尤其在有测试数据的场景下删分类或用户会更省事。下面给出精简版建表脚本去掉了非核心字段保留全流程必需部分。CREATE TABLE sys_user ( id BIGINT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(50) NOT NULL UNIQUE COMMENT 登录名, password VARCHAR(100) NOT NULL COMMENT MD5加密后的密码, nickname VARCHAR(50) NOT NULL COMMENT 显示昵称, avatar VARCHAR(255) DEFAULT NULL COMMENT 头像URL, role TINYINT DEFAULT 0 COMMENT 0普通用户 1管理员, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINE InnoDB DEFAULT CHARSET utf8mb4 COMMENT 用户表; CREATE TABLE cms_category ( id BIGINT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(50) NOT NULL, sort INT DEFAULT 0 ) ENGINE InnoDB DEFAULT CHARSET utf8mb4 COMMENT 分类表; CREATE TABLE cms_article ( id BIGINT AUTO_INCREMENT PRIMARY KEY, user_id BIGINT NOT NULL COMMENT 作者ID, category_id BIGINT NOT NULL COMMENT 分类ID, title VARCHAR(100) NOT NULL, summary VARCHAR(255) DEFAULT NULL COMMENT 列表页摘要, content LONGTEXT NOT NULL COMMENT 正文HTML, cover VARCHAR(255) DEFAULT NULL COMMENT 封面图, status TINYINT DEFAULT 0 COMMENT 0草稿 1已发布, view_count BIGINT DEFAULT 0, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, KEY idx_user (user_id), KEY idx_category (category_id) ) ENGINE InnoDB DEFAULT CHARSET utf8mb4 COMMENT 文章表; CREATE TABLE cms_comment ( id BIGINT AUTO_INCREMENT PRIMARY KEY, article_id BIGINT NOT NULL, user_id BIGINT NOT NULL, parent_id BIGINT DEFAULT NULL COMMENT 回复哪条评论NULL为顶层评论, content VARCHAR(500) NOT NULL, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, KEY idx_article (article_id) ) ENGINE InnoDB DEFAULT CHARSET utf8mb4 COMMENT 评论表; CREATE TABLE cms_tag ( id BIGINT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(30) NOT NULL UNIQUE ) ENGINE InnoDB DEFAULT CHARSET utf8mb4 COMMENT 标签表; CREATE TABLE cms_article_tag ( article_id BIGINT NOT NULL, tag_id BIGINT NOT NULL, PRIMARY KEY (article_id, tag_id) ) ENGINE InnoDB DEFAULT CHARSET utf8mb4 COMMENT 文章标签关联表;重点是两个地方。第一sys_user的表名避开了user这个 MySQL 保留字减少后续 SQL 踩坑第二cms_article里存的是渲染后的 HTML而不是 Markdown 源文这样前端拿到后直接v-html就能显示不需要在浏览器端再做一次编译。summary字段单独存摘要是为了列表页不要用LEFT(content, 200)这种会拖慢大字段查询的写法。2.2 后端包结构与 Spring Boot 配置项后端工程我习惯按 controller、service、mapper、entity、config、common 六层划分。接口少的项目这样做看起来类有点多但到联调阶段的好处是出了问题能直接定位到层面试官问起职责边界时也好讲。包名职责典型内容controllerHTTP 入口参数校验和结果封装ArticleController、AuthControllerservice业务逻辑事务控制ArticleServiceImpl、CommentServiceImplmapper数据访问MyBatis-Plus 接口ArticleMapper、CommentMapperentity数据库表映射SysUser、CmsArticleconfig配置类MybatisPlusConfig、WebMvcConfig、InterceptorConfigcommon通用返回值、常量、工具Result 、JwtUtils按照标题里“源码数据库”的交付预期拿到项目后第一步也应该先看entity目录对不上的表字段再看application.yml里的连接串。数据库课程设计最严格的扣分点通常是表字段与实体类不一致跑起来报 Unknown column。server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/campus_blog?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: root jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: Asia/Shanghai mybatis-plus: mapper-locations: classpath*:mapper/**/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImplserverTimezoneAsia/Shanghai是必须写的MySQL 8.x 默认时区与本机不一致时时间字段会差 8 小时。jackson.date-format决定返给前端的日期格式不写的话前端拿到的是时间戳数组。如果你接手的老项目里 MySQL 密码有特殊字符比如pssw:rd记得在 yml 里用引号包住整串否则冒号会被当成键值分隔符解析。2.3 实体映射与 MyBatis-Plus 分页配置实体类直接对应表字段这里用 MyBatis-Plus 的注解风格。TableName显式指定表名TableId(type IdType.AUTO)表示主键自增。数据库增删改查里最容易被忽视的是逻辑删除字段如果表里加了deleted字段实体上要加TableLogic避免自己每次手写WHERE deleted 0。Data TableName(cms_article) public class CmsArticle { TableId(type IdType.AUTO) private Long id; private Long userId; private Long categoryId; private String title; private String summary; private String content; private String cover; private Integer status; private Long viewCount; private LocalDateTime createTime; private LocalDateTime updateTime; }文章列表页需要带出作者昵称和分类名这属于典型的多表关联。MyBatis-Plus 里最干净的做法不是写 XML而是在 Service 层先查文章分页再批量查用户和分类手动组装 VO。数据量在学校项目级别完全够用还能免去维护 XML 的精力。Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); PaginationInnerInterceptor pagination new PaginationInnerInterceptor(DbType.MYSQL); pagination.setMaxLimit(50L); interceptor.addInnerInterceptor(pagination); return interceptor; }setMaxLimit限制单页最大条数防止有人把pageSize调到999999拖垮数据库这在实际接口评审里经常被问到。分页对象用PageCmsArticle直接传给ArticleMapper.selectPage()就能返回带 total 和 records 的结果结构前端分页组件只需要这两个字段。3. Vue 前端环境配置、路由和页面骨架的搭建顺序3.1 Vue 环境与项目初始化前端部分先从 Vue 安装及环境配置说起。Node 版本选 18 或 20 LTS低版本 node 在构建新项目时会报 OpenSSL 错误。用官方脚手架创建项目时我建议勾选 Router 和 ESLint但关掉单元测试不要勾选 JSX保持依赖最小化。node -v npm install -g vue/cli vue create campus-blog-web cd campus-blog-web npm install axios element-plus npm run servevue create交互提示选择 Vue 3 预设不要轻易选 Vue 2因为 Element Plus 只支持 Vue 3新项目没必要选旧生态。创建完先装axios和element-plus两个核心依赖其余的富文本组件等做到对应页面再装。如果你看到的是老模板项目脚手架里带的是 Vue 2 Element UI这套代码跑起来也能用但新写代码时尽量往 Vue 3 靠。3.2 路由表设计与前后端路由边界博客系统的路由可以分成前台和后台两个模块。前台路由是/、/article/:id、/login、/category/:id后台路由统一挂在/admin下。vue-router用 hash 模式还是 history 模式我建议后端项目用 hash理由是部署到静态服务器时刷新不会出现 404如果坚持 history 模式部署阶段就必须给服务器加try_files回退规则后面排版时会提到。import { createRouter, createWebHashHistory } from vue-router const routes [ { path: /, component: () import(/views/HomeView.vue) }, { path: /article/:id, component: () import(/views/ArticleDetail.vue) }, { path: /login, component: () import(/views/LoginView.vue) }, { path: /admin, component: () import(/layouts/AdminLayout.vue), meta: { requiresAuth: true, role: admin }, children: [ { path: , component: () import(/views/admin/Dashboard.vue) }, { path: articles, component: () import(/views/admin/ArticleManage.vue) } ] } ] const router createRouter({ history: createWebHashHistory(), routes }) router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else { next() } }) export default router路由守卫只是前端体验层真正拦住越权请求靠的是后端拦截器。前端守卫里role的校验逻辑不要写得太重只要判断有没有 token 就行角色校验放在接口返回 403 时统一处理这样后端改权限规则时前端不用跟着改。注意这里使用了meta.role字段但没有在前端仔细校验它实际上我更建议前端只做“有没有登录”的守卫不做“是不是管理员”的守卫。3.3 axios 封装与 token 注入接口封装是所有页面开发的地基。axios 实例要设置baseURL、超时时间、请求拦截器和响应拦截器统一处理 token 注入和 401 跳转。import axios from axios import { ElMessage } from element-plus import router from /router const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) request.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { localStorage.removeItem(token) router.push(/login) } ElMessage.error(error.response?.data?.message || 请求失败) return Promise.reject(error) } ) export default requestbaseURL用了/api而不是完整的http://localhost:8080这是为了部署时灵活切换。开发阶段在vue.config.js里配置 devServer 的 proxy 把/api转发到后端 8080 端口生产环境把前端 dist 交给 Spring Boot 托管或者 Nginx 托管后端的接口路径保持/api前缀一致即可。401 拦截里不要只弹错误提示还要清掉本地 token 并且跳转登录页因为 token 过期是必然会发生的事。3.4 首页文章列表和详情页的数据对接首页是最典型的列表页。用request.get(/articles, { params: { page, size, categoryId } })拿到分页数据模板里用el-card渲染文章卡片点击卡片跳转到/article/:id。详情页需要调request.get(/articles/ id)返回的文章内容直接用v-html渲染。这里有一个安全细节v-html会把后端返回的 HTML 原样插入 DOM如果编辑器允许上传任意内容就存在存储型 XSS 风险。校园内部系统往往忽略了这一点但既然是自己做的系统建议前端对富文本内容做一次DOMPurify过滤后端再对onerror、javascript:开头的属性做黑名单校验两边都收口才算完整。3.5 后台管理页面的组件拆分后台管理页面是表格、分页、弹窗的三件套组合。文章管理页用一个el-table展示标题、分类、状态、作者操作列放“编辑”和“删除”按钮顶部放“新建文章”按钮提交和编辑共用同一个弹窗组件。组件拆分遵循一条标准一个views页面只放一个页面的路由逻辑弹窗表单抽成独立组件列表数据请求放在父组件里子组件用emit(submit, formModel)通知父组件刷新列表。4. 登录鉴权、文章发布和评论核心业务的联动实现4.1 JWT 登录流程与拦截器配置后端登录逻辑是三段式查询用户、校验密码、生成 token。密码在sys_user表里存 MD5 值但新项目更推荐 BCrypt成本只是多引入一个依赖安全性却高很多。用户登录成功后返回 token前端存到localStorage后续每个请求都带上Authorization头。Spring Boot 侧用一个拦截器统一校验作用范围是除了/api/auth/login和/api/articles等公开接口之外的所有路径。Component public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (OPTIONS.equalsIgnoreCase(request.getMethod())) { return true; } String auth request.getHeader(Authorization); if (auth ! null auth.startsWith(Bearer )) { String token auth.substring(7); try { Long userId JwtUtils.parseToken(token); request.setAttribute(userId, userId); return true; } catch (Exception e) { // 解析失败走末尾统一返回 } } response.setStatus(401); response.setContentType(application/json;charsetUTF-8); response.getWriter().write({\code\:401,\message\:\未登录或token无效\}); return false; } }拦截器注册到 WebMvcConfigurer 里并配置排除路径。这里要注意如果用了 history 模式前端刷新页面可能直接请求了后端接口路径因此所有 GET 接口都必须允许跨域。跨域配置也在同个配置类里完成常见做法是添加三个CorsRegistry映射。preHandle里解析出来的userId通过request.setAttribute透传给 ControllerController 里从请求参数里取不要在 Controller 里再解析一遍 token避免重复代码。如果这段代码是项目里的现有实现把它迁移到自己项目时一定要改掉自定义的加密 key防止别人用公开源码里的密钥伪造 token。4.2 管理端权限控制拦截器判断角色班级项目里管理员数量少用一个简单判断就够/admin/**路径在 JwtInterceptor 之后加一个 AdminInterceptor判断当前用户的 role 是否为 1。查询当前用户时让 UserMapper 从数据库按 userId 查出 role不要只信任前端传过来的字段。public class AdminInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { Long userId (Long) request.getAttribute(userId); SysUser user userMapper.selectById(userId); if (user ! null Integer.valueOf(1).equals(user.getRole())) { return true; } response.setStatus(403); return false; } }这个实现里user没有被真正使用到但已经查出来了这里偷懒只判断 role 字段。如果你用更严格的方案可以考虑把用户角色缓存在 Redis 里避免每次请求都查一次库但校园规模和课设评分标准里少一次数据库查询不是核心加分项代码的正确性才是。接口侧的权限判断也顺便说一下Controller 里凡是有Admin语义的方法或者在 Service 层里判断当前操作人是否是文章作者比如用户只能删除自己的草稿管理员可以删除所有文章这些都是springboot面试题里高频的逻辑场景建议把校验规则集中在ArticleService.checkPermission()里避免每个 Controller 里重复写判断。4.3 文章发布富文本选型与图片上传文章发布是全系统交互最复杂的页面。前台是富文本编辑区后台是保存草稿、提交发布两个动作。每次点击保存把编辑器的 HTML 内容整体提交到后端后端原样存cms_article.content不做转义页面展示时v-html渲染。如果你在设计课设最稳妥的富文本编辑器是 wangEditor 或 Quill它们都支持图片上传和视频嵌入。图片上传接口单独做接收 MultipartFile保存到本地磁盘的upload/目录返回可访问的 URL。PostMapping(/upload) public ResultString upload(RequestParam(file) MultipartFile file) throws IOException { String originalName StringUtils.cleanPath(Objects.requireNonNull(file.getOriginalFilename())); String ext originalName.substring(originalName.lastIndexOf(.)); String fileName UUID.randomUUID() ext; File dir new File(uploadDir); if (!dir.exists()) { dir.mkdirs(); } file.transferTo(new File(dir, fileName)); return Result.success(/upload/ fileName); }uploadDir建议配成绝对路径比如/data/campus-blog/upload/不要用src/main/resources下的相对路径。原因是项目打进 jar 包后resources 目录在 jar 内部运行时写入会失败。originalName要过滤掉路径字符生产环境和公开部署时这个问题很容易被忽略。4.4 评论与回复用 parent_id 实现两级结构评论表只留parent_id一个字段没有楼层概念。列表页按article_id查出所有评论在 Java 内存中组装成树形结构最多做两级——顶层评论和回复。parent_id指向cms_comment.id而不是指向上一条回复的 id这样前端渲染时只要遍历一次就能分组。评论删除要注意管理员删掉顶层评论后它的所有子回复也要一并删除否则页面会出现找不到父节点的孤立评论。建议用DELETE FROM cms_comment WHERE id ? OR parent_id ?一条语句完成简单直接避免写递归删除的循环。4.5 接口清单与联调顺序前后端联调时最浪费时间的不是接口缺失而是接口路径或字段对不上。项目开工第一天就维护一份接口清单比全部写完再对要省事得多。下面是最小编制的接口表。方法路径说明权限POST/api/auth/login登录返回 token公开POST/api/auth/register注册公开GET/api/articles文章分页列表公开GET/api/articles/{id}文章详情公开POST/api/articles新建文章登录PUT/api/articles/{id}更新文章作者或管理员DELETE/api/articles/{id}删除文章作者或管理员GET/api/articles/{id}/comments评论列表公开POST/api/comments提交评论登录DELETE/api/comments/{id}删除评论管理员或评论作者建议先调通的三个接口是登录、文章列表、文章详情这三个通了整个链路的前后端配置就没有大问题了剩下的接口都只是重复劳动。5. 打包部署与排错源码到可运行系统的最后一步5.1 前后端打包与生产配置后端打包前先确认application.yml里的数据库地址是正式环境的然后执行mvn clean package -DskipTests生成的 jar 在target目录。前端执行npm run build产物在dist目录。最简单的部署方式是后端起 8080 端口前端的 dist 里的 index.html 和静态资源用 Spring Boot 静态资源托管来服务。Nginx 部署时则把 dist 目录放到/usr/share/nginx/html接口路径用 location /api 转发到 8080。配置server_name时如果用了非 80 端口前端 axios 的 baseURL 必须写全带上端口号否则浏览器会默认请求 80 端口。5.2 常见故障核对表现象原因处理方式前端列表能显示但发评论报 401登录接口没返回 token 或前端未保存打开浏览器存储看 token 是否存在再确认拦截器放行路径打包后刷新文章详情页 404用了 history 模式但服务器没有回退规则改用 hash 模式或在 Nginx 加 try_files $uri $uri/ /index.html本地能跑服务器上时间差 8 小时数据库连接串没加 serverTimezone确认 yml 中 serverTimezoneAsia/Shanghai上传图片后前端显示不了上传目录不在静态资源根路径给 /upload/** 添加资源映射或把文件文件名改成 /api/upload 返回数据库增删改查全正常但评论出现孤立数据删除顶层评论未删除子评论删除接口同时执行 WHERE id? OR parent_id?跨域报错 CORS控制器所在服务没有配置 CorsRegistry在 WebMvcConfigurer 里增加跨域映射第一行的情况最常见前端跳转登录页后已经拿到了 token但刷新页面时 localStorage 里丢了或者拦截器把/api/comments也算进公开路径却又要求用户身份。排错时可以临时在响应拦截器里 console.log 出错误对象能省去反复猜原因的时间。5.3 交付前的代码走查清单最后把源码和数据库脚本交给别人之前建议按这个顺序自查数据库脚本能否在全新 MySQL 上完整执行sys_user里是否预留了初始管理员账号修改 8080 端口后前端 proxy 是否同步改了上传目录是否使用了绝对路径。这些点每检查到一个都相当于替接收源码的人避开了半个小时的定位时间。文章和评论接口的返回结构我会统一成{ code, message, data }三格式前端拦截器只判断 code 是否为 200。这样后端抛异常时可以保证前端拿到的一定是对象而不是字符串或空响应。最后操作一遍用 Postman 跑登录、发文章、发表评论三层接口确认 token 过期时间设成了合理长度比如 2 小时再把源码和 SQL 脚本一并提交。本文还有配套的精品资源点击获取

基于Spring Boot + Vue的校园博客系统设计与实现全解析

相关推荐

从零构建桌面协同CRM：客户管理、工单系统与消息中心的技术实践

技能进化趋势与实战方法论：从AI协作到能力跃迁

基于Matlab的2DPSK调制解调系统仿真与误码率分析

更多资讯

给Nanobot写个Web UI：基于SSE的流式聊天界面设计与实现

Vue3 + Vite + ECharts 大屏项目全流程实战指南

基于STM32两路步进电机控制：定时器PWM与梯形加减速实现双轴同步

条形码生成工具怎么选？

微信小程序LBS实战：从定位到附近美食POI检索与排序

C/C++实现散列表通讯录：散列函数与冲突处理详解

今日更新

基于MATLAB的CRI显色指数计算：从SPD光谱到Ra的完整流程

JSP+Servlet+MySQL博客系统源码部署与优化全攻略

蜂窝调度算法 MATLAB 实现：比例公平、轮询与最大 C/I 对比

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？