做了这么多年Java全栈的项目看到“SpringBoot Vue MySQL”这个组合第一反应就是“稳”。这几乎是把前后端分离开发的教学价值、毕业设计的评审要点、课设的交付要求全部踩在了点上。尤其是标题里挂着“文学创作社交论坛”说明这不是一个简单的增删改查Demo而是包含用户、内容、互动、后台审核的完整业务闭环——给导师演示的时候既有深度又有广度。今天就把这个项目的核心设计、表结构、关键代码、联调和部署全链路拆开讲一遍附带我实操中踩过的坑和补救方案。如果你正打算拿这个方向做毕设或课设或者只是想找一套完整的全栈项目练手这篇文章基本可以当你的技术设计文档来用。1. 先说清楚这个项目到底做的是什么1.1 一句话定位这套系统本质上是一个“内容社区 社交互动 管理后台”的三层结构。面向文学创作者提供作品发布、编辑、浏览、评论、点赞、收藏、关注等功能面向管理员提供用户管理、作品审核、分类管理、数据统计等运营能力。拆开看它有四个核心角色游客浏览、普通用户创作和社交、管理员审核和运营、超级管理员系统配置。这个角色体系非常典型毕设答辩时老师最常问的就是“你是怎么设计权限的”有这层结构就能讲出东西。1.2 功能模块全景拆解从功能清单看这套系统可以分为前台用户端、创作端、社交端、后台管理端四块前台浏览端首页作品流、分类推荐、作品详情页、用户主页、搜索。创作端作品发布、在线编辑、存草稿、修改已发布作品、删除作品。社交端评论/回复、点赞/取消点赞、收藏、关注/取关、个人中心查看数据和消息。后台管理端用户管理封禁/解封、作品审核通过/驳回/下线、分类管理、公告管理、核心数据概览。这里面比较容易被忽视的是“审核”环节。很多学生的作品只有一个发布动作导师会觉得没有运营深度。加了审核状态整个作品生命周期就变成草稿 → 待审核 → 已发布/已驳回 → 已下线后端用状态机来控制代码维度瞬间提升一个档次。1.3 为什么这套组合值得多花时间一是答辩效果好。SpringBoot 是目前 Java 岗位面试和项目里的绝对主力Vue 在前端领域也是主流中的主流技术栈本身就有话题可聊。二是学习路径完整。这个项目能让你同时练到 RESTful API 设计、JWT 鉴权、ORM 映射、数据库设计、前后端联调打包覆盖的正好是“初级程序员到中级程序员”之间最需要的能力带。我见过太多只会在本地跑一个 SpringBoot HelloWorld 的人面到项目细节就卡壳也见过 Vue 装了半天路由守卫都不知道干嘛的人。这套论坛项目把这些环节全部串起来每一环都是知识点每一环都能单独拿出来被提问。2. 技术选型的底层逻辑与初始化准备2.1 SpringBoot 版本选哪一档选版本是第一个容易踩的坑。市面上很多教程默认用 SpringBoot 2.x但如果你本机装的是 JDK 17 或更高SpringBoot 2.4 以下的版本可能会直接启动报错比如 CGLIB 相关的异常。我的建议是JDK 8选 SpringBoot 2.5 ~ 2.7兼容性好网上资料最多跑课设毫无压力。JDK 11/17选 SpringBoot 2.7 或 3.0但注意 SpringBoot 3 必须用 JDK 17 及以上而且部分第三方工具如某些老版 MyBatis 插件可能不兼容。毕设推荐方案JDK 8 SpringBoot 2.7.x MySQL 5.7/8.0。这个组合最稳除非你明确想展示 SpringBoot 3 的新特性。很多同学上来下载了最新的 Spring Initializr 生成的代码结果发现本地 JDK 还是 8一启动就是版本不匹配白白浪费时间。先确认本机 JDK 版本再选 SpringBoot 版本这是最基本的工程素养。2.2 持久层框架MyBatis-Plus 是效率担当论坛系统的 SQL 量不低分页查询、多表联查、条件筛选、批量软删除。原生 MyBatis 写起来太啰嗦纯 JPA 又不好控制复杂查询。折中方案就是 MyBatis-Plus它能同时满足两种诉求单表 CRUD 直接用 BaseMapper不需要写 XML。复杂查询用 LambdaQueryWrapper 或自定义 XML自由度还在。比如分页查询作品列表MyBatis-Plus 的写法是PageWork page new Page(current, size); LambdaQueryWrapperWork wrapper new LambdaQueryWrapper(); wrapper.eq(Work::getStatus, WorkStatus.PUBLISHED) .orderByDesc(Work::getCreateTime); IPageWork result workMapper.selectPage(page, wrapper);一行分页一行条件不用写limit #{pageSize} offset #{offset}这类繁琐操作。这就是为什么我建议课设/毕设优先 MyBatis-Plus它把开发效率拉满让你把时间花在业务逻辑上而不是堆 SQL。2.3 前端脚手架与 UI 库怎么配Vue 这边同样有版本选择问题Vue2 Element UI 和 Vue3 Element Plus。如果你学过 Vue2选 Vue2 上手最快如果是新学我建议直接用 Vue3 Vite Element Plus因为 Vite 启动速度比 Webpack 快一个数量级写代码的体感好很多。一个比较关键的细节是Element Plus 只在 Vue3 下工作Element UI 只在 Vue2 下工作。混用会直接报错这俩别选错。前端目录结构建议src/ ├── api/ # 接口封装 ├── assets/ # 静态资源 ├── components/ # 公共组件分页、评论、上传 ├── router/ # 路由配置 ├── store/ # Pinia/Vuex 状态管理 ├── views/ # 页面front/ 和 admin/ 分目录 └── utils/ # 请求封装、token处理2.4 项目初始化步骤整理后端的初始化流程大概是Spring Initializr 勾选 Web、MySQL Driver、Lombok、Validation。加入mybatis-plus-boot-starter依赖、jjwtJWT 工具、hutool工具集合。application.yml 里配置数据源、端口、日志级别。手写统一响应体ResultT和全局异常处理器。前端的初始化流程npm create vitelatest forum-web -- --template vue npm install element-plus element-plus/icons-vue npm install axios vue-router pinia npm install wangeditor/editor-for-vue初始化完成之后先把前后端的“最小可用链路”打通再开始堆业务代码。我最初的开发习惯是后端先跑出一个/api/health接口返回ok前端用 axios 调通确认没有跨域或者代理问题然后才动手写业务。这个小习惯帮我省了很多排查时间。3. 数据库设计论坛类系统最关键的 20 张表3.1 表设计总览与关系梳理数据库设计是整个系统的地基地基歪了后面代码写得再流畅都白搭。文学创作社交论坛至少需要以下核心表用户表user账号、昵称、头像、简介、状态、角色。角色表role为了权限扩展用户-角色用中间表关联。作品表work标题、封面、正文、分类、状态、浏览量。分类表category作品类别如小说、诗歌、散文。评论表comment关联作品或父评论支持多级回复。点赞表like_record用户-作品防重。收藏表favorite用户-作品收藏列表。关注表follow用户-用户粉丝关系。公告表notice后台发布的站内公告。操作日志表operation_log后台关键操作留痕。这些表的关系并不复杂但要注意每一处冗余和索引设计。比如work表里冗余一个comment_count是为了避免每次都count(*)统计评论数量热门作品列表能快很多。3.2 核心表结构详解用户表设计时要注意“逻辑删除”和“状态”字段。很多学生会把删除做成物理删除结果用户被删作品和评论变成孤儿数据后面统计全乱。更好的做法是加deleted标志位CREATE TABLE user ( id bigint(20) NOT NULL AUTO_INCREMENT, username varchar(50) NOT NULL COMMENT 登录名, password varchar(100) NOT NULL COMMENT 加密密码, nickname varchar(50) DEFAULT NULL COMMENT 昵称, avatar varchar(255) DEFAULT NULL COMMENT 头像URL, bio varchar(500) DEFAULT NULL COMMENT 个人简介, status tinyint(4) DEFAULT 1 COMMENT 1正常 0封禁, deleted tinyint(4) DEFAULT 0 COMMENT 0未删除 1已删除, create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户表;密码字段不要存明文用 BCrypt 或 MD5 Salt。哪怕只是课设这点也是大概率被问到的问题。作品表需要注意用longtext存正文否则文章稍长直接截断CREATE TABLE work ( id bigint(20) NOT NULL AUTO_INCREMENT, title varchar(200) NOT NULL, cover varchar(255) DEFAULT NULL, content longtext NOT NULL COMMENT 正文, category_id bigint(20) DEFAULT NULL, author_id bigint(20) NOT NULL, status tinyint(4) DEFAULT 0 COMMENT 0草稿 1待审核 2已发布 3已驳回 4已下线, view_count bigint(20) DEFAULT 0, like_count bigint(20) DEFAULT 0, comment_count bigint(20) DEFAULT 0, create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_author (author_id), KEY idx_category_status (category_id, status) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT作品表;这里idx_category_status是典型的联合索引用来支持“按分类查已发布作品”这种高频查询。3.3 社交表的设计要点与防重思路点赞和关注这种表本质上是“关系实体”。它们不需要更新只需要插入和删除所以数据结构非常简单但必须做唯一约束否则用户连点两次就产生两条脏数据CREATE TABLE like_record ( id bigint(20) NOT NULL AUTO_INCREMENT, user_id bigint(20) NOT NULL, work_id bigint(20) NOT NULL, create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_user_work (user_id, work_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT点赞记录表;后续点赞/取消点赞的逻辑就围绕这个唯一索引展开先尝试插入如果报DuplicateKeyException说明已经点过取消点赞同理删除记录。这种“唯一索引兜底”的方式比先查后插更加稳并发情况下也不怕重复数据。3.4 初始化数据的 SQL 示例别小看初始化数据导师打开你的项目看到的页面如果空空如也印象分会大打折扣。建议在 SQL 脚本里预置2 个角色ROLE_USER、ROLE_ADMIN。1 个管理员账号admin / admin123密码 BCrypt 加密。5~6 个测试用户。10 个分类30 篇不同状态的作品一批评论和点赞数据。有了这些数据列表页、详情页、后台统计图表一打开就是有内容的演示效果完全不一样。4. 后端核心功能实现与代码落地4.1 登录鉴权JWT 方案还是 Spring SecuritySpring Security 功能强但配置复杂课设/毕设阶段很容易被过滤器链绕晕。轻量级方案是JWT 自定义拦截器HandlerInterceptor配合全局配置实现权限控制。流程是这样的用户登录成功后端签发 JWT把 userId 和 role 放进去。前端把 token 存在 localStorage并放到 axios 请求头Authorization。自定义拦截器AuthInterceptor校验 token解析出用户信息存入 ThreadLocal。管理员接口额外校验角色不是管理员直接返回 403。核心代码public class AuthInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token request.getHeader(Authorization); if (StringUtils.hasText(token) token.startsWith(Bearer )) { token token.substring(7); } Claims claims JwtUtil.parseToken(token); if (claims null) { response.setStatus(401); return false; } UserContext.set(claims.get(userId, Long.class), claims.get(role, String.class)); return true; } Override public void afterCompletion(...) { UserContext.clear(); } }使用 ThreadLocal 保存用户信息是个很实用的点。后续接口想获取当前登录用户直接UserContext.getUserId()不用每个 Controller 都重复解析 token。4.2 作品发布与状态流转作品发布不是简单的 insert它涉及状态机的转移用户点击“发布”如果内容是新建的先存草稿再提交审核。提交审核后状态置为待审核管理员在后台审核可以通过或驳回。已发布的作品管理员也可以下线。我用一个枚举集中管理状态避免到处写魔法数字public enum WorkStatus { DRAFT(0, 草稿), PENDING(1, 待审核), PUBLISHED(2, 已发布), REJECTED(3, 已驳回), OFFLINE(4, 已下线); private final int code; private final String desc; // 构造方法和 getter 省略 }发布接口需要校验标题不能为空、分类存在、作者存在、状态流转合法比如驳回状态下不能直接发布必须重新编辑后再提交。这些看似简单的规则恰恰是逻辑完整性的体现。4.3 评论/点赞/收藏的事务处理点赞和收藏有一个共同点既要操作记录表又要更新作品表里的统计字段。这两步必须放在同一事务里否则会出现“点赞记录存在但点赞数没加”的尴尬局面。用Transactional就能解决Transactional(rollbackFor Exception.class) public void likeWork(Long userId, Long workId) { LikeRecord record new LikeRecord(); record.setUserId(userId); record.setWorkId(workId); try { likeRecordMapper.insert(record); workMapper.increaseLikeCount(workId); } catch (DuplicateKeyException e) { throw new BusinessException(您已经点过赞了); } }rollbackFor Exception.class这个细节很重要。默认情况 Spring 只在遇到 RuntimeException 时回滚如果业务方法抛的是受检异常不加这个参数事务就不回滚数据会不一致。评论接口是典型的“主从结构”评论记录插入后同步更新作品的comment_count。同时支持楼中楼回复只需要在评论表里加一个parent_id查询时通过parent_id is null筛出顶级评论再递归查子评论。注意递归深度限制一般两层或者三层就够用了。4.4 后台管理分页与模糊检索后台管理最核心的就是分页和检索。以用户管理为例需要支撑按用户名模糊查、按状态筛选、按时间倒序排列。用 MyBatis-Plus 的 LambdaQueryWrapper 可以很方便地拼条件public PageUser pageUsers(int current, int size, String keyword, Integer status) { PageUser page new Page(current, size); LambdaQueryWrapperUser wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.hasText(keyword), User::getUsername, keyword) .eq(status ! null, User::getStatus, status) .orderByDesc(User::getCreateTime); return userMapper.selectPage(page, wrapper); }这里有两个习惯值得学习一是like条件用StringUtils.hasText(keyword)判断是否拼接避免空关键字导致like %%二是一切排序放在 SQL 层而不是取回内存里再 sort。这套规范可以直接迁移到任何管理后台系统中属于“一次学会、终身受用”的写法。4.5 统一响应体与全局异常处理前后端分离项目最怕的就是接口返回格式不统一。我见过有的接口直接返回Map有的返回String前端拿到数据还要猜结构。建议从第一天开始就定义统一的ResultTData public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT r new Result(); r.setCode(200); r.setMessage(success); r.setData(data); return r; } public static T ResultT error(Integer code, String message) { ResultT r new Result(); r.setCode(code); r.setMessage(message); return r; } }配合全局异常处理器Service 层只要抛出BusinessExceptionController 层不需要写任何 try catch异常自动转换为 JSON 返回给前端。RestControllerAdvice public class GlobalExceptionHandler { ExceptionHandler(BusinessException.class) public ResultVoid handleBusinessException(BusinessException e) { return Result.error(e.getCode(), e.getMessage()); } ExceptionHandler(Exception.class) public ResultVoid handleException(Exception e) { log.error(系统异常, e); return Result.error(500, 系统繁忙请稍后重试); } }这个设计前后端联调时非常省心。前端只需要统一处理Result的code字段非 200 就弹message基本不需要为每个接口单独写错误分支。5. 前端 Vue 篇页面构建与联调细节5.1 路由表规划与页面清单Vue Router 的路由设计直接体现对权限的理解。我的做法是把“前台页面”和“后台页面”分开后台页面统一挂在一个带AdminLayout的父路由下并且加meta.requiresAuth true和meta.role ADMIN。典型路由表{ path: /admin, component: AdminLayout, meta: { requiresAuth: true, role: ADMIN }, children: [ { path: users, component: AdminUsers, meta: { title: 用户管理 } }, { path: works, component: AdminWorks, meta: { title: 作品审核 } }, { path: categories, component: AdminCategories, meta: { title: 分类管理 } } ] }路由守卫负责拦截未登录和越权访问router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (to.meta.requiresAuth !token) { next({ path: /login, query: { redirect: to.fullPath } }); return; } const role localStorage.getItem(role); if (to.meta.role to.meta.role ! role) { next({ path: /403 }); return; } next(); });这里用query.redirect记录用户原本想去的页面登录后自动跳回去体验比直接扔回首页好很多。5.2 axios 封装与 token 联动axios 不封装直接用项目一半的时间都会浪费在重复的请求配置上。我在utils/request.js里统一做三件事从 localStorage 取 token加到请求头。响应拦截器统一解包Result非 200 直接Message.error。响应状态码是 401清掉本地登录信息跳转登录页。const service axios.create({ baseURL: /api, timeout: 10000 }); service.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] Bearer token; } return config; }); service.interceptors.response.use( res { const { code, message, data } res.data; if (code 200) return data; ElMessage.error(message || 请求失败); return Promise.reject(new Error(message)); }, err { if (err.response err.response.status 401) { localStorage.removeItem(token); localStorage.removeItem(role); router.push(/login); } return Promise.reject(err); } );baseURL 用/api而不是完整域名好处是开发环境可以通过 Vite 代理转发生产环境可以通过 Nginx 反向代理前端代码完全不用改。5.3 富文本编辑器接入与图片上传文学创作平台的编辑器直接决定创作者的使用体验。我推荐 wangEditor它对 Vue3 有现成支持中文文档友好工具栏够用不需要接触复杂的 slate 文档模型。接入后注意一件核心配套工作图片上传。编辑器插入图片有两种方案直接把图片转 base64 放进 content缺点是一篇文章会把数据库撑爆。上传到服务器/本地存储content 里只留 URL。建议用这个方案。Element Plus 的el-upload可以配合 wangEditor 做自定义上传上传接口返回 URL前端回填到编辑器。这里有个小坑上传接口的响应结构必须和 wangEditor 期望的格式一致通常是{ errno: 0, data: { url: ... } }如果不一致图片会插入失败。5.4 与后端联调的跨域问题跨域是前后端分离项目几乎必遇到的坎。开发环境下最简单的处理方式是 Vite 配置代理// vite.config.js server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }这样前端请求/api开头的地址会自动转发到后端 8080 端口浏览器看到的始终是同源请求从源头规避跨域问题。后端也可以配置 CORS但建议只在生产环境需要时再用开发环境用代理就够了。两边同时开启 CORS 和代理反而可能触发一些奇怪的预检请求问题。6. 打包部署与运行验证6.1 前端打包Vue 项目打包前先检查.env.production里的接口地址路径不要写死 localhost。打包命令npm run build产物在dist目录里面只有一个静态文件集合不依赖 Node 环境。6.2 后端构建后端打包最稳的方式是 Maven 打 jar 包mvn clean package -DskipTests如果想用外置配置可以在启动时指定java -jar forum-admin.jar --spring.profiles.activeprod注意打包时如果遇到 test 报错导致构建失败-DskipTests是跳过测试编译和运行的常用参数毕设项目通常可以不写测试类直接用这个参数跳过。6.3 本地运行与局域网访问本地跑通整套系统之后想让同学或者导师通过手机访问需要让后端监听0.0.0.0前端构建出来的静态页面放在 Nginx 或者用 Node 静态服务起一个端口。特别注意MySQL 的连接配置不能再用localhost要改成服务器的局域网 IP否则后端可以连库但别人访问不到你这个程序的联动效果。一个常见误区是只启动了后端 jar前端却还在跑npm run dev。演示给别人看时开发服务器临时用没问题但为了展示一个“可部署”的完整项目还是建议把前端 build 出来挂到 Nginx 下后端单独跑这才是真正的“前后端分离部署”。6.4 Nginx 部署方案Nginx 配置的核心就两块静态文件服务和 API 反向代理。静态文件指向dist目录/api开头的请求反代到后端端口server { listen 80; server_name your-domain.com; root /opt/forum-web/dist; index index.html; location /api { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location / { try_files $uri $uri/ /index.html; } }try_files那一行非常关键它解决的是 Vue Router history 模式下刷新页面 404 的问题。不加这一行路由/work/12刷新就直接 Nginx 404加了之后请求会回退到index.html由前端路由接管。7. 常见问题排查与避坑实录7.1 环境类问题端口占用SpringBoot 默认 8080 被占报Port already in use。Windows 下用netstat -ano | findstr 8080找到 PID任务管理器杀掉或者直接改server.port。MySQL 连接失败登录时提示Access denied先确认密码是否正确连接超时检查配置文件里的spring.datasource.url是否写对库名和时区参数serverTimezoneAsia/Shanghai。Maven 依赖下载慢阿里云镜像配好settings.xml里加mirror一次配置长期受益。数据库字符集不对出现中文乱码建库时指定utf8mb4。utf8mb4比utf8多了对 emoji 的支持强烈建议直接用前者。7.2 联调类问题前端请求 404大概率是后端 Controller 的路径和前端请求路径对不上。统一用 RESTful 风格比如/api/work/{id}前后端都用这个格式能减少大量低级错误。接口返回 500看后端控制台日志绝大部分是 SQL 语句问题或者空指针。建议开发阶段把spring.jpa.show-sql或 MyBatis 日志打开直接用日志排错。图片上传跨域图片服务器或后端上传接口和前端不在同源会报 CORS。用 Vite 代理转发上传请求图片 URL 也用相对路径避免把跨域问题带到生产。7.3 业务与性能类问题热门作品列表慢不要每次都全表扫描给work表的category_id、status、create_time建组合索引。数据量到十万级一条索引带来的性能提升非常明显。点赞并发出现负数更新like_count时要update work set like_count like_count 1 where id ?不要先查再更新否则并发下统计会错乱。文章正文太长导致列表接口变慢列表查询时只查title、cover、view_count不要把content一起查出来。MyBatis-Plus 里的select()方法可以指定只查询部分字段。7.4 后续可扩展方向如果学完这套基础版本还有余力我建议按这些方向升级每一个都能变成答辩加分项引入 Redis 做验证码存储和热门文章缓存。引入 Elasticsearch 或 MySQL 全文索引优化搜索体验。用 MinIO 或阿里云 OSS 替换本地图片存储解决服务器重启丢文件的问题。用 WebSocket 做评论消息实时通知。加入 RabbitMQ 或消息队列处理点赞、浏览这类高并发写操作。每拓展一层项目的“可挖深度”就上一个台阶导师也会觉得你有工程思维而不仅仅是会抄代码。最后再分享一个我个人的习惯项目做完之后把数据库导出 SQL、前端打包产物、后端 jar 包、部署文档整理成一个“交付包”即使半年后导师或者面试官让你再次演示你也可以在半小时内把整套环境拉起来。这个交付习惯在工作中比多写几百行代码更值钱。