这类项目最值得关注的不是功能有多全而是能不能在你自己的电脑上用最少的配置时间从零跑起来并且代码结构清晰到能放进简历里。SpringBoot Vue3 的组合对于做毕设或者攒一个管理系统的实战项目来说是当前非常稳妥的选择。它意味着后端能快速搭建 REST API前端能用上现代框架的响应式特性前后端分离的架构也符合主流企业开发规范。但很多教程只给源码不讲环境怎么配、依赖版本冲突怎么解决、前后端联调时跨域等坑怎么绕。结果就是“源码在手跑不起来”。我更建议把搭建过程拆成三步先把后端 SpringBoot 项目在 IDEA 里跑通再把前端 Vue3 项目用 npm 跑起来最后解决前后端对接的细节。整个过程如果环境顺利两小时左右确实能看到完整界面但如果卡在某个环节可能半天都耗进去。下面我就按一个真实从零开始的搭建顺序带你走一遍。我会重点讲那些容易卡住的地方比如 Node 版本、Maven 依赖、数据库配置、跨域处理以及怎么把代码组织得既能让项目运行又能成为你面试时可以讲清楚的技术亮点。1. 动手之前先理清技术栈和工具版本很多人拿到源码打开就运行报错了才开始查。其实在敲第一行命令之前先把环境对齐能避开至少 50% 的莫名错误。1.1 核心技术栈与版本选择这个“酒店管理系统”通常包含以下模块你需要知道每个部分用什么技术实现后端 (Backend)SpringBoot 提供 RESTful API处理业务逻辑。通常包含用户、房间、订单、权限管理等模块。前端 (Frontend)Vue 3 构建用户界面可能搭配 Element Plus 或 Ant Design Vue 等 UI 库。数据库 (Database)MySQL 存储持久化数据。有时也会用 Redis 做缓存或会话管理。项目构建与管理后端用 Maven 或 Gradle前端用 npm 或 yarn。版本是第一个大坑。不同版本的 SpringBoot、Vue、Node.js、MySQL 驱动之间可能存在兼容性问题。对于毕设或学习项目我建议选择成熟、稳定、资料多的版本组合而不是盲目追新。一个经过大量项目验证的稳定组合参考JDK: 8 或 11 (LTS 版本企业常用)SpringBoot: 2.7.x (相比 3.x 更稳定生态兼容性好)Vue: 3.2.x 或 3.3.xNode.js: 16.x 或 18.x (LTS 版本避免用最新的奇数版)MySQL: 5.7 或 8.0IDE: IntelliJ IDEA (社区版即可) VS Code注意如果你拿到的源码指定了特定版本比如pom.xml里写了2.7.18优先使用源码指定的版本这是最保险的。1.2 本地开发环境清单在开始前请确保你的电脑上已经安装并配置好以下工具。不要嫌麻烦这是“磨刀不误砍柴工”。Java 环境安装 JDK 8 或 11。配置JAVA_HOME环境变量并把%JAVA_HOME%\bin添加到PATH。验证打开命令行输入java -version和javac -version能看到对应版本号。Node.js 与 npm从官网下载 LTS 版本的 Node.js 安装包安装时会自动包含 npm。验证命令行输入node -v和npm -v。Maven下载 Maven 二进制包解压到某个目录如D:\maven。配置MAVEN_HOME环境变量并把%MAVEN_HOME%\bin添加到PATH。验证命令行输入mvn -v。小技巧IDEA 通常内置了 Maven你也可以直接在 IDEA 的设置里指定使用你刚安装的这个避免版本混乱。MySQL安装 MySQL 5.7 或 8.0。记住你安装时设置的root用户密码。安装一个图形化管理工具如 Navicat、MySQL Workbench 或 DBeaver。后面导入数据库脚本、查看数据会方便很多。IDE / 编辑器IntelliJ IDEA用于后端 Java 项目。社区版免费功能足够。VS Code用于前端 Vue 项目。轻量且插件生态丰富。确保 IDEA 安装了Lombok插件。很多 SpringBoot 项目用 Lombok 简化实体类代码没有插件 IDEA 会报错。把这些环境都检查一遍确认版本无误我们再进入下一步。2. 后端 SpringBoot 项目从导入到启动后端是整个系统的引擎先把它调通确保 API 能正常响应。2.1 获取与导入项目源码假设你有一个名为hotel-management-backend的 SpringBoot 项目源码压缩包。解压将源码解压到一个没有中文和空格的路径下例如D:\projects\hotel-backend。用 IDEA 打开打开 IntelliJ IDEA。选择File-Open然后导航到你解压的文件夹选择包含pom.xml文件的根目录点击OK。IDEA 会识别为 Maven 项目并开始自动下载依赖右下角有进度条。第一次打开需要等待依赖下载速度取决于网络。2.2 关键配置文件检查与修改依赖下载完成后先别急着运行。有几个配置文件必须根据你的本地环境修改否则 100% 连不上数据库。找到配置文件通常位于src/main/resources/目录下。可能是application.properties或application.yml。修改数据库连接找到关于spring.datasource的配置。你需要修改以下几项# 如果是 application.yml 格式 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/hotel_db?useUnicodetruecharacterEncodingutf-8serverTimezoneAsia/Shanghai username: root password: your_password_here # 改成你安装MySQL时设置的root密码localhost:3306确保你的 MySQL 服务正在运行且端口是 3306。hotel_db这是数据库名。下一步我们需要创建它。your_password_here务必改成你自己的密码。其他可能配置服务器端口server.port默认可能是 8080。如果 8080 被占用可以改成 8081、8090 等。Redis配置如果项目用到了 Redis需要配置spring.redis.host、port、password如果有。2.3 初始化数据库配置文件改好后需要创建数据库并导入表结构和初始数据。创建数据库用你的 MySQL 客户端如 Navicat连接本地 MySQL新建一个数据库名字要和配置文件里的hotel_db一致字符集建议选utf8mb4。执行 SQL 脚本在项目源码中通常会在src/main/resources或项目根目录下找到一个.sql文件例如hotel_db.sql或schema.sql。用客户端打开这个 SQL 文件并在你刚创建的hotel_db数据库中执行它。这会创建所有需要的表。检查数据执行后刷新数据库应该能看到user、room、order等相关的表。有些脚本还会插入一些测试数据如管理员账号admin/123456。2.4 解决依赖问题并启动数据库准备好后回到 IDEA。Maven 依赖刷新如果 IDEA 右下角还有依赖下载进度等它完成。如果完成后还有依赖报红可以尝试点击右侧 Maven 工具栏的刷新按钮。或者在终端里进入项目根目录执行mvn clean install -DskipTests。找到启动类SpringBoot 项目的启动类通常命名为XxxApplication例如HotelManagementApplication。它位于主包下并且类上有SpringBootApplication注解。运行右键点击这个启动类选择Run HotelManagementApplication。查看控制台日志如果启动成功你会看到类似Started HotelManagementApplication in 5.123 seconds (JVM running for 6.456)的日志并且没有明显的 ERROR 信息。如果启动失败控制台日志是唯一的救命稻草。常见的失败原因有数据库连接失败检查密码、数据库名、MySQL服务是否启动。端口被占用修改server.port配置。依赖冲突根据错误信息在pom.xml中排除冲突的依赖。Lombok 未生效确保 IDEA 安装了 Lombok 插件并启用注解处理Settings - Build - Compiler - Annotation Processors- 勾选 Enable annotation processing。当后端成功启动并在浏览器中访问http://localhost:8080或你配置的端口能看到一些简单的提示信息如 Whitelabel Error Page这是正常的因为还没写前端页面或者访问http://localhost:8080/swagger-ui.html能看到 API 文档如果集成了 Swagger说明后端服务已经就绪。3. 前端 Vue3 项目从安装到预览后端 API 跑通了现在来让前端界面活起来。3.1 获取与准备前端项目假设你有一个名为hotel-management-frontend的 Vue 3 项目源码。解压同样解压到无中文空格的路径例如D:\projects\hotel-frontend。用 VS Code 打开用 VS Code 打开这个文件夹。3.2 安装依赖并解决常见问题前端项目依赖通过npm或yarn管理项目根目录下会有package.json文件。终端中定位到项目根目录在 VS Code 中按Ctrl打开集成终端确保当前路径是你的前端项目根目录。安装依赖执行命令npm install # 或者如果你习惯用 yarn # yarn install这个过程会下载node_modules文件夹同样需要等待。可能遇到的问题Node 版本过高/过低如果安装过程中报错提示某些包与当前 Node 版本不兼容请检查你的 Node 版本是否符合package.json中engines字段的要求或者参考我之前推荐的稳定版本。网络问题npm 源在国外可能慢可以切换为国内镜像源如淘宝源npm config set registry https://registry.npmmirror.com权限问题在 Windows 上有时需要以管理员身份运行 VS Code 或终端。3.3 修改前端 API 基础地址前端需要知道后端 API 的地址在哪里。这个配置通常在以下文件之一src/config/index.js或config.js.env.development或.env文件vite.config.js或vue.config.js中的proxy配置src/utils/request.js中axios创建的baseURL你需要找到并修改这个地址指向你正在运行的后端服务。例如如果你的后端运行在http://localhost:8080那么配置可能是// 例如在 src/config/index.js 中 export const BASE_API http://localhost:8080;或者更常见的做法是在开发环境下配置代理避免跨域问题见下一节。3.4 配置开发服务器与代理Vue 项目使用一个本地开发服务器默认端口 5173 或 8080。为了让前端端口 5173能访问后端端口 8080且不跨域需要在vite.config.jsVite 项目或vue.config.jsVue CLI 项目中配置代理。Vite 项目示例 (vite.config.js)import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { port: 5173, // 前端开发服务器端口 proxy: { /api: { // 以 /api 开头的请求转发到后端 target: http://localhost:8080, // 你的后端地址 changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) // 可选重写路径 } } } })这样前端代码中请求/api/user/login开发服务器会自动转发到http://localhost:8080/user/login。3.5 启动前端项目配置好后在终端执行启动命令npm run dev # 或 npm run serve成功启动后终端会输出类似Local: http://localhost:5173的信息。用浏览器打开这个链接你应该能看到酒店管理系统的登录界面或主页。此时前端页面是独立的它通过配置的代理或BASE_API去调用后端接口。如果页面能出来但数据加载失败如登录不了、列表为空就需要排查前后端联调的问题了。4. 前后端联调与核心问题排查这是从“项目能跑”到“功能能用”的关键一步也是问题高发区。4.1 跨域问题 (CORS)如果前端直接请求后端地址如http://localhost:8080而没有配置代理浏览器会因同源策略阻止请求这就是跨域错误。在开发者工具 Console 或 Network 中会看到 CORS 错误。解决方案选一种即可前端配置代理推荐仅开发环境如上一步所述在vite.config.js中配置proxy。这是开发阶段最方便的方法。后端配置 CORS生产环境也需要在 SpringBoot 后端添加一个全局 CORS 配置类。import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); // 允许所有来源生产环境应指定具体前端地址 config.addAllowedOriginPattern(*); // 允许的请求头 config.addAllowedHeader(*); // 允许的请求方法 config.addAllowedMethod(*); // 允许携带凭证如 cookies config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }重启后端服务即可。4.2 接口 404 或 500 错误页面能打开但点击登录或查询时失败。检查 Network打开浏览器开发者工具 - Network 标签页。查看请求的 URL 是否正确是否指向了正确的后端地址和端口请求方法GET/POST是否正确。查看请求与响应404URL 路径错误后端没有这个接口。检查前端请求路径和后端RequestMapping或GetMapping等注解的路径是否匹配。500后端服务器内部错误。这是最重要的排查线索来源。去 IDEA 的后端控制台查看详细的异常堆栈信息。常见原因数据库查询错误SQL 语法、字段不存在。空指针异常NullPointerException。参数绑定错误前端传参格式与后端接收的RequestBody或RequestParam不匹配。核对参数在 Network 中查看前端发送的请求体Payload或参数Params是否与后端接口定义的参数名、类型一致。特别是 JSON 格式的数据。4.3 静态资源访问问题有些项目会把前端打包后的文件dist目录放到 SpringBoot 的src/main/resources/static目录下希望直接通过 SpringBoot 端口访问。这时需要注意打包前端在前端项目根目录执行npm run build生成dist文件夹。复制文件将dist文件夹内的所有文件复制到 SpringBoot 项目的src/main/resources/static目录下如果不存在则创建。配置静态资源映射SpringBoot 默认能处理static目录下的静态资源。确保后端application.yml中没有错误配置spring.mvc.static-path-pattern或spring.web.resources.static-locations。访问重启后端访问http://localhost:8080应该就能看到前端页面。4.4 登录与权限验证 (JWT/Session)很多管理系统使用 JWT (JSON Web Token) 做登录验证。登录流程前端提交用户名密码到/api/user/login后端验证成功后会返回一个token。前端存储 token前端收到token后通常会存储在localStorage、sessionStorage或 Vuex/Pinia 状态管理中。后续请求携带 token在请求拦截器通常在src/utils/request.js中里为每个后续请求的header添加Authorization: Bearer ${token}。后端验证 token后端有一个拦截器或过滤器会检查请求头中的token是否有效、是否过期。常见问题登录成功但其他接口 401检查前端请求拦截器是否正确添加了token。token 过期后端返回 401前端应跳转到登录页。项目中可能有刷新token的逻辑需要看具体实现。5. 项目功能梳理与代码理解项目跑起来后不要只满足于登录和点几下。要深入代码理解它怎么工作的这才是你简历上能写的东西。5.1 后端代码结构分析打开 IDEA看后端项目的典型分层结构src/main/java/com.example.hotel/ ├── controller/ # 控制器层接收HTTP请求调用Service返回结果 │ ├── UserController.java │ ├── RoomController.java │ └── OrderController.java ├── service/ # 业务逻辑层核心业务处理 │ ├── UserService.java │ └── impl/ # 接口实现类 │ ├── UserServiceImpl.java ├── mapper/ # 数据访问层MyBatis或可能是 repository/ (JPA) │ ├── UserMapper.java │ └── (对应的 XML 文件在 resources/mapper/ 下) ├── entity/ # 实体类与数据库表对应 │ ├── User.java │ ├── Room.java │ └── Order.java ├── dto/ # 数据传输对象用于前后端交互可能和entity不同 ├── vo/ # 视图对象用于返回给前端的数据封装 ├── config/ # 配置类如CORS、Swagger、Redis、Security等 ├── utils/ # 工具类如JWT工具、日期工具等 └── HotelManagementApplication.java # 启动类理解数据流一个“查询房间列表”的请求路径是GET /api/room/list。请求到达RoomController.list()方法。Controller调用RoomService.list()。Service调用RoomMapper.selectList()或RoomRepository.findAll()。Mapper执行 SQL查询数据库。结果层层返回最后由Controller通过RestController注解转换为 JSON 返回给前端。5.2 前端代码结构分析打开 VS Code看 Vue 3 项目的典型结构可能使用组合式 APIscript setupsrc/ ├── api/ # 封装所有后端接口请求函数 │ ├── user.js # 用户相关接口 │ ├── room.js # 房间相关接口 │ └── order.js ├── router/ # 路由配置定义页面路径和组件映射 │ └── index.js ├── store/ # 状态管理 (Pinia 或 Vuex)管理全局状态如用户信息 │ └── user.js ├── views/ # 页面级组件 │ ├── Login.vue │ ├── Dashboard.vue │ ├── RoomManagement.vue │ └── OrderManagement.vue ├── components/ # 可复用的展示组件 │ ├── Header.vue │ └── RoomCard.vue ├── utils/ # 前端工具函数如 request.js (axios封装) ├── assets/ # 静态资源图片、样式 └── App.vue # 根组件理解一个页面以RoomManagement.vue为例。template部分使用 Element Plus 的el-table,el-button等组件搭建界面。script setup部分import { ref, onMounted } from vue引入 Vue 响应式 API。import { getRoomList } from /api/room引入接口函数。const roomList ref([])定义响应式数据。onMounted(() { fetchData() })在页面加载时调用函数。const fetchData async () { roomList.value await getRoomList() }调用接口获取数据并赋值。数据变化自动更新视图。5.3 如何将这个项目变成你的“简历项目”仅仅跑起来是不够的你需要能讲清楚。明确技术栈能清晰说出用了 SpringBoot 2.x, Vue 3, Element Plus, MyBatis/MyBatis-Plus, JWT, MySQL。理解核心业务模块能说出用户管理、房间管理、订单管理这几个模块是如何通过 CRUD (增删改查) 实现的。掌握一两个技术点后端SpringBoot 如何整合 MyBatis 进行数据库操作如何通过RestController提供 REST API如何使用Autowired进行依赖注入如何用 JWT 实现无状态登录前端Vue 3 的组合式 API 如何使用如何用 Pinia/Vuex 管理全局状态如何用 Axios 拦截器统一处理请求和响应路由守卫如何做权限控制能描述遇到的问题和解决方案比如“我遇到了跨域问题通过在后端配置全局 CORS 过滤器解决”“前端打包后部署到 SpringBoot 静态目录刷新页面 404通过配置WebMvcConfigurer将未知路径重定向到index.html解决”。思考优化点加分项可以说“这个项目目前是单体架构如果业务量增大我可以考虑将用户服务和订单服务拆分成微服务用 Spring Cloud 和 Nacos 来治理”“前端图片上传可以对接 OSS 对象存储来减轻服务器压力”“查询慢的房间列表接口我可以考虑加 Redis 缓存”。6. 部署与上线准备简易版对于毕设演示或简历项目通常不需要复杂的云服务器部署但你需要知道如何打包以及简单的部署思路。6.1 后端打包与运行打包在 IDEA 的 Maven 工具栏依次执行clean-package。或者在项目根目录命令行执行mvn clean package -DskipTests。找到 jar 包成功后在target目录下会生成一个hotel-management-0.0.1-SNAPSHOT.jar文件。运行在jar包所在目录打开命令行运行java -jar hotel-management-0.0.1-SNAPSHOT.jar生产环境配置通常不会把数据库密码等配置写在application.yml里。可以通过外部配置文件或环境变量指定java -jar your-app.jar --spring.config.locationfile:/path/to/application-prod.yml # 或使用环境变量 java -jar your-app.jar --spring.datasource.password${DB_PASSWORD}6.2 前端打包与整合打包在前端项目根目录执行npm run build生成dist文件夹。整合到后端方式一将dist文件夹内所有文件复制到 SpringBoot 项目的src/main/resources/static目录下。然后重新打包后端jar。这样访问jar包就直接是前后端一体的应用。独立部署方式二将dist文件夹交给专门的 Web 服务器如 Nginx部署。然后修改前端代码中的BASE_API指向你部署的后端服务器地址如http://your-server-ip:8080再重新打包。6.3 简易演示部署对于本地演示或给老师看确保本机 MySQL 启动。在命令行启动打包好的后端jar包。前端如果已整合到后端static直接访问http://localhost:8080。如果前端独立用npm run dev启动前端开发服务器访问http://localhost:5173。整个过程的核心是先让后端服务在本地稳定运行再让前端能访问到这个服务最后理解数据是如何在两者之间流动的。把这个流程走通代码看懂常见的坑踩一遍这个项目就不再只是一个“源码包”而是你切实掌握并可以展示给别人的实战经验了。