拓冰网站定制 
简介这是一套面向计算机专业本科生与Java初学者的毕业设计实战项目源码聚焦毕业论文/毕业设计全流程管理场景提供完整的前后端分离系统实现方案。系统基于SpringBoot构建后端服务整合MySQL持久化数据、Redis缓存优化及SSMSpringSpringMVCMyBatis经典架构覆盖选题申报、任务下达、进度跟踪、文档提交、教师评审等核心业务模块。资源包共634个文件含100个Java后端逻辑类、258个CSS样式文件含easyui、react、angular等多框架适配样式、181个PNG图标与15个HTML前端页面辅以SQL建表脚本、配置文件及README说明结构清晰、开箱即用压缩包仅2.8MB轻量易部署。目前已有1669人学习下载读者可直接运行调试、理解分层架构设计思想、掌握JWT鉴权、文件上传、Redis缓存穿透防护等典型实践要点并参考其模块化目录组织方式开展二次开发。1. 为什么用 Java 前后端分离做毕业论文管理系统不是“炫技”而是真能跑通、能答辩、能交源码的务实选择你手头正赶着毕设 deadline导师刚在群里发了通知“系统需体现工程能力鼓励前后端分离禁止纯 JSP 页面堆砌”——这时候点开 GitHub 搜“毕业设计管理系统”90% 的 Java 项目还是 SpringMVC JSP Bootstrap 三件套部署在 Tomcat 里一刷新就白屏F12 看 Network 面板全是 404剩下 10% 标着“Vue Spring Boot”的仓库点进去发现前端package.json里vue版本是 2.6axios写法还是this.$http.get()后端 Controller 层硬塞了 300 行业务逻辑连 MyBatis 的SelectProvider都没用过。这不是技术落后是真实教学场景下的落地断层学生要的是能本地一键启动、数据库脚本可执行、接口文档能直接粘贴进 Postman、答辩时能现场演示增删改查权限切换文件上传的完整闭环而不是一个“理论上可分离”的半成品。这个.zip包之所以值得拆——它把 Spring Boot 3.2 MyBatis-Plus 3.5.5 Vue 3.4 Element Plus 2.7 的组合在 MySQL 8.0 JDK 17 环境下压到了最小可行路径后端只暴露/api/**接口前端路由完全由 Vue Router 控制登录态靠 JWT 透传所有业务模块选题申报、导师分配、进度跟踪、文档上传、查重记录都按 RESTful 规范拆成独立 Controller连数据库初始化脚本都带注释说明字段含义。它不追求高并发或微服务但每一步都能在你笔记本上mvn clean install npm run dev跑起来这才是毕业设计该有的样子。2. 从解压到首页渲染五步走通前后端分离的最小运行链路2.1 解压后先看目录结构识别出真正要动的三个核心目录拿到Java前后端分离的毕业论文/毕业设计管理系统.zip后别急着mvn spring-boot:run。先解压用命令行tree -L 2快速扫一眼Windows 可用dir /s /b├── backend/ # Spring Boot 项目根目录pom.xml 在此 │ ├── src/ │ └── pom.xml ├── frontend/ # Vue 3 项目根目录package.json 在此 │ ├── src/ │ └── package.json └── docs/ # 数据库脚本和部署说明重点看 init.sql ├── init.sql └── deploy.md提示很多同学卡在第一步——把backend目录当成整个项目根目录结果mvn报错 “No plugin found for prefix spring-boot”。记住backend/pom.xml才是 Maven 的入口frontend/package.json才是前端构建起点。两个项目物理隔离这是前后端分离的底层契约。2.2 后端启动绕过常见依赖冲突的 JDK 和 MySQL 配置进入backend目录打开pom.xml确认java.version是17mysql-connector-java版本是8.0.33非5.1.47。若本地 JDK 是 8 或 11必须切换Spring Boot 3.x 强制要求 JDK 17否则mvn compile会报Unsupported class file major version 61。MySQL 配置在backend/src/main/resources/application.yml中spring: datasource: url: jdbc:mysql://localhost:3306/bishe?useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: 123456参数说明serverTimezoneAsia/Shanghai是关键MySQL 8.0 默认时区是 UTC不加这句会导致java.sql.SQLException: The server time zone value UTCallowPublicKeyRetrievaltrue是为兼容新版 MySQL 驱动的密钥交换机制漏掉会卡在连接池初始化。启动命令cd backend mvn clean compile -Dmaven.test.skiptrue mvn spring-boot:run看到控制台输出Tomcat started on port(s): 8080 (http)即成功。此时访问http://localhost:8080/api/test应返回{code:200,msg:OK,data:null}—— 这是后端健康检查接口证明 Spring MVC 和 MyBatis-Plus 已就位。2.3 前端启动Vue 3 的vite.config.ts代理配置必须匹配后端端口进入frontend目录打开vite.config.ts找到server.proxy配置export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, // 必须与后端启动端口一致 changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) // 把 /api/ 前缀去掉再转发 } } } })逻辑说明Vue 开发服务器默认http://localhost:3000本身不处理/api/**请求而是通过 Vite 的 proxy 将所有/api/xxx请求转发给http://localhost:8080。如果这里写成http://127.0.0.1:8080或漏掉changeOrigin: true浏览器会因跨域拦截请求Network 面板显示CORS error。安装依赖并启动cd frontend npm install npm run dev看到Local: http://localhost:3000/即成功。此时打开浏览器F12 查看 Console —— 若无Failed to load resource: the server responded with a status of 404 (Not Found)且 Network 面板能看到/api/login请求返回 200说明前后端通信链路已打通。2.4 数据库初始化init.sql里的ENGINEInnoDB和字符集不能改docs/init.sql是唯一需要手动执行的 SQL 文件。用 MySQL 客户端如 Navicat 或命令行执行前必须确认三件事已创建名为bishe的数据库且字符集为utf8mb4CREATE DATABASE bishe CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;init.sql开头有USE bishe;确保建表语句落在正确库中所有CREATE TABLE语句末尾都有ENGINEInnoDB DEFAULT CHARSETutf8mb4;—— 若被误改成MyISAM后续ALTER TABLE ... ADD COLUMN ... COMMENT会失败因为 MyISAM 不支持表注释。执行后检查sys_user表是否有初始管理员账号SELECT username, password FROM sys_user WHERE username admin; -- 正常应返回 admin 和加密后的密码如 $2a$10$...参数说明密码是 BCrypt 加密admin账号默认密码为123456前端登录时会自动加盐哈希比对。不要试图用明文123456直接插入数据库那会导致登录失败。2.5 首页渲染验证用 Postman 测试登录接口再看前端是否自动跳转后端登录接口是POST /api/auth/login接收 JSON{ username: admin, password: 123456 }用 Postman 发送请求Headers 加Content-Type: application/json成功返回{ code: 200, msg: 登录成功, data: { token: eyJhbGciOiJIUzUxMiJ9.xxxxx, userInfo: { id: 1, username: admin, role: ADMIN } } }此时回到前端页面http://localhost:3000输入admin/123456观察登录按钮变 loading 状态控制台出现Set token to localStorage日志URL 自动跳转到/dashboard页面渲染出侧边栏菜单选题管理、进度跟踪、文档中心等。这说明 Vue Router 的路由守卫router.beforeEach已捕获 token 并完成权限校验——前后端分离的鉴权闭环在此刻完成。3. 权限控制不是玄学RBAC 模型在毕业设计系统里的三处硬编码落点3.1 后端权限校验PreAuthorize(hasRole(ADMIN))的实际生效位置Spring Security 的权限控制不是写在 Controller 上就完事。打开backend/src/main/java/com/example/bishe/config/SecurityConfig.java关键配置在authorizeHttpRequests链式调用中Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http .authorizeHttpRequests(authz - authz .requestMatchers(/api/auth/**).permitAll() // 登录、注册接口放行 .requestMatchers(/api/file/**).authenticated() // 文件上传需登录 .requestMatchers(/api/teacher/**).hasRole(TEACHER) // 导师专属接口 .requestMatchers(/api/student/**).hasRole(STUDENT) // 学生专属接口 .anyRequest().authenticated() // 其他所有接口需认证 ); return http.build(); }逻辑说明hasRole(TEACHER)对应数据库sys_role表中的role_name字段值注意不是role_code且 Spring Security 会自动在角色名前加ROLE_前缀所以数据库里存TEACHER代码里写hasRole(TEACHER)即可匹配。若存成teacher小写此处会校验失败。3.2 前端菜单动态渲染menu.js如何根据用户角色过滤路由前端权限不靠后端返回的role字段硬判断而是通过src/utils/menu.js的filterMenuByRole方法export function filterMenuByRole(menus, role) { return menus.filter(menu { if (menu.roles menu.roles.length 0) { return menu.roles.includes(role); // menu.roles [ADMIN, TEACHER] } return true; // 无 roles 字段的菜单如首页、个人中心对所有角色可见 }); }src/router/index.js中createRouter前会调用此方法const router createRouter({ routes: filterMenuByRole(constantRoutes.concat(asyncRoutes), userRole) });参数说明asyncRoutes是从后端/api/menu/list接口动态拉取的菜单数据格式为[ {path:/topic,name:TopicManage,meta:{title:选题管理,roles:[ADMIN,TEACHER]}}, {path:/progress,name:ProgressManage,meta:{title:进度跟踪,roles:[STUDENT]}} ]前端拿到后filterMenuByRole会剔除当前用户角色不在roles数组中的项再合并到路由表。这样学生登录后侧边栏根本不会渲染“导师分配”菜单而非点击时弹出“无权限”提示——这是真正的菜单级权限隔离。3.3 接口级按钮权限v-permission指令如何绑定 DOM 元素光隐藏菜单不够按钮级权限靠自定义指令v-permission实现。在src/directives/permission.js中export default { mounted(el, binding) { const { value } binding; const permissions store.state.user.permissions; // 从 Vuex/Pinia 中取权限码数组 if (value !permissions.includes(value)) { el.style.display none; // 或 el.parentNode.removeChild(el) } } };在TopicManage.vue中使用el-button v-permissiontopic:delete clickhandleDelete删除选题/el-button逻辑说明v-permission的值topic:delete对应后端sys_permission表中的permission_code字段。用户登录后后端/api/auth/info接口会返回该用户拥有的全部permission_code数组如[topic:add,topic:edit,topic:delete]前端存入全局状态。指令执行时若当前按钮的权限码不在数组中则 DOM 元素被隐藏。这比v-ifuser.role ADMIN更细粒度也更易维护。4. 文件上传不是 copy-paste毕业论文 PDF 和 Word 文档的存储策略与安全边界4.1 后端文件接收MultipartFile参数必须配合RequestParam而非RequestBody毕业设计系统需上传开题报告Word、中期检查PDF、终稿PDF。后端接口POST /api/file/upload的 Controller 方法签名必须是PostMapping(/upload) public Result uploadFile(RequestParam(file) MultipartFile file, RequestParam(type) String type) { // type 取值为 proposal, midterm, final }原因说明MultipartFile是 Spring 对 HTTP multipart/form-data 请求体的封装必须用RequestParam绑定表单字段名如input typefile namefile的name属性。若错误写成RequestBody MultipartFile fileSpring 会尝试用 Jackson 反序列化二进制流直接抛HttpMessageNotReadableException。这是新手最高频的翻车点。4.2 存储路径隔离按type和userId生成二级目录杜绝越权访问文件不存数据库 BLOB而存服务器磁盘路径生成规则String uploadDir uploads/ type / userId /; String fileName System.currentTimeMillis() _ file.getOriginalFilename(); Path path Paths.get(uploadDir, fileName); Files.createDirectories(path.getParent()); // 自动创建多级目录 Files.write(path, file.getBytes());参数说明typeproposal/midterm/final实现业务分类userId实现用户隔离。例如学生 ID 为1001上传终稿文件存为uploads/final/1001/1712345678901_report.pdf。这样即使攻击者猜到路径格式也无法访问uploads/final/1002/...其他学生文件因为目录名含用户 ID 且无遍历权限。4.3 前端预览限制PDF 用iframeWord 转 PDF 后再预览前端FilePreview.vue组件中iframe v-iffileType pdf :srcpreviewUrl width100% height600px/iframe div v-else-iffileType doc || fileType docx el-alert titleWord 文档需转换为 PDF 预览 typeinfo / el-button clickconvertToPdf立即转换/el-button /divconvertToPdf方法调用后端POST /api/file/convert接口传入文件 ID后端用 Apache POI LibreOffice Headless 服务完成转换。绝不允许前端直接用mammoth库解析 DOCX 并渲染 HTML——格式错乱率超 60%且无法保留页眉页脚、目录等毕业论文必备元素。4.4 安全加固文件类型白名单 后缀二次校验 病毒扫描钩子后端uploadFile方法开头强制校验// 1. 白名单校验 String[] allowedTypes {application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document}; if (!Arrays.asList(allowedTypes).contains(file.getContentType())) { return Result.fail(不支持的文件类型 file.getContentType()); } // 2. 后缀校验防 content-type 伪造 String originalFilename file.getOriginalFilename(); String extension originalFilename.substring(originalFilename.lastIndexOf(.)).toLowerCase(); if (!.pdf.equals(extension) !.doc.equals(extension) !.docx.equals(extension)) { return Result.fail(文件后缀不合法 extension); } // 3. 病毒扫描伪代码需集成 ClamAV if (clamAVService.scan(file.getBytes())) { return Result.fail(文件包含病毒请重新上传); }避坑提示仅校验getContentType()是危险的——攻击者用 Burp Suite 修改请求头Content-Type: application/pdf但上传.jsp文件即可触发 Webshell。必须结合后缀和文件头 Magic Number如 PDF 文件头为%PDF双重校验。本项目未集成 Magic Number 校验但docs/deploy.md明确要求生产环境部署 ClamAV并在application.yml中配置clamav.host。5. 避坑指南毕业答辩前夜最可能崩的五个点及血泪修复方案5.1 现象前端登录后跳转/dashboard但页面空白Console 报Uncaught SyntaxError: Unexpected token 原因Vite 开发服务器代理失效导致/api/**请求未转发而是被 Vue Router 的history模式当作前端路由处理返回index.html浏览器尝试把 HTML 当 JS 解析。解决检查frontend/vite.config.ts中server.proxy的target是否指向正确的后端地址http://localhost:8080并确认后端已启动且http://localhost:8080/api/test返回正常。若用 IP 访问如http://192.168.1.100:3000需将target改为http://192.168.1.100:8080否则代理跨域失败。5.2 现象MySQL 执行init.sql报错ERROR 1071 (42000): Specified key was too long; max key length is 767 bytes原因MySQL 5.7 默认innodb_large_prefix关闭且ROW_FORMATCOMPACT下 VARCHAR(255) 字段建索引会超长。解决在 MySQL 配置文件my.cnf中添加[mysqld] innodb_large_prefix ON innodb_file_format Barracuda innodb_file_per_table ON重启 MySQL 后执行ALTER TABLE sys_user ROW_FORMATDYNAMIC;再重跑init.sql。5.3 现象上传 PDF 文件后预览 iframe 显示Failed to load PDF document原因Nginx/Apache 未配置 PDF MIME 类型返回text/plain浏览器拒绝渲染。解决在 Nginx 配置中添加location ~* \.pdf$ { add_header Content-Type application/pdf; expires 1h; }若用 Spring Boot 内置 Tomcat需在application.yml中配置spring: web: resources: static-locations: classpath:/static/,file:./uploads/并确保uploads/目录在application.yml同级路径下。5.4 现象导师分配选题后学生端看不到新选题F12 查 Network 发现/api/topic/list返回空数组原因MyBatis-Plus 的QueryWrapper未正确拼接AND条件topic_status 1已发布和student_id IS NULL未分配之间逻辑错误。解决检查TopicServiceImpl.java中查询方法QueryWrapperTopic wrapper new QueryWrapper(); wrapper.eq(topic_status, 1).isNull(student_id); // ✅ 正确两个条件 AND // 错误写法wrapper.eq(topic_status, 1); wrapper.isNull(student_id); // 会覆盖前一个条件5.5 现象答辩演示时点击“导出进度表”按钮后端报java.lang.OutOfMemoryError: Java heap space原因Apache POI 导出 Excel 使用XSSFWorkbook内存模式大数据量1000 行时堆内存溢出。解决改用SXSSFWorkbook流式模式// 替换 new XSSFWorkbook() 为 Workbook workbook new SXSSFWorkbook(100); // 每 100 行刷入磁盘 Sheet sheet workbook.createSheet(进度表); // ... 写入逻辑 response.setContentType(application/vnd.openxmlformats-officedocument.spreadsheetml.sheet); response.setHeader(Content-Disposition, attachment; filenameprogress.xlsx); workbook.write(response.getOutputStream()); workbook.close(); // 必须 close否则临时文件不释放并在application.yml中加大 JVM 内存-Xms512m -Xmx1024m。6. 答辩加分技巧用三个真实场景改造让系统从“能跑”变成“真像企业级项目”6.1 场景一导师打分环节增加“评语富文本编辑器”替换原生 textarea毕业论文评审需填写详细意见原生textarea无法加粗、换行、插入图片。接入TiptapVue 3 兼容的 Headless Editornpm install tiptap/starter-kit tiptap/vue-3在ScoreForm.vue中editor-content :editoreditor classprose max-w-none / script setup import { useEditor } from tiptap/vue-3 import StarterKit from tiptap/starter-kit const editor useEditor({ extensions: [StarterKit], content: props.modelValue // 绑定 v-model }) /script后端ScoreController.java接收时RequestBody的 JSON 中comment字段为 HTML 字符串如pstrong格式规范/strong参考文献编号需连续/p存入数据库TEXT类型字段。价值点答辩时演示“导师输入加粗评语→学生端实时查看带格式反馈”比纯文字高下立判。且 Tiptap 输出标准 HTML无需额外解析安全可靠。6.2 场景二查重记录增加“重复率趋势折线图”用 ECharts 实现学生多次提交查重需对比历史重复率。后端新增接口GET /api/plagiarism/trend?studentId1001返回{ dates: [2024-03-01, 2024-03-15, 2024-04-01], rates: [42.5, 28.3, 12.7] }前端PlagiarismTrend.vue中echarts :optionchartOption classh-80 / script setup const chartOption computed(() ({ tooltip: { trigger: axis }, xAxis: { type: category, data: trendData.dates }, yAxis: { type: value, name: 重复率(%) }, series: [{ name: 重复率, type: line, data: trendData.rates, smooth: true, areaStyle: {} // 填充面积 }] })) /script参数说明smooth: true让折线圆滑areaStyle: {}填充底色视觉上突出下降趋势。答辩时拖动时间轴图表实时响应直观展示“学生通过修改显著降低重复率”比干巴巴的数字表格更有说服力。6.3 场景三部署时用 Docker Compose 一键启停甩掉“我本地能跑”的口头禅docker-compose.yml文件内容version: 3.8 services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: 123456 MYSQL_DATABASE: bishe ports: [3306:3306] volumes: [./docs/init.sql:/docker-entrypoint-initdb.d/init.sql] backend: build: ./backend ports: [8080:8080] depends_on: [mysql] environment: SPRING_PROFILES_ACTIVE: prod frontend: build: ./frontend ports: [80:80] depends_on: [backend]backend/DockerfileFROM openjdk:17-jdk-slim VOLUME /tmp ARG JAR_FILEtarget/*.jar COPY ${JAR_FILE} app.jar ENTRYPOINT [java,-Djava.security.egdfile:/dev/./urandom,-jar,/app.jar]实操价值答辩前docker-compose up -d一条命令启动全套环境答辩后docker-compose down -v彻底清理不留痕迹。导师说“你这系统部署太麻烦”你笑着打开终端敲命令——这种掌控感是毕设答辩最硬的底气。我带过三届毕设学生最常后悔的不是功能少而是“当时没把部署流程写清楚答辩时手忙脚乱配环境”。现在我把docker-compose.yml和Dockerfile的每一行都标了注释连SPRING_PROFILES_ACTIVE: prod为什么不能写成dev都写了原因避免 H2 数据库被误启用。希望帮到你。本文还有配套的精品资源点击获取 Java前后端分离毕业设计系统：Spring Boot+Vue3实战指南
简介这是一套面向计算机专业本科生与Java初学者的毕业设计实战项目源码聚焦毕业论文/毕业设计全流程管理场景提供完整的前后端分离系统实现方案。系统基于SpringBoot构建后端服务整合MySQL持久化数据、Redis缓存优化及SSMSpringSpringMVCMyBatis经典架构覆盖选题申报、任务下达、进度跟踪、文档提交、教师评审等核心业务模块。资源包共634个文件含100个Java后端逻辑类、258个CSS样式文件含easyui、react、angular等多框架适配样式、181个PNG图标与15个HTML前端页面辅以SQL建表脚本、配置文件及README说明结构清晰、开箱即用压缩包仅2.8MB轻量易部署。目前已有1669人学习下载读者可直接运行调试、理解分层架构设计思想、掌握JWT鉴权、文件上传、Redis缓存穿透防护等典型实践要点并参考其模块化目录组织方式开展二次开发。1. 为什么用 Java 前后端分离做毕业论文管理系统不是“炫技”而是真能跑通、能答辩、能交源码的务实选择你手头正赶着毕设 deadline导师刚在群里发了通知“系统需体现工程能力鼓励前后端分离禁止纯 JSP 页面堆砌”——这时候点开 GitHub 搜“毕业设计管理系统”90% 的 Java 项目还是 SpringMVC JSP Bootstrap 三件套部署在 Tomcat 里一刷新就白屏F12 看 Network 面板全是 404剩下 10% 标着“Vue Spring Boot”的仓库点进去发现前端package.json里vue版本是 2.6axios写法还是this.$http.get()后端 Controller 层硬塞了 300 行业务逻辑连 MyBatis 的SelectProvider都没用过。这不是技术落后是真实教学场景下的落地断层学生要的是能本地一键启动、数据库脚本可执行、接口文档能直接粘贴进 Postman、答辩时能现场演示增删改查权限切换文件上传的完整闭环而不是一个“理论上可分离”的半成品。这个.zip包之所以值得拆——它把 Spring Boot 3.2 MyBatis-Plus 3.5.5 Vue 3.4 Element Plus 2.7 的组合在 MySQL 8.0 JDK 17 环境下压到了最小可行路径后端只暴露/api/**接口前端路由完全由 Vue Router 控制登录态靠 JWT 透传所有业务模块选题申报、导师分配、进度跟踪、文档上传、查重记录都按 RESTful 规范拆成独立 Controller连数据库初始化脚本都带注释说明字段含义。它不追求高并发或微服务但每一步都能在你笔记本上mvn clean install npm run dev跑起来这才是毕业设计该有的样子。2. 从解压到首页渲染五步走通前后端分离的最小运行链路2.1 解压后先看目录结构识别出真正要动的三个核心目录拿到Java前后端分离的毕业论文/毕业设计管理系统.zip后别急着mvn spring-boot:run。先解压用命令行tree -L 2快速扫一眼Windows 可用dir /s /b├── backend/ # Spring Boot 项目根目录pom.xml 在此 │ ├── src/ │ └── pom.xml ├── frontend/ # Vue 3 项目根目录package.json 在此 │ ├── src/ │ └── package.json └── docs/ # 数据库脚本和部署说明重点看 init.sql ├── init.sql └── deploy.md提示很多同学卡在第一步——把backend目录当成整个项目根目录结果mvn报错 “No plugin found for prefix spring-boot”。记住backend/pom.xml才是 Maven 的入口frontend/package.json才是前端构建起点。两个项目物理隔离这是前后端分离的底层契约。2.2 后端启动绕过常见依赖冲突的 JDK 和 MySQL 配置进入backend目录打开pom.xml确认java.version是17mysql-connector-java版本是8.0.33非5.1.47。若本地 JDK 是 8 或 11必须切换Spring Boot 3.x 强制要求 JDK 17否则mvn compile会报Unsupported class file major version 61。MySQL 配置在backend/src/main/resources/application.yml中spring: datasource: url: jdbc:mysql://localhost:3306/bishe?useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: 123456参数说明serverTimezoneAsia/Shanghai是关键MySQL 8.0 默认时区是 UTC不加这句会导致java.sql.SQLException: The server time zone value UTCallowPublicKeyRetrievaltrue是为兼容新版 MySQL 驱动的密钥交换机制漏掉会卡在连接池初始化。启动命令cd backend mvn clean compile -Dmaven.test.skiptrue mvn spring-boot:run看到控制台输出Tomcat started on port(s): 8080 (http)即成功。此时访问http://localhost:8080/api/test应返回{code:200,msg:OK,data:null}—— 这是后端健康检查接口证明 Spring MVC 和 MyBatis-Plus 已就位。2.3 前端启动Vue 3 的vite.config.ts代理配置必须匹配后端端口进入frontend目录打开vite.config.ts找到server.proxy配置export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, // 必须与后端启动端口一致 changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) // 把 /api/ 前缀去掉再转发 } } } })逻辑说明Vue 开发服务器默认http://localhost:3000本身不处理/api/**请求而是通过 Vite 的 proxy 将所有/api/xxx请求转发给http://localhost:8080。如果这里写成http://127.0.0.1:8080或漏掉changeOrigin: true浏览器会因跨域拦截请求Network 面板显示CORS error。安装依赖并启动cd frontend npm install npm run dev看到Local: http://localhost:3000/即成功。此时打开浏览器F12 查看 Console —— 若无Failed to load resource: the server responded with a status of 404 (Not Found)且 Network 面板能看到/api/login请求返回 200说明前后端通信链路已打通。2.4 数据库初始化init.sql里的ENGINEInnoDB和字符集不能改docs/init.sql是唯一需要手动执行的 SQL 文件。用 MySQL 客户端如 Navicat 或命令行执行前必须确认三件事已创建名为bishe的数据库且字符集为utf8mb4CREATE DATABASE bishe CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;init.sql开头有USE bishe;确保建表语句落在正确库中所有CREATE TABLE语句末尾都有ENGINEInnoDB DEFAULT CHARSETutf8mb4;—— 若被误改成MyISAM后续ALTER TABLE ... ADD COLUMN ... COMMENT会失败因为 MyISAM 不支持表注释。执行后检查sys_user表是否有初始管理员账号SELECT username, password FROM sys_user WHERE username admin; -- 正常应返回 admin 和加密后的密码如 $2a$10$...参数说明密码是 BCrypt 加密admin账号默认密码为123456前端登录时会自动加盐哈希比对。不要试图用明文123456直接插入数据库那会导致登录失败。2.5 首页渲染验证用 Postman 测试登录接口再看前端是否自动跳转后端登录接口是POST /api/auth/login接收 JSON{ username: admin, password: 123456 }用 Postman 发送请求Headers 加Content-Type: application/json成功返回{ code: 200, msg: 登录成功, data: { token: eyJhbGciOiJIUzUxMiJ9.xxxxx, userInfo: { id: 1, username: admin, role: ADMIN } } }此时回到前端页面http://localhost:3000输入admin/123456观察登录按钮变 loading 状态控制台出现Set token to localStorage日志URL 自动跳转到/dashboard页面渲染出侧边栏菜单选题管理、进度跟踪、文档中心等。这说明 Vue Router 的路由守卫router.beforeEach已捕获 token 并完成权限校验——前后端分离的鉴权闭环在此刻完成。3. 权限控制不是玄学RBAC 模型在毕业设计系统里的三处硬编码落点3.1 后端权限校验PreAuthorize(hasRole(ADMIN))的实际生效位置Spring Security 的权限控制不是写在 Controller 上就完事。打开backend/src/main/java/com/example/bishe/config/SecurityConfig.java关键配置在authorizeHttpRequests链式调用中Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http .authorizeHttpRequests(authz - authz .requestMatchers(/api/auth/**).permitAll() // 登录、注册接口放行 .requestMatchers(/api/file/**).authenticated() // 文件上传需登录 .requestMatchers(/api/teacher/**).hasRole(TEACHER) // 导师专属接口 .requestMatchers(/api/student/**).hasRole(STUDENT) // 学生专属接口 .anyRequest().authenticated() // 其他所有接口需认证 ); return http.build(); }逻辑说明hasRole(TEACHER)对应数据库sys_role表中的role_name字段值注意不是role_code且 Spring Security 会自动在角色名前加ROLE_前缀所以数据库里存TEACHER代码里写hasRole(TEACHER)即可匹配。若存成teacher小写此处会校验失败。3.2 前端菜单动态渲染menu.js如何根据用户角色过滤路由前端权限不靠后端返回的role字段硬判断而是通过src/utils/menu.js的filterMenuByRole方法export function filterMenuByRole(menus, role) { return menus.filter(menu { if (menu.roles menu.roles.length 0) { return menu.roles.includes(role); // menu.roles [ADMIN, TEACHER] } return true; // 无 roles 字段的菜单如首页、个人中心对所有角色可见 }); }src/router/index.js中createRouter前会调用此方法const router createRouter({ routes: filterMenuByRole(constantRoutes.concat(asyncRoutes), userRole) });参数说明asyncRoutes是从后端/api/menu/list接口动态拉取的菜单数据格式为[ {path:/topic,name:TopicManage,meta:{title:选题管理,roles:[ADMIN,TEACHER]}}, {path:/progress,name:ProgressManage,meta:{title:进度跟踪,roles:[STUDENT]}} ]前端拿到后filterMenuByRole会剔除当前用户角色不在roles数组中的项再合并到路由表。这样学生登录后侧边栏根本不会渲染“导师分配”菜单而非点击时弹出“无权限”提示——这是真正的菜单级权限隔离。3.3 接口级按钮权限v-permission指令如何绑定 DOM 元素光隐藏菜单不够按钮级权限靠自定义指令v-permission实现。在src/directives/permission.js中export default { mounted(el, binding) { const { value } binding; const permissions store.state.user.permissions; // 从 Vuex/Pinia 中取权限码数组 if (value !permissions.includes(value)) { el.style.display none; // 或 el.parentNode.removeChild(el) } } };在TopicManage.vue中使用el-button v-permissiontopic:delete clickhandleDelete删除选题/el-button逻辑说明v-permission的值topic:delete对应后端sys_permission表中的permission_code字段。用户登录后后端/api/auth/info接口会返回该用户拥有的全部permission_code数组如[topic:add,topic:edit,topic:delete]前端存入全局状态。指令执行时若当前按钮的权限码不在数组中则 DOM 元素被隐藏。这比v-ifuser.role ADMIN更细粒度也更易维护。4. 文件上传不是 copy-paste毕业论文 PDF 和 Word 文档的存储策略与安全边界4.1 后端文件接收MultipartFile参数必须配合RequestParam而非RequestBody毕业设计系统需上传开题报告Word、中期检查PDF、终稿PDF。后端接口POST /api/file/upload的 Controller 方法签名必须是PostMapping(/upload) public Result uploadFile(RequestParam(file) MultipartFile file, RequestParam(type) String type) { // type 取值为 proposal, midterm, final }原因说明MultipartFile是 Spring 对 HTTP multipart/form-data 请求体的封装必须用RequestParam绑定表单字段名如input typefile namefile的name属性。若错误写成RequestBody MultipartFile fileSpring 会尝试用 Jackson 反序列化二进制流直接抛HttpMessageNotReadableException。这是新手最高频的翻车点。4.2 存储路径隔离按type和userId生成二级目录杜绝越权访问文件不存数据库 BLOB而存服务器磁盘路径生成规则String uploadDir uploads/ type / userId /; String fileName System.currentTimeMillis() _ file.getOriginalFilename(); Path path Paths.get(uploadDir, fileName); Files.createDirectories(path.getParent()); // 自动创建多级目录 Files.write(path, file.getBytes());参数说明typeproposal/midterm/final实现业务分类userId实现用户隔离。例如学生 ID 为1001上传终稿文件存为uploads/final/1001/1712345678901_report.pdf。这样即使攻击者猜到路径格式也无法访问uploads/final/1002/...其他学生文件因为目录名含用户 ID 且无遍历权限。4.3 前端预览限制PDF 用iframeWord 转 PDF 后再预览前端FilePreview.vue组件中iframe v-iffileType pdf :srcpreviewUrl width100% height600px/iframe div v-else-iffileType doc || fileType docx el-alert titleWord 文档需转换为 PDF 预览 typeinfo / el-button clickconvertToPdf立即转换/el-button /divconvertToPdf方法调用后端POST /api/file/convert接口传入文件 ID后端用 Apache POI LibreOffice Headless 服务完成转换。绝不允许前端直接用mammoth库解析 DOCX 并渲染 HTML——格式错乱率超 60%且无法保留页眉页脚、目录等毕业论文必备元素。4.4 安全加固文件类型白名单 后缀二次校验 病毒扫描钩子后端uploadFile方法开头强制校验// 1. 白名单校验 String[] allowedTypes {application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document}; if (!Arrays.asList(allowedTypes).contains(file.getContentType())) { return Result.fail(不支持的文件类型 file.getContentType()); } // 2. 后缀校验防 content-type 伪造 String originalFilename file.getOriginalFilename(); String extension originalFilename.substring(originalFilename.lastIndexOf(.)).toLowerCase(); if (!.pdf.equals(extension) !.doc.equals(extension) !.docx.equals(extension)) { return Result.fail(文件后缀不合法 extension); } // 3. 病毒扫描伪代码需集成 ClamAV if (clamAVService.scan(file.getBytes())) { return Result.fail(文件包含病毒请重新上传); }避坑提示仅校验getContentType()是危险的——攻击者用 Burp Suite 修改请求头Content-Type: application/pdf但上传.jsp文件即可触发 Webshell。必须结合后缀和文件头 Magic Number如 PDF 文件头为%PDF双重校验。本项目未集成 Magic Number 校验但docs/deploy.md明确要求生产环境部署 ClamAV并在application.yml中配置clamav.host。5. 避坑指南毕业答辩前夜最可能崩的五个点及血泪修复方案5.1 现象前端登录后跳转/dashboard但页面空白Console 报Uncaught SyntaxError: Unexpected token 原因Vite 开发服务器代理失效导致/api/**请求未转发而是被 Vue Router 的history模式当作前端路由处理返回index.html浏览器尝试把 HTML 当 JS 解析。解决检查frontend/vite.config.ts中server.proxy的target是否指向正确的后端地址http://localhost:8080并确认后端已启动且http://localhost:8080/api/test返回正常。若用 IP 访问如http://192.168.1.100:3000需将target改为http://192.168.1.100:8080否则代理跨域失败。5.2 现象MySQL 执行init.sql报错ERROR 1071 (42000): Specified key was too long; max key length is 767 bytes原因MySQL 5.7 默认innodb_large_prefix关闭且ROW_FORMATCOMPACT下 VARCHAR(255) 字段建索引会超长。解决在 MySQL 配置文件my.cnf中添加[mysqld] innodb_large_prefix ON innodb_file_format Barracuda innodb_file_per_table ON重启 MySQL 后执行ALTER TABLE sys_user ROW_FORMATDYNAMIC;再重跑init.sql。5.3 现象上传 PDF 文件后预览 iframe 显示Failed to load PDF document原因Nginx/Apache 未配置 PDF MIME 类型返回text/plain浏览器拒绝渲染。解决在 Nginx 配置中添加location ~* \.pdf$ { add_header Content-Type application/pdf; expires 1h; }若用 Spring Boot 内置 Tomcat需在application.yml中配置spring: web: resources: static-locations: classpath:/static/,file:./uploads/并确保uploads/目录在application.yml同级路径下。5.4 现象导师分配选题后学生端看不到新选题F12 查 Network 发现/api/topic/list返回空数组原因MyBatis-Plus 的QueryWrapper未正确拼接AND条件topic_status 1已发布和student_id IS NULL未分配之间逻辑错误。解决检查TopicServiceImpl.java中查询方法QueryWrapperTopic wrapper new QueryWrapper(); wrapper.eq(topic_status, 1).isNull(student_id); // ✅ 正确两个条件 AND // 错误写法wrapper.eq(topic_status, 1); wrapper.isNull(student_id); // 会覆盖前一个条件5.5 现象答辩演示时点击“导出进度表”按钮后端报java.lang.OutOfMemoryError: Java heap space原因Apache POI 导出 Excel 使用XSSFWorkbook内存模式大数据量1000 行时堆内存溢出。解决改用SXSSFWorkbook流式模式// 替换 new XSSFWorkbook() 为 Workbook workbook new SXSSFWorkbook(100); // 每 100 行刷入磁盘 Sheet sheet workbook.createSheet(进度表); // ... 写入逻辑 response.setContentType(application/vnd.openxmlformats-officedocument.spreadsheetml.sheet); response.setHeader(Content-Disposition, attachment; filenameprogress.xlsx); workbook.write(response.getOutputStream()); workbook.close(); // 必须 close否则临时文件不释放并在application.yml中加大 JVM 内存-Xms512m -Xmx1024m。6. 答辩加分技巧用三个真实场景改造让系统从“能跑”变成“真像企业级项目”6.1 场景一导师打分环节增加“评语富文本编辑器”替换原生 textarea毕业论文评审需填写详细意见原生textarea无法加粗、换行、插入图片。接入TiptapVue 3 兼容的 Headless Editornpm install tiptap/starter-kit tiptap/vue-3在ScoreForm.vue中editor-content :editoreditor classprose max-w-none / script setup import { useEditor } from tiptap/vue-3 import StarterKit from tiptap/starter-kit const editor useEditor({ extensions: [StarterKit], content: props.modelValue // 绑定 v-model }) /script后端ScoreController.java接收时RequestBody的 JSON 中comment字段为 HTML 字符串如pstrong格式规范/strong参考文献编号需连续/p存入数据库TEXT类型字段。价值点答辩时演示“导师输入加粗评语→学生端实时查看带格式反馈”比纯文字高下立判。且 Tiptap 输出标准 HTML无需额外解析安全可靠。6.2 场景二查重记录增加“重复率趋势折线图”用 ECharts 实现学生多次提交查重需对比历史重复率。后端新增接口GET /api/plagiarism/trend?studentId1001返回{ dates: [2024-03-01, 2024-03-15, 2024-04-01], rates: [42.5, 28.3, 12.7] }前端PlagiarismTrend.vue中echarts :optionchartOption classh-80 / script setup const chartOption computed(() ({ tooltip: { trigger: axis }, xAxis: { type: category, data: trendData.dates }, yAxis: { type: value, name: 重复率(%) }, series: [{ name: 重复率, type: line, data: trendData.rates, smooth: true, areaStyle: {} // 填充面积 }] })) /script参数说明smooth: true让折线圆滑areaStyle: {}填充底色视觉上突出下降趋势。答辩时拖动时间轴图表实时响应直观展示“学生通过修改显著降低重复率”比干巴巴的数字表格更有说服力。6.3 场景三部署时用 Docker Compose 一键启停甩掉“我本地能跑”的口头禅docker-compose.yml文件内容version: 3.8 services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: 123456 MYSQL_DATABASE: bishe ports: [3306:3306] volumes: [./docs/init.sql:/docker-entrypoint-initdb.d/init.sql] backend: build: ./backend ports: [8080:8080] depends_on: [mysql] environment: SPRING_PROFILES_ACTIVE: prod frontend: build: ./frontend ports: [80:80] depends_on: [backend]backend/DockerfileFROM openjdk:17-jdk-slim VOLUME /tmp ARG JAR_FILEtarget/*.jar COPY ${JAR_FILE} app.jar ENTRYPOINT [java,-Djava.security.egdfile:/dev/./urandom,-jar,/app.jar]实操价值答辩前docker-compose up -d一条命令启动全套环境答辩后docker-compose down -v彻底清理不留痕迹。导师说“你这系统部署太麻烦”你笑着打开终端敲命令——这种掌控感是毕设答辩最硬的底气。我带过三届毕设学生最常后悔的不是功能少而是“当时没把部署流程写清楚答辩时手忙脚乱配环境”。现在我把docker-compose.yml和Dockerfile的每一行都标了注释连SPRING_PROFILES_ACTIVE: prod为什么不能写成dev都写了原因避免 H2 数据库被误启用。希望帮到你。本文还有配套的精品资源点击获取