基于 Spring Boot + Vue3 的停车场预约小程序设计与实现-北京尧图网络

温馨提示本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系名片一、项目背景与需求分析随着城市机动车保有量持续增长停车难、找车位耗时、车位利用率低等问题日益突出。传统停车场多依赖人工收费与现场排队车主无法提前获知车位余量管理者也难以掌握实时车位状态。基于此本文设计并实现一套停车场预约小程序让车主可以提前查询车位、在线预约、扫码入场与离场结算同时为停车场管理者提供车位与订单的可视化管理能力。系统核心需求可归纳为以下几类用户端注册登录、停车场与车位查询、在线预约、预约取消、订单支付、历史订单查看、车辆信息管理。管理端停车场信息维护、车位管理、预约订单审核与统计、收费规则配置、用户与车辆管理。系统能力预约时段冲突校验、超时未入场自动释放车位、并发预约下的车位一致性保障。二、技术选型与整体架构系统采用前后端分离架构后端基于 Spring Boot 提供 RESTful 接口前端分为管理后台与微信小程序两端数据库使用 MySQL缓存使用 Redis。层次技术选型说明后端框架Spring Boot 2.7 / 3.x快速构建 Web 服务内置 Tomcat持久层MyBatis-Plus简化 CRUD支持分页与条件构造器数据库MySQL 8.0存储用户、停车场、车位、订单等数据缓存Redis缓存车位余量、分布式锁、预约防重鉴权Spring Security JWT无状态登录鉴权区分用户与管理员角色管理后台Vue3 Vite Element Plus组合式 API 开发组件化页面小程序端uni-appVue3 语法一套代码编译到微信小程序整体调用链路为小程序或管理后台发起请求经 Nginx 转发至 Spring Boot 服务服务层完成业务校验后访问 MySQL 与 Redis最终以统一响应体返回前端。flowchart LR A[微信小程序] -- C[Nginx] B[Vue3 管理后台] -- C C -- D[Spring Boot 应用] D -- E[(MySQL)] D -- F[(Redis)] D -- G[微信支付/登录接口]三、数据库设计围绕停车场预约的核心业务设计以下主要数据表sys_user用户表存储手机号、昵称、角色、状态等。user_car车辆表存储车牌号、车辆类型、所属用户。parking_lot停车场表存储名称、地址、经纬度、总车位数、营业时间。parking_space车位表存储车位编号、所属停车场、车位类型、状态。reservation_order预约订单表存储预约人、车位、预约时段、订单状态、金额。payment_record支付记录表存储订单号、支付方式、支付时间、支付状态。其中预约订单表是业务核心关键字段设计如下CREATE TABLE reservation_order ( id BIGINT PRIMARY KEY AUTO_INCREMENT, order_no VARCHAR(32) NOT NULL COMMENT 订单号, user_id BIGINT NOT NULL COMMENT 预约用户, lot_id BIGINT NOT NULL COMMENT 停车场ID, space_id BIGINT NOT NULL COMMENT 车位ID, plate_no VARCHAR(16) NOT NULL COMMENT 车牌号, start_time DATETIME NOT NULL COMMENT 预约开始时间, end_time DATETIME NOT NULL COMMENT 预约结束时间, amount DECIMAL(10,2) DEFAULT 0.00 COMMENT 订单金额, status TINYINT DEFAULT 0 COMMENT 0待支付 1已预约 2已入场 3已完成 4已取消 5已超时, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, UNIQUE KEY uk_order_no (order_no), KEY idx_space_time (space_id, start_time, end_time) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;为提升同一车位在时间维度上的冲突查询效率在space_id与预约时段上建立联合索引。四、后端核心功能实现4.1 统一响应与全局异常处理后端统一使用Result包装响应体并通过RestControllerAdvice捕获业务异常与参数校验异常避免异常堆栈直接暴露给前端。Data public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT r new Result(); r.setCode(200); r.setMessage(success); r.setData(data); return r; } public static T ResultT fail(String message) { ResultT r new Result(); r.setCode(500); r.setMessage(message); return r; } }4.2 预约下单与并发控制预约下单需要解决两个问题一是同一车位在目标时段内不能被重复预约二是高并发下不能出现超卖。实现思路为先基于 Redis 分布式锁按车位维度加锁再在数据库层做时段冲突校验最后写入订单。Service RequiredArgsConstructor public class ReservationService { private final ReservationOrderMapper orderMapper; private final ParkingSpaceMapper spaceMapper; private final RedissonClient redissonClient; public ResultString reserve(ReservationDTO dto) { String lockKey lock:space: dto.getSpaceId(); RLock lock redissonClient.getLock(lockKey); try { if (!lock.tryLock(3, 10, TimeUnit.SECONDS)) { return Result.fail(当前预约人数较多请稍后重试); } ParkingSpace space spaceMapper.selectById(dto.getSpaceId()); if (space null || space.getStatus() ! 1) { return Result.fail(车位不可用); } int conflict orderMapper.countConflict( dto.getSpaceId(), dto.getStartTime(), dto.getEndTime()); if (conflict 0) { return Result.fail(该时段车位已被预约); } ReservationOrder order buildOrder(dto); orderMapper.insert(order); return Result.success(order.getOrderNo()); } catch (InterruptedException e) { Thread.currentThread().interrupt(); return Result.fail(预约失败请重试); } finally { if (lock.isHeldByCurrentThread()) { lock.unlock(); } } } }对应的冲突统计 SQL 使用半开区间判断避免相邻时段被误判为冲突SELECT COUNT(1) FROM reservation_order WHERE space_id #{spaceId} AND status IN (1, 2) AND start_time #{endTime} AND end_time #{startTime};4.3 超时未入场自动释放借助 Spring 定时任务周期性扫描已预约但超过开始时间一定时长仍未入场的订单将其置为超时状态并释放车位。Component RequiredArgsConstructor public class OrderTimeoutTask { private final ReservationOrderMapper orderMapper; Scheduled(cron 0 */5 * * * ?) public void releaseTimeoutOrders() { LocalDateTime deadline LocalDateTime.now().minusMinutes(15); orderMapper.updateTimeoutOrders(deadline); } }4.4 JWT 登录鉴权用户登录成功后签发 JWT前端在请求头携带Authorization后端通过拦截器解析并写入安全上下文同时区分普通用户与管理员权限。public class JwtInterceptor implements HandlerInterceptor { private final JwtUtil jwtUtil; public JwtInterceptor(JwtUtil jwtUtil) { this.jwtUtil jwtUtil; } Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token request.getHeader(Authorization); if (token null || !token.startsWith(Bearer )) { response.setStatus(401); return false; } Claims claims jwtUtil.parse(token.substring(7)); UserContext.set(claims.getSubject(), claims.get(role, String.class)); return true; } Override public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) { UserContext.clear(); } }五、Vue3 管理后台实现管理后台使用 Vue3 组合式 API 与 Element Plus 构建路由采用动态路由配合权限控制接口请求统一封装 Axios。import axios from axios import { ElMessage } from element-plus const request axios.create({ baseURL: import.meta.env.VITE_API_BASE, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) request.interceptors.response.use( res { const { code, message, data } res.data if (code 200) return data ElMessage.error(message || 请求失败) return Promise.reject(new Error(message)) }, err { if (err.response?.status 401) { localStorage.removeItem(token) location.href /login } return Promise.reject(err) } ) export default request车位管理页面使用el-table展示车位列表配合el-dialog完成新增与编辑状态变更通过行内操作按钮触发操作完成后局部刷新列表。六、小程序端功能实现小程序端基于 uni-app 开发主要页面包括首页停车场列表、停车场详情与车位选择、预约确认、订单列表与个人中心。首页按距离与余位排序展示停车场支持关键字搜索。预约页选择日期与时段实时展示可选车位提交后跳转支付。订单页按状态筛选订单支持取消预约与查看入场码。个人中心管理车辆信息、查看历史订单与账户余额。预约提交的核心逻辑如下const submitReservation async () { if (!form.spaceId || !form.startTime || !form.endTime) { uni.showToast({ title: 请完善预约信息, icon: none }) return } const res await request.post(/api/reservation, { spaceId: form.spaceId, plateNo: form.plateNo, startTime: form.startTime, endTime: form.endTime }) uni.showToast({ title: 预约成功, icon: success }) uni.navigateTo({ url: /pages/order/detail?orderNo${res} }) }七、系统测试与优化建议测试阶段重点覆盖预约时段冲突、并发下单、超时释放与支付回调等场景。可使用 JMeter 对预约接口做并发压测验证分布式锁与数据库唯一约束的配合效果。后续优化方向包括引入消息队列异步处理支付回调与超时释放降低主流程耗时。车位余量使用 Redis 缓存并设置合理过期时间减少数据库压力。增加预约信用分机制对频繁取消的用户做限制。接入地图服务实现停车场导航与室内车位引导。八、总结本文围绕停车场预约场景完成了从需求分析、技术选型、数据库设计到后端预约核心逻辑、Vue3 管理后台与小程序端实现的全流程设计。通过 Redis 分布式锁与数据库时段冲突校验相结合有效保障了并发预约下的车位一致性通过定时任务实现超时订单自动释放提升了车位周转效率。该方案结构清晰、易于扩展可作为同类预约类系统的参考实现。

基于 Spring Boot + Vue3 的停车场预约小程序设计与实现

相关推荐

会自己跑分的游戏：driveclub-recomp AI自动驾驶Benchmark功能的原理与用法详解

Qwen3.6-35B-A3B-w4a8-mxfp多模态能力实战：激活图像与视频理解的3个实用技巧

终极Pion WebRTC数据通道实战指南：构建高效双向数据传输应用

更多资讯

数据中心接入交换机架构：TOR、MOR与EOR详解

Java Material Design 图文客户端架构拆解与避坑实战

德中机器翻译模型opus-mt-de-ZH-openmind原理与实战

OCR与大模型混合架构：提升金融票据识别准确率

钓鱼网站全链路拆解：识别、复现与账号防护实操

多重背包问题的单调队列优化解析

今日更新

AI智能体开发实战：从技术原理到商业落地

OpenShell 完全定制指南：从安装到深度配置，打造高效 Windows 开始菜单

Superpowers技能体系全解析：从Skills引入到安装的完整指南

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？