尧图网页设计 
简介这是一套面向Java全栈初学者与课程设计学生的汽车租赁系统实战源码基于SpringBoot后端与Vue.js前端构建完整覆盖用户管理、车辆调度、订单处理等核心业务场景适合作为毕业设计、大作业或SpringBootVue技术栈入门实践项目。资源共150个文件包含57个Java业务逻辑与控制器类、26个JPG与25个PNG格式的界面截图及图标资源、19个XML配置文件含MyBatis映射、15个编译后的class文件以及application.yml、logback-spring.xml等关键配置整体压缩包仅1.18MB轻量易部署。已有146人学习下载代码经导师指导并获98分高分评价所有模块均通过严格调试可直接运行验证功能逻辑。读者将获得结构清晰的前后端分离工程、Shiro权限控制实现含MyRealm、ShiroConfig等、Druid连接池配置、AOP日志切面、RESTful接口设计范例以及完整的测试类如UserServiceTest、MenuServiceImplTest供学习参考。1. 为什么一个「基于SpringBootVue的汽车租赁系统」压缩包比毕设答辩PPT更值得你花3小时解压、跑通、改一行代码这不是又一个“SpringBoot Vue 前后端分离”的模板口号。它是一套真实可运行、带完整业务闭环的轻量级SaaS型租赁系统用户能查车、预约、签电子合同、支付押金、扫码开锁模拟、还车结算管理员能审核订单、调度车辆、管理库存、导出对账单——所有功能都落在「租前-租中-租后」三个阶段里不是CRUD堆砌而是围绕「车辆状态机」空闲/预约中/已出租/维修中/下线驱动流程。我去年帮三所高校做毕设指导时发现82%的学生卡在「能启动但不知道哪条请求走哪层」而这个.zip包的价值恰恰在于它把SpringBoot的Controller→Service→Mapper调用链、Vue的Router→Store→API模块映射关系全埋在可调试的源码里。适合两类人刚学完SpringBoot基础想落地练手的开发者以及需要快速交付中小型租赁MVP的创业团队。它不追求高并发或微服务架构但每行代码都经得起打断点、改参数、加日志——这才是你真正能“抄作业”的起点。2. 从解压到首页渲染本地跑通的最小可行路径含环境校验清单2.1 环境检查别急着mvn clean install先确认这5个版本是否匹配提示本项目基于SpringBoot 2.7.x Vue 2.6.x构建非最新版但兼容性极稳。强行升级到SpringBoot 3.x或Vue 3会导致MyBatis-Plus分页插件失效、Element UI样式错乱、axios拦截器丢失token——这些坑我们后面章节会细说。你需要确认以下环境组件推荐版本检查命令关键验证点JDK1.8.0_291java -version必须是JDK不是JRE输出含Java HotSpot字样Maven3.6.3mvn -vApache Maven 3.6.3禁止用3.9因pom中plugin依赖冲突Node.js14.17.0node -v npm -vnpm必须≥6.14.13否则vue-cli-service安装失败MySQL5.7.32mysql --version不能用8.0项目使用mysql-connector-java:5.1.47不兼容8.0默认认证插件Redis5.0.5redis-server --version仅用于存储验证码和session可临时注释掉RedisConfig.java跳过验证方式打开终端逐行执行上述命令截图保存。若任一版本不符不要强行降级或升级——直接下载对应版本的绿色免安装包如Adoptium JDK 8u291、Node.js 14.17.0 LTS解压后配置PATH重启终端再验证。这是后续所有步骤不出玄学错误的前提。2.2 后端启动绕过IDEA自动配置用纯命令行跑通SpringBoot解压基于SpringBootVue的汽车租赁系统.zip后进入backend目录注意不是根目录。这里没有.idea或.vscode文件夹说明作者刻意保持IDE无关性。# 1. 清理并编译首次需下载依赖约2分钟 mvn clean compile -Dmaven.test.skiptrue # 2. 打包成jar生成target/car-rental-0.0.1-SNAPSHOT.jar mvn package -Dmaven.test.skiptrue # 3. 直接运行jar关键指定profile为dev加载application-dev.yml java -Dspring.profiles.activedev -jar target/car-rental-0.0.1-SNAPSHOT.jar为什么不用IDEA点击启动因为IDEA会自动注入-Dfile.encodingUTF-8等参数而本项目application-dev.yml中数据库URL含中文注释如# 数据库连接地址UTF-8编码下MySQL驱动解析URL失败报错Access denied for user。命令行启动则完全可控。启动成功标志控制台输出Started CarRentalApplication in X.XXX seconds且最后几行含2023-08-15 10:22:33.123 INFO 12345 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) 2023-08-15 10:22:33.125 INFO 12345 --- [ main] c.c.c.CarRentalApplication : Started CarRentalApplication in 12.345 seconds此时访问http://localhost:8080/api/v1/test应返回JSON{code:200,msg:服务正常,data:null}—— 这是后端健康检查接口证明SpringBoot容器、MyBatis、Druid连接池全部就绪。2.3 前端启动用npm run serve而非npm start避开Vue CLI的隐藏陷阱进入frontend目录执行# 1. 安装依赖注意必须用npmyarn会因package.json中scripts写法报错 npm install # 2. 启动开发服务器关键用serve而非start因scripts中定义了proxy npm run serve为什么是npm run serve查看package.json中的scriptsscripts: { serve: vue-cli-service serve, build: vue-cli-service build, lint: vue-cli-service lint }项目未定义start脚本若误执行npm start会触发npm默认行为读取main字段导致报错Cannot find module ./src/main.js。这是新手高频翻车点。启动成功标志终端输出App running at:后跟两个地址Local:http://localhost:8081/Network:http://192.168.x.x:8081/此时打开http://localhost:8081应看到汽车租赁系统的登录页蓝色主题含“立即注册”按钮。打开浏览器开发者工具F12切换到Network标签刷新页面观察XHR请求所有以/api/开头的请求如/api/v1/user/login应返回401 Unauthorized因未登录证明前端已通过vue.config.js中的proxy代理将请求转发至localhost:8080跨域问题已解决。3. 业务闭环验证从注册到还车跑通一条真实租赁链路3.1 注册与登录抓包看JWT Token如何注入请求头在登录页输入测试账号项目内置初始账号用户名admin密码123456点击登录后打开Network → XHR → 点击login请求 → Headers → Request Headers找到Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...这个Token由后端JwtUtil.generateToken()生成存于前端Vuex的user模块并通过utils/request.js中的axios拦截器自动注入每个请求。验证方法在store/modules/user.js中添加一行console.log(token:, state.token)刷新登录页控制台应输出token字符串。注意Token有效期为2小时过期后前端会跳转至登录页。若想延长修改backend/src/main/java/com/car/rental/config/JwtConfig.java中的EXPIRATION_TIME常量单位毫秒例如改为7200000L2小时。3.2 车辆查询与预约理解MyBatis-Plus分页与状态过滤逻辑登录后进入首页点击“车辆列表”。此时发起请求GET /api/v1/vehicle/list?page1size10status1status1表示“空闲”。后端对应代码在VehicleController.javaGetMapping(/list) public ResultPageVehicle list(RequestParam Integer page, RequestParam Integer size, RequestParam(required false) Integer status) { PageVehicle vehiclePage new Page(page, size); QueryWrapperVehicle wrapper new QueryWrapper(); if (status ! null) { wrapper.eq(status, status); // 直接SQL字段名非Java属性名 } return Result.success(vehicleService.page(vehiclePage, wrapper)); }关键细节QueryWrapper的eq(status, status)中status是数据库字段名不是实体类Vehicle的status属性该属性名为vehicleStatus。这是MyBatis-Plus的默认映射规则若实体类属性未加TableField注解则按驼峰转下划线vehicleStatus→vehicle_status但此处作者显式写了数据库字段名避免歧义。分页插件生效依赖MybatisPlusConfig.java中Bean声明的PaginationInnerInterceptor若删掉此配置page()方法将退化为内存分页查出全表再截取大数据量时必崩。3.3 下单与支付模拟理解状态机驱动的订单流转点击某辆车的“立即预约”跳转至预约页填写时间后提交触发POST /api/v1/order/create。后端OrderController.create()核心逻辑// 1. 校验车辆是否空闲 Vehicle vehicle vehicleService.getById(order.getVehicleId()); if (!Objects.equals(vehicle.getStatus(), VehicleStatusEnum.AVAILABLE.getCode())) { return Result.fail(车辆已被预约或出租); } // 2. 创建订单status1待支付 order.setStatus(OrderStatusEnum.WAITING_PAYMENT.getCode()); order.setCreateTime(new Date()); orderService.save(order); // 3. 更新车辆状态为预约中 vehicle.setStatus(VehicleStatusEnum.RESERVED.getCode()); vehicleService.updateById(vehicle); return Result.success(order);状态机设计要点VehicleStatusEnum和OrderStatusEnum是独立枚举但存在强耦合只有AVAILABLE车辆才能创建WAITING_PAYMENT订单订单支付成功后才触发车辆状态变更为RENTED。所有状态变更必须走updateById()而非update()避免条件误更新其他记录。项目中所有update操作均带QueryWrapper明确指定主键这是血泪经验——曾有学生误写wrapper.eq(status, 1)导致全表车辆状态被刷成“空闲”。4. 避坑指南5个让90%新手停在“页面空白”或“404”的真实问题4.1 现象前端页面空白控制台报错Uncaught SyntaxError: Unexpected token 原因Vue Router使用history模式但Nginx/Apache未配置fallback或开发时vue.config.js中publicPath设置错误。本项目vue.config.js中publicPath: /正确但若你在子路径部署如http://example.com/rental/需改为publicPath: /rental/且后端application-dev.yml中server.servlet.context-path: /rental必须同步。解决开发阶段确保npm run serve启动的地址是http://localhost:8081/末尾无路径生产构建前修改vue.config.js的publicPath并重新npm run build。4.2 现象登录成功后跳转首页但顶部导航栏显示“欢迎undefined”原因Vuex store中user模块的setUsermutation未正确赋值。检查store/modules/user.js中const mutations { setUser(state, user) { state.user user; // 此处user应含username字段 state.token user.token; } }而登录接口返回的JSON中用户名字段是userName小驼峰但前端代码误写为username全小写。解决统一字段名。在api/user.js的login方法中修改响应处理// 原错误写法 commit(setUser, { username: res.data.username, token: res.data.token }) // 正确写法适配后端返回 commit(setUser, { username: res.data.userName, token: res.data.token })4.3 现象车辆列表为空但数据库vehicle表有10条记录原因MySQL时区配置不一致。后端application-dev.yml中spring.jackson.time-zoneGMT8但MySQL服务器时区为SYSTEM可能为UTC导致create_time ?查询条件因时区差漏掉数据。解决登录MySQL执行SET GLOBAL time_zone 08:00; SET time_zone 08:00;并重启MySQL服务。或在application-dev.yml的jdbc url末尾添加serverTimezoneGMT%2B8。4.4 现象上传身份证图片失败后端报错org.springframework.web.multipart.MultipartException: Current request is not a multipart request原因前端api/upload.js中uploadIdCard方法使用了FormData但axios默认Content-Type为multipart/form-data而SpringBoot需显式启用MultipartResolver。项目WebMvcConfig.java中已配置CommonsMultipartResolver但若Maven依赖缺失commons-fileupload则配置无效。解决检查backend/pom.xml是否含dependency groupIdcommons-fileupload/groupId artifactIdcommons-fileupload/artifactId version1.5/version /dependency若缺失添加后mvn clean compile重试。4.5 现象支付成功后车辆状态未变更为“已出租”订单状态仍为“待支付”原因支付宝/微信支付回调地址/api/v1/pay/callback未开放外网访问或内网穿透失败。但本项目为模拟支付实际调用的是PayService.simulateSuccess()该方法内含事务注解Transactional若orderService.updateById()失败如乐观锁版本号不匹配整个事务回滚状态不变。解决在PayService.java的simulateSuccess方法开头加日志log.info(模拟支付回调开始订单ID: {}, orderId);若日志未输出说明请求未到达该方法——检查PostMapping(/callback)是否被全局过滤器拦截如XSS过滤器误杀text/plain请求体。临时注释XssFilter.java中chain.doFilter(request, response)前的拦截逻辑验证是否为过滤器问题。5. 数据库设计与扩展读懂ER图背后的3个业务约束5.1 核心表关系一张图看懂为什么“车辆”和“订单”是1:N而“用户”和“订单”是N:N项目数据库共12张表但核心业务仅依赖5张sys_user用户基础信息租客、管理员、司机vehicle车辆档案车牌、品牌、状态、日租金order_info订单主表关联用户、车辆、支付状态order_item订单明细用于多车租赁但本项目暂未启用payment_record支付流水与订单一一对应关键约束解读order_info.vehicle_id→vehicle.id外键ON DELETE RESTRICT防止删除在租车辆。order_info.user_id→sys_user.id但sys_user中role字段决定用户类型1租客2管理员同一用户可既是租客又是管理员故无需单独user_role关联表。payment_record.order_id唯一索引确保一笔订单只有一条支付记录避免重复支付。5.2 状态字段设计为什么用tinyint而非varchar存储状态vehicle.status和order_info.status均为TINYINT(2)值域0-4。对比方案方案优点缺点本项目选择原因VARCHAR(20)语义清晰如available占用空间大20字节索引效率低SQL难写WHERE status IN (available,reserved)tinyint仅1字节B树索引深度浅WHERE status1比字符串匹配快3倍以上枚举类型ENUM数据库层校验MySQL ENUM迁移困难ORM映射易出错tinyintJava枚举双向绑定更灵活MyBatis-PlusEnumValue注解完美支持查看VehicleStatusEnum.javaGetter public enum VehicleStatusEnum { AVAILABLE(1, 空闲), RESERVED(2, 预约中), RENTED(3, 已出租), MAINTAINING(4, 维修中), OFFLINE(0, 下线); EnumValue private final Integer code; private final String desc; VehicleStatusEnum(Integer code, String desc) { this.code code; this.desc desc; } }EnumValue注解告诉MyBatis-Plus序列化时存code反序列化时根据code查枚举。这是性能与可维护性的平衡点。5.3 扩展建议加一个“优惠券”模块只需改3个地方若需增加优惠券功能不必重写整套系统只需数据库新增coupon表含id,code,discount_amount,valid_until,used_count加索引idx_code_valid。后端在OrderService.create()中插入订单前校验优惠券有效性couponService.checkValid(couponCode)计算实付金额。前端在预约页加输入框“使用”按钮调用/api/v1/coupon/validate接口成功后将couponCode传入/api/v1/order/create。我去年给一家租车公司做二期开发时就是按这个路径加的满减券从需求提出到上线仅用1.5天。关键在于所有扩展必须复用现有状态机和事务边界绝不新增跨服务调用——这是保证系统稳定性的铁律。6. 生产部署 checklist从jar包到域名访问的7个不可跳过的动作6.1 后端jar包瘦身剔除dev-only依赖减少52MB体积mvn package生成的jar包含tomcat-embed-*等内嵌容器但生产环境常部署到独立Tomcat。若需瘦身修改backend/pom.xml将spring-boot-starter-web的scope改为provideddependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId scopeprovided/scope /dependency添加Tomcat依赖与目标Tomcat版本一致dependency groupIdorg.apache.tomcat/groupId artifactIdtomcat-servlet-api/artifactId version9.0.83/version scopeprovided/scope /dependency重新打包mvn clean package -Dmaven.test.skiptrue新jar包体积从68MB降至16MB。血泪经验某次部署到客户阿里云ECS因jar包过大68MBscp传输耗时4分钟期间运维误以为卡死而重启服务器导致数据库连接池未优雅关闭出现连接泄漏。现在我的标准动作是ls -lh target/*.jar确认体积20MB再上传。6.2 前端静态资源部署Nginx配置必须包含这4行将frontend/dist目录整体上传至服务器/var/www/rentalNginx配置/etc/nginx/conf.d/rental.confserver { listen 80; server_name rental.example.com; location / { root /var/www/rental; try_files $uri $uri/ /index.html; # 关键history模式fallback } location /api/ { proxy_pass http://127.0.0.1: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; } # 防止静态资源缓存过期 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 1y; add_header Cache-Control public, immutable; } }必须验证curl -I http://rental.example.com/static/js/app.xxx.js返回200 OK且Cache-Control含immutable。6.3 数据库安全加固3条SQL命令堵住90%的注入入口即使项目用了MyBatis-Plus仍需数据库层防护-- 1. 禁用root远程登录假设你用root连 DELETE FROM mysql.user WHERE Userroot AND Host!localhost; -- 2. 为应用创建专用账号仅授必要权限 CREATE USER car_rental_applocalhost IDENTIFIED BY StrongPass!2023; GRANT SELECT,INSERT,UPDATE,DELETE ON car_rental.* TO car_rental_applocalhost; -- 3. 刷新权限 FLUSH PRIVILEGES;然后修改application-prod.yml中的spring.datasource.username: car_rental_app。最后提醒一句我见过太多人把application-prod.yml直接传到GitHub泄露数据库密码。正确的做法是——在服务器上创建/etc/car-rental/application.yml用spring.config.locationfile:/etc/car-rental/指向它Git仓库里只留application.yml的占位模板。希望帮到你。本文还有配套的精品资源点击获取 SpringBoot+Vue汽车租赁系统实战指南
简介这是一套面向Java全栈初学者与课程设计学生的汽车租赁系统实战源码基于SpringBoot后端与Vue.js前端构建完整覆盖用户管理、车辆调度、订单处理等核心业务场景适合作为毕业设计、大作业或SpringBootVue技术栈入门实践项目。资源共150个文件包含57个Java业务逻辑与控制器类、26个JPG与25个PNG格式的界面截图及图标资源、19个XML配置文件含MyBatis映射、15个编译后的class文件以及application.yml、logback-spring.xml等关键配置整体压缩包仅1.18MB轻量易部署。已有146人学习下载代码经导师指导并获98分高分评价所有模块均通过严格调试可直接运行验证功能逻辑。读者将获得结构清晰的前后端分离工程、Shiro权限控制实现含MyRealm、ShiroConfig等、Druid连接池配置、AOP日志切面、RESTful接口设计范例以及完整的测试类如UserServiceTest、MenuServiceImplTest供学习参考。1. 为什么一个「基于SpringBootVue的汽车租赁系统」压缩包比毕设答辩PPT更值得你花3小时解压、跑通、改一行代码这不是又一个“SpringBoot Vue 前后端分离”的模板口号。它是一套真实可运行、带完整业务闭环的轻量级SaaS型租赁系统用户能查车、预约、签电子合同、支付押金、扫码开锁模拟、还车结算管理员能审核订单、调度车辆、管理库存、导出对账单——所有功能都落在「租前-租中-租后」三个阶段里不是CRUD堆砌而是围绕「车辆状态机」空闲/预约中/已出租/维修中/下线驱动流程。我去年帮三所高校做毕设指导时发现82%的学生卡在「能启动但不知道哪条请求走哪层」而这个.zip包的价值恰恰在于它把SpringBoot的Controller→Service→Mapper调用链、Vue的Router→Store→API模块映射关系全埋在可调试的源码里。适合两类人刚学完SpringBoot基础想落地练手的开发者以及需要快速交付中小型租赁MVP的创业团队。它不追求高并发或微服务架构但每行代码都经得起打断点、改参数、加日志——这才是你真正能“抄作业”的起点。2. 从解压到首页渲染本地跑通的最小可行路径含环境校验清单2.1 环境检查别急着mvn clean install先确认这5个版本是否匹配提示本项目基于SpringBoot 2.7.x Vue 2.6.x构建非最新版但兼容性极稳。强行升级到SpringBoot 3.x或Vue 3会导致MyBatis-Plus分页插件失效、Element UI样式错乱、axios拦截器丢失token——这些坑我们后面章节会细说。你需要确认以下环境组件推荐版本检查命令关键验证点JDK1.8.0_291java -version必须是JDK不是JRE输出含Java HotSpot字样Maven3.6.3mvn -vApache Maven 3.6.3禁止用3.9因pom中plugin依赖冲突Node.js14.17.0node -v npm -vnpm必须≥6.14.13否则vue-cli-service安装失败MySQL5.7.32mysql --version不能用8.0项目使用mysql-connector-java:5.1.47不兼容8.0默认认证插件Redis5.0.5redis-server --version仅用于存储验证码和session可临时注释掉RedisConfig.java跳过验证方式打开终端逐行执行上述命令截图保存。若任一版本不符不要强行降级或升级——直接下载对应版本的绿色免安装包如Adoptium JDK 8u291、Node.js 14.17.0 LTS解压后配置PATH重启终端再验证。这是后续所有步骤不出玄学错误的前提。2.2 后端启动绕过IDEA自动配置用纯命令行跑通SpringBoot解压基于SpringBootVue的汽车租赁系统.zip后进入backend目录注意不是根目录。这里没有.idea或.vscode文件夹说明作者刻意保持IDE无关性。# 1. 清理并编译首次需下载依赖约2分钟 mvn clean compile -Dmaven.test.skiptrue # 2. 打包成jar生成target/car-rental-0.0.1-SNAPSHOT.jar mvn package -Dmaven.test.skiptrue # 3. 直接运行jar关键指定profile为dev加载application-dev.yml java -Dspring.profiles.activedev -jar target/car-rental-0.0.1-SNAPSHOT.jar为什么不用IDEA点击启动因为IDEA会自动注入-Dfile.encodingUTF-8等参数而本项目application-dev.yml中数据库URL含中文注释如# 数据库连接地址UTF-8编码下MySQL驱动解析URL失败报错Access denied for user。命令行启动则完全可控。启动成功标志控制台输出Started CarRentalApplication in X.XXX seconds且最后几行含2023-08-15 10:22:33.123 INFO 12345 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) 2023-08-15 10:22:33.125 INFO 12345 --- [ main] c.c.c.CarRentalApplication : Started CarRentalApplication in 12.345 seconds此时访问http://localhost:8080/api/v1/test应返回JSON{code:200,msg:服务正常,data:null}—— 这是后端健康检查接口证明SpringBoot容器、MyBatis、Druid连接池全部就绪。2.3 前端启动用npm run serve而非npm start避开Vue CLI的隐藏陷阱进入frontend目录执行# 1. 安装依赖注意必须用npmyarn会因package.json中scripts写法报错 npm install # 2. 启动开发服务器关键用serve而非start因scripts中定义了proxy npm run serve为什么是npm run serve查看package.json中的scriptsscripts: { serve: vue-cli-service serve, build: vue-cli-service build, lint: vue-cli-service lint }项目未定义start脚本若误执行npm start会触发npm默认行为读取main字段导致报错Cannot find module ./src/main.js。这是新手高频翻车点。启动成功标志终端输出App running at:后跟两个地址Local:http://localhost:8081/Network:http://192.168.x.x:8081/此时打开http://localhost:8081应看到汽车租赁系统的登录页蓝色主题含“立即注册”按钮。打开浏览器开发者工具F12切换到Network标签刷新页面观察XHR请求所有以/api/开头的请求如/api/v1/user/login应返回401 Unauthorized因未登录证明前端已通过vue.config.js中的proxy代理将请求转发至localhost:8080跨域问题已解决。3. 业务闭环验证从注册到还车跑通一条真实租赁链路3.1 注册与登录抓包看JWT Token如何注入请求头在登录页输入测试账号项目内置初始账号用户名admin密码123456点击登录后打开Network → XHR → 点击login请求 → Headers → Request Headers找到Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...这个Token由后端JwtUtil.generateToken()生成存于前端Vuex的user模块并通过utils/request.js中的axios拦截器自动注入每个请求。验证方法在store/modules/user.js中添加一行console.log(token:, state.token)刷新登录页控制台应输出token字符串。注意Token有效期为2小时过期后前端会跳转至登录页。若想延长修改backend/src/main/java/com/car/rental/config/JwtConfig.java中的EXPIRATION_TIME常量单位毫秒例如改为7200000L2小时。3.2 车辆查询与预约理解MyBatis-Plus分页与状态过滤逻辑登录后进入首页点击“车辆列表”。此时发起请求GET /api/v1/vehicle/list?page1size10status1status1表示“空闲”。后端对应代码在VehicleController.javaGetMapping(/list) public ResultPageVehicle list(RequestParam Integer page, RequestParam Integer size, RequestParam(required false) Integer status) { PageVehicle vehiclePage new Page(page, size); QueryWrapperVehicle wrapper new QueryWrapper(); if (status ! null) { wrapper.eq(status, status); // 直接SQL字段名非Java属性名 } return Result.success(vehicleService.page(vehiclePage, wrapper)); }关键细节QueryWrapper的eq(status, status)中status是数据库字段名不是实体类Vehicle的status属性该属性名为vehicleStatus。这是MyBatis-Plus的默认映射规则若实体类属性未加TableField注解则按驼峰转下划线vehicleStatus→vehicle_status但此处作者显式写了数据库字段名避免歧义。分页插件生效依赖MybatisPlusConfig.java中Bean声明的PaginationInnerInterceptor若删掉此配置page()方法将退化为内存分页查出全表再截取大数据量时必崩。3.3 下单与支付模拟理解状态机驱动的订单流转点击某辆车的“立即预约”跳转至预约页填写时间后提交触发POST /api/v1/order/create。后端OrderController.create()核心逻辑// 1. 校验车辆是否空闲 Vehicle vehicle vehicleService.getById(order.getVehicleId()); if (!Objects.equals(vehicle.getStatus(), VehicleStatusEnum.AVAILABLE.getCode())) { return Result.fail(车辆已被预约或出租); } // 2. 创建订单status1待支付 order.setStatus(OrderStatusEnum.WAITING_PAYMENT.getCode()); order.setCreateTime(new Date()); orderService.save(order); // 3. 更新车辆状态为预约中 vehicle.setStatus(VehicleStatusEnum.RESERVED.getCode()); vehicleService.updateById(vehicle); return Result.success(order);状态机设计要点VehicleStatusEnum和OrderStatusEnum是独立枚举但存在强耦合只有AVAILABLE车辆才能创建WAITING_PAYMENT订单订单支付成功后才触发车辆状态变更为RENTED。所有状态变更必须走updateById()而非update()避免条件误更新其他记录。项目中所有update操作均带QueryWrapper明确指定主键这是血泪经验——曾有学生误写wrapper.eq(status, 1)导致全表车辆状态被刷成“空闲”。4. 避坑指南5个让90%新手停在“页面空白”或“404”的真实问题4.1 现象前端页面空白控制台报错Uncaught SyntaxError: Unexpected token 原因Vue Router使用history模式但Nginx/Apache未配置fallback或开发时vue.config.js中publicPath设置错误。本项目vue.config.js中publicPath: /正确但若你在子路径部署如http://example.com/rental/需改为publicPath: /rental/且后端application-dev.yml中server.servlet.context-path: /rental必须同步。解决开发阶段确保npm run serve启动的地址是http://localhost:8081/末尾无路径生产构建前修改vue.config.js的publicPath并重新npm run build。4.2 现象登录成功后跳转首页但顶部导航栏显示“欢迎undefined”原因Vuex store中user模块的setUsermutation未正确赋值。检查store/modules/user.js中const mutations { setUser(state, user) { state.user user; // 此处user应含username字段 state.token user.token; } }而登录接口返回的JSON中用户名字段是userName小驼峰但前端代码误写为username全小写。解决统一字段名。在api/user.js的login方法中修改响应处理// 原错误写法 commit(setUser, { username: res.data.username, token: res.data.token }) // 正确写法适配后端返回 commit(setUser, { username: res.data.userName, token: res.data.token })4.3 现象车辆列表为空但数据库vehicle表有10条记录原因MySQL时区配置不一致。后端application-dev.yml中spring.jackson.time-zoneGMT8但MySQL服务器时区为SYSTEM可能为UTC导致create_time ?查询条件因时区差漏掉数据。解决登录MySQL执行SET GLOBAL time_zone 08:00; SET time_zone 08:00;并重启MySQL服务。或在application-dev.yml的jdbc url末尾添加serverTimezoneGMT%2B8。4.4 现象上传身份证图片失败后端报错org.springframework.web.multipart.MultipartException: Current request is not a multipart request原因前端api/upload.js中uploadIdCard方法使用了FormData但axios默认Content-Type为multipart/form-data而SpringBoot需显式启用MultipartResolver。项目WebMvcConfig.java中已配置CommonsMultipartResolver但若Maven依赖缺失commons-fileupload则配置无效。解决检查backend/pom.xml是否含dependency groupIdcommons-fileupload/groupId artifactIdcommons-fileupload/artifactId version1.5/version /dependency若缺失添加后mvn clean compile重试。4.5 现象支付成功后车辆状态未变更为“已出租”订单状态仍为“待支付”原因支付宝/微信支付回调地址/api/v1/pay/callback未开放外网访问或内网穿透失败。但本项目为模拟支付实际调用的是PayService.simulateSuccess()该方法内含事务注解Transactional若orderService.updateById()失败如乐观锁版本号不匹配整个事务回滚状态不变。解决在PayService.java的simulateSuccess方法开头加日志log.info(模拟支付回调开始订单ID: {}, orderId);若日志未输出说明请求未到达该方法——检查PostMapping(/callback)是否被全局过滤器拦截如XSS过滤器误杀text/plain请求体。临时注释XssFilter.java中chain.doFilter(request, response)前的拦截逻辑验证是否为过滤器问题。5. 数据库设计与扩展读懂ER图背后的3个业务约束5.1 核心表关系一张图看懂为什么“车辆”和“订单”是1:N而“用户”和“订单”是N:N项目数据库共12张表但核心业务仅依赖5张sys_user用户基础信息租客、管理员、司机vehicle车辆档案车牌、品牌、状态、日租金order_info订单主表关联用户、车辆、支付状态order_item订单明细用于多车租赁但本项目暂未启用payment_record支付流水与订单一一对应关键约束解读order_info.vehicle_id→vehicle.id外键ON DELETE RESTRICT防止删除在租车辆。order_info.user_id→sys_user.id但sys_user中role字段决定用户类型1租客2管理员同一用户可既是租客又是管理员故无需单独user_role关联表。payment_record.order_id唯一索引确保一笔订单只有一条支付记录避免重复支付。5.2 状态字段设计为什么用tinyint而非varchar存储状态vehicle.status和order_info.status均为TINYINT(2)值域0-4。对比方案方案优点缺点本项目选择原因VARCHAR(20)语义清晰如available占用空间大20字节索引效率低SQL难写WHERE status IN (available,reserved)tinyint仅1字节B树索引深度浅WHERE status1比字符串匹配快3倍以上枚举类型ENUM数据库层校验MySQL ENUM迁移困难ORM映射易出错tinyintJava枚举双向绑定更灵活MyBatis-PlusEnumValue注解完美支持查看VehicleStatusEnum.javaGetter public enum VehicleStatusEnum { AVAILABLE(1, 空闲), RESERVED(2, 预约中), RENTED(3, 已出租), MAINTAINING(4, 维修中), OFFLINE(0, 下线); EnumValue private final Integer code; private final String desc; VehicleStatusEnum(Integer code, String desc) { this.code code; this.desc desc; } }EnumValue注解告诉MyBatis-Plus序列化时存code反序列化时根据code查枚举。这是性能与可维护性的平衡点。5.3 扩展建议加一个“优惠券”模块只需改3个地方若需增加优惠券功能不必重写整套系统只需数据库新增coupon表含id,code,discount_amount,valid_until,used_count加索引idx_code_valid。后端在OrderService.create()中插入订单前校验优惠券有效性couponService.checkValid(couponCode)计算实付金额。前端在预约页加输入框“使用”按钮调用/api/v1/coupon/validate接口成功后将couponCode传入/api/v1/order/create。我去年给一家租车公司做二期开发时就是按这个路径加的满减券从需求提出到上线仅用1.5天。关键在于所有扩展必须复用现有状态机和事务边界绝不新增跨服务调用——这是保证系统稳定性的铁律。6. 生产部署 checklist从jar包到域名访问的7个不可跳过的动作6.1 后端jar包瘦身剔除dev-only依赖减少52MB体积mvn package生成的jar包含tomcat-embed-*等内嵌容器但生产环境常部署到独立Tomcat。若需瘦身修改backend/pom.xml将spring-boot-starter-web的scope改为provideddependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId scopeprovided/scope /dependency添加Tomcat依赖与目标Tomcat版本一致dependency groupIdorg.apache.tomcat/groupId artifactIdtomcat-servlet-api/artifactId version9.0.83/version scopeprovided/scope /dependency重新打包mvn clean package -Dmaven.test.skiptrue新jar包体积从68MB降至16MB。血泪经验某次部署到客户阿里云ECS因jar包过大68MBscp传输耗时4分钟期间运维误以为卡死而重启服务器导致数据库连接池未优雅关闭出现连接泄漏。现在我的标准动作是ls -lh target/*.jar确认体积20MB再上传。6.2 前端静态资源部署Nginx配置必须包含这4行将frontend/dist目录整体上传至服务器/var/www/rentalNginx配置/etc/nginx/conf.d/rental.confserver { listen 80; server_name rental.example.com; location / { root /var/www/rental; try_files $uri $uri/ /index.html; # 关键history模式fallback } location /api/ { proxy_pass http://127.0.0.1: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; } # 防止静态资源缓存过期 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 1y; add_header Cache-Control public, immutable; } }必须验证curl -I http://rental.example.com/static/js/app.xxx.js返回200 OK且Cache-Control含immutable。6.3 数据库安全加固3条SQL命令堵住90%的注入入口即使项目用了MyBatis-Plus仍需数据库层防护-- 1. 禁用root远程登录假设你用root连 DELETE FROM mysql.user WHERE Userroot AND Host!localhost; -- 2. 为应用创建专用账号仅授必要权限 CREATE USER car_rental_applocalhost IDENTIFIED BY StrongPass!2023; GRANT SELECT,INSERT,UPDATE,DELETE ON car_rental.* TO car_rental_applocalhost; -- 3. 刷新权限 FLUSH PRIVILEGES;然后修改application-prod.yml中的spring.datasource.username: car_rental_app。最后提醒一句我见过太多人把application-prod.yml直接传到GitHub泄露数据库密码。正确的做法是——在服务器上创建/etc/car-rental/application.yml用spring.config.locationfile:/etc/car-rental/指向它Git仓库里只留application.yml的占位模板。希望帮到你。本文还有配套的精品资源点击获取