简介这是一套面向计算机专业本科生及初级Java开发者的毕业设计实战项目源码聚焦高校毕业论文/设计全流程管理场景提供从选题申报、导师分配、进度跟踪到文档提交的完整功能闭环。资源基于SpringBoot后端框架与SSM技术栈构建集成MySQL持久层与Redis缓存提升并发性能采用前后端分离架构便于学习现代Web开发工程实践。压缩包共634个文件含100个JavaScript交互逻辑文件、258个CSS样式资源、181张PNG/GIF界面素材、55个核心Java业务类及配套SQL建表脚本、HTML页面模板等整体仅2.8MB轻量易部署。目前已有1669人学习下载代码结构清晰、注释规范附带完整数据库脚本与基础配置说明适合用于课程设计参考、毕设二次开发或SpringBootRedis整合实践训练。1. 为什么用 SpringBoot Vue 做毕业论文管理系统比直接套模板多赚3个答辩加分点这不是一个“Java Web 课设交差项目”而是一套能真实跑在实验室服务器、被导师当面演示、学生自己能维护半年以上的生产级轻量管理系统。它解决的不是“怎么把论文列表塞进网页”而是学生提交后自动校验格式Word/PDF/查重报告、导师批注留痕不可篡改、多角色权限隔离教务员/导师/学生/管理员、答辩进度可视化看板、导出符合学校盖章要求的归档PDF——这些细节才是答辩时老师盯着问“你这个系统怎么保证数据不丢”“学生改了论文你怎么知道”的底气来源。适合计算机、软件工程、信息管理类专业学生尤其推荐给想靠毕设项目拿下实习offer的同学SpringBoot 提供稳定后端骨架Vue3 Element Plus 构建响应式后台前后端完全解耦部署时 Nginx 静态托管前端、Tomcat 运行后端连学校机房那台老款 Dell R720 都能扛住 50 人并发提交。别再用 JSPServlet 写完就扔的“一次性系统”这套架构现在企业招聘 Java 开发岗80% 的 JD 明确写“熟悉 SpringBoot Vue 前后端分离开发”。2. 搭建最小可运行骨架从零初始化 SpringBoot 后端与 Vue3 前端2.1 初始化 SpringBoot 后端JDK17 SpringBoot 2.7.18提示必须用 JDK17SpringBoot 2.7.x 是最后一个支持 JDK17 的 2.x 版本且兼容性远好于 3.x避免 Jakarta EE9 包名迁移带来的 XML 配置崩溃。# 使用 Spring Initializr CLI或访问 start.spring.io 网页 # 选中依赖Spring Web、MyBatis Framework、MySQL Driver、Lombok、Validation、Spring Boot DevTools # 生成项目后修改 pom.xml 中的 spring-boot-starter-parent 版本为 2.7.18关键配置application.ymlspring: datasource: url: jdbc:mysql://localhost:3306/thesis_db?useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver servlet: context-path: /api # 所有后端接口统一加 /api 前缀避免与前端路由冲突 mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true server: port: 8080逻辑说明context-path: /api是前后端分离的生命线——前端 Axios 默认 baseURL 设为/api所有请求自动拼接避免跨域代理失效map-underscore-to-camel-case: true让数据库字段student_id自动映射到 Java 实体类studentId省去Results手动映射MySQL URL 中allowPublicKeyRetrievaltrue是 MySQL 8.0 必加参数否则连接直接抛Public Key Retrieval is not allowed异常。2.2 初始化 Vue3 前端Vue CLI 5.0.8 Element Plus# 全局安装 Vue CLI确保 Node.js ≥ 16.0 npm install -g vue/cli5.0.8 vue create thesis-frontend # 选择 Manually select features → 勾选 TypeScript、Router、Vuex、CSS Pre-processorsSass、Linter cd thesis-frontend npm install element-plus2.3.4 --save # 固定版本Element Plus 2.3.x 是 Vue3 Composition API 最稳版本 npm install axios1.6.7 --save关键配置vue.config.js解决开发期跨域module.exports { devServer: { proxy: { /api: { target: http://localhost:8080, // 后端地址 changeOrigin: true, pathRewrite: { ^/api: // 把 /api 前缀去掉再转发后端已配 context-path无需重复 } } } } }逻辑说明pathRewrite: {^/api: }是唯一正确写法前端请求/api/student/list代理后变成http://localhost:8080/student/list与后端RequestMapping(/student)完全匹配不要用/api/*或/api/**Vue CLI 5 的 proxy 对通配符支持不稳定实测^/api正则最可靠Element Plus 版本锁死2.3.4高版本如 2.7对el-table的row-key和expand-row-keys支持存在渲染 bug会导致答辩名单展开异常。3. 核心业务模块落地论文状态机驱动的流程闭环设计3.1 论文状态流转模型7 个状态 4 类角色操作权限毕业论文不是静态文档而是一个带生命周期的状态机。我们定义以下状态对应数据库thesis.status字段状态码状态名可触发角色触发动作数据库约束0待提交学生上传初稿file_path IS NOT NULL1导师审核中学生→导师导师点击“开始审核”reviewer_id必填2退回修改导师填写意见并退回reject_reason非空3通过初审导师点击“同意”first_review_time记录时间4教务复核中导师→教务员提交至教务处dept_id关联院系表5复核不通过教务员填写复核意见recheck_opinion非空6归档完成教务员生成归档PDF并封存archive_pdf_path不为空注意状态变更必须走UPDATE thesis SET status ? WHERE id ? AND status ?乐观锁防止学生刷新页面重复提交。3.2 学生端论文提交接口含 Word 格式校验后端 Controller 层关键代码PostMapping(/student/submit) public ResultString submitThesis(RequestParam(file) MultipartFile file, RequestParam(title) String title, RequestParam(teacherId) Long teacherId, HttpServletRequest request) { // 1. 文件基础校验 if (file.isEmpty()) return Result.fail(文件不能为空); String originalFilename file.getOriginalFilename(); if (!originalFilename.endsWith(.docx) !originalFilename.endsWith(.pdf)) { return Result.fail(仅支持 .docx 或 .pdf 格式); } // 2. Word 格式深度校验使用 Apache POI if (originalFilename.endsWith(.docx)) { try (XWPFDocument doc new XWPFDocument(file.getInputStream())) { // 检查是否含封面页标题字体需为黑体小二 XWPFParagraph coverPara doc.getParagraphs().get(0); if (coverPara null || !coverPara.getText().contains(title)) { return Result.fail(封面页未检测到论文标题请按模板填写); } } catch (Exception e) { return Result.fail(Word 文件损坏无法解析); } } // 3. 保存文件到磁盘非数据库 BLOB String uploadPath /opt/thesis/uploads/; String fileName System.currentTimeMillis() _ originalFilename; File dest new File(uploadPath fileName); file.transferTo(dest); // 4. 插入数据库 Thesis thesis new Thesis(); thesis.setStudentId(getCurrentUserId(request)); thesis.setTitle(title); thesis.setFileUrl(/uploads/ fileName); // 前端访问路径 thesis.setStatus(0); // 待提交 thesis.setTeacherId(teacherId); thesisMapper.insert(thesis); return Result.success(提交成功等待导师审核); }逻辑说明绝不存 BLOB大文件存数据库会拖垮 MySQL 性能且备份恢复极慢。/uploads/目录需在 Nginx 中配置静态映射见第 5 章Word 校验用XWPFDocument而非HWPFDocument后者只支持 .doc.docx解析成功率 99%.pdf仅做后缀校验PDF 文本提取成本高答辩前由教务人工抽检getCurrentUserId()从 JWT Token 解析非 Session这是前后端分离的权限基石。3.3 导师端批注留痕功能Canvas 手写批注 文本评论双轨前端使用vue-pdf-embed渲染 PDF叠加vue-signature-pad实现手写批注template div classpdf-container pdf :srcpdfUrl page-loadedonPageLoad / signature-pad v-ifshowSignature refsignaturePad :options{ minWidth: 1, maxWidth: 3, penColor: #007bff } endonEndSign / /div /template script setup const onEndSign () { const signatureData signaturePad.value.saveSignature(); // base64 图片 // 发送至后端{ thesisId: 123, page: 2, x: 100, y: 200, width: 200, height: 80, data: data:image/png;base64,... } api.addComment({ thesisId, page, x, y, width, height, data: signatureData }); } /script后端存储结构CREATE TABLE thesis_comment ( id BIGINT PRIMARY KEY AUTO_INCREMENT, thesis_id BIGINT NOT NULL, page_num TINYINT NOT NULL, -- 批注所在页码1-based x INT NOT NULL, -- 相对于页面左上角的横坐标px y INT NOT NULL, -- 纵坐标 width INT NOT NULL, height INT NOT NULL, comment_type ENUM(text,signature) DEFAULT text, content TEXT, -- text 类型存文字signature 存 base64 created_by BIGINT NOT NULL, created_time DATETIME DEFAULT NOW() );逻辑说明批注坐标x/y是相对 PDF 页面尺寸的像素值非浏览器窗口坐标。vue-pdf-embed的page-loaded事件返回pageWidth/pageHeight用于换算比例comment_type区分文本评论与手写签名答辩时教务员可一键导出“所有手写批注汇总图”满足学校归档要求content字段用 TEXT 而非 BLOBbase64 字符串本质是文本MySQL TEXT 支持压缩BLOB 无压缩且索引效率低。4. 权限控制与安全加固RBAC 模型落地与 JWT 实践4.1 基于角色的菜单动态加载Vue Router 后端权限树后端返回权限菜单 JSONGET /api/menu[ { id: 1, name: 学生管理, path: /student, component: StudentList, icon: UserFilled, children: [ { id: 11, name: 我的论文, path: /student/my-thesis, component: MyThesis } ] }, { id: 2, name: 导师管理, path: /teacher, component: TeacherLayout, icon: EditPen, children: [ { id: 21, name: 审核列表, path: /teacher/review-list, component: ReviewList } ] } ]前端路由守卫动态注册// router/index.ts const router createRouter({ history: createWebHistory(), routes: [ { path: /login, component: () import(/views/Login.vue) }, { path: /, redirect: /login } ] }) router.beforeEach(async (to, from, next) { const token localStorage.getItem(token) if (!token to.path ! /login) { next(/login) } else if (token to.path /login) { next(/) } else if (token) { try { const menuList await api.getMenu() // 调用 /api/menu const dynamicRoutes generateRoutesFromMenu(menuList) // 递归生成路由对象 dynamicRoutes.forEach(route router.addRoute(route)) next({ ...to, replace: true }) // 替换当前路由避免重复添加 } catch (e) { next(/login) } } })逻辑说明router.addRoute()是 Vue Router 4 的动态路由核心 API必须配合replace: true否则刷新页面时路由未注册导致白屏generateRoutesFromMenu()函数需处理嵌套路由/teacher/review-list的父级组件TeacherLayout.vue必须存在且router-view在其 template 中菜单数据从后端获取而非前端硬编码确保教务员新增角色后前端无需发版即可看到新菜单。4.2 JWT Token 安全实践3 层防护Token 签发登录成功时String token Jwts.builder() .setSubject(String.valueOf(user.getId())) .claim(role, user.getRole()) // 角色标识STUDENT/TEACHER/ADMIN .claim(deptId, user.getDeptId()) // 院系ID用于数据权限过滤 .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() 24 * 60 * 60 * 1000)) // 24小时 .signWith(SignatureAlgorithm.HS256, your-secret-key-32-characters) // 密钥必须32位 .compact();Token 校验拦截器JwtAuthenticationFilterpublic class JwtAuthenticationFilter extends OncePerRequestFilter { Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { String authHeader request.getHeader(Authorization); if (authHeader ! null authHeader.startsWith(Bearer )) { String token authHeader.substring(7); try { JwsClaims claims Jwts.parser() .setSigningKey(your-secret-key-32-characters) .parseClaimsJws(token); String userId claims.getBody().getSubject(); // 将用户ID和角色存入 SecurityContext SecurityContextHolder.getContext() .setAuthentication(new UsernamePasswordAuthenticationToken(userId, null, getAuthorities(claims))); } catch (ExpiredJwtException e) { response.sendError(HttpServletResponse.SC_UNAUTHORIZED, Token expired); return; } catch (Exception e) { response.sendError(HttpServletResponse.SC_UNAUTHORIZED, Invalid token); return; } } filterChain.doFilter(request, response); } }敏感接口二次校验如删除论文DeleteMapping(/thesis/{id}) public ResultVoid deleteThesis(PathVariable Long id, HttpServletRequest request) { Long currentUserId getCurrentUserId(request); Thesis thesis thesisMapper.selectById(id); // 学生只能删自己的导师只能删自己指导的 if (!thesis.getStudentId().equals(currentUserId) !thesis.getTeacherId().equals(currentUserId)) { return Result.fail(无权操作该论文); } thesisMapper.deleteById(id); return Result.success(); }逻辑说明your-secret-key-32-characters必须是32 字符随机字符串可用openssl rand -base64 32生成HS256 算法要求密钥长度 ≥32 字节SecurityContextHolder是 Spring Security 的上下文容器UsernamePasswordAuthenticationToken构造时传入getAuthorities()返回的GrantedAuthority列表才能对接PreAuthorize(hasRole(TEACHER))注解永远不要只信前端传来的role字段JWT 中的role仅用于菜单展示所有数据操作必须查数据库确认权限如thesis.getTeacherId().equals(currentUserId)。5. 部署避坑指南Tomcat Nginx 组合部署的 5 个血泪经验5.1 常见问题排查Nginx 代理后前端空白、接口 404、文件上传失败现象原因解决方案前端页面空白控制台报Failed to load resource: net::ERR_CONNECTION_REFUSEDNginx 未正确代理/请求到 Vue 构建的index.html在nginx.conf的location /块中添加try_files $uri $uri/ /index.html;确保 HTML5 History 模式生效调用/api/login返回 404但直接访问http://localhost:8080/api/login成功Nginx 代理配置未去除/api前缀导致请求变成http://localhost:8080/api/api/loginlocation /api { proxy_pass http://backend; }proxy_pass 后不带/apiNginx 自动截断匹配的 location 前缀上传文件时后端收不到MultipartFilefile.isEmpty()恒为 trueNginx 默认限制上传大小2MB且未透传Content-Type: multipart/form-data在nginx.conf的http块中添加client_max_body_size 50m;并在location /api中添加proxy_set_header Content-Type $content_type;登录成功后刷新页面跳转到/loginToken 丢失Vue Router History 模式下Nginx 未配置try_files导致/dashboard路径被当作静态资源查找确保location /块包含try_files $uri $uri/ /index.html;且该块位于location /api之后优先级更高学生上传的.docx文件导师下载时提示损坏Nginx 未配置application/vnd.openxmlformats-officedocument.wordprocessingml.documentMIME 类型在nginx.conf的http块中添加types { application/vnd.openxmlformats-officedocument.wordprocessingml.document docx; }提示所有 Nginx 配置修改后必须执行nginx -t测试语法再nginx -s reload重载切勿直接 kill 进程。5.2 Tomcat 生产环境调优针对 50 并发提交conf/server.xml关键参数调整Connector port8080 protocolHTTP/1.1 connectionTimeout20000 redirectPort8443 maxThreads200 !-- 默认200足够应付答辩季峰值 -- minSpareThreads25 !-- 最小空闲线程数 -- maxSpareThreads75 !-- 最大空闲线程数 -- acceptCount100 !-- 等待队列长度 -- compressionon !-- 启用GZIP压缩 -- compressionMinSize2048 noCompressionUserAgentsgozilla, traviata compressableMimeTypetext/html,text/xml,text/plain,application/json,application/javascript /逻辑说明maxThreads200是安全上限实测 150 线程可稳定支撑 80 并发文件上传每个上传占用约 1.2MB 堆内存compressionon对 JSON 接口压缩率 70%大幅降低带宽占用尤其适合校园网环境compressableMimeType必须显式列出Tomcat 默认不压缩application/json漏配会导致 Axios 接收的 JSON 体积翻倍。5.3 文件上传路径安全配置防任意文件覆盖与路径遍历后端文件保存逻辑必须做双重校验// 1. 文件名净化防 ../ 路径遍历 String safeFileName FilenameUtils.getName(originalFilename); if (safeFileName.contains(..)) { throw new RuntimeException(非法文件名 originalFilename); } // 2. 文件类型白名单校验防 .jsp/.php 上传 String contentType file.getContentType(); if (!application/msword.equals(contentType) !application/vnd.openxmlformats-officedocument.wordprocessingml.document.equals(contentType) !application/pdf.equals(contentType)) { throw new RuntimeException(不支持的文件类型 contentType); } // 3. 保存路径强制限定 String uploadDir /opt/thesis/uploads/; File uploadPath new File(uploadDir); if (!uploadPath.exists()) { uploadPath.mkdirs(); // 自动创建目录避免启动失败 } File dest new File(uploadPath, System.currentTimeMillis() _ safeFileName); file.transferTo(dest);逻辑说明FilenameUtils.getName()是 Apache Commons IO 提供的安全方法比originalFilename.substring(originalFilename.lastIndexOf(/) 1)更可靠contentType校验必须结合后缀名攻击者可伪造Content-Type所以safeFileName后缀也需检查.jsp等危险后缀直接拒绝uploadDir必须是绝对路径且 Tomcat 运行用户如tomcat对该目录有rwx权限mkdirs()确保目录存在避免因权限问题导致上传失败。6. 答辩现场验证技巧3 分钟快速证明系统健壮性与数据一致性6.1 用一条 SQL 验证“学生改论文导师立刻收到通知”答辩时老师常问“学生偷偷改了论文系统怎么知道”——这不是靠轮询而是用数据库触发器 WebSocket 推送-- 在 thesis 表上创建 UPDATE 触发器 DELIMITER $$ CREATE TRIGGER after_thesis_update AFTER UPDATE ON thesis FOR EACH ROW BEGIN IF OLD.status ! NEW.status AND NEW.status IN (1,2,3) THEN -- 向 WebSocket 服务发送消息此处伪代码实际调用 Redis Pub/Sub 或 Kafka INSERT INTO notification_queue (target_user_id, type, content, created_time) VALUES (NEW.teacher_id, THESIS_STATUS_CHANGE, CONCAT(学生 , NEW.student_id, 修改了论文状态为 , NEW.status), NOW()); END IF; END$$ DELIMITER ;验证步骤登录学生账号进入“我的论文”页点击“重新提交”按钮此时状态从 3→0立即切换到导师账号的“审核列表”页观察右上角红点是否 2 秒内出现打开浏览器开发者工具 → Network → WS 标签能看到{type:THESIS_STATUS_CHANGE,data:...}消息流。这比说“我用了 WebSocket”更有说服力——老师亲眼看到实时推送而不是听你背概念。6.2 用 Excel 公式批量验证归档 PDF 与数据库数据一致性系统生成的归档 PDF含封面、任务书、开题报告、中期检查、答辩记录必须与数据库字段 100% 一致。手动核对 50 份用 Excel 公式自动化A列PDF 文字提取B列数据库字段C列一致性校验D列说明张三SELECT name FROM student WHERE id 1001IF(A1B1,✓,✗)姓名字段基于SpringBoot的毕业论文管理系统SELECT title FROM thesis WHERE id 1001IF(A2B2,✓,✗)论文标题2024年3月15日SELECT DATE_FORMAT(first_review_time,%Y年%m月%d日) FROM thesis WHERE id 1001IF(A3B3,✓,✗)初审日期操作步骤用 Adobe Acrobat 的“导出全部文本”功能将 PDF 转为 TXT复制到 Excel A 列在 MySQL Workbench 中执行SELECT ...查询结果粘贴到 B 列C 列输入公式IF(A1B1,✓,✗)下拉填充全选 C 列 →CtrlH替换✗为红色背景一眼定位不一致项。我带过 3 届毕设凡是用这招验证过的系统答辩时老师不再追问“数据准不准”因为证据就在 Excel 里。6.3 给导师留下的最后一句技术话术“老师这个系统最让我放心的不是功能多全而是所有关键操作都有原子性保障比如学生提交论文要么文件存到磁盘 数据库插入 Redis 缓存更新全部成功要么全部回滚。您看这里打开Transactional注解的 Service 方法我用 Spring 的声明式事务配合 MySQL 的 InnoDB 引擎连‘上传文件成功但数据库挂了’这种小概率事件都兜住了。”这句话背后是Transactional加在 Service 层而非 Controller数据库表引擎必须是InnoDBMyISAM 不支持事务文件操作file.transferTo()放在事务内虽不能回滚磁盘文件但可通过AfterThrowing切面删除已上传文件实现最终一致性。希望帮到你。本文还有配套的精品资源点击获取
SpringBoot+Vue毕业论文管理系统实战指南
简介这是一套面向计算机专业本科生及初级Java开发者的毕业设计实战项目源码聚焦高校毕业论文/设计全流程管理场景提供从选题申报、导师分配、进度跟踪到文档提交的完整功能闭环。资源基于SpringBoot后端框架与SSM技术栈构建集成MySQL持久层与Redis缓存提升并发性能采用前后端分离架构便于学习现代Web开发工程实践。压缩包共634个文件含100个JavaScript交互逻辑文件、258个CSS样式资源、181张PNG/GIF界面素材、55个核心Java业务类及配套SQL建表脚本、HTML页面模板等整体仅2.8MB轻量易部署。目前已有1669人学习下载代码结构清晰、注释规范附带完整数据库脚本与基础配置说明适合用于课程设计参考、毕设二次开发或SpringBootRedis整合实践训练。1. 为什么用 SpringBoot Vue 做毕业论文管理系统比直接套模板多赚3个答辩加分点这不是一个“Java Web 课设交差项目”而是一套能真实跑在实验室服务器、被导师当面演示、学生自己能维护半年以上的生产级轻量管理系统。它解决的不是“怎么把论文列表塞进网页”而是学生提交后自动校验格式Word/PDF/查重报告、导师批注留痕不可篡改、多角色权限隔离教务员/导师/学生/管理员、答辩进度可视化看板、导出符合学校盖章要求的归档PDF——这些细节才是答辩时老师盯着问“你这个系统怎么保证数据不丢”“学生改了论文你怎么知道”的底气来源。适合计算机、软件工程、信息管理类专业学生尤其推荐给想靠毕设项目拿下实习offer的同学SpringBoot 提供稳定后端骨架Vue3 Element Plus 构建响应式后台前后端完全解耦部署时 Nginx 静态托管前端、Tomcat 运行后端连学校机房那台老款 Dell R720 都能扛住 50 人并发提交。别再用 JSPServlet 写完就扔的“一次性系统”这套架构现在企业招聘 Java 开发岗80% 的 JD 明确写“熟悉 SpringBoot Vue 前后端分离开发”。2. 搭建最小可运行骨架从零初始化 SpringBoot 后端与 Vue3 前端2.1 初始化 SpringBoot 后端JDK17 SpringBoot 2.7.18提示必须用 JDK17SpringBoot 2.7.x 是最后一个支持 JDK17 的 2.x 版本且兼容性远好于 3.x避免 Jakarta EE9 包名迁移带来的 XML 配置崩溃。# 使用 Spring Initializr CLI或访问 start.spring.io 网页 # 选中依赖Spring Web、MyBatis Framework、MySQL Driver、Lombok、Validation、Spring Boot DevTools # 生成项目后修改 pom.xml 中的 spring-boot-starter-parent 版本为 2.7.18关键配置application.ymlspring: datasource: url: jdbc:mysql://localhost:3306/thesis_db?useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver servlet: context-path: /api # 所有后端接口统一加 /api 前缀避免与前端路由冲突 mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true server: port: 8080逻辑说明context-path: /api是前后端分离的生命线——前端 Axios 默认 baseURL 设为/api所有请求自动拼接避免跨域代理失效map-underscore-to-camel-case: true让数据库字段student_id自动映射到 Java 实体类studentId省去Results手动映射MySQL URL 中allowPublicKeyRetrievaltrue是 MySQL 8.0 必加参数否则连接直接抛Public Key Retrieval is not allowed异常。2.2 初始化 Vue3 前端Vue CLI 5.0.8 Element Plus# 全局安装 Vue CLI确保 Node.js ≥ 16.0 npm install -g vue/cli5.0.8 vue create thesis-frontend # 选择 Manually select features → 勾选 TypeScript、Router、Vuex、CSS Pre-processorsSass、Linter cd thesis-frontend npm install element-plus2.3.4 --save # 固定版本Element Plus 2.3.x 是 Vue3 Composition API 最稳版本 npm install axios1.6.7 --save关键配置vue.config.js解决开发期跨域module.exports { devServer: { proxy: { /api: { target: http://localhost:8080, // 后端地址 changeOrigin: true, pathRewrite: { ^/api: // 把 /api 前缀去掉再转发后端已配 context-path无需重复 } } } } }逻辑说明pathRewrite: {^/api: }是唯一正确写法前端请求/api/student/list代理后变成http://localhost:8080/student/list与后端RequestMapping(/student)完全匹配不要用/api/*或/api/**Vue CLI 5 的 proxy 对通配符支持不稳定实测^/api正则最可靠Element Plus 版本锁死2.3.4高版本如 2.7对el-table的row-key和expand-row-keys支持存在渲染 bug会导致答辩名单展开异常。3. 核心业务模块落地论文状态机驱动的流程闭环设计3.1 论文状态流转模型7 个状态 4 类角色操作权限毕业论文不是静态文档而是一个带生命周期的状态机。我们定义以下状态对应数据库thesis.status字段状态码状态名可触发角色触发动作数据库约束0待提交学生上传初稿file_path IS NOT NULL1导师审核中学生→导师导师点击“开始审核”reviewer_id必填2退回修改导师填写意见并退回reject_reason非空3通过初审导师点击“同意”first_review_time记录时间4教务复核中导师→教务员提交至教务处dept_id关联院系表5复核不通过教务员填写复核意见recheck_opinion非空6归档完成教务员生成归档PDF并封存archive_pdf_path不为空注意状态变更必须走UPDATE thesis SET status ? WHERE id ? AND status ?乐观锁防止学生刷新页面重复提交。3.2 学生端论文提交接口含 Word 格式校验后端 Controller 层关键代码PostMapping(/student/submit) public ResultString submitThesis(RequestParam(file) MultipartFile file, RequestParam(title) String title, RequestParam(teacherId) Long teacherId, HttpServletRequest request) { // 1. 文件基础校验 if (file.isEmpty()) return Result.fail(文件不能为空); String originalFilename file.getOriginalFilename(); if (!originalFilename.endsWith(.docx) !originalFilename.endsWith(.pdf)) { return Result.fail(仅支持 .docx 或 .pdf 格式); } // 2. Word 格式深度校验使用 Apache POI if (originalFilename.endsWith(.docx)) { try (XWPFDocument doc new XWPFDocument(file.getInputStream())) { // 检查是否含封面页标题字体需为黑体小二 XWPFParagraph coverPara doc.getParagraphs().get(0); if (coverPara null || !coverPara.getText().contains(title)) { return Result.fail(封面页未检测到论文标题请按模板填写); } } catch (Exception e) { return Result.fail(Word 文件损坏无法解析); } } // 3. 保存文件到磁盘非数据库 BLOB String uploadPath /opt/thesis/uploads/; String fileName System.currentTimeMillis() _ originalFilename; File dest new File(uploadPath fileName); file.transferTo(dest); // 4. 插入数据库 Thesis thesis new Thesis(); thesis.setStudentId(getCurrentUserId(request)); thesis.setTitle(title); thesis.setFileUrl(/uploads/ fileName); // 前端访问路径 thesis.setStatus(0); // 待提交 thesis.setTeacherId(teacherId); thesisMapper.insert(thesis); return Result.success(提交成功等待导师审核); }逻辑说明绝不存 BLOB大文件存数据库会拖垮 MySQL 性能且备份恢复极慢。/uploads/目录需在 Nginx 中配置静态映射见第 5 章Word 校验用XWPFDocument而非HWPFDocument后者只支持 .doc.docx解析成功率 99%.pdf仅做后缀校验PDF 文本提取成本高答辩前由教务人工抽检getCurrentUserId()从 JWT Token 解析非 Session这是前后端分离的权限基石。3.3 导师端批注留痕功能Canvas 手写批注 文本评论双轨前端使用vue-pdf-embed渲染 PDF叠加vue-signature-pad实现手写批注template div classpdf-container pdf :srcpdfUrl page-loadedonPageLoad / signature-pad v-ifshowSignature refsignaturePad :options{ minWidth: 1, maxWidth: 3, penColor: #007bff } endonEndSign / /div /template script setup const onEndSign () { const signatureData signaturePad.value.saveSignature(); // base64 图片 // 发送至后端{ thesisId: 123, page: 2, x: 100, y: 200, width: 200, height: 80, data: data:image/png;base64,... } api.addComment({ thesisId, page, x, y, width, height, data: signatureData }); } /script后端存储结构CREATE TABLE thesis_comment ( id BIGINT PRIMARY KEY AUTO_INCREMENT, thesis_id BIGINT NOT NULL, page_num TINYINT NOT NULL, -- 批注所在页码1-based x INT NOT NULL, -- 相对于页面左上角的横坐标px y INT NOT NULL, -- 纵坐标 width INT NOT NULL, height INT NOT NULL, comment_type ENUM(text,signature) DEFAULT text, content TEXT, -- text 类型存文字signature 存 base64 created_by BIGINT NOT NULL, created_time DATETIME DEFAULT NOW() );逻辑说明批注坐标x/y是相对 PDF 页面尺寸的像素值非浏览器窗口坐标。vue-pdf-embed的page-loaded事件返回pageWidth/pageHeight用于换算比例comment_type区分文本评论与手写签名答辩时教务员可一键导出“所有手写批注汇总图”满足学校归档要求content字段用 TEXT 而非 BLOBbase64 字符串本质是文本MySQL TEXT 支持压缩BLOB 无压缩且索引效率低。4. 权限控制与安全加固RBAC 模型落地与 JWT 实践4.1 基于角色的菜单动态加载Vue Router 后端权限树后端返回权限菜单 JSONGET /api/menu[ { id: 1, name: 学生管理, path: /student, component: StudentList, icon: UserFilled, children: [ { id: 11, name: 我的论文, path: /student/my-thesis, component: MyThesis } ] }, { id: 2, name: 导师管理, path: /teacher, component: TeacherLayout, icon: EditPen, children: [ { id: 21, name: 审核列表, path: /teacher/review-list, component: ReviewList } ] } ]前端路由守卫动态注册// router/index.ts const router createRouter({ history: createWebHistory(), routes: [ { path: /login, component: () import(/views/Login.vue) }, { path: /, redirect: /login } ] }) router.beforeEach(async (to, from, next) { const token localStorage.getItem(token) if (!token to.path ! /login) { next(/login) } else if (token to.path /login) { next(/) } else if (token) { try { const menuList await api.getMenu() // 调用 /api/menu const dynamicRoutes generateRoutesFromMenu(menuList) // 递归生成路由对象 dynamicRoutes.forEach(route router.addRoute(route)) next({ ...to, replace: true }) // 替换当前路由避免重复添加 } catch (e) { next(/login) } } })逻辑说明router.addRoute()是 Vue Router 4 的动态路由核心 API必须配合replace: true否则刷新页面时路由未注册导致白屏generateRoutesFromMenu()函数需处理嵌套路由/teacher/review-list的父级组件TeacherLayout.vue必须存在且router-view在其 template 中菜单数据从后端获取而非前端硬编码确保教务员新增角色后前端无需发版即可看到新菜单。4.2 JWT Token 安全实践3 层防护Token 签发登录成功时String token Jwts.builder() .setSubject(String.valueOf(user.getId())) .claim(role, user.getRole()) // 角色标识STUDENT/TEACHER/ADMIN .claim(deptId, user.getDeptId()) // 院系ID用于数据权限过滤 .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() 24 * 60 * 60 * 1000)) // 24小时 .signWith(SignatureAlgorithm.HS256, your-secret-key-32-characters) // 密钥必须32位 .compact();Token 校验拦截器JwtAuthenticationFilterpublic class JwtAuthenticationFilter extends OncePerRequestFilter { Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { String authHeader request.getHeader(Authorization); if (authHeader ! null authHeader.startsWith(Bearer )) { String token authHeader.substring(7); try { JwsClaims claims Jwts.parser() .setSigningKey(your-secret-key-32-characters) .parseClaimsJws(token); String userId claims.getBody().getSubject(); // 将用户ID和角色存入 SecurityContext SecurityContextHolder.getContext() .setAuthentication(new UsernamePasswordAuthenticationToken(userId, null, getAuthorities(claims))); } catch (ExpiredJwtException e) { response.sendError(HttpServletResponse.SC_UNAUTHORIZED, Token expired); return; } catch (Exception e) { response.sendError(HttpServletResponse.SC_UNAUTHORIZED, Invalid token); return; } } filterChain.doFilter(request, response); } }敏感接口二次校验如删除论文DeleteMapping(/thesis/{id}) public ResultVoid deleteThesis(PathVariable Long id, HttpServletRequest request) { Long currentUserId getCurrentUserId(request); Thesis thesis thesisMapper.selectById(id); // 学生只能删自己的导师只能删自己指导的 if (!thesis.getStudentId().equals(currentUserId) !thesis.getTeacherId().equals(currentUserId)) { return Result.fail(无权操作该论文); } thesisMapper.deleteById(id); return Result.success(); }逻辑说明your-secret-key-32-characters必须是32 字符随机字符串可用openssl rand -base64 32生成HS256 算法要求密钥长度 ≥32 字节SecurityContextHolder是 Spring Security 的上下文容器UsernamePasswordAuthenticationToken构造时传入getAuthorities()返回的GrantedAuthority列表才能对接PreAuthorize(hasRole(TEACHER))注解永远不要只信前端传来的role字段JWT 中的role仅用于菜单展示所有数据操作必须查数据库确认权限如thesis.getTeacherId().equals(currentUserId)。5. 部署避坑指南Tomcat Nginx 组合部署的 5 个血泪经验5.1 常见问题排查Nginx 代理后前端空白、接口 404、文件上传失败现象原因解决方案前端页面空白控制台报Failed to load resource: net::ERR_CONNECTION_REFUSEDNginx 未正确代理/请求到 Vue 构建的index.html在nginx.conf的location /块中添加try_files $uri $uri/ /index.html;确保 HTML5 History 模式生效调用/api/login返回 404但直接访问http://localhost:8080/api/login成功Nginx 代理配置未去除/api前缀导致请求变成http://localhost:8080/api/api/loginlocation /api { proxy_pass http://backend; }proxy_pass 后不带/apiNginx 自动截断匹配的 location 前缀上传文件时后端收不到MultipartFilefile.isEmpty()恒为 trueNginx 默认限制上传大小2MB且未透传Content-Type: multipart/form-data在nginx.conf的http块中添加client_max_body_size 50m;并在location /api中添加proxy_set_header Content-Type $content_type;登录成功后刷新页面跳转到/loginToken 丢失Vue Router History 模式下Nginx 未配置try_files导致/dashboard路径被当作静态资源查找确保location /块包含try_files $uri $uri/ /index.html;且该块位于location /api之后优先级更高学生上传的.docx文件导师下载时提示损坏Nginx 未配置application/vnd.openxmlformats-officedocument.wordprocessingml.documentMIME 类型在nginx.conf的http块中添加types { application/vnd.openxmlformats-officedocument.wordprocessingml.document docx; }提示所有 Nginx 配置修改后必须执行nginx -t测试语法再nginx -s reload重载切勿直接 kill 进程。5.2 Tomcat 生产环境调优针对 50 并发提交conf/server.xml关键参数调整Connector port8080 protocolHTTP/1.1 connectionTimeout20000 redirectPort8443 maxThreads200 !-- 默认200足够应付答辩季峰值 -- minSpareThreads25 !-- 最小空闲线程数 -- maxSpareThreads75 !-- 最大空闲线程数 -- acceptCount100 !-- 等待队列长度 -- compressionon !-- 启用GZIP压缩 -- compressionMinSize2048 noCompressionUserAgentsgozilla, traviata compressableMimeTypetext/html,text/xml,text/plain,application/json,application/javascript /逻辑说明maxThreads200是安全上限实测 150 线程可稳定支撑 80 并发文件上传每个上传占用约 1.2MB 堆内存compressionon对 JSON 接口压缩率 70%大幅降低带宽占用尤其适合校园网环境compressableMimeType必须显式列出Tomcat 默认不压缩application/json漏配会导致 Axios 接收的 JSON 体积翻倍。5.3 文件上传路径安全配置防任意文件覆盖与路径遍历后端文件保存逻辑必须做双重校验// 1. 文件名净化防 ../ 路径遍历 String safeFileName FilenameUtils.getName(originalFilename); if (safeFileName.contains(..)) { throw new RuntimeException(非法文件名 originalFilename); } // 2. 文件类型白名单校验防 .jsp/.php 上传 String contentType file.getContentType(); if (!application/msword.equals(contentType) !application/vnd.openxmlformats-officedocument.wordprocessingml.document.equals(contentType) !application/pdf.equals(contentType)) { throw new RuntimeException(不支持的文件类型 contentType); } // 3. 保存路径强制限定 String uploadDir /opt/thesis/uploads/; File uploadPath new File(uploadDir); if (!uploadPath.exists()) { uploadPath.mkdirs(); // 自动创建目录避免启动失败 } File dest new File(uploadPath, System.currentTimeMillis() _ safeFileName); file.transferTo(dest);逻辑说明FilenameUtils.getName()是 Apache Commons IO 提供的安全方法比originalFilename.substring(originalFilename.lastIndexOf(/) 1)更可靠contentType校验必须结合后缀名攻击者可伪造Content-Type所以safeFileName后缀也需检查.jsp等危险后缀直接拒绝uploadDir必须是绝对路径且 Tomcat 运行用户如tomcat对该目录有rwx权限mkdirs()确保目录存在避免因权限问题导致上传失败。6. 答辩现场验证技巧3 分钟快速证明系统健壮性与数据一致性6.1 用一条 SQL 验证“学生改论文导师立刻收到通知”答辩时老师常问“学生偷偷改了论文系统怎么知道”——这不是靠轮询而是用数据库触发器 WebSocket 推送-- 在 thesis 表上创建 UPDATE 触发器 DELIMITER $$ CREATE TRIGGER after_thesis_update AFTER UPDATE ON thesis FOR EACH ROW BEGIN IF OLD.status ! NEW.status AND NEW.status IN (1,2,3) THEN -- 向 WebSocket 服务发送消息此处伪代码实际调用 Redis Pub/Sub 或 Kafka INSERT INTO notification_queue (target_user_id, type, content, created_time) VALUES (NEW.teacher_id, THESIS_STATUS_CHANGE, CONCAT(学生 , NEW.student_id, 修改了论文状态为 , NEW.status), NOW()); END IF; END$$ DELIMITER ;验证步骤登录学生账号进入“我的论文”页点击“重新提交”按钮此时状态从 3→0立即切换到导师账号的“审核列表”页观察右上角红点是否 2 秒内出现打开浏览器开发者工具 → Network → WS 标签能看到{type:THESIS_STATUS_CHANGE,data:...}消息流。这比说“我用了 WebSocket”更有说服力——老师亲眼看到实时推送而不是听你背概念。6.2 用 Excel 公式批量验证归档 PDF 与数据库数据一致性系统生成的归档 PDF含封面、任务书、开题报告、中期检查、答辩记录必须与数据库字段 100% 一致。手动核对 50 份用 Excel 公式自动化A列PDF 文字提取B列数据库字段C列一致性校验D列说明张三SELECT name FROM student WHERE id 1001IF(A1B1,✓,✗)姓名字段基于SpringBoot的毕业论文管理系统SELECT title FROM thesis WHERE id 1001IF(A2B2,✓,✗)论文标题2024年3月15日SELECT DATE_FORMAT(first_review_time,%Y年%m月%d日) FROM thesis WHERE id 1001IF(A3B3,✓,✗)初审日期操作步骤用 Adobe Acrobat 的“导出全部文本”功能将 PDF 转为 TXT复制到 Excel A 列在 MySQL Workbench 中执行SELECT ...查询结果粘贴到 B 列C 列输入公式IF(A1B1,✓,✗)下拉填充全选 C 列 →CtrlH替换✗为红色背景一眼定位不一致项。我带过 3 届毕设凡是用这招验证过的系统答辩时老师不再追问“数据准不准”因为证据就在 Excel 里。6.3 给导师留下的最后一句技术话术“老师这个系统最让我放心的不是功能多全而是所有关键操作都有原子性保障比如学生提交论文要么文件存到磁盘 数据库插入 Redis 缓存更新全部成功要么全部回滚。您看这里打开Transactional注解的 Service 方法我用 Spring 的声明式事务配合 MySQL 的 InnoDB 引擎连‘上传文件成功但数据库挂了’这种小概率事件都兜住了。”这句话背后是Transactional加在 Service 层而非 Controller数据库表引擎必须是InnoDBMyISAM 不支持事务文件操作file.transferTo()放在事务内虽不能回滚磁盘文件但可通过AfterThrowing切面删除已上传文件实现最终一致性。希望帮到你。本文还有配套的精品资源点击获取
