Spring Boot与Vue3汽车租赁系统：从环境搭建到功能测试全流程指南

这次我们来看一个基于 Spring Boot 和 Vue3 的汽车租赁管理系统。对于正在寻找毕业设计选题、学习前后端分离架构或者想快速搭建一个具备完整业务流程的 Web 应用的同学来说这是一个非常典型的实战项目。它不是一个概念原型而是一个包含了用户管理、车辆管理、订单处理、支付模拟等核心模块的完整解决方案。本文将带你从零开始完成这个系统的环境搭建、本地部署、功能测试以及核心代码的解读。我们会重点关注如何快速启动项目、理解前后端交互逻辑、进行数据初始化并验证其作为毕业设计或学习项目的可行性。如果你手头有 Java 和 Node.js 的基础环境那么跟着步骤走一小时内就能看到系统跑起来的样子。1. 核心能力速览在深入细节之前我们先通过一个表格快速了解这个汽车租赁系统的核心特性和技术栈这有助于你判断它是否符合你的需求。能力项说明项目类型前后端分离的 Web 应用毕业设计/学习项目技术栈后端Spring Boot, MyBatis-Plus, MySQL前端Vue3, Element Plus, Axios, Vite主要功能模块用户认证、车辆信息管理、租赁订单管理、支付模拟、数据统计仪表盘部署复杂度中等。需分别启动后端服务和前端项目并初始化数据库。硬件门槛无特殊要求。普通开发机即可主要依赖内存和CPU进行本地开发与测试。启动方式后端通过 IDE 运行或mvn spring-boot:run前端npm run dev启动开发服务器接口能力提供完整的 RESTful API支持前后端数据交互。适合场景Java/Vue 全栈学习、毕业设计、课程设计、小型租赁业务原型开发。2. 适用场景与使用边界这个汽车租赁管理系统主要面向几类用户高校学生特别是计算机相关专业的毕业生需要一个结构清晰、技术栈主流、功能完整的项目作为毕业设计或课程设计。全栈初学者希望通过学习一个真实项目掌握 Spring Boot 和 Vue3 如何协同工作理解 RESTful API 设计和前后端联调。原型开发者需要快速搭建一个汽车租赁业务的线上演示原型验证业务流程。它能解决什么问题学习痛点提供了从数据库设计、后端接口开发到前端页面渲染的完整链路示例。开发效率基于成熟的框架和组件库避免了从零搭建的繁琐可以快速聚焦业务逻辑。功能完整性涵盖了用户注册登录、车辆浏览筛选、下单、支付模拟、订单管理等核心业务流程。它的边界与限制非生产级作为学习/毕业设计项目在安全性如密码加密强度、SQL注入防护、高并发、事务完整性等方面可能未做极致优化不建议直接用于线上生产环境。支付为模拟支付流程通常为模拟操作不涉及真实的第三方支付接口集成。数据为模拟车辆、用户等数据多为初始化生成的测试数据需要根据实际情况进行增删改。合规性提醒在将此系统用于任何演示或测试时务必使用虚拟数据避免使用真实个人信息、车辆信息或进行任何真实的金融交易。尊重数据隐私和版权仅用于学习和研究目的。3. 环境准备与前置条件要成功运行这个系统你的本地开发环境需要满足以下条件。请务必在开始前逐一检查。Java 开发环境JDK版本 8 或 11推荐 11。Spring Boot 2.x 对 JDK 8 兼容性好。Maven用于后端项目的依赖管理和构建。确保mvn -v命令可以正常执行。Node.js 开发环境Node.js版本 16.x 或 18.x推荐 LTS 版本。Vue3 和 Vite 对其有版本要求。npm 或 yarnNode.js 包管理器。安装 Node.js 时会自带 npm。数据库MySQL版本 5.7 或 8.0。这是最常用的选择。可视化工具可选Navicat、DBeaver 或 MySQL Workbench用于管理数据库和执行 SQL 脚本。集成开发环境IDE后端IntelliJ IDEA推荐、Eclipse 或 VS Code需安装 Java 插件。前端VS Code推荐、WebStorm 或 HBuilderX。版本控制可选但推荐Git用于克隆项目代码。浏览器现代浏览器如 Chrome、Edge 或 Firefox用于访问前端页面。环境检查清单[ ]java -version能正确显示版本号。[ ]mvn -v能正确显示版本号。[ ]node -v和npm -v能正确显示版本号。[ ] MySQL 服务已启动并且可以通过客户端工具连接。[ ] 本地 8080后端常用端口和 5173/3000前端 Vite 常用端口未被其他应用占用。4. 安装部署与启动方式假设你已经从开源仓库如 Gitee 或 GitHub获取了项目代码项目结构通常如下car-rental-system/ ├── backend/ # Spring Boot 后端项目 │ ├── src/ │ ├── pom.xml │ └── ... └── frontend/ # Vue3 前端项目 ├── src/ ├── package.json ├── vite.config.js └── ...4.1 数据库初始化这是第一步也是关键一步。后端服务启动时需要连接到一个已创建并初始化好的数据库。创建数据库使用 MySQL 客户端工具创建一个新的数据库例如命名为car_rental字符集建议使用utf8mb4。CREATE DATABASE car_rental DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;执行 SQL 脚本在项目backend目录下通常会有sql文件夹里面存放着数据库建表和数据初始化的 SQL 脚本如schema.sql和data.sql。在car_rental数据库中依次执行这些脚本。如果项目使用 Flyway 或 Liquibase 进行数据库版本管理则通常不需要手动执行 SQL启动应用时会自动执行。更常见的情况是你需要找到application.yml或application.properties配置文件根据其中的配置来确认是否需要手动初始化。4.2 后端服务启动与配置后端是整个系统的核心负责业务逻辑、数据持久化和提供 API。导入项目使用 IDEA 打开backend文件夹等待 Maven 自动下载依赖右下角进度条完成。修改配置文件找到src/main/resources/application.yml或.properties修改数据库连接信息确保与你在上一步创建的数据库匹配。spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/car_rental?useUnicodetruecharacterEncodingutf-8useSSLfalseserverTimezoneAsia/Shanghai username: root # 改为你的 MySQL 用户名 password: yourpassword # 改为你的 MySQL 密码启动后端服务方式一IDE运行在 IDEA 中找到包含SpringBootApplication注解的主类通常是XxxApplication.java右键点击Run。方式二命令行在backend目录下打开终端执行mvn spring-boot:run。方式三打包运行先执行mvn clean package生成 jar 包然后通过java -jar target/xxx.jar运行。验证启动成功启动后控制台应无报错并看到类似Tomcat started on port(s): 8080的日志。打开浏览器访问http://localhost:8080/api/hello或项目定义的测试接口如果返回成功信息或 JSON 数据则说明后端服务已正常启动。4.3 前端项目启动前端负责用户界面和交互通过调用后端 API 获取和展示数据。安装依赖在frontend目录下打开终端执行以下命令安装项目所需的 npm 包。国内用户建议使用淘宝镜像npm config set registry https://registry.npmmirror.com。npm install # 或使用 yarn yarn install配置 API 代理关键步骤为了避免前端开发时的跨域问题项目通常配置了开发服务器的代理。检查vite.config.js或vue.config.js文件确保代理配置指向正确的后端地址默认应为http://localhost:8080。// vite.config.js 示例 import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { proxy: { /api: { target: http://localhost:8080, // 你的后端地址 changeOrigin: true, // rewrite: (path) path.replace(/^\/api/, ) // 根据后端接口路径决定是否需要重写 } } } })启动前端开发服务器在frontend目录下执行npm run dev # 或 yarn dev命令执行后终端会输出本地访问地址通常是http://localhost:5173或http://localhost:3000。验证前端启动用浏览器打开上述地址应该能看到系统的登录页或首页。如果页面显示但接口数据加载失败请检查第2步的代理配置以及后端服务是否正常运行。5. 功能测试与效果验证系统启动后我们需要对核心功能进行测试以确保各模块工作正常。以下测试流程建议按顺序进行。5.1 用户认证测试测试目的验证系统的门户即登录和注册功能是否正常。访问登录页打开前端首页通常是登录界面。测试注册点击“注册”链接进入注册页面。填写用户名、密码、邮箱等信息使用测试数据。点击提交观察页面提示。成功应跳转到登录页或直接登录。后端验证同时查看后端控制台应有处理/api/user/register请求的日志并检查数据库中user表是否新增了记录。测试登录使用刚注册的账号或系统初始化的默认账号如 admin/123456进行登录。点击登录页面应成功跳转到系统主界面如仪表盘。后端验证控制台应有处理/api/user/login的日志并返回了 token 或 session 信息。前端应能将此凭证存储如 localStorage用于后续 API 请求的鉴权。5.2 车辆管理模块测试测试目的验证核心业务数据——车辆信息的增删改查CRUD。浏览车辆列表登录后进入“车辆管理”或“浏览车辆”页面。页面应能成功从后端GET /api/cars接口获取车辆列表并渲染。车辆筛选与搜索测试页面提供的筛选条件如品牌、车型、价格区间和搜索框。观察浏览器开发者工具的“网络Network”选项卡筛选操作应触发带查询参数的 API 请求并返回过滤后的数据。查看车辆详情点击某辆车的“详情”或图片应能跳转到详情页展示更全面的信息。这对应后端GET /api/cars/{id}接口。管理员功能测试如适用如果你有管理员账号测试“新增车辆”、“编辑车辆信息”、“下架车辆”等功能。新增填写表单提交后检查数据库和列表是否更新。编辑修改信息提交后检查数据是否持久化。删除执行删除操作确认数据从列表和数据库中移除可能是逻辑删除。5.3 租赁订单流程测试测试目的验证从选车到下单的完整业务流程这是系统的核心。选择车辆与租赁时间在车辆详情页或列表页选择心仪的车辆并选择取车时间、还车时间。提交订单点击“立即租赁”或类似按钮。页面应弹窗确认订单信息车辆、时间、总价。创建订单确认后前端应调用POST /api/orders接口创建订单。后端验证查看控制台日志确认订单创建成功并检查数据库order表生成新记录状态为“待支付”或“已创建”。订单列表查看进入“我的订单”页面应能看到刚创建的订单。支付模拟在订单列表或详情页找到“去支付”按钮。点击后通常会跳转到一个模拟支付页面或直接弹窗模拟支付成功。后端验证支付成功后对应订单的status字段应从“待支付”更新为“已支付”或“已完成”同时可能触发车辆状态更新如从“可租”变为“已出租”。5.4 数据统计与仪表盘测试测试目的验证系统的数据可视化能力通常面向管理员。访问仪表盘使用管理员账号登录进入后台管理首页或专门的仪表盘页面。检查图表与数据页面应展示各类统计图表例如今日/本月订单数、营业额。车辆出租率排行。用户增长趋势。热门租赁车型。验证数据实时性在进行完上述订单创建、支付操作后刷新仪表盘页面相关统计数据如今日订单数、营业额应能相应更新。这验证了后端GET /api/dashboard/xxx系列接口能动态计算并返回正确数据。6. 接口 API 与批量任务理解系统的 API 设计是深入学习和二次开发的基础。虽然这是一个单体学习项目但其接口设计通常遵循 RESTful 风格。6.1 核心 API 概览通过浏览器开发者工具的“网络Network”选项卡你可以观察到前端发起的所有 API 请求。以下是典型的核心接口模块接口方法路径描述用户认证POST/api/auth/login用户登录POST/api/auth/register用户注册GET/api/auth/info获取当前用户信息车辆管理GET/api/cars获取车辆列表可分页、筛选GET/api/cars/{id}获取指定车辆详情POST/api/cars管理员新增车辆PUT/api/cars/{id}管理员更新车辆信息DELETE/api/cars/{id}管理员删除车辆订单管理GET/api/orders获取订单列表用户看自己的管理员看全部GET/api/orders/{id}获取订单详情POST/api/orders创建新订单PUT/api/orders/{id}/pay模拟支付订单PUT/api/orders/{id}/cancel取消订单数据统计GET/api/dashboard/summary获取数据概览GET/api/dashboard/chart/rental获取租赁趋势图表数据6.2 使用 Postman 或 Curl 测试 API脱离前端页面直接测试 API 有助于理解接口契约和调试。示例用户登录# 使用 curl curl -X POST http://localhost:8080/api/auth/login \ -H Content-Type: application/json \ -d {username:admin, password:123456}# 使用 Python requests 库 import requests import json url http://localhost:8080/api/auth/login payload { username: admin, password: 123456 } headers { Content-Type: application/json } response requests.post(url, headersheaders, datajson.dumps(payload)) print(response.status_code) print(response.json()) # 期望返回 token 和用户信息示例获取车辆列表带分页curl -X GET http://localhost:8080/api/cars?page1size10brand丰田6.3 关于“批量任务”的思考在汽车租赁系统中典型的“批量任务”可能不是通过队列异步执行而是指后台管理功能中的批量操作或者定时任务。批量操作例如管理员在车辆管理页面勾选多辆车然后进行“批量上架”或“批量设置折扣”。这通常由前端收集ID列表调用一个支持批量处理的 API如POST /api/cars/batch-update。定时任务使用 Spring Boot 的Scheduled注解实现。例如每天凌晨检查是否有超期未还的订单并自动计算滞纳金或更新车辆状态。// 后端示例代码片段 Component public class OrderCheckTask { Scheduled(cron 0 0 2 * * ?) // 每天凌晨2点执行 public void checkOverdueOrders() { // 1. 查询状态为“已支付”但还车时间小于当前时间的订单 // 2. 将这些订单状态更新为“超期待还” // 3. 可选发送通知如邮件、站内信 log.info(定时任务超期订单检查执行完毕); } }要验证此类任务可以临时将 cron 表达式改为更频繁如每分钟0 * * * * ?观察控制台日志和数据库变化。7. 资源占用与性能观察作为本地开发和学习项目性能通常不是首要关注点但了解其资源消耗模式对部署和优化有指导意义。内存占用后端Spring Boot启动后根据项目复杂度和内嵌 Tomcat 配置通常占用 300MB - 800MB 的堆内存。你可以通过 JVM 参数-Xmx来限制最大堆内存。前端开发服务器Vite内存占用很小通常几十MB到百MB级别。观察方法使用系统任务管理器或jconsole、jvisualvm针对Java工具进行监控。CPU 占用在空闲状态下CPU 占用很低。在执行复杂查询如多表关联统计、导出大量数据或并发请求测试时CPU 使用率会上升。对于学习项目单机低并发下通常不是瓶颈。数据库连接Spring Boot 默认使用 HikariCP 连接池。观察application.yml中的配置如最大连接数 (maximum-pool-size)避免设置过高耗尽数据库资源。spring: datasource: hikari: maximum-pool-size: 10 # 根据实际需求调整 connection-timeout: 30000前端资源加载在开发模式 (npm run dev) 下Vite 采用按需编译和热更新首次加载稍慢后续极快。在生产构建后 (npm run build)资源会被压缩、打包并通过 Nginx 等静态服务器提供加载速度更快。使用LightHouse或浏览器开发者工具的Performance面板可以分析加载性能。性能优化初步建议对于车辆列表等频繁访问的接口可以考虑在后端加入缓存如 Redis但毕业设计中非必需。确保数据库表对经常查询的字段如brand,status,create_time建立了索引。前端对大列表进行分页或虚拟滚动避免一次性渲染过多 DOM 节点。8. 常见问题与排查方法在部署和运行过程中你可能会遇到以下问题。这里提供通用的排查思路。问题现象可能原因排查方式解决方案后端启动失败端口冲突8080 端口被其他程序如另一个Spring Boot应用、Tomcat占用。1. 查看启动日志错误信息。2. 命令行执行netstat -ano | findstr :8080(Windows) 或lsof -i:8080(Mac/Linux) 查看占用进程。1. 终止占用端口的进程。2. 在application.yml中修改server.port为其他端口如8090。前端代理报错无法访问后端API1. 后端服务未启动。2. 前端代理配置错误。3. 后端接口路径与前端的请求路径不匹配。1. 确认后端服务日志无报错并能直接访问http://localhost:8080/api/xxx。2. 检查前端vite.config.js中的proxy配置的target是否正确。3. 查看浏览器开发者工具“网络”选项卡确认请求的完整URL。1. 确保后端先启动。2. 修正代理配置。3. 检查后端 Controller 的RequestMapping注解路径。数据库连接失败1. MySQL 服务未启动。2.application.yml中的数据库连接信息URL、用户名、密码错误。3. 数据库驱动版本不匹配。1. 检查 MySQL 服务状态。2. 使用数据库客户端工具用配置文件中的信息尝试连接。3. 查看启动日志中的具体SQL异常信息。1. 启动 MySQL 服务。2. 核对并修正配置文件。3. 检查pom.xml中的mysql-connector-java版本与 MySQL 服务器版本兼容。前端npm install失败1. 网络问题无法连接 npm 仓库。2. Node.js 版本不兼容。3. 项目依赖的特定包版本已不存在或冲突。1. 检查网络尝试 pingregistry.npmjs.org。2. 确认 Node.js 版本符合package.json中的engines要求如果有。3. 查看错误日志定位是哪个包安装失败。1. 切换 npm 镜像源到国内源如淘宝镜像。2. 使用 nvm 切换 Node.js 版本。3. 删除node_modules和package-lock.json重试npm install。或尝试npm install --legacy-peer-deps。页面可以访问但列表数据为空1. 数据库中没有数据。2. 前端请求 API 成功但返回的数据结构不符合预期。3. 后端接口查询逻辑有误。1. 直接访问后端 API 地址看返回的 JSON 数据是否为空数组。2. 检查浏览器开发者工具“网络”响应体。3. 查看后端控制台是否有 SQL 查询日志检查其执行的 SQL 语句。1. 执行数据初始化脚本或通过管理后台添加数据。2. 对比前端代码中处理响应的逻辑与后端实际返回的数据结构。3. 调试后端 Service 或 Mapper 层的查询方法。登录成功后其他接口报 401/403 错误1. 前端未正确存储或发送 token。2. 后端拦截器Interceptor或过滤器Filter配置有误。3. token 过期或无效。1. 登录后查看浏览器 Application 面板的 LocalStorage 或 SessionStorage 是否有 token。2. 查看后续请求的 Headers 中是否携带了Authorization: Bearer token。3. 查看后端安全配置确认接口权限设置。1. 检查前端请求拦截器axios interceptor是否正确添加了 token。2. 检查后端 Security 或自定义拦截器的配置确保放行了登录、注册等公开接口。3. 如果使用 JWT检查 token 生成和验证逻辑。9. 最佳实践与使用建议为了让这个项目更好地服务于你的学习或毕业设计这里有一些进阶建议。代码阅读与理解从入口开始先找到 Spring Boot 的主类XxxApplication了解启动流程。遵循 MVC对照一个完整的业务流程如租车从前端页面 (*.vue) - 前端 API 调用 (api/*.js) - 后端 Controller - Service - Mapper (DAO) - 数据库走一遍代码理解数据流。关注注解注意RestController,RequestMapping,Autowired,Transactional,TableField等常用注解的作用。二次开发与定制修改页面样式前端使用 Element Plus 组件库可以通过覆盖 CSS 变量或编写自定义样式来调整 UI。增加新功能例如想增加“车辆评价”功能。你需要数据库设计review表。后端创建Review实体类、ReviewMapper接口、ReviewService业务类、ReviewController控制器并实现增删改查接口。前端创建Review.vue页面调用新增的 API。更换数据库如果想用 PostgreSQL只需修改pom.xml中的依赖和application.yml中的连接配置即可MyBatis-Plus 的代码基本通用。部署上线简易版后端在backend目录执行mvn clean package -DskipTests生成可执行的jar包。在服务器上安装好 Java 和 MySQL 后使用nohup java -jar your-app.jar 命令后台运行。前端在frontend目录执行npm run build生成dist静态文件夹。将其内容上传到 Nginx 或 Apache 的网站目录下并配置反向代理将/api路径的请求转发到后端服务。生产配置务必修改application.yml中的数据库密码、服务器端口等敏感信息最好使用环境变量或外部配置文件。安全与合规密码存储确保用户密码在数据库中是加密存储的如 BCrypt而不是明文。输入验证前后端都要对用户输入进行验证和过滤防止 XSS 和 SQL 注入。API 防护对管理员的敏感操作接口如删除车辆、修改订单状态进行严格的权限校验。数据备份定期备份数据库尤其是在进行重要数据操作前。10. 总结这个基于 Spring Boot 和 Vue3 的汽车租赁管理系统提供了一个非常清晰的全栈开发学习范本。它最大的价值在于将理论上的 MVC、前后端分离、RESTful API 等概念通过一个完整的业务场景串联了起来。对于学习者最应该优先验证的是“环境能否一键跑通”和“核心业务流程选车-下单-支付是否闭环”。这两个点通了项目就成功了一大半。最容易踩的坑集中在“环境配置”JDK、Node、MySQL版本和“前后端联调”跨域、代理、接口路径上按照本文的步骤和排查方法大部分问题都能解决。在掌握现有功能后你可以尝试将其作为基石进行扩展例如集成真实的第三方支付接口如支付宝沙箱、增加短信通知功能、引入 Redis 缓存提升性能或者将其改造成一个多租户的SaaS平台原型。这些挑战将使你对企业级应用开发有更深的体会。