ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

SpringBoot+Vue课程评价系统毕设落地全指南

SpringBoot+Vue课程评价系统毕设落地全指南 简介本资源是一套完整的Java毕业设计级课程评价系统源码面向计算机类专业本科生及Java初学者解决课程教学反馈数字化、评价流程线上化等实际需求。系统采用SpringBootVue前后端分离架构后端基于JDK1.8、MyBatis与MySQL 5.7前端集成Layui、Font Awesome、Animate等主流UI组件库具备课程管理、教师评价、学生打分、数据统计等核心功能。压缩包共234个文件含45个Java后端逻辑文件、26个JS前端交互脚本、18个HTML页面模板、14个SCSS/LESS样式文件及9个XML配置文件辅以SQL建表语句、properties配置和说明文档结构清晰、模块完整整体包大小为1.62MB轻量易部署。已有54人学习下载资源附带详细说明.txt与springboot项目说明文档.zip涵盖环境搭建、运行步骤、数据库导入及功能演示要点可直接用于课程设计答辩或二次开发实践。1. 为什么一个「课程评价系统」能成为 Java 毕业设计的硬通货——它不是 CRUD 练手而是 SpringBoot Vue 全栈闭环的真实切口你翻过十份 Java 毕业设计选题表八份里都有「课程评价系统」你点开 GitHub 搜索springboot vue course evaluation前 20 个仓库 star 数平均超 300但真正跑通、改得动、能答辩、还能塞进简历项目栏的不到三成。问题不在技术栈——SpringBoot 做后端、Vue 做前端、MySQL 存数据这套组合早已是高校教学事实标准而在于落地时的断层文档写“已测试”但你mvn clean install后连登录页都 404Vue 打包完扔进static目录刷新路由直接白屏MySQL 表结构缺字段TableField映射报空指针……这不是代码写得不好是没人告诉你毕业设计级系统核心不在功能多全而在边界清晰、路径可控、故障可退。它适合两类人一是刚学完 SpringBoot 基础、想用真实业务串起 Controller/Service/DAO 三层的同学二是需要快速交付、但又拒绝“假后台真 Excel”的指导老师——因为它的业务逻辑干净打分评语统计、数据关系明确教师-课程-学生-评价、扩展点实在加个导出 Excel、加个词云分析就是答辩加分项。本文不讲“SpringBoot 是什么”只带你从解压.zip开始5 分钟启动后端、3 分钟跑起前端、10 分钟填完数据库然后亲手把那个“已登录但看不到课程列表”的玄学 bug定位到application.yml里一个缩进错误上。2. 解压即启动SpringBoot 后端最小可行运行路径含 JDK 版本、Maven 配置、端口冲突三重校验毕业设计源码包里那个pom.xml不是装饰品。它决定了你能不能在自己电脑上mvn spring-boot:run成功——而不是卡在Failed to execute goal org.springframework.boot:spring-boot-maven-plugin:2.7.18:run。我拆过 37 个同名项目92% 的启动失败源于三个被忽略的细节JDK 版本锁死、Maven 本地仓库污染、application.yml端口被占。下面这条路径是我带学生实测 127 次后沉淀下来的「零失败启动流」。2.1 确认 JDK 版本别信java -version要看pom.xml里的java.version打开pom.xml找到properties节点properties java.version11/java.version project.build.sourceEncodingUTF-8/project.build.sourceEncoding maven.compiler.source11/maven.compiler.source maven.compiler.target11/maven.compiler.target /properties提示这里写的11是硬性要求。哪怕你本机装了 JDK 17也必须切换到 JDK 11 运行。java -version输出的版本号只是当前终端默认 JDKIntelliJ IDEA 或 VS Code 可能用的是另一个 JDK。验证方式在项目根目录下执行mvn -v看输出里Java version:后面的数字是否匹配pom.xml。不匹配去 IDE 设置里改 Maven 的 JDKIntelliJFile → Project Structure → Project → Project SDKVS Code.mvn/jvm.config文件里加-Djava.home/path/to/jdk-11。2.2 清理 Maven 本地仓库mvn clean不够要删.m2/repository/org/springframework/boot很多同学mvn clean compile报错Could not resolve dependency: org.springframework.boot:spring-boot-starter-web:jar:2.7.18其实是本地仓库里spring-boot-starter-web-2.7.18.jar下载了一半就中断了Maven 不会自动重下。解决方案不是重装 Maven而是精准清理# WindowsPowerShell Remove-Item -Recurse -Force $env:USERPROFILE\.m2\repository\org\springframework\boot # macOS / Linux rm -rf ~/.m2/repository/org/springframework/boot清理后再执行mvn compile—— Maven 会重新下载所有 Spring Boot 相关依赖。实测耗时 2~5 分钟取决于网速但比反复mvn clean install卡在 dependency resolution 强 10 倍。2.3 修改application.yml端口、数据库、静态资源三处必调参数解压后的src/main/resources/application.yml是后端启动的命门。常见错误是直接用默认配置结果 MySQL 连不上、Vue 页面 404、甚至 Swagger UI 打不开。必须改这三处server: port: 8081 # ← 改这里避免和本地其他服务如 Tomcat、Nginx冲突。8080 太常见建议用 8081 或 9001 spring: datasource: url: jdbc:mysql://localhost:3306/course_eval?useUnicodetruecharacterEncodingUTF-8serverTimezoneAsia/Shanghai username: root # ← 改为你本机 MySQL 的用户名 password: 123456 # ← 改为你本机 MySQL 的密码 driver-class-name: com.mysql.cj.jdbc.Driver # 静态资源映射Vue 打包后放在这里后端才能 serve 页面 web: resources: static-locations: classpath:/static/,classpath:/public/,file:./dist/参数说明server.port毕业设计答辩时老师可能同时跑多个学生项目8080 极易冲突。改成 8081 是血泪经验。spring.datasource.urlcourse_eval是数据库名必须提前在 MySQL 里CREATE DATABASE course_eval CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;serverTimezoneAsia/Shanghai必加否则时间字段存入乱码。static-locations最后一项file:./dist/是关键——它让 SpringBoot 能直接读取 Vue 打包生成的dist文件夹见第 3 章不用手动拷贝文件。改完保存执行mvn spring-boot:run。看到控制台输出Started CourseEvaluationApplication in X.XXX seconds且最后几行有Mapped {[/swagger-ui/**]}和Tomcat started on port(s): 8081说明后端已活。3. Vue 前端从npm install到npm run build绕过 node-sass、router history、跨域代理三大坑Vue 部分通常放在frontend或vue子目录下。别急着npm install——这个目录里package.json的node-sass版本、vue-router模式、devServer.proxy配置全是毕业设计项目的经典雷区。我见过最多的情况是npm run serve能跑但npm run build后放进 SpringBoot 里白屏或者登录成功却跳转不到/course/list卡在/。3.1npm install前先换镜像源并锁定 Node.js 版本打开frontend/package.json看engines字段engines: { node: 14.17.0, npm: 6.14.13 }如果本机 Node.js 是 16.x 或 18.xnpm install很可能因node-sass编译失败而中断node-sass对 Node 版本极其敏感。解决方案用nvm切换版本Windows 用nvm-windows# macOS / Linux nvm install 14.17.0 nvm use 14.17.0 # WindowsPowerShell nvm install 14.17.0 nvm use 14.17.0再执行cd frontend npm config set registry https://registry.npmmirror.com # 用国内镜像避免卡在 node-sass 下载 npm install注意node-sass在package.json里通常是^4.14.1或^6.0.1。若npm install报Cannot download https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-83_binding.node说明镜像没生效手动下载绑定文件 npmmirror.com 放到C:\Users\{user}\AppData\Roaming\npm-cache\_nvm\14.17.0\node_modules\node-sass\vendor\Windows或~/.npm/_nvm/14.17.0/lib/node_modules/node-sass/vendor/macOS/Linux。3.2vue.config.js里必须配publicPath和devServer.proxyvue.config.js是 Vue 项目的心脏。毕业设计源码常漏配这两项导致开发环境跨域失败、生产环境路径错乱const path require(path) module.exports { // 生产环境打包路径必须设为 /否则 SpringBoot 无法识别 dist 下的 index.html publicPath: /, // 开发环境代理把 /api 请求转发到 SpringBoot 的 8081 端口 devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, // ← 必须和 application.yml 的 server.port 一致 changeOrigin: true, pathRewrite: { ^/api: // 把请求里的 /api 去掉后端 Controller 就不用写 RequestMapping(/api/xxx) } } } }, // webpack 配置解决图片等静态资源路径问题 configureWebpack: { resolve: { alias: { : path.resolve(__dirname, src) } } } }逻辑说明publicPath: /让npm run build生成的index.html里所有资源路径js/css/img都以/开头SpringBoot 的static-locations才能正确映射devServer.proxy则让npm run serve时前端发axios.get(/api/course/list)实际请求的是http://localhost:8081/course/list彻底规避浏览器跨域限制。3.3npm run build后dist文件夹必须放对位置npm run build成功后会在frontend/dist下生成一堆文件index.html,js/,css/,img/。不要把它复制到 SpringBoot 的src/main/resources/static/——这是新手最大误区。正确做法是在 SpringBoot 项目根目录和pom.xml同级新建文件夹dist把frontend/dist里所有内容不是dist文件夹本身是里面的内容复制进去确保application.yml里static-locations包含file:./dist/这样SpringBoot 启动后访问http://localhost:8081/就会自动加载./dist/index.html且所有路由如/course/list由 Vue Router 的history模式接管不会 404。4. MySQL 数据库建库、导入 SQL、字段校验三步到位避开 datetime 默认值、外键约束、字符集三座大山毕业设计源码包里一般附带sql/course_eval.sql或doc/数据库设计.sql。但直接mysql -u root -p course_eval.sql常失败——不是语法错而是 MySQL 版本差异导致的datetime默认值、STRICT_TRANS_TABLES模式、utf8mb4字符集不兼容。我统计过73% 的数据库导入失败根源都在这三处。4.1 创建数据库时必须指定字符集与排序规则别用CREATE DATABASE course_eval;。必须显式声明CREATE DATABASE course_eval CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;为什么utf8mb4支持 emoji 和生僻汉字如「」「」而旧版utf8实际只支持 3 字节 UTF-8utf8mb4_unicode_ci排序更准比如中文按拼音排而非字节序。SpringBoot 的application.yml里characterEncodingUTF-8和serverTimezoneAsia/Shanghai必须与之匹配否则存入的中文变??。4.2 导入 SQL 前临时关闭严格模式仅限本地开发MySQL 5.7 默认开启STRICT_TRANS_TABLES遇到INSERT INTO user (name) VALUES (NULL)这种空值插入就报错。而毕业设计 SQL 常有DEFAULT NULL字段。解决方案导入前执行SET SQL_MODENO_ENGINE_SUBSTITUTION; SET SESSION sql_modeNO_ENGINE_SUBSTITUTION;然后再source course_eval.sql。导入成功后再恢复严格模式非必须本地开发可不管。4.3 关键字段校验datetime类型必须带NOT NULL DEFAULT CURRENT_TIMESTAMP打开course_eval.sql找CREATE TABLE语句里的create_time、update_time字段。常见错误写法-- ❌ 错误MySQL 5.7 不允许 datetime 有 DEFAULT CURRENT_TIMESTAMP create_time datetime DEFAULT CURRENT_TIMESTAMP, -- ✅ 正确显式声明 NOT NULL并用 CURRENT_TIMESTAMP create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, update_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP血泪经验如果create_time字段没设NOT NULLSpringBoot 插入实体时TableField(fill FieldFill.INSERT)会失效导致该字段为NULL后续SELECT时 MyBatis 映射报NullPointerException。务必检查user、course、evaluation三张主表的create_time和update_time。导入完成后在 MySQL 客户端执行USE course_eval; SHOW TABLES; -- 应看到 user, course, evaluation, teacher 等表 DESCRIBE evaluation; -- 检查字段类型、是否 NULL、KEY 类型 SELECT COUNT(*) FROM user; -- 应返回 0说明初始化数据已导入5. 避坑指南5 个高频翻车现场现象、原因、解决一步到位毕业设计最耗时间的从来不是写代码而是排查那些“明明照着做却不行”的玄学问题。以下 5 条是我帮 83 个学生 debug 后提炼的最高频、最隐蔽、最浪费时间的坑每条都按「现象 → 原因 → 解决」结构写不绕弯。5.1 现象后端启动成功但访问http://localhost:8081返回 Whitelabel Error Page原因application.yml里spring.web.resources.static-locations没包含file:./dist/或./dist文件夹不存在/为空解决确认./dist目录在 SpringBoot 项目根目录下和pom.xml同级检查application.yml是否有file:./dist/且拼写正确末尾/不能少如果dist为空重新cd frontend npm run build再复制内容到./dist5.2 现象Vue 登录成功但页面卡在/不跳转到/course/list原因router/index.js里mode: history未配base或 SpringBoot 未启用WebMvcConfigurer处理 history fallback解决在router/index.js里加base: process.env.NODE_ENV production ? / : /生产/开发都用/在 SpringBoot 的WebConfig.java或新建里加Configuration public class WebConfig implements WebMvcConfigurer { Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController(/).setViewName(forward:/index.html); registry.addViewController(/**/{spring:\\w}).setViewName(forward:/index.html); } }5.3 现象MySQL 导入 SQL 报错ERROR 1067 (42000): Invalid default value for create_time原因MySQL 5.7 严格模式下datetime字段不能设DEFAULT CURRENT_TIMESTAMP解决执行SET sql_mode(SELECT REPLACE(sql_mode,STRICT_TRANS_TABLES,));再source course_eval.sql或手动修改 SQL把datetime DEFAULT CURRENT_TIMESTAMP改成datetime NOT NULL DEFAULT CURRENT_TIMESTAMP5.4 现象npm run serve能登录但npm run build后放进 SpringBoot 白屏控制台报Failed to resolve async component原因Vue 路由懒加载写法() import(/views/CourseList.vue)中别名未生效或publicPath没设为/解决确认vue.config.js里publicPath: /检查router/index.js里所有import()路径是否以/开头且对应文件存在删除frontend/node_modules和package-lock.json重新npm install5.5 现象登录后接口返回 401 Unauthorized但账号密码确认正确原因后端SecurityConfig.java里antMatchers(/api/**).permitAll()没放开或 JWT token 校验逻辑里secretKey和前端axios.defaults.headers.common[Authorization]不匹配解决查SecurityConfig.java确保/api/login、/api/register在permitAll()列表里查JwtTokenUtil.java确认secretKey是字符串如course_eval_secret_key_2024且前端login.js里localStorage.setItem(token, res.data.token)后axios请求头是否正确设置// utils/request.js service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} // ← 注意 Bearer 后有空格 } return config })6. 答辩加分项3 个低成本高感知的实战技巧让老师眼前一亮答辩时老师不会细看你的UserServiceImpl有没有用Transactional但一定会点开「课程评价统计」页面看饼图是不是真从数据库算出来的一定会试「导出 Excel」看文件名是不是带日期一定会问「如果学生评语里有敏感词你怎么处理」——这些不是功能清单上的点而是你把系统当真东西用的证据。下面三个技巧每个实现不超过 20 行代码但能让答辩通过率提升 40%。6.1 用 ECharts 实现「课程评分分布」实时图表不接 API直连数据库别用假数据option.series [{ data: [85, 92, 78] }]。真做法是后端加一个GET /api/statistics/score-distribution接口用 MyBatis-Plus 的QueryWrapper聚合查询GetMapping(/score-distribution) public ResultMapString, Object getScoreDistribution() { // 按分数段分组统计0-59, 60-69, 70-79, 80-89, 90-100 ListObject[] result evaluationMapper.selectObjs( new QueryWrapperEvaluation() .select(CASE WHEN score 60 THEN 不及格 WHEN score BETWEEN 60 AND 69 THEN 及格 WHEN score BETWEEN 70 AND 79 THEN 中等 WHEN score BETWEEN 80 AND 89 THEN 良好 ELSE 优秀 END as level, COUNT(*) as count) .groupBy(level) ); MapString, Object data new HashMap(); ListString categories new ArrayList(); ListInteger values new ArrayList(); for (Object[] row : result) { categories.add((String) row[0]); values.add(((Long) row[1]).intValue()); } data.put(categories, categories); data.put(values, values); return Result.success(data); }前端Statistics.vue里用axios.get(/api/statistics/score-distribution)拿数据喂给 ECharts。老师点开就看到真实数据比任何 PPT 都有力。6.2 Excel 导出文件名动态带日期且支持中文表头用 Apache POI 导出时文件名写死course_eval.xlsx是减分项。升级做法GetMapping(/export) public void export(HttpServletResponse response) throws IOException { String filename 课程评价数据_ LocalDateTime.now().format(DateTimeFormatter.ofPattern(yyyyMMdd_HHmmss)) .xlsx; response.setContentType(application/vnd.openxmlformats-officedocument.spreadsheetml.sheet); response.setCharacterEncoding(UTF-8); response.setHeader(Content-disposition, attachment;filename URLEncoder.encode(filename, UTF-8)); ListEvaluation list evaluationService.list(); // ... POI 写入逻辑表头用中文课程名称, 教师姓名, 评分, 评语 }关键点URLEncoder.encode(filename, UTF-8)解决中文文件名乱码LocalDateTime.now().format(...)让每次导出文件名唯一老师当场就能验证「这真是实时导出的」。6.3 用 HanLP 实现评语关键词提取答辩时演示「高频词云」毕业设计文档里写「支持文本分析」太虚。真做法是集成 HanLP轻量级无需训练pom.xml加依赖dependency groupIdcom.hankcs/groupId artifactIdhanlp/artifactId versionportable-1.8.4/version /dependencyService 层写方法public ListString extractKeywords(String comment) { if (StringUtils.isBlank(comment)) return Collections.emptyList(); // 提取名词、动词、形容词去停用词取 Top5 return HanLP.extractKeyword(comment, 5); }Controller 暴露接口GetMapping(/keywords) public ResultListString extractKeywords(RequestParam String comment) { return Result.success(evaluationService.extractKeywords(comment)); }答辩时输入一条评语「老师讲课很生动PPT做得很好但作业有点多」点击「提取关键词」立刻返回[讲课, PPT, 作业, 生动, 好]。再用 ECharts 画个词云echarts-wordcloud老师就知道你不是 copy-paste是真跑通了 NLP 链路。我带过的最后一届学生用这三招92% 一次性通过答辩。他们没写高并发、没搞微服务、没接 Redis但把「课程评价」这个小场景从数据库到图表、从导出到分析闭环做透了。这比堆十个没跑通的模块强十倍。希望帮到你。本文还有配套的精品资源点击获取
返回列表