三亩地 三亩地SAN MU DI · CODE DIARY
交流投稿
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天，欢迎挑你感兴趣的翻一翻。

首页/学习日记/日记详情

SpringBoot+Vue选课系统项目实战：从环境配置到部署上线的完整指南

发布时间：2026/8/10 7:02:59 三亩地 编程学习日记
SpringBoot+Vue选课系统项目实战：从环境配置到部署上线的完整指南

这类前后端分离的选课系统项目，最核心的价值不是功能有多复杂，而是它提供了一个从零到一、能跑通、能看懂、能改代码的完整工程范本。对于正在做毕业设计、准备面试项目或者想学习SpringBoot+Vue整合的开发者来说，一个结构清晰、依赖明确、数据库可执行的源码，远比一堆理论讲解更有用。

这个项目标题点出了几个关键信息：SpringBoot后端、Vue前端、前后端分离、附带源码和数据库。这意味着你拿到手后，理论上配置好环境就能在本地运行起来，看到完整的选课业务流程。但“可完美运行”这个描述，在实际操作中往往取决于你的本地环境、依赖版本和配置细节。下面我会以一个做过多次项目部署和教学的经验，带你拆解这个项目从环境准备到功能验证的全过程，重点不是复述代码，而是告诉你如何让它在你的机器上真正跑起来，以及在这个过程中最容易卡住的地方在哪里。

1. 项目到手后，先别急着运行，搞清楚技术栈和结构

拿到一个声称“可完美运行”的源码包，第一步不是直接导入IDE运行，而是先花十分钟理清它的技术构成和目录结构。这能帮你预判可能遇到的问题。

1.1 核心技术栈确认

根据标题和常见组合，这个项目大概率采用了以下技术栈，你需要核对源码中的配置文件（如pom.xml,package.json）来确认：

  • 后端 (SpringBoot):
    • Web框架: Spring Boot 2.x (可能是2.7.x或3.x，差异较大)。
    • ORM框架: 极大概率是MyBatis或MyBatis-Plus，也可能是JPA。查看pom.xml里的依赖。
    • 数据库连接: MySQL驱动。确认数据库版本（如MySQL 5.7或8.0）。
    • 其他可能组件: Spring Security（权限）、Redis（缓存）、Swagger（API文档）。
  • 前端 (Vue):
    • 框架: Vue 2 或 Vue 3。这非常重要，决定了你的Node.js版本和后续安装命令。查看package.json中的vue版本号。
    • 构建工具: Vue CLI 或 Vite。查看是否有vue.config.js或vite.config.js。
    • UI库: Element UI (Vue 2) 或 Element Plus (Vue 3)，也可能是Ant Design Vue。
    • HTTP客户端: Axios。
    • 路由: Vue Router。
  • 数据库:
    • 通常附带一个SQL脚本文件（如.sql）。确认是完整的建库建表脚本，还是只有表结构。

1.2 目录结构快速浏览

一个标准的前后端分离项目，目录通常是分开的，或者在一个大目录下有两个子文件夹：

选课系统项目/ ├── backend/ # SpringBoot后端项目 │ ├── src/ │ ├── pom.xml # Maven依赖配置文件（关键！） │ └── application.yml / application.properties # 应用配置文件（关键！） └── frontend/ # Vue前端项目 ├── src/ ├── package.json # Node.js依赖配置文件（关键！） ├── vue.config.js # Vue CLI配置 └── public/

关键动作：打开后端pom.xml，看Spring Boot版本和MySQL驱动版本；打开前端package.json，看vue、element-ui/element-plus的版本。用笔记下来。

2. 环境准备：版本对齐是“完美运行”的前提

项目跑不起来，十有八九是环境版本对不上。不要用你机器上最新的版本，尽量匹配项目创建时的版本。

2.1 后端环境准备 (Java + MySQL + IDE)

  1. Java: 查看pom.xml中的<java.version>，或根据Spring Boot版本推断。Spring Boot 2.7.x 通常对应 Java 8 或 11；Spring Boot 3.x 必须使用 Java 17+。建议使用JDK 8或JDK 11，兼容性最广。
  2. Maven: 安装Maven 3.6.x及以上版本即可。配置好本地仓库和阿里云镜像加速下载。
  3. MySQL:
    • 安装MySQL 5.7 或 8.0。如果项目SQL脚本中有特定语法（如utf8mb4），MySQL 5.7及以上都支持。
    • 关键步骤：创建一个新的数据库，例如course_selection。字符集选utf8mb4，排序规则选utf8mb4_general_ci。
    • 运行项目附带的SQL脚本。如果脚本只有表结构，你可能需要手动插入一些测试数据（用户、课程等）。
  4. IDE: IntelliJ IDEA 或 Eclipse。IDEA对Spring Boot支持更好。用IDEA直接打开backend文件夹，它会自动识别为Maven项目。

2.2 前端环境准备 (Node.js + npm/yarn)

  1. Node.js: 这是最容易出问题的地方。
    • 如果package.json里vue版本是2.x，安装Node.js 14.x 或 16.x比较稳妥。
    • 如果是Vue 3，可以安装Node.js 16.x 或 18.x。
    • 绝对不要使用最新的Node.js 20+，很多老项目的依赖包可能不兼容。可以去Node.js官网下载历史版本。
  2. 包管理器: 使用npm或yarn。在项目frontend目录下，你会看到package-lock.json(npm)或yarn.lock(yarn)，建议使用对应的包管理器。
  3. 安装依赖：在frontend目录打开终端，运行：
    npm install # 或 yarn install
    • 常见坑点：如果安装失败，通常是网络问题或Node.js版本过高。可以尝试切换npm源：
      npm config set registry https://registry.npmmirror.com
    • 如果报错关于node-sass（老项目常用），而你的Node.js版本较高，可能需要降级Node.js，或者根据错误信息搜索特定版本的node-sass二进制包。

3. 配置修改：连接你的本地数据库和服务器

项目源码里的配置通常是连作者本地的数据库，你必须改成你自己的。

3.1 后端配置 (application.yml / application.properties)

找到后端配置文件，修改数据库连接信息：

# application.yml 示例 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/course_selection?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai username: root # 改成你的MySQL用户名 password: 123456 # 改成你的MySQL密码

注意：

  • serverTimezone=Asia/Shanghai对于MySQL 8.0很重要，避免时区错误。
  • useSSL=false在本地开发环境通常这样设置。
  • 如果用的是MySQL 5.7，驱动可能是com.mysql.jdbc.Driver。

3.2 前端配置 (环境变量或Axios基地址)

前端需要知道后端API的地址。常见配置位置：

  1. 在vue.config.js中配置代理（开发环境）：
    module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', // 你的SpringBoot后端地址 changeOrigin: true, pathRewrite: { '^/api': '' } } } } }
    这样，前端访问/api/xxx会被代理到http://localhost:8080/xxx。
  2. 在src目录下，可能有一个api文件夹或request.js文件，里面定义了Axios实例的baseURL。直接修改这个baseURL为你的后端地址，例如baseURL: 'http://localhost:8080'。

4. 启动与验证：从单服务到联调

不要前后端同时启动。先确保后端能独立运行并提供API。

4.1 启动后端SpringBoot项目

在IDEA中，找到主启动类（通常叫XxxApplication，有@SpringBootApplication注解），直接运行它的main方法。

成功标志：

  • 控制台打印出Spring Boot的Banner，没有红色ERROR日志。
  • 看到类似Tomcat started on port(s): 8080的信息。
  • 看到数据源初始化成功的日志。

常见问题排查：

  1. 端口占用：如果8080端口被占用，在application.yml中修改server.port。
  2. 数据库连接失败：
    • 错误信息：Access denied for user或Unknown database。
    • 排查：核对配置文件的用户名、密码、数据库名。确认MySQL服务已启动。
  3. 驱动类找不到：
    • 错误信息：java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver。
    • 排查：检查pom.xml中MySQL驱动依赖是否存在，版本是否匹配。尝试执行Maven的Reimport和Clean Install。

API测试：后端启动后，用浏览器或Postman访问http://localhost:8080/或http://localhost:8080/api/xxx（根据项目路由），看是否有响应。如果集成了Swagger，访问http://localhost:8080/swagger-ui.html或http://localhost:8080/doc.html查看所有接口。

4.2 启动前端Vue项目

在后端正常运行的前提下，在frontend目录的终端中运行：

npm run serve # 或 yarn serve

成功标志：

  • 终端显示编译成功，并给出本地访问地址，通常是http://localhost:8081或http://http://localhost:3000。
  • 浏览器打开该地址，能看到登录页或系统首页。

常见问题排查：

  1. 依赖安装失败：回到2.2节，解决Node.js版本和npm源问题。
  2. 编译错误：控制台会有明确的错误行和原因。常见于ESLint语法检查、组件导入路径错误、依赖版本冲突。根据错误信息搜索解决。
  3. 页面空白/JS错误：打开浏览器开发者工具（F12），查看Console面板报错。最常见的是跨域问题或API请求404。
    • 跨域：确保后端配置了CORS（项目通常已配），或前端vue.config.js的代理配置正确。
    • API 404：检查前端请求的URL和后端实际的接口地址是否匹配。利用浏览器Network面板，查看请求发向了哪里，响应是什么。

4.3 功能联调测试

前后端都启动后，进行核心业务流程测试：

  1. 用户登录：使用SQL脚本中的测试账号（如admin/123456）登录。这是检验前后端通信是否正常的第一步。
  2. 增删改查（CRUD）：
    • 增：尝试添加一门新课程。关注表单验证、提交后列表是否刷新、数据库是否写入。
    • 查：查看课程列表、学生列表。注意分页功能是否正常。
    • 改：编辑一条已有记录，保存后查看数据是否更新。
    • 删：删除一条记录，确认前端提示和数据库删除。
  3. 核心业务：模拟学生选课、退课流程。观察选课逻辑（是否满额、时间冲突判断）、数据一致性。

5. 项目深度理解与个性化修改

项目能跑通只是开始。要想把它变成你的“毕设/简历项目”，必须理解其内部设计并进行修改。

5.1 数据库设计分析

打开数据库，研究核心表：

  • user/student/teacher：用户表，如何区分角色？
  • course：课程表，有哪些字段（容量、时间、地点）？
  • student_course/selection：选课关系表，这是多对多的核心。 理解表之间的关系（外键），这关系到你如何设计新的业务功能。

5.2 后端代码结构分析

  • Controller层：在controller包下。看每个接口的URL、请求方法（@GetMapping,@PostMapping）、参数接收（@RequestBody,@PathVariable）。
  • Service层：业务逻辑所在。看选课、退课的核心逻辑是如何实现的（事务控制@Transactional、条件判断）。
  • Mapper/DAO层：数据访问层。看MyBatis的XML文件或Mapper接口方法，理解SQL是如何写的。
  • 实体类（Entity）：与数据库表对应的Java类。

5.3 前端代码结构分析

  • 路由（router）：在src/router/index.js中。看页面路径和权限控制（如果有）。
  • 组件（components）：看公共组件（如分页组件Pagination）是如何封装的。
  • 视图（views）：主要页面，如Course.vue,Selection.vue。学习其模板结构、数据绑定（data）、方法（methods）、生命周期钩子（mounted）。
  • API调用：在src/api目录下，学习如何封装Axios请求，如何在组件中调用。

5.4 如何进行“个性化”修改（毕设必备）

  1. 修改主题/样式：改掉默认的Logo、系统名称、颜色主题。在frontend/src/App.vue或布局组件中修改。
  2. 增加新功能：
    • 简单功能：在现有实体上增加字段（如给课程加一个“课程类型”），然后从前端表单到后端CRUD完整实现一遍。
    • 中等功能：实现“课程评价”模块。新建评价表，关联课程和学生，实现评价的提交和查看。
    • 复杂功能：实现“排课冲突自动检测”、“选课优先级（如高年级优先）”等。
  3. 优化现有功能：
    • 为列表查询增加更多筛选条件。
    • 添加数据导出功能（导出选课名单为Excel）。
    • 增加图表统计（使用ECharts），如各课程选课人数统计。

6. 部署与打包：从开发环境到可演示状态

本地运行成功，你还需要将它打包，方便演示或部署到简单服务器。

6.1 后端打包

在backend目录下，使用Maven命令：

mvn clean package -DskipTests

打包后会在target目录生成一个xxx.jar文件。这个Jar包包含了所有依赖，可以直接运行：

java -jar your-project.jar

注意：运行前确保application.yml中的数据库配置指向生产环境（或你打包时指定外部配置文件）。

6.2 前端打包

在frontend目录下，运行：

npm run build # 或 yarn build

打包后生成dist文件夹。里面的内容是静态文件（HTML, JS, CSS）。

6.3 简单部署方式

  1. 前后端分离部署：
    • 将前端dist文件夹里的所有文件，放到Nginx或Apache的静态网站目录下。
    • 修改Nginx配置，将API请求反向代理到后端Jar包运行的地址（如http://localhost:8080）。
    • 后端Jar包在服务器上通过java -jar命令或systemd服务运行。
  2. 简化部署（开发演示）：
    • 修改前端生产环境API地址（baseURL）为后端服务器的公网IP和端口。
    • 将前端dist文件夹直接拷贝到后端Spring Boot项目的src/main/resources/static目录下（覆盖前先备份），然后重新打包后端。这样打出来的Jar包就包含了前端页面，变成一个单体应用，直接运行java -jar即可访问。注意：这种方式只适合简单演示，不推荐生产使用。

7. 项目亮点提炼与面试准备

如果你要将此项目写入简历或进行答辩，需要提炼出技术亮点和你的思考。

  • 技术栈：清晰说明使用了SpringBoot+Vue前后端分离架构。
  • 核心功能：实现了基于角色的权限控制（RBAC）、课程的CRUD、学生选课/退课业务。
  • 难点与解决：
    • 跨域问题：如何通过后端配置CORS或前端代理解决。
    • 事务管理：在选课、退课等业务中，如何使用@Transactional保证数据一致性。
    • 前后端数据交互：如何设计RESTful API，如何使用Axios进行异步请求和拦截器处理。
  • 你的工作：重点！不要只说“下载了源码运行”。要说出你分析了数据库设计，修改了某个业务逻辑（例如增加了选课时间限制），优化了某个页面交互，或者修复了某个原有的Bug。

这个项目作为一个学习范本和毕设基础是非常合适的。关键在于，不要停留在“它能运行”。通过环境配置、代码阅读、功能修改和问题排查这一整套流程，你才能真正把SpringBoot和Vue的开发流程、调试方法、部署思路内化为自己的经验。下次遇到一个新的开源项目，你就能用类似的思路快速上手了。

编程学习 学习日记 实战经验
← 返回列表