这次我们来看一个基于 SpringBoot 和 Vue3 的前后端分离课程管理系统。对于高校、培训机构或企业内部培训部门来说一套能管理课程、教师、学生、选课和成绩的系统是刚需。这个项目用当前主流的技术栈SpringBoot Vue3实现了这些核心功能并且采用了前后端分离的架构这意味着前端和后端可以独立开发、部署和扩展非常适合作为学习项目或二次开发的起点。项目最值得关注的点在于其技术选型和功能完整性。它没有停留在简单的 CRUD而是包含了用户权限管理、课程发布、学生选课、成绩录入与统计等教务管理中的常见场景。对于开发者而言无论是想学习 SpringBoot 和 Vue3 的整合还是需要一个现成的后台管理系统模板这个项目都提供了清晰的代码结构和可运行的示例。本文将带你从零开始完成这个系统的环境搭建、项目启动、功能测试到接口联调的全过程。我们会重点关注前后端如何独立运行、接口如何对接、数据库如何初始化以及在实际部署中可能遇到的跨域、端口冲突、依赖版本等问题。如果你正在寻找一个 SpringBoot Vue3 的实战案例或者需要搭建一个轻量级的课程管理平台这篇文章的内容可以直接上手操作。1. 核心能力速览在深入代码之前我们先通过下表快速了解这个项目的核心特性和技术栈这有助于判断它是否适合你的需求。能力项说明项目类型前后端分离的 Web 应用课程管理系统技术栈后端SpringBoot 2.x, MyBatis-Plus, MySQL前端Vue 3, Element Plus, Axios, Vite主要功能用户管理管理员、教师、学生、课程管理、选课管理、成绩管理、数据统计部署方式后端可打包为 Jar 独立运行前端通过 Node.js 构建后部署于 Nginx 等静态服务器接口规范RESTful API通常使用 JSON 进行数据交换数据库MySQL 5.7 / 8.0项目提供 SQL 初始化脚本适合场景1.学习练手学习 SpringBoot Vue3 前后端分离开发全流程。2.毕业设计提供一个功能完整、技术栈较新的毕设项目基础。3.快速原型为学校或培训机构快速搭建一个内部课程管理 demo。硬件门槛开发机即可无需特殊 GPU。需要安装 JDK 8、Node.js 16、MySQL。启动复杂度中等。需要分别启动后端服务和前端开发服务器并确保数据库连接正确。2. 适用场景与使用边界这个项目是一个典型的教学管理类 Web 应用理解它的适用场景和边界能帮助你更好地决定如何使用它。它非常适合计算机相关专业的学生用于完成《软件工程》、《Web 开发》等课程的课程设计或毕业设计。项目结构清晰涵盖了用户权限、增删改查、前后端交互等核心知识点。刚接触 SpringBoot 或 Vue3 的开发者作为一个完整的案例你可以看到如何组织控制器、服务、实体层以及前端如何通过路由、组件、状态管理和 API 调用构建页面。需要快速验证业务逻辑的小团队如果你需要一个最基础的课程管理后台来演示想法可以直接在此项目基础上修改省去从零搭建框架的时间。它可能不适合超大规模、高并发的生产环境项目通常采用单体架构未涉及微服务、分布式缓存、消息队列等应对高并发的组件。直接用于海量用户场景需要做大量架构改造。需要极度定制化 UI/UX 的场景前端基于 Element Plus 组件库风格统一但定制化程度有上限。如果需要完全独特的视觉设计可能需要重写大量组件。寻求“开箱即用”的 SaaS 产品用户这是一个需要自行部署、维护和可能二次开发的代码项目而非直接注册即可使用的在线服务。安全与合规边界数据安全部署时务必修改默认的数据库密码并考虑对敏感信息如密码进行加密存储。在生产环境中需要配置 HTTPS、设置防火墙规则、防范 SQL 注入与 XSS 攻击。用户隐私如果处理真实的学生和教师信息需遵守相关的个人信息保护法规。本项目作为学习项目不涉及真实的隐私数据。版权与授权项目代码通常基于开源协议如 MIT、GPL使用时请遵守其协议规定。如果用于商业用途请仔细阅读协议条款并确认合规。3. 环境准备与前置条件在开始克隆和运行项目之前请确保你的开发环境满足以下要求。这是后续所有步骤能顺利进行的基础。1. 操作系统Windows 10/11, macOS, 或 Linux 发行版如 Ubuntu/CentOS。本文演示以 Windows 为例命令在 macOS/Linux 下可能略有不同如路径分隔符。2. 后端开发环境JDK版本 8 或 11推荐 11。SpringBoot 2.x 对 JDK 8 兼容性好。检查命令java -versionMaven版本 3.6用于管理项目依赖和打包。检查命令mvn -vIDE可选但推荐IntelliJ IDEA社区版或旗舰版或 Eclipse。IDEA 对 SpringBoot 支持更好。3. 前端开发环境Node.js版本 16.x 或 18.x推荐 LTS 版本。Vue3 和 Vite 需要较高版本的 Node.js。检查命令node -v和npm -v包管理器npm 或 yarn。npm 随 Node.js 安装yarn 需额外安装 (npm install -g yarn)。IDE可选Visual Studio Code 或 WebStorm。VSCode 配合 Vue 插件体验很好。4. 数据库MySQL版本 5.7 或 8.0。确保已安装并启动 MySQL 服务。检查命令登录 MySQLmysql -u root -p数据库管理工具可选Navicat, DBeaver, 或 MySQL Workbench用于直观地执行 SQL 脚本和查看数据。5. 网络与端口确保开发机的8080后端常用端口和5173Vite 前端开发服务器常用端口未被其他程序占用。如果需要远程访问数据库或接口需配置相应的防火墙或安全组规则。环境检查清单[ ] JDK 版本 1.8[ ] Maven 版本 3.6[ ] Node.js 版本 16[ ] MySQL 服务已启动[ ] 端口 8080 和 5173 空闲4. 安装部署与启动方式假设你已经从代码仓库如 Gitee 或 GitHub克隆了项目到本地。项目结构通常如下course-management-system/ ├── backend/ # SpringBoot 后端项目 │ ├── src/ │ ├── pom.xml │ └── ... ├── frontend/ # Vue3 前端项目 │ ├── src/ │ ├── package.json │ └── ... └── database/ # 数据库脚本 └── init.sql4.1 数据库初始化这是第一步为系统创建数据库和基础数据。使用 MySQL 客户端命令行或图形工具连接你的 MySQL 服务。创建一个新的数据库例如course_manageCREATE DATABASE IF NOT EXISTS course_manage DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;执行项目提供的database/init.sql脚本。这个脚本会创建所有必要的表如user,course,student_course,score等并可能插入一些初始数据如管理员账号。# 在命令行中执行需在 init.sql 文件所在目录 mysql -u root -p course_manage init.sql或者在图形化工具中直接打开并运行该 SQL 文件。4.2 后端服务启动与配置后端负责提供 RESTful API 和业务逻辑。导入项目使用 IDEA 打开backend文件夹。IDEA 会自动识别为 Maven 项目并开始下载依赖。修改配置找到src/main/resources/application.yml或application.properties文件修改数据库连接信息确保与上一步创建的数据库匹配。# application.yml 示例 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/course_manage?useUnicodetruecharacterEncodingutf-8useSSLfalseserverTimezoneAsia/Shanghai username: root password: your_password_here # 修改为你的数据库密码启动后端方式一IDE在 IDEA 中找到包含SpringBootApplication注解的主类通常是Application.java或*Application.java右键点击Run。方式二命令行在backend目录下执行 Maven 命令。# 先打包可选 mvn clean package -DskipTests # 运行打包后的 jar java -jar target/backend-0.0.1-SNAPSHOT.jar验证启动启动成功后控制台会打印 SpringBoot 的 Banner 和启动日志。在浏览器中访问http://localhost:8080或配置的端口如果能看到类似 Whitelabel Error Page这正常因为没有默认页面或项目自定义的欢迎页说明后端服务已成功运行。更直接的验证是访问一个健康检查接口如http://localhost:8080/actuator/health如果引入了相关依赖或者后续通过前端调用业务接口来验证。4.3 前端项目启动与配置前端负责用户界面和交互通过 API 与后端通信。安装依赖在终端或命令行中进入frontend目录运行以下命令安装项目所需的 npm 包。cd frontend npm install # 或使用 yarn yarn install这个过程可能会持续几分钟取决于网络速度和包的数量。配置 API 地址前端需要知道后端服务的地址。通常这个配置在src/api/request.js、src/utils/request.js或vite.config.js中的代理设置里。查找并修改打开src/api/request.js或类似文件找到baseURL配置项将其设置为你的后端服务地址例如// axios 实例配置示例 const service axios.create({ baseURL: http://localhost:8080, // 确保这里指向正确的后端地址和端口 timeout: 5000 });代理配置开发环境另一种常见做法是在vite.config.js中配置代理避免跨域问题。// vite.config.js 示例 export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, // 后端地址 changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) } } } })这样前端在开发时请求/api/user/login会被代理到http://localhost:8080/user/login。启动前端开发服务器在frontend目录下运行npm run dev # 或 yarn dev命令执行后终端会输出本地访问地址通常是http://localhost:5173。访问系统打开浏览器访问http://localhost:5173。你应该能看到系统的登录页面。使用数据库初始化脚本中提供的默认账号例如管理员账号可能是admin/123456进行登录。5. 功能测试与效果验证成功启动前后端后我们需要系统地测试核心功能确保系统运行正常。以下测试流程模拟了一个管理员从登录到管理课程、学生和成绩的完整操作。5.1 用户登录与权限验证测试目的验证系统身份认证和基于角色的权限控制是否正常工作。操作访问前端首页 (http://localhost:5173)进入登录页。输入使用不同的预置账号登录如管理员、教师、学生。管理员通常拥有所有菜单权限。教师可能只能管理自己教授的课程和学生成绩。学生只能查看可选课程、进行选课、查看个人成绩。预期结果登录成功跳转到系统主页。侧边栏或顶部菜单根据用户角色动态显示不同的功能模块。如果尝试访问无权访问的页面如学生直接输入管理员后台URL应被拦截或重定向。判断成功能成功登录且界面展示的菜单与账号角色相符。5.2 课程管理模块测试测试目的验证课程信息的增删改查CRUD功能。操作以管理员身份登录进入“课程管理”页面。测试步骤新增课程点击“新增”按钮填写课程名称如“Java程序设计”、课程编号、学分、任课教师、上课时间地点等信息提交。查询课程在列表页尝试按课程名称、教师等条件进行搜索过滤。编辑课程点击某门课程后的“编辑”按钮修改其信息如调整上课地点保存。删除课程尝试删除一门没有学生选课的课程。再尝试删除一门已有学生选课的课程观察系统如何处理应有约束禁止删除或提示先处理选课记录。预期结果新增、编辑操作后列表能即时刷新显示新数据。查询功能能准确过滤出目标课程。删除操作符合业务逻辑有合理的提示和约束。常见问题新增失败检查后端控制台日志常见原因是字段非空校验不通过、数据库唯一约束冲突如课程编号重复。查询无结果检查搜索条件是否与数据库数据匹配或查看网络请求参数是否正确。5.3 学生选课与退课测试测试目的验证学生选课业务流程及并发控制如果实现。操作使用一个学生账号登录。测试步骤查看可选课程进入“选课中心”或类似页面应能看到状态为“可选”的课程列表。进行选课选择一门课程点击“选课”。系统应提示选课成功并且该课程从“可选”列表移到“已选课程”列表。尝试重复选课对同一门课程再次点击“选课”系统应提示“已选过该课程”。退课在“已选课程”列表中对一门课程点击“退课”。成功后该课程应回到“可选”列表。选课人数限制如果课程设置了容量如限选30人测试当容量已满时其他学生是否无法再选。预期结果选课、退课流程顺畅业务规则唯一性、容量限制被严格执行。后端逻辑观察选课操作通常涉及向student_course关联表插入或删除记录并可能更新课程的已选人数。可以通过查看数据库表数据变化来验证。5.4 成绩管理模块测试测试目的验证教师录入、修改成绩以及学生、管理员查看成绩的功能。操作使用一个教师账号登录。测试步骤进入成绩管理教师应能看到自己教授的所有课程及选课学生列表。录入成绩选择一门课程找到某个学生输入成绩如 85保存。批量录入如果系统支持测试 Excel 导入成绩的功能。修改成绩修改已录入的成绩保存。权限验证换用学生账号登录应只能查看自己的成绩且不能修改。管理员账号应能查看所有成绩。预期结果成绩录入和修改成功页面即时更新。权限隔离有效学生无法越权操作。成绩可能支持多种类型平时成绩、期末成绩、总评计算逻辑正确。数据验证在数据库的score表中核对录入的成绩数据是否准确存储。5.5 数据统计与报表测试测试目的验证系统数据可视化或统计导出功能。操作以管理员身份登录查看“数据统计”、“报表”或“仪表盘”等模块。测试内容图表展示查看课程选课人数统计图、学生成绩分布图等是否正常加载和显示。数据导出尝试将课程列表、成绩单等导出为 Excel 或 PDF 格式检查文件是否能正常生成和下载内容是否完整准确。预期结果图表渲染正常数据准确导出功能可用文件格式正确。6. 接口 API 与前后端联调前后端分离的核心是 API 契约。理解并测试这些接口是二次开发或排查问题的基础。6.1 接口文档与调试工具项目可能自带接口文档如 Swagger UI也可能需要你通过代码或网络请求来梳理。Swagger UI如果集成启动后端服务后访问http://localhost:8080/swagger-ui.html或http://localhost:8080/doc.html如果使用 Knife4j。这里会列出所有控制器接口可以直观地进行在线测试。使用 API 调试工具推荐使用Postman或Apifox。你可以将浏览器的网络请求F12打开开发者工具进入 Network 标签页直接导入到这些工具中方便管理和重复测试。6.2 关键接口调用示例以下通过几个典型接口展示如何直接通过 HTTP 工具进行测试。1. 用户登录接口请求方法POSTURLhttp://localhost:8080/api/user/login(具体路径以项目为准)请求头Content-Type: application/json请求体 (JSON){ username: admin, password: 123456 }预期响应返回状态码 200响应体中包含tokenJWT令牌、用户信息等。{ code: 200, message: 登录成功, data: { token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..., userInfo: { ... } } }后续请求获取到的token需要放在后续请求的Authorization头中例如Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...2. 查询课程列表接口请求方法GETURLhttp://localhost:8080/api/course/list?pageNum1pageSize10courseNameJava请求头Authorization: Bearer {你的token}预期响应返回分页的课程数据列表。3. 学生选课接口请求方法POSTURLhttp://localhost:8080/api/student/course/select请求头Content-Type: application/json,Authorization: Bearer {你的token}请求体 (JSON){ studentId: 10001, courseId: 20001 }预期响应成功或失败的业务状态码和消息。6.3 前端 API 封装与调用观察在前端项目中查看src/api/目录下的文件如course.js,user.js这里封装了所有对后端接口的调用。理解这里的封装方式有助于你进行定制修改。// 示例src/api/course.js import request from /utils/request // 导入配置好的 axios 实例 export function getCourseList(params) { return request({ url: /course/list, method: get, params }) } export function addCourse(data) { return request({ url: /course, method: post, data }) }在前端组件中会这样调用import { getCourseList } from /api/course // 在 Vue 组件的 methods 或 setup 中 const loadCourseData async () { try { const res await getCourseList({ pageNum: 1, pageSize: 10 }) this.courseList res.data.list // 或根据实际响应结构调整 } catch (error) { console.error(获取课程列表失败, error) } }联调关键点跨域问题开发时前端服务器如localhost:5173访问后端服务器localhost:8080属于跨域。解决方案已在4.3节提到1) 后端配置CrossOrigin注解2) 前端配置代理vite.config.js。请求/响应格式确保前端传递的参数名、格式JSON/FormData与后端接口定义一致。后端返回的数据结构如code、message、data也要与前端封装的请求拦截器中的处理逻辑匹配。Token 管理登录成功后前端需要将 token 存储起来如localStorage或Vuex/Pinia并在每次请求时自动携带。查看src/utils/request.js中的请求拦截器是如何实现这点的。7. 项目构建与生产部署开发测试完成后需要将项目构建并部署到生产或测试环境。7.1 后端项目打包在backend目录下使用 Maven 打包生成可执行的 Jar 文件。cd backend mvn clean package -DskipTests打包成功后在target/目录下会生成backend-0.0.1-SNAPSHOT.jar名称可能不同。这个 Jar 包包含了应用本身及其所有依赖。7.2 前端项目构建在frontend目录下运行构建命令生成静态文件。cd frontend npm run build # 或 yarn build构建完成后会在项目根目录下生成一个dist文件夹里面包含了所有优化后的 HTML、CSS、JavaScript 和资源文件。7.3 生产环境部署有两种主流部署方式方式一前后端分离部署推荐后端将打包好的 Jar 文件上传到服务器。使用java -jar backend-0.0.1-SNAPSHOT.jar启动或使用systemd、nohup或容器Docker来守护进程。可以通过--server.port8081参数指定端口。前端将dist文件夹内的全部内容部署到 Nginx 或 Apache 等 Web 服务器上。Nginx 配置关键点将根目录指向dist文件夹。配置反向代理将/api等 API 请求转发到后端服务地址以解决跨域和生产环境下的请求问题。server { listen 80; server_name your-domain.com; # 你的域名或IP # 前端静态资源 location / { root /path/to/your/frontend/dist; index index.html; try_files $uri $uri/ /index.html; # 支持 Vue Router 的 history 模式 } # 反向代理后端 API location /api/ { proxy_pass http://localhost:8080/; # 后端服务地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }方式二前后端整合部署简易将前端构建出的dist文件夹内的静态文件复制到后端 SpringBoot 项目的src/main/resources/static/目录下然后重新打包后端。这样一个 Jar 包就同时包含了前端和后端。访问http://server:port即可。这种方式适合简单的演示或内网小应用但不利于前后端独立更新。8. 常见问题与排查方法在部署和运行过程中你可能会遇到以下问题。这里提供系统的排查思路。问题现象可能原因排查方式解决方案前端页面空白或 JS/CSS 加载失败1. 构建路径错误。2. 资源文件未正确复制。3. Nginx 配置根目录错误。1. 浏览器 F12 查看 Console 和 Network 标签页看具体哪个文件 404。2. 检查dist/index.html中引用的资源路径。1. 在vite.config.js中正确配置base。2. 确保 Nginxroot指向正确的dist目录。前端访问后端接口 4041. 后端服务未启动或端口不对。2. 前端请求的 URL 路径错误。3. Nginx 代理配置错误。1. 检查后端服务是否在运行 (ps -ef | grep java)。2. 对比前端代码中的baseURL和实际后端地址。3. 查看 Nginx 错误日志。1. 启动或重启后端服务。2. 修正前端axios配置或vite.config.js中的代理配置。3. 修正 Nginx 的proxy_pass配置。前端访问后端接口跨域错误 (CORS)浏览器同源策略阻止。开发环境常见。浏览器 F12 Console 看到Access-Control-Allow-Origin相关错误。开发环境使用前端代理Vite proxy。生产环境后端配置 CORS 或通过 Nginx 代理解决。数据库连接失败1. MySQL 服务未启动。2.application.yml中数据库配置错误IP、端口、库名、用户名、密码。3. 数据库驱动版本不匹配。查看后端启动日志通常会有明确的连接失败信息。1. 启动 MySQL 服务。2. 仔细核对配置文件特别是密码中的特殊字符。3. 检查pom.xml中的 MySQL 驱动版本是否与数据库版本兼容。登录失败提示“用户名或密码错误”1. 数据库用户表user中无此用户。2. 密码加密方式不匹配前端传明文后端对比密文。1. 直接查询数据库user表确认用户存在。2. 查看后端登录接口接收到的密码明文对比数据库存储的密文。1. 运行初始化 SQL 脚本或手动插入用户。2. 确认前后端密码加密/校验逻辑一致。通常使用 Spring Security 的BCryptPasswordEncoder。页面显示“无权限”或菜单不显示1. 用户角色权限配置错误。2. 前端路由守卫或权限判断逻辑问题。3. Token 失效或未正确传递。1. 检查数据库用户角色字段。2. 查看浏览器 LocalStorage 中的 token 和用户信息。3. 查看后端接口返回的用户信息中是否包含正确的权限标识。1. 修正数据库中的用户角色数据。2. 检查前端src/permission.js或路由守卫逻辑。3. 确保每次请求都携带有效的 Token。打包 Jar 后运行报错1. 依赖冲突或缺失。2. 配置文件未被打包或路径问题。3. 端口被占用。1. 使用java -jar xxx.jar运行查看详细堆栈错误。2. 检查 Jar 包内BOOT-INF/classes/下是否有配置文件。1. 使用mvn dependency:tree检查依赖排除冲突。2. 确保application.yml在resources目录下。3. 更换端口java -jar xxx.jar --server.port8081。9. 二次开发与扩展建议如果你希望基于此项目进行功能扩充或代码学习可以参考以下方向功能增强课程评价系统增加学生对课程和教师的评价功能。消息通知集成邮件或站内信通知学生选课成功、成绩发布等。文件上传允许教师上传课程资料PPT、视频学生下载。考勤管理结合课程表增加学生签到功能。更复杂的权限使用 Spring Security 实现更细粒度的权限控制如基于 URL 或方法的权限。技术栈深化引入 Redis缓存课程列表、用户信息等热点数据提升查询性能。引入 RabbitMQ/Kafka将耗时的操作如成绩统计报表生成异步化。接口文档更规范地集成 Swagger 或 Knife4j并维护更新。单元测试为 Service 层和 Controller 层补充 JUnit 单元测试。前端优化使用 Pinia 替代 Vuex 进行状态管理优化组件封装和打包体积。代码结构学习后端重点学习Controller接收请求、Service业务逻辑、Mapper数据访问的分层架构。理解MyBatis-Plus如何简化 CRUD 操作。前端学习 Vue 3 的Composition API使用Element Plus组件的调用以及如何通过axios拦截器统一处理请求和响应。前后端交互理解 RESTful API 设计规范以及如何通过 TokenJWT进行无状态认证。这个基于 SpringBoot 和 Vue3 的课程管理系统项目提供了一个非常扎实的前后端分离开发实战样本。它涵盖了从环境搭建、数据库设计、接口编写到前端联调、打包部署的完整流程。对于学习者你可以逐层深入代码理解每个模块的作用对于实践者你可以以此为基础快速构建出符合自己业务需求的管理后台。项目运行中遇到的大部分问题都可以通过检查日志、核对配置、分析网络请求来定位。建议在深入修改前先确保能稳定运行原始版本并做好代码备份。