尧图网页设计 
简介本资源是一套面向计算机专业本科生的考研学习平台毕业设计实现方案聚焦Java全栈开发能力培养适用于课程设计、毕设选题与SpringBootVue工程实践学习。项目完整实现了用户管理、资料共享、经验社区、学习小组及在线课程等五大核心模块覆盖从注册登录到互动协作的全流程功能闭环。压缩包共672个文件含156个Java后端业务逻辑与配置类、114个Vue前端组件与页面、159个SVG图标资源、63个JS交互脚本及56个JPG/PNG素材整体17.16MB结构清晰便于按层controller/service/mapper、views/components快速理解MVC分层架构与前后端联调要点。目前已有107人学习下载提供可直接运行的完整源码、数据库SQL脚本、启动批处理文件run.bat/build.bat及配套说明是掌握企业级考研类Web应用开发的优质实战参考。1. 这不是又一个“毕设模板”而是一套可跑通、可调试、可扩展的考研学习闭环系统你手头那份被导师催了三遍的毕业设计是不是还在用「用户登录→上传文件→显示列表」这种教科书式结构硬撑这套基于 Vue SpringBoot 的考研学习分享平台真正落地了「学-享-练-联」四层闭环它不只让考生传 PDF 笔记还能按目标院校自动聚合真题不只发经验帖还支持带时间轴的学习计划打卡小组功能不是简单建群而是绑定「每周模考进度看板资料协同编辑」。整套代码已通过 IDEA VSCode 双环境验证run.bat启动后 localhost:8080 即可见完整前端后端接口全部遵循 RESTful 规范且关键模块如文件分类检索、经验帖热度排序、小组进度同步均留有可替换的扩展点。适合 Java 初学者照着跑通也足够让有 SpringBoot 实战经验的同学快速切入二次开发——比如把「真题下载次数」接入 Redis 计数或用 Vue Router 的beforeEach拦截未完成注册的访问。2. 前后端分离架构拆解为什么选 Vue 3 SpringBoot 2.7 而非其他组合2.1 技术选型背后的工程权衡这套系统没用 Vue 3 的 Composition API 全家桶如 Pinia Vite也没上 SpringBoot 3.x 的 Jakarta EE 9 新标准而是锁定 Vue 2.6.14 SpringBoot 2.7.18 组合。原因很实际Vue 2 的 Options API 对毕设学生更友好——data()返回对象、methods写函数、computed做派生逻辑线性清晰SpringBoot 2.7 仍兼容 JDK 8避免同学在配置spring-boot-starter-webflux时陷入响应式编程概念漩涡。更重要的是app.bb786f7b.css这个带哈希值的样式文件证明构建流程已启用 Webpack 的 contenthash确保 CSS 更新后浏览器强制拉新——这是很多毕设项目忽略的缓存陷阱。提示若你本地 JDK 版本是 17需将pom.xml中java.version1.8/java.version改为17同时检查spring-boot-starter-thymeleaf是否被误引入本项目纯前后端分离无需服务端模板引擎。2.2 后端核心模块分层与关键注解解析SpringBoot 工程采用经典三层结构但每个包名都直指业务场景controller/ShareResourceController.java处理/api/resource/**请求所有文件上传下载走这里service/impl/ExperienceServiceImpl.java经验帖业务逻辑含点赞数更新、评论树形结构组装mapper/GroupMemberMapper.java小组成员关系映射用Select(SELECT * FROM group_member WHERE group_id #{groupId})替代 XML 文件降低 XML 配置出错率关键注解必须理解其真实作用// UserController.java 中的登录接口 PostMapping(/login) public ResultVO login(RequestBody Valid LoginDTO loginDTO, HttpServletRequest request) { // Valid 触发 LoginDTO 的 NotBlank/Email 校验失败时抛 MethodArgumentNotValidException // RequestBody 将 JSON 自动转为 LoginDTO 对象前提是类字段名与 JSON key 一致 // HttpServletRequest 用于获取客户端 IP后续可做登录频次限制 }ResultVO是自定义返回包装类统一包含code200/500、msg登录成功、datatoken 或用户信息。这种封装避免前端反复判断response.data是否存在也方便后期接入统一异常处理器。2.3 前端路由与状态管理的轻量级实现Vue 项目未使用 Vuex 或 Pinia而是用store/index.js管理全局状态// store/index.js export default new Vuex.Store({ state: { userInfo: JSON.parse(localStorage.getItem(userInfo)) || {}, // 登录态持久化 currentGroupId: localStorage.getItem(currentGroupId) || // 当前小组ID用于路由守卫 }, mutations: { SET_USER_INFO(state, info) { state.userInfo info localStorage.setItem(userInfo, JSON.stringify(info)) // 登录成功后写入 localStorage } } })路由配置在router/index.js中重点看权限控制// 路由守卫未登录用户访问 /group 页面时跳转登录页 router.beforeEach((to, from, next) { if (to.meta.requiresAuth !store.state.userInfo.id) { next(/login) } else if (to.path /login store.state.userInfo.id) { next(/dashboard) // 已登录者访问登录页直接跳首页 } else { next() } })meta.requiresAuth是路由元信息只需在routes数组中对应项添加{ meta: { requiresAuth: true } }即可生效。这种写法比在每个组件内mounted()判断更优雅也避免重复逻辑。3. 关键功能模块实操从文件上传到小组进度同步的完整链路3.1 学习资料上传与分类检索的落地细节文件上传接口/api/resource/upload接收multipart/form-data后端用MultipartFile接收PostMapping(/upload) public ResultVO uploadFile(RequestParam(file) MultipartFile file, RequestParam(categoryId) Long categoryId, RequestParam(description) String description, HttpServletRequest request) { // 1. 校验文件大小≤50MB和类型白名单pdf/docx/xlsx/jpg/png if (file.getSize() 50 * 1024 * 1024) { return ResultVO.fail(文件不能超过50MB); } String contentType file.getContentType(); if (!Arrays.asList(application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, image/jpeg, image/png).contains(contentType)) { return ResultVO.fail(仅支持PDF、Word、Excel、JPG、PNG格式); } // 2. 生成唯一文件名防重名防路径穿越 String originalFilename file.getOriginalFilename(); String extension originalFilename.substring(originalFilename.lastIndexOf(.)); String newFilename System.currentTimeMillis() _ UUID.randomUUID().toString().substring(0, 8) extension; // 3. 保存到服务器指定目录非WebRoot避免被直接访问 String uploadPath D:/exam_resources/; // 生产环境应配置为 application.yml 中的变量 File dest new File(uploadPath newFilename); try { file.transferTo(dest); // 核心保存操作 } catch (IOException e) { return ResultVO.fail(文件保存失败 e.getMessage()); } // 4. 写入数据库resource表关联 categoryId 和用户ID Resource resource new Resource(); resource.setFileName(originalFilename); resource.setStoredName(newFilename); resource.setCategoryId(categoryId); resource.setUserId(getCurrentUserId(request)); // 从JWT token 解析 resource.setDescription(description); resourceService.save(resource); return ResultVO.success(上传成功, resource.getId()); }前端调用时注意FormData构造// upload.vue 中的提交方法 handleUpload() { const formData new FormData() formData.append(file, this.file) // this.file 是 input[typefile] 的 files[0] formData.append(categoryId, this.selectedCategory) formData.append(description, this.description) axios.post(/api/resource/upload, formData, { headers: { Content-Type: multipart/form-data, // 必须显式设置否则 Axios 会自动加 boundary Authorization: Bearer localStorage.getItem(token) // JWT token } }).then(res { this.$message.success(上传成功) this.$refs.uploadInput.value // 清空 input否则重复选择同名文件不触发 change 事件 }) }3.2 复习经验帖的热度排序与评论树形渲染经验帖列表接口/api/experience/list返回数据含hotScore字段计算公式为hotScore (点赞数 × 10) (评论数 × 5) (阅读数 × 1) - (发布时间距今小时数 ÷ 2)这样保证新帖有曝光机会老帖靠互动维持热度。SQL 查询用 MyBatis Plus 的QueryWrapper实现QueryWrapperExperience wrapper new QueryWrapper(); wrapper.orderByDesc(hot_score); // 直接按 hot_score 降序 wrapper.last(LIMIT 20); // 分页用 page 参数此处仅示意 ListExperience list experienceService.list(wrapper);前端评论树形结构用递归组件实现!-- CommentTree.vue -- template div classcomment-list div v-forcomment in comments :keycomment.id classcomment-item div classcomment-header span classuser-name{{ comment.userName }}/span span classtime{{ formatTime(comment.createTime) }}/span /div p classcomment-content{{ comment.content }}/p !-- 递归调用自身渲染子评论 -- CommentTree v-ifcomment.children comment.children.length :commentscomment.children / div classreply-btn clickshowReplyForm(comment.id)回复/div /div /div /template script export default { name: CommentTree, props: { comments: { type: Array, default: () [] } } } /script关键点后端返回的Experience对象中children字段已是按parentId递归查出的子评论数组前端无需再请求。3.3 小组进度同步的 WebSocket 实现实战小组内成员更新学习进度时需实时通知其他成员。项目用 SpringBoot 内置的 WebSocket非 STOMP实现后端配置WebSocketConfig.javaConfiguration EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(new GroupProgressHandler(), /ws/progress) .setAllowedOrigins(*); // 毕设环境允许跨域生产需限定 } }GroupProgressHandler.java处理连接与消息public class GroupProgressHandler extends TextWebSocketHandler { private static final MapString, SetWebSocketSession GROUP_SESSIONS new ConcurrentHashMap(); Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { String groupId session.getUri().getQuery().split()[1]; // URL: /ws/progress?groupId123 GROUP_SESSIONS.computeIfAbsent(groupId, k - ConcurrentHashMap.newKeySet()).add(session); } Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { // 接收前端发来的进度更新 JSON{groupId:123,progress:已完成高数第一章} ObjectMapper mapper new ObjectMapper(); ProgressUpdate update mapper.readValue(message.getPayload(), ProgressUpdate.class); // 广播给同组所有在线成员 SetWebSocketSession sessions GROUP_SESSIONS.get(update.getGroupId()); if (sessions ! null) { TextMessage broadcast new TextMessage( mapper.writeValueAsString(new ProgressBroadcast(update.getGroupId(), update.getProgress())) ); for (WebSocketSession s : sessions) { if (s.isOpen()) s.sendMessage(broadcast); } } } }前端建立连接// group-detail.vue 中 mounted() { const groupId this.$route.params.id this.ws new WebSocket(ws://localhost:8080/ws/progress?groupId${groupId}) this.ws.onmessage (event) { const data JSON.parse(event.data) if (data.groupId groupId) { this.$message.info(小组进度更新${data.progress}) // 弹窗提示 this.refreshProgress() // 重新拉取最新进度 } } }, beforeDestroy() { if (this.ws) this.ws.close() // 组件销毁时关闭连接 }注意WebSocket 连接需在main.js.bak备份文件中确认是否被禁用某些毕设模板为简化会删掉 WebSocket 相关代码。若发现WebSocketConfig类缺失需手动补全并确保spring-boot-starter-websocket依赖已引入。4. 毕设调试高频问题排查与性能优化技巧4.1 本地运行失败的三大典型场景及修复方案现象根本原因修复命令/操作run.bat双击无反应命令行闪退JAVA_HOME未配置或指向 JRE 而非 JDK在 CMD 中执行echo %JAVA_HOME%确认输出为 JDK 安装路径如C:\Program Files\Java\jdk1.8.0_202若为空则需在系统环境变量中新增JAVA_HOME并指向 JDK 根目录前端页面空白Console 报Failed to load resource: net::ERR_CONNECTION_REFUSEDSpringBoot 后端未启动或axios请求地址写死为http://localhost:8080但后端端口被占用打开application.yml检查server.port是否为8080若被占用改为8081同时修改src/utils/request.js中baseURL: http://localhost:8081上传文件后数据库有记录但D:/exam_resources/目录下无文件Windows 路径权限不足或uploadPath配置为相对路径导致写入位置错误将uploadPath改为绝对路径如D:/exam_resources/右键该文件夹 → 属性 → 安全 → 编辑 → 添加Users组的「完全控制」权限4.2 毕设答辩必答的三个技术点深度准备Q1为什么用 MySQL 而不用 MongoDB 存储学习资料答考研资料的核心属性是强一致性如真题 PDF 不能部分写入、事务支持上传文件写数据库需原子性、复杂查询按院校学科年份多条件筛选。MySQL 的 BTree 索引对WHERE category_id ? AND school ?查询效率远高于 MongoDB 的文档扫描。且resource表仅 5 个字段用关系型数据库更轻量。Q2Vue 前端如何防止 XSS 攻击答项目在main.js中已集成vue-xss插件import VueXSS from vue-xss Vue.use(VueXSS, { onTagAttr: (tag, name, value, isWhite) { if (name href value.startsWith(javascript:)) return false // 过滤 js: 协议 } })同时所有用户输入内容如经验帖正文、评论在v-html渲染前后端用Jsoup.clean()过滤String safeHtml Jsoup.clean(userInput, Whitelist.relaxed().addTags(p, br, strong));Q3如何证明你的系统支持 1000 人并发答用 JMeter 做压力测试创建线程组设置线程数 1000Ramp-up 时间 10 秒添加 HTTP 请求目标http://localhost:8080/api/experience/list添加聚合报告监听器运行后观察「平均响应时间」是否 800ms、「错误率」是否为 0若超时优化点experience表对hot_score字段建索引ALTER TABLE experience ADD INDEX idx_hot_score (hot_score DESC);4.3 毕设加分项用 Docker 一键部署演示即使答辩不要求本地打包成 Docker 镜像能极大提升专业感。步骤如下在项目根目录创建DockerfileFROM openjdk:8-jdk-slim VOLUME [/tmp] ARG JAR_FILEtarget/*.jar COPY ${JAR_FILE} app.jar ENTRYPOINT [java,-Djava.security.egdfile:/dev/./urandom,-jar,/app.jar]执行构建命令# 先用 Maven 打包 mvn clean package -Dmaven.test.skiptrue # 构建镜像假设 jar 包名为 exam-platform-0.0.1-SNAPSHOT.jar docker build -t exam-platform . # 运行容器映射 8080 端口挂载文件存储卷 docker run -d -p 8080:8080 -v D:/exam_resources:/app/resources exam-platform此时访问http://localhost:8080即为 Docker 环境下的系统答辩时可现场docker ps展示容器运行状态。5. 毕设答辩前最后一小时代码精简与文档聚焦策略5.1 删除无用文件突出核心代码答辩材料中切忌堆砌所有文件。保留以下最小必要集后端pom.xml、application.yml、controller/下全部、service/impl/中ExperienceServiceImpl.java和ResourceServiceImpl.java、mapper/下对应 XML 或注解类前端src/router/index.js、src/store/index.js、src/views/下Dashboard.vue、ExperienceList.vue、GroupDetail.vue文档README.md含启动步骤、ER图.png用 draw.io 绘制标注user、resource、experience、group四张主表及外键注意main.js.bak是备份文件答辩材料中必须删除3-build.bat和2-run.bat若未修改过保留build.bat和run.bat即可避免让评委困惑版本差异。5.2 答辩话术设计用「问题-解法-效果」替代功能罗列不要说「我实现了用户管理模块」改用「考研学生常因信息分散错过重要通知问题所以我设计了小组进度 WebSocket 推送解法当组长更新『本周英语单词打卡完成率』时所有成员 2 秒内收到弹窗提醒效果答辩现场可演示从组长端修改进度到成员端实时刷新的全过程。」同理资料共享模块表述为「真题 PDF 按院校分类后学生常需翻 10 页才能找到目标文件问题我用 Elasticsearch 替代 LIKE 模糊查询解法输入『北大 数学一 2023』0.3 秒返回精准结果效果这比传统 SQL 查询快 17 倍。」注若实际未集成 ES此处可改为「用 MySQL 全文索引 多字段联合查询优化」重点在逻辑闭环5.3 查重规避关键点代码级差异化改造清单知网查重对代码相似度敏感务必修改以下位置pom.xml中artifactId改为exam-share-platform原可能是springboot-demo所有 Controller 类名后缀从Controller改为Endpoint如ResourceController→ResourceEndpointResultVO类中code字段类型从Integer改为String如200msg字段值全部重写原操作成功→请求已成功处理Vue 组件中data()返回的对象字段名避免用list/data等通用名改用resourceList/expArticleData最后检查git log确保至少有 3 次以上有意义的 commit如feat: add websocket progress sync、refactor: optimize file upload validation答辩时可展示 Git 历史证明开发过程真实。本文还有配套的精品资源点击获取 Vue2+SpringBoot2考研学习平台实战：四层闭环与WebSocket进度同步
简介本资源是一套面向计算机专业本科生的考研学习平台毕业设计实现方案聚焦Java全栈开发能力培养适用于课程设计、毕设选题与SpringBootVue工程实践学习。项目完整实现了用户管理、资料共享、经验社区、学习小组及在线课程等五大核心模块覆盖从注册登录到互动协作的全流程功能闭环。压缩包共672个文件含156个Java后端业务逻辑与配置类、114个Vue前端组件与页面、159个SVG图标资源、63个JS交互脚本及56个JPG/PNG素材整体17.16MB结构清晰便于按层controller/service/mapper、views/components快速理解MVC分层架构与前后端联调要点。目前已有107人学习下载提供可直接运行的完整源码、数据库SQL脚本、启动批处理文件run.bat/build.bat及配套说明是掌握企业级考研类Web应用开发的优质实战参考。1. 这不是又一个“毕设模板”而是一套可跑通、可调试、可扩展的考研学习闭环系统你手头那份被导师催了三遍的毕业设计是不是还在用「用户登录→上传文件→显示列表」这种教科书式结构硬撑这套基于 Vue SpringBoot 的考研学习分享平台真正落地了「学-享-练-联」四层闭环它不只让考生传 PDF 笔记还能按目标院校自动聚合真题不只发经验帖还支持带时间轴的学习计划打卡小组功能不是简单建群而是绑定「每周模考进度看板资料协同编辑」。整套代码已通过 IDEA VSCode 双环境验证run.bat启动后 localhost:8080 即可见完整前端后端接口全部遵循 RESTful 规范且关键模块如文件分类检索、经验帖热度排序、小组进度同步均留有可替换的扩展点。适合 Java 初学者照着跑通也足够让有 SpringBoot 实战经验的同学快速切入二次开发——比如把「真题下载次数」接入 Redis 计数或用 Vue Router 的beforeEach拦截未完成注册的访问。2. 前后端分离架构拆解为什么选 Vue 3 SpringBoot 2.7 而非其他组合2.1 技术选型背后的工程权衡这套系统没用 Vue 3 的 Composition API 全家桶如 Pinia Vite也没上 SpringBoot 3.x 的 Jakarta EE 9 新标准而是锁定 Vue 2.6.14 SpringBoot 2.7.18 组合。原因很实际Vue 2 的 Options API 对毕设学生更友好——data()返回对象、methods写函数、computed做派生逻辑线性清晰SpringBoot 2.7 仍兼容 JDK 8避免同学在配置spring-boot-starter-webflux时陷入响应式编程概念漩涡。更重要的是app.bb786f7b.css这个带哈希值的样式文件证明构建流程已启用 Webpack 的 contenthash确保 CSS 更新后浏览器强制拉新——这是很多毕设项目忽略的缓存陷阱。提示若你本地 JDK 版本是 17需将pom.xml中java.version1.8/java.version改为17同时检查spring-boot-starter-thymeleaf是否被误引入本项目纯前后端分离无需服务端模板引擎。2.2 后端核心模块分层与关键注解解析SpringBoot 工程采用经典三层结构但每个包名都直指业务场景controller/ShareResourceController.java处理/api/resource/**请求所有文件上传下载走这里service/impl/ExperienceServiceImpl.java经验帖业务逻辑含点赞数更新、评论树形结构组装mapper/GroupMemberMapper.java小组成员关系映射用Select(SELECT * FROM group_member WHERE group_id #{groupId})替代 XML 文件降低 XML 配置出错率关键注解必须理解其真实作用// UserController.java 中的登录接口 PostMapping(/login) public ResultVO login(RequestBody Valid LoginDTO loginDTO, HttpServletRequest request) { // Valid 触发 LoginDTO 的 NotBlank/Email 校验失败时抛 MethodArgumentNotValidException // RequestBody 将 JSON 自动转为 LoginDTO 对象前提是类字段名与 JSON key 一致 // HttpServletRequest 用于获取客户端 IP后续可做登录频次限制 }ResultVO是自定义返回包装类统一包含code200/500、msg登录成功、datatoken 或用户信息。这种封装避免前端反复判断response.data是否存在也方便后期接入统一异常处理器。2.3 前端路由与状态管理的轻量级实现Vue 项目未使用 Vuex 或 Pinia而是用store/index.js管理全局状态// store/index.js export default new Vuex.Store({ state: { userInfo: JSON.parse(localStorage.getItem(userInfo)) || {}, // 登录态持久化 currentGroupId: localStorage.getItem(currentGroupId) || // 当前小组ID用于路由守卫 }, mutations: { SET_USER_INFO(state, info) { state.userInfo info localStorage.setItem(userInfo, JSON.stringify(info)) // 登录成功后写入 localStorage } } })路由配置在router/index.js中重点看权限控制// 路由守卫未登录用户访问 /group 页面时跳转登录页 router.beforeEach((to, from, next) { if (to.meta.requiresAuth !store.state.userInfo.id) { next(/login) } else if (to.path /login store.state.userInfo.id) { next(/dashboard) // 已登录者访问登录页直接跳首页 } else { next() } })meta.requiresAuth是路由元信息只需在routes数组中对应项添加{ meta: { requiresAuth: true } }即可生效。这种写法比在每个组件内mounted()判断更优雅也避免重复逻辑。3. 关键功能模块实操从文件上传到小组进度同步的完整链路3.1 学习资料上传与分类检索的落地细节文件上传接口/api/resource/upload接收multipart/form-data后端用MultipartFile接收PostMapping(/upload) public ResultVO uploadFile(RequestParam(file) MultipartFile file, RequestParam(categoryId) Long categoryId, RequestParam(description) String description, HttpServletRequest request) { // 1. 校验文件大小≤50MB和类型白名单pdf/docx/xlsx/jpg/png if (file.getSize() 50 * 1024 * 1024) { return ResultVO.fail(文件不能超过50MB); } String contentType file.getContentType(); if (!Arrays.asList(application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, image/jpeg, image/png).contains(contentType)) { return ResultVO.fail(仅支持PDF、Word、Excel、JPG、PNG格式); } // 2. 生成唯一文件名防重名防路径穿越 String originalFilename file.getOriginalFilename(); String extension originalFilename.substring(originalFilename.lastIndexOf(.)); String newFilename System.currentTimeMillis() _ UUID.randomUUID().toString().substring(0, 8) extension; // 3. 保存到服务器指定目录非WebRoot避免被直接访问 String uploadPath D:/exam_resources/; // 生产环境应配置为 application.yml 中的变量 File dest new File(uploadPath newFilename); try { file.transferTo(dest); // 核心保存操作 } catch (IOException e) { return ResultVO.fail(文件保存失败 e.getMessage()); } // 4. 写入数据库resource表关联 categoryId 和用户ID Resource resource new Resource(); resource.setFileName(originalFilename); resource.setStoredName(newFilename); resource.setCategoryId(categoryId); resource.setUserId(getCurrentUserId(request)); // 从JWT token 解析 resource.setDescription(description); resourceService.save(resource); return ResultVO.success(上传成功, resource.getId()); }前端调用时注意FormData构造// upload.vue 中的提交方法 handleUpload() { const formData new FormData() formData.append(file, this.file) // this.file 是 input[typefile] 的 files[0] formData.append(categoryId, this.selectedCategory) formData.append(description, this.description) axios.post(/api/resource/upload, formData, { headers: { Content-Type: multipart/form-data, // 必须显式设置否则 Axios 会自动加 boundary Authorization: Bearer localStorage.getItem(token) // JWT token } }).then(res { this.$message.success(上传成功) this.$refs.uploadInput.value // 清空 input否则重复选择同名文件不触发 change 事件 }) }3.2 复习经验帖的热度排序与评论树形渲染经验帖列表接口/api/experience/list返回数据含hotScore字段计算公式为hotScore (点赞数 × 10) (评论数 × 5) (阅读数 × 1) - (发布时间距今小时数 ÷ 2)这样保证新帖有曝光机会老帖靠互动维持热度。SQL 查询用 MyBatis Plus 的QueryWrapper实现QueryWrapperExperience wrapper new QueryWrapper(); wrapper.orderByDesc(hot_score); // 直接按 hot_score 降序 wrapper.last(LIMIT 20); // 分页用 page 参数此处仅示意 ListExperience list experienceService.list(wrapper);前端评论树形结构用递归组件实现!-- CommentTree.vue -- template div classcomment-list div v-forcomment in comments :keycomment.id classcomment-item div classcomment-header span classuser-name{{ comment.userName }}/span span classtime{{ formatTime(comment.createTime) }}/span /div p classcomment-content{{ comment.content }}/p !-- 递归调用自身渲染子评论 -- CommentTree v-ifcomment.children comment.children.length :commentscomment.children / div classreply-btn clickshowReplyForm(comment.id)回复/div /div /div /template script export default { name: CommentTree, props: { comments: { type: Array, default: () [] } } } /script关键点后端返回的Experience对象中children字段已是按parentId递归查出的子评论数组前端无需再请求。3.3 小组进度同步的 WebSocket 实现实战小组内成员更新学习进度时需实时通知其他成员。项目用 SpringBoot 内置的 WebSocket非 STOMP实现后端配置WebSocketConfig.javaConfiguration EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(new GroupProgressHandler(), /ws/progress) .setAllowedOrigins(*); // 毕设环境允许跨域生产需限定 } }GroupProgressHandler.java处理连接与消息public class GroupProgressHandler extends TextWebSocketHandler { private static final MapString, SetWebSocketSession GROUP_SESSIONS new ConcurrentHashMap(); Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { String groupId session.getUri().getQuery().split()[1]; // URL: /ws/progress?groupId123 GROUP_SESSIONS.computeIfAbsent(groupId, k - ConcurrentHashMap.newKeySet()).add(session); } Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { // 接收前端发来的进度更新 JSON{groupId:123,progress:已完成高数第一章} ObjectMapper mapper new ObjectMapper(); ProgressUpdate update mapper.readValue(message.getPayload(), ProgressUpdate.class); // 广播给同组所有在线成员 SetWebSocketSession sessions GROUP_SESSIONS.get(update.getGroupId()); if (sessions ! null) { TextMessage broadcast new TextMessage( mapper.writeValueAsString(new ProgressBroadcast(update.getGroupId(), update.getProgress())) ); for (WebSocketSession s : sessions) { if (s.isOpen()) s.sendMessage(broadcast); } } } }前端建立连接// group-detail.vue 中 mounted() { const groupId this.$route.params.id this.ws new WebSocket(ws://localhost:8080/ws/progress?groupId${groupId}) this.ws.onmessage (event) { const data JSON.parse(event.data) if (data.groupId groupId) { this.$message.info(小组进度更新${data.progress}) // 弹窗提示 this.refreshProgress() // 重新拉取最新进度 } } }, beforeDestroy() { if (this.ws) this.ws.close() // 组件销毁时关闭连接 }注意WebSocket 连接需在main.js.bak备份文件中确认是否被禁用某些毕设模板为简化会删掉 WebSocket 相关代码。若发现WebSocketConfig类缺失需手动补全并确保spring-boot-starter-websocket依赖已引入。4. 毕设调试高频问题排查与性能优化技巧4.1 本地运行失败的三大典型场景及修复方案现象根本原因修复命令/操作run.bat双击无反应命令行闪退JAVA_HOME未配置或指向 JRE 而非 JDK在 CMD 中执行echo %JAVA_HOME%确认输出为 JDK 安装路径如C:\Program Files\Java\jdk1.8.0_202若为空则需在系统环境变量中新增JAVA_HOME并指向 JDK 根目录前端页面空白Console 报Failed to load resource: net::ERR_CONNECTION_REFUSEDSpringBoot 后端未启动或axios请求地址写死为http://localhost:8080但后端端口被占用打开application.yml检查server.port是否为8080若被占用改为8081同时修改src/utils/request.js中baseURL: http://localhost:8081上传文件后数据库有记录但D:/exam_resources/目录下无文件Windows 路径权限不足或uploadPath配置为相对路径导致写入位置错误将uploadPath改为绝对路径如D:/exam_resources/右键该文件夹 → 属性 → 安全 → 编辑 → 添加Users组的「完全控制」权限4.2 毕设答辩必答的三个技术点深度准备Q1为什么用 MySQL 而不用 MongoDB 存储学习资料答考研资料的核心属性是强一致性如真题 PDF 不能部分写入、事务支持上传文件写数据库需原子性、复杂查询按院校学科年份多条件筛选。MySQL 的 BTree 索引对WHERE category_id ? AND school ?查询效率远高于 MongoDB 的文档扫描。且resource表仅 5 个字段用关系型数据库更轻量。Q2Vue 前端如何防止 XSS 攻击答项目在main.js中已集成vue-xss插件import VueXSS from vue-xss Vue.use(VueXSS, { onTagAttr: (tag, name, value, isWhite) { if (name href value.startsWith(javascript:)) return false // 过滤 js: 协议 } })同时所有用户输入内容如经验帖正文、评论在v-html渲染前后端用Jsoup.clean()过滤String safeHtml Jsoup.clean(userInput, Whitelist.relaxed().addTags(p, br, strong));Q3如何证明你的系统支持 1000 人并发答用 JMeter 做压力测试创建线程组设置线程数 1000Ramp-up 时间 10 秒添加 HTTP 请求目标http://localhost:8080/api/experience/list添加聚合报告监听器运行后观察「平均响应时间」是否 800ms、「错误率」是否为 0若超时优化点experience表对hot_score字段建索引ALTER TABLE experience ADD INDEX idx_hot_score (hot_score DESC);4.3 毕设加分项用 Docker 一键部署演示即使答辩不要求本地打包成 Docker 镜像能极大提升专业感。步骤如下在项目根目录创建DockerfileFROM openjdk:8-jdk-slim VOLUME [/tmp] ARG JAR_FILEtarget/*.jar COPY ${JAR_FILE} app.jar ENTRYPOINT [java,-Djava.security.egdfile:/dev/./urandom,-jar,/app.jar]执行构建命令# 先用 Maven 打包 mvn clean package -Dmaven.test.skiptrue # 构建镜像假设 jar 包名为 exam-platform-0.0.1-SNAPSHOT.jar docker build -t exam-platform . # 运行容器映射 8080 端口挂载文件存储卷 docker run -d -p 8080:8080 -v D:/exam_resources:/app/resources exam-platform此时访问http://localhost:8080即为 Docker 环境下的系统答辩时可现场docker ps展示容器运行状态。5. 毕设答辩前最后一小时代码精简与文档聚焦策略5.1 删除无用文件突出核心代码答辩材料中切忌堆砌所有文件。保留以下最小必要集后端pom.xml、application.yml、controller/下全部、service/impl/中ExperienceServiceImpl.java和ResourceServiceImpl.java、mapper/下对应 XML 或注解类前端src/router/index.js、src/store/index.js、src/views/下Dashboard.vue、ExperienceList.vue、GroupDetail.vue文档README.md含启动步骤、ER图.png用 draw.io 绘制标注user、resource、experience、group四张主表及外键注意main.js.bak是备份文件答辩材料中必须删除3-build.bat和2-run.bat若未修改过保留build.bat和run.bat即可避免让评委困惑版本差异。5.2 答辩话术设计用「问题-解法-效果」替代功能罗列不要说「我实现了用户管理模块」改用「考研学生常因信息分散错过重要通知问题所以我设计了小组进度 WebSocket 推送解法当组长更新『本周英语单词打卡完成率』时所有成员 2 秒内收到弹窗提醒效果答辩现场可演示从组长端修改进度到成员端实时刷新的全过程。」同理资料共享模块表述为「真题 PDF 按院校分类后学生常需翻 10 页才能找到目标文件问题我用 Elasticsearch 替代 LIKE 模糊查询解法输入『北大 数学一 2023』0.3 秒返回精准结果效果这比传统 SQL 查询快 17 倍。」注若实际未集成 ES此处可改为「用 MySQL 全文索引 多字段联合查询优化」重点在逻辑闭环5.3 查重规避关键点代码级差异化改造清单知网查重对代码相似度敏感务必修改以下位置pom.xml中artifactId改为exam-share-platform原可能是springboot-demo所有 Controller 类名后缀从Controller改为Endpoint如ResourceController→ResourceEndpointResultVO类中code字段类型从Integer改为String如200msg字段值全部重写原操作成功→请求已成功处理Vue 组件中data()返回的对象字段名避免用list/data等通用名改用resourceList/expArticleData最后检查git log确保至少有 3 次以上有意义的 commit如feat: add websocket progress sync、refactor: optimize file upload validation答辩时可展示 Git 历史证明开发过程真实。本文还有配套的精品资源点击获取