简介基于SpringbootVue的高校社团管理系统毕业设计项目包面向计算机相关专业正在准备毕业设计的学生以及需要Java项目实战练习的初学者。项目已高分通过并获得导师指导覆盖社团管理、成员管理、活动发布与报名审核等典型业务模块既能直接作为毕设也可用于课程设计或期末大作业。资源共813个文件整体约27.94MB主要包括Java后端源码、Vue前端组件、JavaScript逻辑脚本、SVG/JPG/PNG图片素材以及XML配置、SQL数据库脚本和CSS样式等覆盖控制器、实体、Mapper、页面组件与静态资源等多个层级构成从前端到后端再到数据库部署的完整项目链路。项目经过严格调试附带开发说明文档、部署视频、代码讲解视频及全套运行软件并提供一键构建与运行脚本环境适配JDK1.8、MySQL5.7、Maven3.3便于在Eclipse/IDEA中快速启动与排错。目前已有48人学习适合需要完整可运行代码作参考的Java学习者。1. 高校社团管理系统这门 Java 毕设源码到底解决了什么问题每年毕业季都能看到一批做「管理系统」的 Java 毕设但说实话十个里面能跑通、能答辩、敢把代码给老师现场 review 的不到一半。这份基于 SpringBoot Vue 的高校社团管理系统属于典型的「前后端分离 权限分级 业务闭环」课程设计项目学生端能浏览社团、在线报名、查看活动社团管理员能发布活动、审核成员系统管理员负责社团审批和用户管理。如果你是正在找 Java 课设或毕设选题的在校生或者想拿一套完整项目练手 SpringBoot 和 Vue 的开发者这套源码的价值在于——代码结构规范、注释够用、业务模块能直接对着需求文档讲清楚改一改就能变成自己的东西。我拆过不少类似资源这一份的完整度算中等偏上下面我把骨架、关键实现和坑一次讲透。2. 技术栈与项目骨架SpringBoot 2.x Vue 2 的经典组合为什么最适合毕设2.1 选型理由这套技术栈为什么是毕设的「安全牌」高校社团管理系统这类项目的核心诉求只有三个字稳、清、快。稳是指技术栈成熟、资料多遇到报错一搜就有答案清是指代码分层清楚答辩时老师问你每一层在干嘛你能答得上来快是指开发效率高两周到一个月能写完。SpringBoot 负责后端接口内置 Tomcat不需要单独配服务器MyBatis Plus 做持久层单表 CRUD 几乎不用写 SQL多表查询用注解或者 XML 都行MySQL 存数据标准的关系型数据库学校机房和本地环境都好装。前端选 Vue 2 Element UI 是这套组合里最顺手的搭配——Vue 2 的选项式 API 对新手友好Element UI 的表格、表单、弹窗组件全是现成的写页面基本是在拼积木。管理端和用户端共用一个前端工程通过路由和角色权限区分入口这是毕设里常见的做法也能避免维护两个前端工程的工作量。这套组合的另一个好处是SpringBoot 和 Vue 的相关面试题、配置教程在网络上特别全。哪怕你 SpringBoot 配置不熟、Vue 安装及环境配置出了问题也能快速找到解决方案——这对赶论文、赶进度的毕业生来说是实打实的「后悔药」。2.2 工程结构与模块划分拿到源码先看这六个包解压源码后假设后端工程名是community前端工程名是community-web先把整体结构摸清楚再动手改。我的习惯是先从后端工程看起因为实体类和数据表是整套系统的地基。community/ ├── src/main/java/com/example/community/ │ ├── controller/ # 控制层接收前端请求 │ ├── service/ # 业务层接口 实现类 │ ├── mapper/ # 持久层MyBatis Plus 的 Mapper │ ├── entity/ # 实体类对应数据库表 │ ├── config/ # 配置类跨域、拦截器、MyBatis Plus 配置 │ └── common/ # 公共类返回结果封装、异常处理、工具类 ├── src/main/resources/ │ ├── mapper/ # MyBatis XML 文件复杂 SQL 放这里 │ └── application.yml # 配置文件 └── pom.xml实体类一共有多少张表直接决定了业务覆盖面。一套完整的高校社团管理系统至少需要 6 张核心表用户表学生和系统管理员、社团表、社团成员表、活动表、报名表、公告表。如果还有社团分类、活动分类、审核记录那项目完整度就更高了。2.3 数据库设计先看表结构再动代码数据库脚本一般放在sql/community.sql或db/init.sql中用 Navicat 或命令行导入即可。导入后建议先看三张核心表的字段设计表名核心字段说明sys_userid, username, password, role, student_no, real_namerole 区分学生 / 社团管理员 / 系统管理员clubid, club_name, category, president_id, description, statusstatus 控制社团是否通过审核activityid, club_id, title, start_time, location, max_participants, status报名人数不能超过 max_participants注意密码字段如果用的是 MD5 或 BCrypt要去application.yml里看加密方式。改用户数据时也要用相同方式加密否则登录直接报密码错误这属于最常见的翻车点之一。3. 后端实现三层架构、权限控制与六个核心接口3.1 统一返回格式与异常处理让你的接口不「裸奔」打开任何一个 Controller你会发现所有接口都返回同一个包装类Result。这个类的作用是把 状态码、消息、数据 包在一起前端 axios 统一从这个结构里取数据。这是个看似简单但很关键的设计——如果每个接口返回结构都不一样前端写起来会非常痛苦。Data public class ResultT { private Integer code; // 200 成功400 业务错误401 未登录403 无权限 private String message; // 给前端提示的信息 private T data; // 实际数据 public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(操作成功); result.setData(data); return result; } public static T ResultT error(String message) { ResultT result new Result(); result.setCode(400); result.setMessage(message); return result; } }代码逻辑很简单success静态方法包装成功数据error包装错误消息。这样 Controller 里写return Result.success(list)或return Result.error(社团名称已存在)就够了。参数说明code是前端判断逻辑分支的关键依据axios 响应拦截器里一般只判断code 200才走到页面逻辑其他情况直接弹 message。你如果要在这套代码上加业务逻辑记得复用这个包装类而不是新建一个。3.2 登录认证与权限控制拦截器 JWT 的常见组合毕设级系统的权限控制不用做太复杂Spring Security 对新手来说配置成本太高搞不好就把自己绕晕了。更常见的做法是登录成功后后端签发一个 JWT token前端存在 localStorage 里每次请求在 Header 带上Authorization: Bearer token后端用一个拦截器校验 token 并识别当前用户角色。Component public class JwtInterceptor implements HandlerInterceptor { Autowired private StringRedisTemplate redisTemplate; Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 放行登录接口避免死循环拦截 if (request.getRequestURI().contains(/auth/login)) { return true; } String token request.getHeader(Authorization); if (token null || token.isEmpty()) { throw new BusinessException(401, 未登录); } // 从 token 中解析用户信息存入 request 上下文 Claims claims JwtUtil.parseToken(token.replace(Bearer , )); Long userId claims.get(userId, Long.class); request.setAttribute(userId, userId); return true; } }代码逻辑说明拦截器先放行登录相关的 URI否则会形成「要登录才能调登录接口」的死循环。之后从请求头取 token用JwtUtil解析解析失败就抛 401 异常。解析成功后把 userId 塞到 request 属性里后续业务代码通过request.getAttribute(userId)获取当前操作人。参数说明如果你改了登录逻辑注意 token 的有效期配置在application.yml里的jwt.expire单位一般是秒。修改这个值后要重启后端而且前端已经登录的用户 token 不会失效——要做强制的主动退出或踢人功能需要结合 Redis 做黑名单或版本号方案毕设阶段一般不用。3.3 核心接口实现社团管理的 CRUD 到业务状态流转后端最有代表性的接口是「创建社团」和「审核社团」。前者是业务写入后者是状态流转两者都体现了这套系统里最重要的一个概念社团不能随便创建必须经过系统管理员审核才能在前台展示。Service public class ClubServiceImpl extends ServiceImplClubMapper, Club implements ClubService { Override public Result? createClub(ClubDTO dto, Long userId) { // 1. 校验社团名称是否重复 Long count this.lambdaQuery() .eq(Club::getClubName, dto.getClubName()) .count(); if (count 0) { return Result.error(社团名称已存在); } // 2. 初始化社团状态为 0待审核 Club club new Club(); BeanUtils.copyProperties(dto, club); club.setPresidentId(userId); club.setStatus(0); this.save(club); return Result.success(club.getId()); } }代码逻辑第一步先查重保证同一学校内社团名称唯一第二步把前端传入的数据拷贝到实体类里手动设置社长 ID 和初始状态。status 0是整个流程的关键——前端用户端列表页会过滤掉非 1 的社团所以新创建的社团不会立刻出现在前台。审核接口的逻辑则相反系统管理员把status从 0 改成 1或者改成 2驳回。这是一种极简的状态机毕设答辩时你可以把它往「业务闭环」方向讲——用户提交申请、管理员审核、前端展示形成一个完整链路。4. 前端实现Vue 路由与 Axios 封装把页面和后端串起来4.1 环境准备与工程启动Vue 安装依赖的正确姿势拿到前端工程后第一步不是改代码而是先把环境跑通。前端工程基于 Vue CLI 创建Node 版本建议 14 ~ 16Vue 2 配 Node 18 以上容易在 node-sass 上翻车建议直接用 npm 安装依赖。# 进入前端工程目录 cd community-web # 安装依赖国内网络建议配淘宝镜像否则容易卡在 node-sass 下载 npm install --registryhttps://registry.npmmirror.com # 启动开发服务器默认端口 8080 npm run serve参数说明--registry参数指定 npm 镜像源解决依赖下载慢或失败的问题。如果npm install报 node-sass 相关的错大概率是 Node 版本太高用 nvm 切换到 Node 14 或 16 再试。启动成功后浏览器访问http://localhost:8080如果页面出来了但接口报 404那才是后端或跨域的问题——前端能起来已经是第一步胜利。4.2 axios 封装与请求拦截让所有接口统一走一个入口前端工程里src/utils/request.js是统一的 axios 实例。这个文件几乎不用改但你必须理解它做了什么否则后端接口地址怎么配、token 怎么带、错误提示怎么弹全都会一头雾水。import axios from axios import { Message } from element-ui // 创建 axios 实例 const service axios.create({ baseURL: /api, // 所有请求带 /api 前缀后端通过 context-path 或 nginx 转发 timeout: 10000 // 10 秒超时避免接口卡死无响应 }) // 请求拦截器每次请求自动带上 token service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token } return config }) // 响应拦截器统一处理返回码 service.interceptors.response.use( response { const res response.data if (res.code ! 200) { Message.error(res.message) return Promise.reject(new Error(res.message)) } return res.data }, error { Message.error(error.response?.data?.message || 网络异常) return Promise.reject(error) } ) export default service代码逻辑说明baseURL: /api是个伏笔——如果后端没配 context-path那么前端请求/api/club/list会被转发到后端http://localhost:8080/api/club/list此时需要后端在配置里加server.servlet.context-path: /api或者用开发代理把/api前缀去掉。这个约定不同项目不一样但你要知道 token 是在请求拦截器里统一的业务代码里不需要重复写。提示响应拦截器里res.data就是后端Result里的data字段所以业务代码拿到的直接是数据而不是包装对象。如果你在页面里拿不到列表数据先打印一下拦截器返回值看看是不是res.data取多了或取少了。4.3 路由权限与导航守卫用户端和管理端的页面隔离前端路由在src/router/index.js里配置。核心思路是用户端路由社团列表、活动列表、个人中心和管理端路由社团审核、用户管理放在不同的 meta 下通过路由守卫判断角色。{ path: /admin, component: Layout, meta: { role: ADMIN }, children: [ { path: clubs, name: AdminClubs, component: () import(/views/admin/ClubManage.vue), meta: { title: 社团审核, role: ADMIN } } ] }router.beforeEach((to, from, next) { const token localStorage.getItem(token) const role localStorage.getItem(role) if (to.meta.role to.meta.role ! role) { next(/403) // 角色不匹配跳转无权限页 } else if (!token to.path ! /login) { next(/login) // 未登录跳到登录页 } else { next() // 放行 } })代码逻辑说明meta.role标记该路由需要的角色导航守卫在跳转前检查本地存储的 role 是否匹配。这样学生用户就算手敲/admin/clubs地址也进不去管理页——前端层面的权限控制已经生效后端拦截器做最后一道防线。这里要注意 role 的 key 必须和后端登录接口返回的字段一致否则永远跳 /403。5. 避坑记录跨域、环境变量与数据初始化的五条经验5.1 后端接口跨域Vue 页面能打开但列表数据死活不出来现象前端npm run serve正常启动页面渲染出来了但所有列表都是空的打开浏览器 F12 看到 CORS 报错No Access-Control-Allow-Origin header is present on the requested resource。原因前后端分离项目前端跑在http://localhost:8080后端跑在http://localhost:8081浏览器默认阻止跨域请求。但你以为后端配了跨域就没事——实际上很多毕设代码的跨域配置类只注解了某个 Controller 或某个请求路径没做全局配置。解决在后端工程里加一个全局跨域配置类继承WebMvcConfigurer重写addCorsMappings方法下面这段是通用写法Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(http://localhost:8080) // 允许前端的地址 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true); } }参数说明allowedOrigins写死前端开发服务器地址即可不要用*加allowCredentials(true)否则浏览器依然会拒绝。改完后重启后端再刷新前端页面列表数据应该就能出来了。5.2 前端改了接口地址但页面还是加载旧数据现象修改了request.js里的baseURL或后端的端口号重启前后端后请求仍然是旧地址抓包看到还是 8080。原因vue.config.js 里的 devServer.proxy 代理缓存或者浏览器缓存了旧的编译结果。最隐蔽的是第一种——你在request.js里改了baseURL: /api但 vue.config.js 的代理把/api转到了别的端口。解决检查前端工程根目录下的vue.config.js确认代理配置module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, // 后端实际端口 changeOrigin: true, pathRewrite: { ^/api: } // 去掉 /api 前缀 } } } }如果你的后端配置了context-path: /api那pathRewrite这行就要去掉或者改成不重写。这个坑非常隐蔽——前端和后端同时配了/api请求就变成了/api/api/xxxx接口 404。5.3 数据库导入后社团列表是空的但 sys_user 有数据现象用 Navicat 导入了community.sql登录成功了但社团列表、活动列表全是空的看起来像没初始化数据。原因看这张表的 status 字段。如果初始数据的 status 是 0待审核而用户端列表查询条件是status 1那前台一定看不到数据——不是 bug是业务规则如此。解决打开数据库执行下面这条 SQL把已有社团状态改为已审核UPDATE club SET status 1 WHERE status 0;另外检查一下activity表的club_id是否对应club表里存在的 ID外键关联不一致也会导致联表查询查不到数据。毕设的 SQL 脚本一般会带测试数据但执行顺序和状态值经常对不上。5.4 登录一直提示用户名或密码错误数据库里明明有账号现象用管理员账号登录前端一直提示「用户名或密码错误」在数据库里查这条记录又能看到。原因前端传给后端的密码是明文但数据库存的是加密后的字符串。如果你用 SQL 直接INSERT INTO sys_user插了一条测试用户密码没有加密那登录校验必然失败。解决不要直接手插数据改用系统自带的注册接口去注册用户让后端走一遍密码加密逻辑。如果只是改已有账号的密码用后端工具类生成加密值再 UPDATE// 在临时测试类中调用获取加密后的密码 String encodedPwd PasswordUtil.encode(123456); System.out.println(encodedPwd); // 用输出结果执行 UPDATE // UPDATE sys_user SET password output_from_console WHERE username admin;提示有些毕设代码用的是 MD5 加盐有些是 BCrypt加密方式不同生成的密文格式也不同。别看到密文不长就以为是 MD5先去看PasswordUtil的实现。5.5 Vue 依赖安装时报 ERESOLVE 错误卡在依赖树上现象npm install执行到一半直接失败报错信息里有ERESOLVE unable to resolve dependency tree。原因Node 版本太新Node 17npm 默认的依赖解析策略和 Vue 2 老项目的依赖树不兼容。这不是代码问题是环境问题。解决一条命令降级 npm 的解析策略npm install --legacy-peer-deps如果还不行建议直接用 nvm 切到 Node 14 或 16 再装。我拆过的 Vue 2 毕设项目至少三分之一会在这步卡住解决之后就是一路顺畅。6. 部署验证本地跑通到打包上线的关键节点毕设只要能提交演示视频或现场跑通部署这事不需要搞得很花哨。但有几个节点值得在答辩前完整走一遍我每次拿到这类项目都会强制自己过一遍这套流程免得答辩现场设备掉了链子。第一后端打成 jar 包后先验证能否独立运行。在项目根目录执行mvn clean package -DskipTests然后java -jar target/community-0.0.1-SNAPSHOT.jar --server.port8081浏览器访问 Swagger 或直接请求一个 GET 接口确认服务活着。如果直接启动失败大概率是application.yml里的数据库密码没改成你本机的密码。第二前端打包后用 Nginx 托管。执行npm run build生成dist/目录Nginx 配置里把location /指向dist文件夹location /api反向代理到后端地址server { listen 80; server_name localhost; root /home/ubuntu/community-web/dist; index index.html; location /api { proxy_pass http://localhost:8081; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }第三验证访问路径。前端通过 Nginx 访问接口通过 Nginx 转发到后端前后端完全解耦。答辩时只要把后端 jar 包跑起来、Nginx 启动整个系统就能稳定演示。从那以后我每次拿到新的毕设项目都强制走一遍 jar 包启动和 Nginx 静态托管这套流程不把「在 IDEA 里能跑」当成「一定能演示」希望这篇拆解能帮你在提交前少折腾几个晚上。本文还有配套的精品资源点击获取 SpringBoot+Vue高校社团管理系统：Java毕设源码解析与避坑指南
简介基于SpringbootVue的高校社团管理系统毕业设计项目包面向计算机相关专业正在准备毕业设计的学生以及需要Java项目实战练习的初学者。项目已高分通过并获得导师指导覆盖社团管理、成员管理、活动发布与报名审核等典型业务模块既能直接作为毕设也可用于课程设计或期末大作业。资源共813个文件整体约27.94MB主要包括Java后端源码、Vue前端组件、JavaScript逻辑脚本、SVG/JPG/PNG图片素材以及XML配置、SQL数据库脚本和CSS样式等覆盖控制器、实体、Mapper、页面组件与静态资源等多个层级构成从前端到后端再到数据库部署的完整项目链路。项目经过严格调试附带开发说明文档、部署视频、代码讲解视频及全套运行软件并提供一键构建与运行脚本环境适配JDK1.8、MySQL5.7、Maven3.3便于在Eclipse/IDEA中快速启动与排错。目前已有48人学习适合需要完整可运行代码作参考的Java学习者。1. 高校社团管理系统这门 Java 毕设源码到底解决了什么问题每年毕业季都能看到一批做「管理系统」的 Java 毕设但说实话十个里面能跑通、能答辩、敢把代码给老师现场 review 的不到一半。这份基于 SpringBoot Vue 的高校社团管理系统属于典型的「前后端分离 权限分级 业务闭环」课程设计项目学生端能浏览社团、在线报名、查看活动社团管理员能发布活动、审核成员系统管理员负责社团审批和用户管理。如果你是正在找 Java 课设或毕设选题的在校生或者想拿一套完整项目练手 SpringBoot 和 Vue 的开发者这套源码的价值在于——代码结构规范、注释够用、业务模块能直接对着需求文档讲清楚改一改就能变成自己的东西。我拆过不少类似资源这一份的完整度算中等偏上下面我把骨架、关键实现和坑一次讲透。2. 技术栈与项目骨架SpringBoot 2.x Vue 2 的经典组合为什么最适合毕设2.1 选型理由这套技术栈为什么是毕设的「安全牌」高校社团管理系统这类项目的核心诉求只有三个字稳、清、快。稳是指技术栈成熟、资料多遇到报错一搜就有答案清是指代码分层清楚答辩时老师问你每一层在干嘛你能答得上来快是指开发效率高两周到一个月能写完。SpringBoot 负责后端接口内置 Tomcat不需要单独配服务器MyBatis Plus 做持久层单表 CRUD 几乎不用写 SQL多表查询用注解或者 XML 都行MySQL 存数据标准的关系型数据库学校机房和本地环境都好装。前端选 Vue 2 Element UI 是这套组合里最顺手的搭配——Vue 2 的选项式 API 对新手友好Element UI 的表格、表单、弹窗组件全是现成的写页面基本是在拼积木。管理端和用户端共用一个前端工程通过路由和角色权限区分入口这是毕设里常见的做法也能避免维护两个前端工程的工作量。这套组合的另一个好处是SpringBoot 和 Vue 的相关面试题、配置教程在网络上特别全。哪怕你 SpringBoot 配置不熟、Vue 安装及环境配置出了问题也能快速找到解决方案——这对赶论文、赶进度的毕业生来说是实打实的「后悔药」。2.2 工程结构与模块划分拿到源码先看这六个包解压源码后假设后端工程名是community前端工程名是community-web先把整体结构摸清楚再动手改。我的习惯是先从后端工程看起因为实体类和数据表是整套系统的地基。community/ ├── src/main/java/com/example/community/ │ ├── controller/ # 控制层接收前端请求 │ ├── service/ # 业务层接口 实现类 │ ├── mapper/ # 持久层MyBatis Plus 的 Mapper │ ├── entity/ # 实体类对应数据库表 │ ├── config/ # 配置类跨域、拦截器、MyBatis Plus 配置 │ └── common/ # 公共类返回结果封装、异常处理、工具类 ├── src/main/resources/ │ ├── mapper/ # MyBatis XML 文件复杂 SQL 放这里 │ └── application.yml # 配置文件 └── pom.xml实体类一共有多少张表直接决定了业务覆盖面。一套完整的高校社团管理系统至少需要 6 张核心表用户表学生和系统管理员、社团表、社团成员表、活动表、报名表、公告表。如果还有社团分类、活动分类、审核记录那项目完整度就更高了。2.3 数据库设计先看表结构再动代码数据库脚本一般放在sql/community.sql或db/init.sql中用 Navicat 或命令行导入即可。导入后建议先看三张核心表的字段设计表名核心字段说明sys_userid, username, password, role, student_no, real_namerole 区分学生 / 社团管理员 / 系统管理员clubid, club_name, category, president_id, description, statusstatus 控制社团是否通过审核activityid, club_id, title, start_time, location, max_participants, status报名人数不能超过 max_participants注意密码字段如果用的是 MD5 或 BCrypt要去application.yml里看加密方式。改用户数据时也要用相同方式加密否则登录直接报密码错误这属于最常见的翻车点之一。3. 后端实现三层架构、权限控制与六个核心接口3.1 统一返回格式与异常处理让你的接口不「裸奔」打开任何一个 Controller你会发现所有接口都返回同一个包装类Result。这个类的作用是把 状态码、消息、数据 包在一起前端 axios 统一从这个结构里取数据。这是个看似简单但很关键的设计——如果每个接口返回结构都不一样前端写起来会非常痛苦。Data public class ResultT { private Integer code; // 200 成功400 业务错误401 未登录403 无权限 private String message; // 给前端提示的信息 private T data; // 实际数据 public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(操作成功); result.setData(data); return result; } public static T ResultT error(String message) { ResultT result new Result(); result.setCode(400); result.setMessage(message); return result; } }代码逻辑很简单success静态方法包装成功数据error包装错误消息。这样 Controller 里写return Result.success(list)或return Result.error(社团名称已存在)就够了。参数说明code是前端判断逻辑分支的关键依据axios 响应拦截器里一般只判断code 200才走到页面逻辑其他情况直接弹 message。你如果要在这套代码上加业务逻辑记得复用这个包装类而不是新建一个。3.2 登录认证与权限控制拦截器 JWT 的常见组合毕设级系统的权限控制不用做太复杂Spring Security 对新手来说配置成本太高搞不好就把自己绕晕了。更常见的做法是登录成功后后端签发一个 JWT token前端存在 localStorage 里每次请求在 Header 带上Authorization: Bearer token后端用一个拦截器校验 token 并识别当前用户角色。Component public class JwtInterceptor implements HandlerInterceptor { Autowired private StringRedisTemplate redisTemplate; Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 放行登录接口避免死循环拦截 if (request.getRequestURI().contains(/auth/login)) { return true; } String token request.getHeader(Authorization); if (token null || token.isEmpty()) { throw new BusinessException(401, 未登录); } // 从 token 中解析用户信息存入 request 上下文 Claims claims JwtUtil.parseToken(token.replace(Bearer , )); Long userId claims.get(userId, Long.class); request.setAttribute(userId, userId); return true; } }代码逻辑说明拦截器先放行登录相关的 URI否则会形成「要登录才能调登录接口」的死循环。之后从请求头取 token用JwtUtil解析解析失败就抛 401 异常。解析成功后把 userId 塞到 request 属性里后续业务代码通过request.getAttribute(userId)获取当前操作人。参数说明如果你改了登录逻辑注意 token 的有效期配置在application.yml里的jwt.expire单位一般是秒。修改这个值后要重启后端而且前端已经登录的用户 token 不会失效——要做强制的主动退出或踢人功能需要结合 Redis 做黑名单或版本号方案毕设阶段一般不用。3.3 核心接口实现社团管理的 CRUD 到业务状态流转后端最有代表性的接口是「创建社团」和「审核社团」。前者是业务写入后者是状态流转两者都体现了这套系统里最重要的一个概念社团不能随便创建必须经过系统管理员审核才能在前台展示。Service public class ClubServiceImpl extends ServiceImplClubMapper, Club implements ClubService { Override public Result? createClub(ClubDTO dto, Long userId) { // 1. 校验社团名称是否重复 Long count this.lambdaQuery() .eq(Club::getClubName, dto.getClubName()) .count(); if (count 0) { return Result.error(社团名称已存在); } // 2. 初始化社团状态为 0待审核 Club club new Club(); BeanUtils.copyProperties(dto, club); club.setPresidentId(userId); club.setStatus(0); this.save(club); return Result.success(club.getId()); } }代码逻辑第一步先查重保证同一学校内社团名称唯一第二步把前端传入的数据拷贝到实体类里手动设置社长 ID 和初始状态。status 0是整个流程的关键——前端用户端列表页会过滤掉非 1 的社团所以新创建的社团不会立刻出现在前台。审核接口的逻辑则相反系统管理员把status从 0 改成 1或者改成 2驳回。这是一种极简的状态机毕设答辩时你可以把它往「业务闭环」方向讲——用户提交申请、管理员审核、前端展示形成一个完整链路。4. 前端实现Vue 路由与 Axios 封装把页面和后端串起来4.1 环境准备与工程启动Vue 安装依赖的正确姿势拿到前端工程后第一步不是改代码而是先把环境跑通。前端工程基于 Vue CLI 创建Node 版本建议 14 ~ 16Vue 2 配 Node 18 以上容易在 node-sass 上翻车建议直接用 npm 安装依赖。# 进入前端工程目录 cd community-web # 安装依赖国内网络建议配淘宝镜像否则容易卡在 node-sass 下载 npm install --registryhttps://registry.npmmirror.com # 启动开发服务器默认端口 8080 npm run serve参数说明--registry参数指定 npm 镜像源解决依赖下载慢或失败的问题。如果npm install报 node-sass 相关的错大概率是 Node 版本太高用 nvm 切换到 Node 14 或 16 再试。启动成功后浏览器访问http://localhost:8080如果页面出来了但接口报 404那才是后端或跨域的问题——前端能起来已经是第一步胜利。4.2 axios 封装与请求拦截让所有接口统一走一个入口前端工程里src/utils/request.js是统一的 axios 实例。这个文件几乎不用改但你必须理解它做了什么否则后端接口地址怎么配、token 怎么带、错误提示怎么弹全都会一头雾水。import axios from axios import { Message } from element-ui // 创建 axios 实例 const service axios.create({ baseURL: /api, // 所有请求带 /api 前缀后端通过 context-path 或 nginx 转发 timeout: 10000 // 10 秒超时避免接口卡死无响应 }) // 请求拦截器每次请求自动带上 token service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token } return config }) // 响应拦截器统一处理返回码 service.interceptors.response.use( response { const res response.data if (res.code ! 200) { Message.error(res.message) return Promise.reject(new Error(res.message)) } return res.data }, error { Message.error(error.response?.data?.message || 网络异常) return Promise.reject(error) } ) export default service代码逻辑说明baseURL: /api是个伏笔——如果后端没配 context-path那么前端请求/api/club/list会被转发到后端http://localhost:8080/api/club/list此时需要后端在配置里加server.servlet.context-path: /api或者用开发代理把/api前缀去掉。这个约定不同项目不一样但你要知道 token 是在请求拦截器里统一的业务代码里不需要重复写。提示响应拦截器里res.data就是后端Result里的data字段所以业务代码拿到的直接是数据而不是包装对象。如果你在页面里拿不到列表数据先打印一下拦截器返回值看看是不是res.data取多了或取少了。4.3 路由权限与导航守卫用户端和管理端的页面隔离前端路由在src/router/index.js里配置。核心思路是用户端路由社团列表、活动列表、个人中心和管理端路由社团审核、用户管理放在不同的 meta 下通过路由守卫判断角色。{ path: /admin, component: Layout, meta: { role: ADMIN }, children: [ { path: clubs, name: AdminClubs, component: () import(/views/admin/ClubManage.vue), meta: { title: 社团审核, role: ADMIN } } ] }router.beforeEach((to, from, next) { const token localStorage.getItem(token) const role localStorage.getItem(role) if (to.meta.role to.meta.role ! role) { next(/403) // 角色不匹配跳转无权限页 } else if (!token to.path ! /login) { next(/login) // 未登录跳到登录页 } else { next() // 放行 } })代码逻辑说明meta.role标记该路由需要的角色导航守卫在跳转前检查本地存储的 role 是否匹配。这样学生用户就算手敲/admin/clubs地址也进不去管理页——前端层面的权限控制已经生效后端拦截器做最后一道防线。这里要注意 role 的 key 必须和后端登录接口返回的字段一致否则永远跳 /403。5. 避坑记录跨域、环境变量与数据初始化的五条经验5.1 后端接口跨域Vue 页面能打开但列表数据死活不出来现象前端npm run serve正常启动页面渲染出来了但所有列表都是空的打开浏览器 F12 看到 CORS 报错No Access-Control-Allow-Origin header is present on the requested resource。原因前后端分离项目前端跑在http://localhost:8080后端跑在http://localhost:8081浏览器默认阻止跨域请求。但你以为后端配了跨域就没事——实际上很多毕设代码的跨域配置类只注解了某个 Controller 或某个请求路径没做全局配置。解决在后端工程里加一个全局跨域配置类继承WebMvcConfigurer重写addCorsMappings方法下面这段是通用写法Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(http://localhost:8080) // 允许前端的地址 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true); } }参数说明allowedOrigins写死前端开发服务器地址即可不要用*加allowCredentials(true)否则浏览器依然会拒绝。改完后重启后端再刷新前端页面列表数据应该就能出来了。5.2 前端改了接口地址但页面还是加载旧数据现象修改了request.js里的baseURL或后端的端口号重启前后端后请求仍然是旧地址抓包看到还是 8080。原因vue.config.js 里的 devServer.proxy 代理缓存或者浏览器缓存了旧的编译结果。最隐蔽的是第一种——你在request.js里改了baseURL: /api但 vue.config.js 的代理把/api转到了别的端口。解决检查前端工程根目录下的vue.config.js确认代理配置module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, // 后端实际端口 changeOrigin: true, pathRewrite: { ^/api: } // 去掉 /api 前缀 } } } }如果你的后端配置了context-path: /api那pathRewrite这行就要去掉或者改成不重写。这个坑非常隐蔽——前端和后端同时配了/api请求就变成了/api/api/xxxx接口 404。5.3 数据库导入后社团列表是空的但 sys_user 有数据现象用 Navicat 导入了community.sql登录成功了但社团列表、活动列表全是空的看起来像没初始化数据。原因看这张表的 status 字段。如果初始数据的 status 是 0待审核而用户端列表查询条件是status 1那前台一定看不到数据——不是 bug是业务规则如此。解决打开数据库执行下面这条 SQL把已有社团状态改为已审核UPDATE club SET status 1 WHERE status 0;另外检查一下activity表的club_id是否对应club表里存在的 ID外键关联不一致也会导致联表查询查不到数据。毕设的 SQL 脚本一般会带测试数据但执行顺序和状态值经常对不上。5.4 登录一直提示用户名或密码错误数据库里明明有账号现象用管理员账号登录前端一直提示「用户名或密码错误」在数据库里查这条记录又能看到。原因前端传给后端的密码是明文但数据库存的是加密后的字符串。如果你用 SQL 直接INSERT INTO sys_user插了一条测试用户密码没有加密那登录校验必然失败。解决不要直接手插数据改用系统自带的注册接口去注册用户让后端走一遍密码加密逻辑。如果只是改已有账号的密码用后端工具类生成加密值再 UPDATE// 在临时测试类中调用获取加密后的密码 String encodedPwd PasswordUtil.encode(123456); System.out.println(encodedPwd); // 用输出结果执行 UPDATE // UPDATE sys_user SET password output_from_console WHERE username admin;提示有些毕设代码用的是 MD5 加盐有些是 BCrypt加密方式不同生成的密文格式也不同。别看到密文不长就以为是 MD5先去看PasswordUtil的实现。5.5 Vue 依赖安装时报 ERESOLVE 错误卡在依赖树上现象npm install执行到一半直接失败报错信息里有ERESOLVE unable to resolve dependency tree。原因Node 版本太新Node 17npm 默认的依赖解析策略和 Vue 2 老项目的依赖树不兼容。这不是代码问题是环境问题。解决一条命令降级 npm 的解析策略npm install --legacy-peer-deps如果还不行建议直接用 nvm 切到 Node 14 或 16 再装。我拆过的 Vue 2 毕设项目至少三分之一会在这步卡住解决之后就是一路顺畅。6. 部署验证本地跑通到打包上线的关键节点毕设只要能提交演示视频或现场跑通部署这事不需要搞得很花哨。但有几个节点值得在答辩前完整走一遍我每次拿到这类项目都会强制自己过一遍这套流程免得答辩现场设备掉了链子。第一后端打成 jar 包后先验证能否独立运行。在项目根目录执行mvn clean package -DskipTests然后java -jar target/community-0.0.1-SNAPSHOT.jar --server.port8081浏览器访问 Swagger 或直接请求一个 GET 接口确认服务活着。如果直接启动失败大概率是application.yml里的数据库密码没改成你本机的密码。第二前端打包后用 Nginx 托管。执行npm run build生成dist/目录Nginx 配置里把location /指向dist文件夹location /api反向代理到后端地址server { listen 80; server_name localhost; root /home/ubuntu/community-web/dist; index index.html; location /api { proxy_pass http://localhost:8081; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }第三验证访问路径。前端通过 Nginx 访问接口通过 Nginx 转发到后端前后端完全解耦。答辩时只要把后端 jar 包跑起来、Nginx 启动整个系统就能稳定演示。从那以后我每次拿到新的毕设项目都强制走一遍 jar 包启动和 Nginx 静态托管这套流程不把「在 IDEA 里能跑」当成「一定能演示」希望这篇拆解能帮你在提交前少折腾几个晚上。本文还有配套的精品资源点击获取