随着城市机动车保有量持续上升出门找车位成了很多车主的日常难题而另一方面小区、写字楼、商场又有大量车位在特定时段处于闲置状态。一边“停车难”一边“车位荒”供需信息不透明导致资源浪费。基于微信小程序做一套停车位预约共享系统正好可以把车主、车位主和管理员连接起来实现车位发布、在线预约、订单管理、状态流转的闭环。本文将从需求分析、数据库设计、小程序端实现、后端接口实现到常见问题排查完整拆解这套适合做毕业设计、课程设计和项目练手的开源小程序项目。这套系统适合正在准备计算机相关专业毕业设计的学生也适合想用微信小程序实战一个完整业务系统的开发者。阅读并动手操作后你能掌握小程序端与后端 API 的对接方式、自定义车位列表与预约流程的实现思路、Spring Boot 接口的编写方式以及微信开发者工具和真机调试的高频坑点。1. 项目背景与需求概述1.1 为什么做停车位预约共享系统停车位预约共享系统的核心目标是提高车位利用率。以常见场景为例工作日白天小区业主的车位空置而附近写字楼的车主找不到车位工作日晚间则相反写字楼车位空置小区车位紧张。如果有一套线上预约系统车位主可以把空闲时段挂到平台上车主按需搜索、预约、支付或线下结算管理员统一审核管理就能在一定程度上缓解停车资源错配的问题。从毕业设计角度看这个课题具备完整的业务闭环涉及用户端、车位主端、管理后台三个视角并且小程序、Java 后端、MySQL 数据库三者配合覆盖了最常见的 Web 全栈开发技能。1.2 系统角色划分本系统按权限和职责可以拆成三类角色角色核心操作说明普通用户/车主浏览车位、搜索车位、发起预约、查看订单、取消订单、发表评价小程序端主要使用者车位主发布车位、维护车位信息、修改空闲时段、查看被预约记录可以复用普通用户账号增加角色字段区分系统管理员用户管理、车位审核、订单监管、数据统计可放在管理后台也可在小程序端做简易管理页1.3 核心功能拆解围绕上述角色系统的核心功能可以梳理为以下几个模块用户认证模块通过微信登录获取用户唯一标识首次登录自动注册。车位管理模块车位主发布车位填写位置、类型、按时/按天价格、空闲时段、图片等信息。车位检索模块按区域、价格、车位类型筛选车位支持关键词搜索。预约下单模块选择车位和预约时段生成预约订单校验订单冲突。订单管理模块查看待使用、使用中、已完成、已取消订单。评价模块订单完成后用户可以对车位和环境打分评价。个人信息模块展示微信头像、昵称、手机号修改常用设置。这个范围对于一个毕设项目来说已经足够丰富但也完全可控。如果是为了短期演示可以先实现车位列表、预约下单、我的订单三个主链路。2. 技术选型与环境准备2.1 技术栈说明项目整体采用前后端分离结构端技术选型说明小程序端微信小程序原生语言WXML、WXSS、JavaScript/TypeScript轻量无需额外框架微信开发者工具直接运行后端Java Spring Boot MyBatis提供 RESTful API处理业务逻辑和数据库访问数据库MySQL 5.7 或 8.0存储用户、车位、订单等核心数据接口调试Apifox / Postman联调阶段验证接口版本管理Git Gitee/GitHub毕业设计建议保留提交记录版本方面需要根据你的实际环境调整。Spring Boot 3.x 与 2.x 在依赖和配置上存在差异本文示例以常见的 Spring Boot 2.x 思路为准购买云服务器或本地部署时务必核对 JDK 和 Maven 版本匹配。2.2 本地环境准备在开始编码之前需要安装以下工具微信开发者工具稳定版即可建议下载最新稳定版。JDK 1.8 或 JDK 17如果使用 Spring Boot 2.x推荐 JDK 8如果使用 Spring Boot 3.x需要 JDK 17。Maven 3.6 以上用于管理后端依赖。MySQL 5.7 或 8.0并准备一个数据库实例例如parking_db。Navicat 或 MySQL Workbench用于查看和管理数据。微信小程序测试号如果暂未注册小程序 AppID可以使用测试号开发调试。需要注意微信开发者工具里涉及手机号获取、订阅消息、支付接口时测试号有功能限制正式发布和完整体验仍建议注册个人或企业小程序账号。3. 系统总体设计与数据库建模3.1 功能模块图为了便于理解先用文本方式描述系统模块停车位预约共享系统 ├── 用户端小程序 │ ├── 微信登录 │ ├── 首页车位列表 │ ├── 车位搜索与筛选 │ ├── 车位详情 │ ├── 预约下单 │ ├── 我的订单 │ └── 我的评价 ├── 车位主端小程序内身份切换 │ ├── 发布车位 │ ├── 车位管理 │ ├── 空闲时段设置 │ └── 预约记录查看 └── 管理端可选 ├── 用户管理 ├── 车位审核 └── 订单统计3.2 数据库表设计数据库是整个系统的基础。建议至少设计四张核心表下面给出建表 SQL表名和字段命名保持简洁规范。-- 创建数据库 CREATE DATABASE IF NOT EXISTS parking_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE parking_db; -- 用户表 CREATE TABLE t_user ( id BIGINT NOT NULL AUTO_INCREMENT COMMENT 主键, openid VARCHAR(64) NOT NULL COMMENT 微信openid唯一标识, nickname VARCHAR(50) DEFAULT COMMENT 昵称, avatar VARCHAR(255) DEFAULT COMMENT 头像地址, phone VARCHAR(20) DEFAULT COMMENT 手机号, role TINYINT DEFAULT 1 COMMENT 角色1-普通用户2-车位主3-管理员, create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, PRIMARY KEY (id), UNIQUE KEY uk_openid (openid) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户表; -- 停车位表 CREATE TABLE t_parking_space ( id BIGINT NOT NULL AUTO_INCREMENT COMMENT 主键, owner_id BIGINT NOT NULL COMMENT 车位主用户ID, name VARCHAR(100) NOT NULL COMMENT 车位名称, address VARCHAR(255) NOT NULL COMMENT 详细地址, latitude DECIMAL(10,6) DEFAULT NULL COMMENT 纬度, longitude DECIMAL(10,6) DEFAULT NULL COMMENT 经度, type TINYINT DEFAULT 1 COMMENT 车位类型1-地上2-地下3-专属, price_per_hour DECIMAL(10,2) NOT NULL DEFAULT 0.00 COMMENT 小时价格, price_per_day DECIMAL(10,2) NOT NULL DEFAULT 0.00 COMMENT 天价格, image_url VARCHAR(500) DEFAULT COMMENT 车位图片多张用逗号分隔, status TINYINT DEFAULT 0 COMMENT 状态0-待审核1-已上架2-已下架, create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, PRIMARY KEY (id), KEY idx_owner_id (owner_id), KEY idx_status (status) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT停车位表; -- 预约订单表 CREATE TABLE t_booking_order ( id BIGINT NOT NULL AUTO_INCREMENT COMMENT 主键, order_no VARCHAR(32) NOT NULL COMMENT 订单编号, space_id BIGINT NOT NULL COMMENT 停车位ID, user_id BIGINT NOT NULL COMMENT 预约用户ID, start_time DATETIME NOT NULL COMMENT 预约开始时间, end_time DATETIME NOT NULL COMMENT 预约结束时间, total_price DECIMAL(10,2) NOT NULL DEFAULT 0.00 COMMENT 订单金额, status TINYINT DEFAULT 0 COMMENT 状态0-待确认1-已确认2-已完成3-已取消, create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, PRIMARY KEY (id), UNIQUE KEY uk_order_no (order_no), KEY idx_space_id (space_id), KEY idx_user_id (user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT预约订单表; -- 评价表 CREATE TABLE t_comment ( id BIGINT NOT NULL AUTO_INCREMENT COMMENT 主键, order_id BIGINT NOT NULL COMMENT 订单ID, user_id BIGINT NOT NULL COMMENT 用户ID, space_id BIGINT NOT NULL COMMENT 停车位ID, rating TINYINT DEFAULT 5 COMMENT 评分 1-5, content VARCHAR(500) DEFAULT COMMENT 评价内容, create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, PRIMARY KEY (id), KEY idx_space_id (space_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT评价表;在设计订单表时需要注意status字段的取值统一。很多同学在前后端联调时出现“订单状态对不上”的问题根本原因是同一套状态码在数据库、后端枚举、前端页面各写了一份没有统一维护。建议在项目中定义状态常量类前后端共用一套语义。3.3 预约冲突校验思路预约功能的难点不是简单写一条 insert而是避免同一个车位在同一时间段被重复预约。常见做法有两种代码层校验查询该车位已存在且状态为“已确认”的订单判断新订单时间段是否与已有订单重叠。数据库唯一约束配合状态机在订单表加车位id和时段约束但实现比较繁琐毕设阶段优先使用代码校验。简单的时间重叠判断条件如下已有订单开始时间 新订单结束时间 AND 已有订单结束时间 新订单开始时间 AND 车位id相同 AND 已有订单状态为已确认只要满足以上条件就说明时间段发生重叠应该拒绝创建新订单。这个逻辑可以封装在后端 Service 层避免前端重复判断。4. 小程序端核心功能实现4.1 小程序项目结构微信小程序原生开发目录结构建议如下miniprogram/ ├── app.js ├── app.json ├── app.wxss ├── utils/ │ ├── request.js │ └── util.js ├── pages/ │ ├── login/login │ ├── index/index │ ├── detail/detail │ ├── publish/publish │ ├── order/order │ └── mine/mine └── images/app.json配置页面路由和底部导航栏这是小程序的全局配置入口。{ pages: [ pages/index/index, pages/detail/detail, pages/publish/publish, pages/order/order, pages/mine/mine ], window: { navigationBarBackgroundColor: #1e90ff, navigationBarTitleText: 停车位预约共享, navigationBarTextStyle: white, backgroundColor: #f5f5f5 }, tabBar: { color: #999999, selectedColor: #1e90ff, list: [ { pagePath: pages/index/index, text: 首页 }, { pagePath: pages/order/order, text: 订单 }, { pagePath: pages/mine/mine, text: 我的 } ] }, style: v2, sitemapLocation: sitemap.json }4.2 封装请求工具小程序中所有接口请求都通过wx.request发出。为了避免每个页面重复写 url 和 header建议先封装一个utils/request.js。// utils/request.js const BASE_URL http://localhost:8080/api; function request(url, method, data) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL url, method: method || GET, data: data || {}, header: { Content-Type: application/json }, success(res) { if (res.statusCode 200) { resolve(res.data); } else { wx.showToast({ title: 请求失败 res.statusCode, icon: none }); reject(res); } }, fail(err) { wx.showToast({ title: 网络异常请检查后端服务, icon: none }); reject(err); } }); }); } module.exports { get: (url, data) request(url, GET, data), post: (url, data) request(url, POST, data) };这里有一个重要的提醒在小程序开发工具中勾选“不校验合法域名”后本地调试可以访问http://localhost:8080。但真机预览时手机无法直接访问你电脑上的 localhost需要把接口地址改成局域网 IP而且必须是https://或在开发者工具里开启“不校验合法域名”并配合真机调试。4.3 首页车位列表首页是用户进入小程序后的第一个页面职责是展示车位列表并提供按关键词搜索和价格筛选。页面核心逻辑放在index.js中// pages/index/index.js const request require(../../utils/request); Page({ data: { keyword: , spaceList: [], loading: false, pageNum: 1, pageSize: 10, hasMore: true }, onLoad() { this.loadSpaces(true); }, onPullDownRefresh() { this.loadSpaces(true).then(() { wx.stopPullDownRefresh(); }); }, onReachBottom() { if (this.data.hasMore !this.data.loading) { this.loadSpaces(false); } }, loadSpaces(reset) { const { keyword, pageNum, pageSize } this.data; if (this.data.loading) return Promise.resolve(); this.setData({ loading: true }); const targetPage reset ? 1 : pageNum 1; return request.get(/space/list, { keyword: keyword, pageNum: targetPage, pageSize: pageSize }).then((res) { const list res.data.list || []; this.setData({ spaceList: reset ? list : this.data.spaceList.concat(list), pageNum: targetPage, hasMore: list.length pageSize, loading: false }); }).catch(() { this.setData({ loading: false }); }); }, onKeywordInput(e) { this.setData({ keyword: e.detail.value }); }, onSearch() { this.loadSpaces(true); }, goDetail(e) { const id e.currentTarget.dataset.id; wx.navigateTo({ url: /pages/detail/detail?id id }); } });对应的index.wxml结构比较容易写使用wx:for渲染车位卡片即可view classpage view classsearch-bar input classsearch-input bindinputonKeywordInput placeholder输入小区或地址 / button classsearch-btn bindtaponSearch搜索/button /view view classspace-list view classspace-card wx:for{{spaceList}} wx:keyid bindtapgoDetail >// pages/detail/detail.js const request require(../../utils/request); Page({ data: { spaceId: null, space: null, startTime: , endTime: }, onLoad(options) { this.setData({ spaceId: options.id }); this.loadDetail(); }, loadDetail() { request.get(/space/detail, { id: this.data.spaceId }).then((res) { this.setData({ space: res.data }); }); }, onStartTimeChange(e) { this.setData({ startTime: e.detail.value }); }, onEndTimeChange(e) { this.setData({ endTime: e.detail.value }); }, submitOrder() { const { spaceId, startTime, endTime } this.data; if (!startTime || !endTime) { wx.showToast({ title: 请选择完整时间段, icon: none }); return; } if (new Date(endTime) new Date(startTime)) { wx.showToast({ title: 结束时间必须晚于开始时间, icon: none }); return; } request.post(/order/create, { spaceId: Number(spaceId), startTime, endTime }).then((res) { wx.showToast({ title: 预约成功, icon: success }); setTimeout(() { wx.navigateTo({ url: /pages/order/order }); }, 1000); }); } });预约页的时间选择使用微信小程序的picker modedate或picker modetime组件。如果要做更精确的时段选择可以扩展为按小时选择的组件毕业设计阶段用日期加时间拼接即可。4.5 发布车位发布车位是车位主端的核心入口。页面需要提交车位名称、地址、类型、价格、图片、空闲时段等信息。// pages/publish/publish.js const request require(../../utils/request); Page({ data: { form: { name: , address: , type: 1, pricePerHour: , pricePerDay: , imageUrl: } }, onFieldChange(e) { const field e.currentTarget.dataset.field; this.setData({ [form.${field}]: e.detail.value }); }, onTypeChange(e) { this.setData({ form.type: Number(e.detail.value) }); }, chooseImage() { wx.chooseMedia({ count: 1, mediaType: [image], success: (res) { const tempFilePath res.tempFiles[0].tempFilePath; this.uploadImage(tempFilePath); } }); }, uploadImage(filePath) { wx.uploadFile({ url: http://localhost:8080/api/file/upload, filePath: filePath, name: file, success: (res) { const data JSON.parse(res.data); this.setData({ form.imageUrl: data.data.url }); wx.showToast({ title: 图片上传成功, icon: success }); } }); }, submit() { const form this.data.form; if (!form.name || !form.address || !form.pricePerHour) { wx.showToast({ title: 请完善车位信息, icon: none }); return; } request.post(/space/publish, form).then(() { wx.showToast({ title: 发布成功等待审核, icon: success }); setTimeout(() { wx.switchTab({ url: /pages/mine/mine }); }, 1000); }); } });wx.chooseMedia是较新的图片选择接口比起旧的wx.chooseImage功能更强。如果你的基础库版本比较低需要改用wx.chooseImage。5. 后端核心接口实现后端部分使用 Spring Boot 实现 RESTful API。下面重点演示登录、车位列表、创建订单三个核心接口。5.1 工程结构parking-server/ ├── pom.xml ├── src/main/java/com/parking/ │ ├── ParkingApplication.java │ ├── controller/ │ │ ├── UserController.java │ │ ├── SpaceController.java │ │ └── OrderController.java │ ├── service/ │ │ ├── UserService.java │ │ ├── SpaceService.java │ │ └── OrderService.java │ ├── mapper/ │ │ ├── UserMapper.java │ │ ├── SpaceMapper.java │ │ └── OrderMapper.java │ ├── entity/ │ │ ├── User.java │ │ ├── ParkingSpace.java │ │ └── BookingOrder.java │ └── common/ │ └── Result.java └── src/main/resources/ ├── application.yml └── mapper/ └── *.xml为了方便演示这里先定义一个统一返回结构Result.java让所有接口保持相同的数据格式。// common/Result.java package com.parking.common; public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.code 200; result.message success; result.data data; return result; } public static T ResultT error(String message) { ResultT result new Result(); result.code 500; result.message message; return result; } public Integer getCode() { return code; } public void setCode(Integer code) { this.code code; } public String getMessage() { return message; } public void setMessage(String message) { this.message message; } public T getData() { return data; } public void setData(T data) { this.data data; } }5.2 微信登录接口小程序端调用wx.login获取临时code后端通过该 code 调用微信接口获取 openid。出于安全考虑实际项目中应在后端保存 appid 和 secret不能放在小程序前端代码中。// controller/UserController.java RestController RequestMapping(/api/user) public class UserController { Autowired private UserService userService; PostMapping(/login) public ResultUser login(RequestBody LoginRequest request) { return Result.success(userService.login(request.getCode())); } }对应的 Service 实现需要处理“第一次登录自动注册”的逻辑。简单版本如下// service/impl/UserServiceImpl.java Override public User login(String code) { // 实际项目通过 code 调用微信接口获取 openid // 这里以本地模拟 openid 为例 String openid getOpenIdByCode(code); User user userMapper.selectByOpenId(openid); if (user null) { user new User(); user.setOpenid(openid); user.setNickname(微信用户); user.setRole(1); userMapper.insert(user); } return user; }需要注意调用微信官方接口需要网络请求并且需要配置小程序的 appid 和 secret。如果是本地测试可以先 mock openid保证整条登录链路能跑通再接入真实微信接口。很多同学在开发中遇到小程序获取登录后的微信用户失败这类问题常见原因是小程序基础库版本和开发者工具版本不一致。在开发者工具中没启用“模拟操作”下的登录态。openid 获取接口返回异常后端没有做兜底。建议先在后端打印 code 和 openid 日志再逐段排查。5.3 车位列表接口车位列表接口需要支持分页和关键词搜索。Controller 层只做参数接收和结果返回业务判断放在 Service 层。// controller/SpaceController.java RestController RequestMapping(/api/space) public class SpaceController { Autowired private SpaceService spaceService; GetMapping(/list) public ResultPageResultParkingSpace list( RequestParam(required false) String keyword, RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize) { return Result.success(spaceService.queryList(keyword, pageNum, pageSize)); } GetMapping(/detail) public ResultParkingSpace detail(RequestParam Long id) { return Result.success(spaceService.getById(id)); } PostMapping(/publish) public ResultBoolean publish(RequestBody ParkingSpace space) { return Result.success(spaceService.publish(space)); } }一个容易被忽略的细节在查询车位列表时只能返回status 1已上架的车位。如果直接把所有状态的数据都返回给用户会出现“待审核车位被用户预约”的问题。这里需要在 SQL 中固定过滤条件。5.4 创建预约订单接口创建订单是后端业务复杂度最高的接口需要校验时间段、计算价格、防止重复预约。// service/impl/OrderServiceImpl.java Override Transactional(rollbackFor Exception.class) public BookingOrder createOrder(OrderCreateRequest request) { // 1. 校验参数 if (request.getStartTime() null || request.getEndTime() null) { throw new BusinessException(预约时间段不能为空); } if (request.getEndTime().before(request.getStartTime())) { throw new BusinessException(结束时间必须晚于开始时间); } // 2. 获取车位 ParkingSpace space spaceMapper.selectById(request.getSpaceId()); if (space null || space.getStatus() ! 1) { throw new BusinessException(车位不存在或已下架); } // 3. 校验时间冲突 ListBookingOrder conflictList orderMapper.selectConflictList( request.getSpaceId(), request.getStartTime(), request.getEndTime()); if (CollectionUtils.isNotEmpty(conflictList)) { throw new BusinessException(该时段已被预约请更换时间); } // 4. 计算金额按小时价格计算 long hours (request.getEndTime().getTime() - request.getStartTime().getTime()) / (60 * 60 * 1000); if (hours 0) { hours 1; } BigDecimal totalPrice space.getPricePerHour().multiply(BigDecimal.valueOf(hours)); // 5. 创建订单 BookingOrder order new BookingOrder(); order.setOrderNo(generateOrderNo()); order.setSpaceId(request.getSpaceId()); order.setUserId(request.getUserId()); order.setStartTime(request.getStartTime()); order.setEndTime(request.getEndTime()); order.setTotalPrice(totalPrice); order.setStatus(1); orderMapper.insert(order); return order; }这里的Transactional注解非常重要。如果创建订单过程中发生异常事务会回滚不会把未完成的订单写入数据库。毕设答辩时面试官或老师如果问“你怎么保证订单数据一致性”这个就是关键点。5.5 订单状态变更订单状态下单后可能存在三种状态流转用户主动取消状态从“已确认”变为“已取消”。使用完成后确认状态从“已确认”变为“已完成”。超时未使用可以由定时任务自动取消。简易实现中可以让用户在小程序端点击“取消订单”和“确认完成”调用统一的更新接口PostMapping(/order/updateStatus) public ResultBoolean updateStatus(RequestBody OrderStatusRequest request) { BookingOrder order orderMapper.selectById(request.getOrderId()); if (order null) { throw new BusinessException(订单不存在); } // 根据当前状态判断是否允许变更 if (order.getStatus() 3) { throw new BusinessException(订单已取消不能操作); } order.setStatus(request.getStatus()); orderMapper.updateById(order); return Result.success(true); }实际生产项目中订单状态变更应该用状态机来控制不允许任意状态跳转。毕业设计阶段至少要做好状态校验不能让已取消的订单再变成已完成。6. 运行与验证6.1 后端启动导入后端工程到 IDEA 后先修改application.yml中的数据库连接信息server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/parking_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml然后运行ParkingApplication的 main 方法。如果看到类似Tomcat started on port(s): 8080的日志说明启动成功。6.2 小程序端运行用微信开发者工具导入miniprogram文件夹需要做两件事把utils/request.js中的BASE_URL改成你的后端地址。在小程序后台配置 request 合法域名或在开发工具中勾选“不校验合法域名”。编译后即可看到首页。如果没有数据请先通过后端接口手动插入几条测试数据或者写一个初始化接口。6.3 真机调试注意事项真机调试时最容易遇到的问题是net::ERR_CONNECTION_RESET。这个错误通常与以下原因有关手机和电脑不在同一局域网。后端只监听了127.0.0.1没有监听0.0.0.0。电脑防火墙拦截了手机对 8080 端口的访问。排查方法在电脑命令行执行ipconfigWindows或ifconfigMac/Linux查看局域网 IP。把小程序端的BASE_URL改为http://局域网IP:8080。确保手机和电脑连接同一个 Wi-Fi。暂时关闭电脑防火墙或者添加 8080 端口的入站规则。6.4 接口测试建议后端接口写完先用 Apifox 或 Postman 自测一遍。建议至少测试以下接口接口方法正常场景异常场景/api/user/loginPOST返回用户信息code 为空/api/space/listGET返回分页列表页码超出范围/api/space/detailGET返回车位详情id 不存在/api/order/createPOST返回订单信息时间段冲突/api/space/publishPOST发布成功必填字段缺失7. 常见问题与排查思路在开发这套系统的过程中以下几类问题出现频率最高。问题现象常见原因解决思路真机预览接口请求失败net::ERR_CONNECTION_RESETlocalhost 指向手机本身局域网 IP 不通防火墙拦截改 BASE_URL 为局域网 IP保持同一 Wi-Fi关闭防火墙测试小程序获取不到微信用户信息wx.login返回的 code 未正确携带后端 appid/secret 配置错误测试号和正式号混用先打日志看 code 是否为空确认后端请求微信接口参数区分测试环境与正式环境编译报错maximum setlocal recursion level reachedWindows 环境变量 PATH 过长或项目路径嵌套过深清理系统环境变量把项目移动到盘符根目录下的简洁路径页面请求正常但数据不显示后端返回字段命名与前端不一致空数据未做处理统一 JSON 字段命名推荐使用驼峰命名并在后端配置驼峰映射预约同一时段不报错时间冲突校验缺失或状态过滤不对后端 Service 层增加重叠查询并只校验已确认订单图片上传失败wx.uploadFile的 url 未加入合法域名后端未开启文件上传配置本地开发可在详情页临时显示本地临时路径线上必须配置 HTTPS 域名除了表格中的问题还有一个容易被忽略的坑开发者工具中修改了文件路径或project.config.json中的小程序 id 后模拟器仍显示旧项目。这是开发者工具缓存导致的可以尝试“工具 - 清缓存 - 清除全部缓存”然后重新编译。此外如果你的后端用了 Spring Boot 3.x注意javax.servlet已经被替换为jakarta.servlet很多网上旧教程直接复制会报包不存在。这类问题优先查官方文档或工程内的依赖树不要盲目改包名。8. 最佳实践与工程建议8.1 前端规范页面职责单一化。首页只做展示和搜索详情页只做详情和下单不要把所有逻辑堆到一个页面 JS 中。请求统一走封装工具不要在页面中直接wx.request散落写 url。状态码在前端不要写死魔法数字可以用常量对象维护。图片资源统一上传到对象存储或后端静态目录小程序包里不要塞太多图片。8.2 后端规范接口返回统一使用ResultT包装避免有的接口返回对象、有的返回 Map。所有涉及金额计算的字段使用BigDecimal不要使用double或float。创建订单、修改状态等写操作必须有事务管理。数据库时间字段统一使用DATETIME避免时区差异。多表查询建议在业务层做不要在 SQL 中写过于复杂的关联子查询。8.3 安全边界后端接口必须校验用户身份不能仅靠前端传 userId。实际项目中应通过 token 或 session 获取当前登录用户。文件上传要限制文件类型和大小防止恶意文件上传。管理端接口必须校验管理员权限防止普通用户越权操作。线上部署连接数据库时使用独立的低权限账号不要直接用 root。8.4 毕设答辩加分点如果这是毕业设计可以在答辩中主动说明以下亮点订单时间冲突校验通过重叠查询防止重复预约。状态机规范化订单状态流转有明确规则。图片上传能力使用wx.uploadFile实现车位实拍图。分页加载列表页采用分页和触底加载而不是一次全量查询。9. 总结与后续拓展到这为止我们已经完成了停车位预约共享小程序从数据库设计到前后端联调的核心流程。你可以看到这套系统并不复杂但麻雀虽小五脏俱全它涵盖了微信登录、列表分页、订单事务、文件上传、状态管理等常见开发场景。动手实现一遍比单纯看一百篇教程都有效。如果你希望继续完善这个项目可以考虑以下方向接入微信支付把预约改造成在线付费闭环。增加订阅消息车位被审核通过或预约成功时通知用户。使用 WebSocket 实现车位空闲状态实时更新。管理后台使用 Vue 或 React 重写形成 PC 端管理系统。引入 Redis 缓存车位热数据降低数据库压力。在实际开发过程中建议先跑通“浏览车位 - 提交预约 - 查看订单”这条主链路再逐步补充评价、发布车位、搜索筛选等附加功能。主链路通了整个项目的骨架就稳了后面再增加功能也只是按同样模式扩展接口和页面。如果本文对你有帮助可以收藏备用也欢迎在评论区聊聊你在开发中遇到的问题。
随着城市机动车保有量持续上升出门找车位成了很多车主的日常难题而另一方面小区、写字楼、商场又有大量车位在特定时段处于闲置状态。一边“停车难”一边“车位荒”供需信息不透明导致资源浪费。基于微信小程序做一套停车位预约共享系统正好可以把车主、车位主和管理员连接起来实现车位发布、在线预约、订单管理、状态流转的闭环。本文将从需求分析、数据库设计、小程序端实现、后端接口实现到常见问题排查完整拆解这套适合做毕业设计、课程设计和项目练手的开源小程序项目。这套系统适合正在准备计算机相关专业毕业设计的学生也适合想用微信小程序实战一个完整业务系统的开发者。阅读并动手操作后你能掌握小程序端与后端 API 的对接方式、自定义车位列表与预约流程的实现思路、Spring Boot 接口的编写方式以及微信开发者工具和真机调试的高频坑点。1. 项目背景与需求概述1.1 为什么做停车位预约共享系统停车位预约共享系统的核心目标是提高车位利用率。以常见场景为例工作日白天小区业主的车位空置而附近写字楼的车主找不到车位工作日晚间则相反写字楼车位空置小区车位紧张。如果有一套线上预约系统车位主可以把空闲时段挂到平台上车主按需搜索、预约、支付或线下结算管理员统一审核管理就能在一定程度上缓解停车资源错配的问题。从毕业设计角度看这个课题具备完整的业务闭环涉及用户端、车位主端、管理后台三个视角并且小程序、Java 后端、MySQL 数据库三者配合覆盖了最常见的 Web 全栈开发技能。1.2 系统角色划分本系统按权限和职责可以拆成三类角色角色核心操作说明普通用户/车主浏览车位、搜索车位、发起预约、查看订单、取消订单、发表评价小程序端主要使用者车位主发布车位、维护车位信息、修改空闲时段、查看被预约记录可以复用普通用户账号增加角色字段区分系统管理员用户管理、车位审核、订单监管、数据统计可放在管理后台也可在小程序端做简易管理页1.3 核心功能拆解围绕上述角色系统的核心功能可以梳理为以下几个模块用户认证模块通过微信登录获取用户唯一标识首次登录自动注册。车位管理模块车位主发布车位填写位置、类型、按时/按天价格、空闲时段、图片等信息。车位检索模块按区域、价格、车位类型筛选车位支持关键词搜索。预约下单模块选择车位和预约时段生成预约订单校验订单冲突。订单管理模块查看待使用、使用中、已完成、已取消订单。评价模块订单完成后用户可以对车位和环境打分评价。个人信息模块展示微信头像、昵称、手机号修改常用设置。这个范围对于一个毕设项目来说已经足够丰富但也完全可控。如果是为了短期演示可以先实现车位列表、预约下单、我的订单三个主链路。2. 技术选型与环境准备2.1 技术栈说明项目整体采用前后端分离结构端技术选型说明小程序端微信小程序原生语言WXML、WXSS、JavaScript/TypeScript轻量无需额外框架微信开发者工具直接运行后端Java Spring Boot MyBatis提供 RESTful API处理业务逻辑和数据库访问数据库MySQL 5.7 或 8.0存储用户、车位、订单等核心数据接口调试Apifox / Postman联调阶段验证接口版本管理Git Gitee/GitHub毕业设计建议保留提交记录版本方面需要根据你的实际环境调整。Spring Boot 3.x 与 2.x 在依赖和配置上存在差异本文示例以常见的 Spring Boot 2.x 思路为准购买云服务器或本地部署时务必核对 JDK 和 Maven 版本匹配。2.2 本地环境准备在开始编码之前需要安装以下工具微信开发者工具稳定版即可建议下载最新稳定版。JDK 1.8 或 JDK 17如果使用 Spring Boot 2.x推荐 JDK 8如果使用 Spring Boot 3.x需要 JDK 17。Maven 3.6 以上用于管理后端依赖。MySQL 5.7 或 8.0并准备一个数据库实例例如parking_db。Navicat 或 MySQL Workbench用于查看和管理数据。微信小程序测试号如果暂未注册小程序 AppID可以使用测试号开发调试。需要注意微信开发者工具里涉及手机号获取、订阅消息、支付接口时测试号有功能限制正式发布和完整体验仍建议注册个人或企业小程序账号。3. 系统总体设计与数据库建模3.1 功能模块图为了便于理解先用文本方式描述系统模块停车位预约共享系统 ├── 用户端小程序 │ ├── 微信登录 │ ├── 首页车位列表 │ ├── 车位搜索与筛选 │ ├── 车位详情 │ ├── 预约下单 │ ├── 我的订单 │ └── 我的评价 ├── 车位主端小程序内身份切换 │ ├── 发布车位 │ ├── 车位管理 │ ├── 空闲时段设置 │ └── 预约记录查看 └── 管理端可选 ├── 用户管理 ├── 车位审核 └── 订单统计3.2 数据库表设计数据库是整个系统的基础。建议至少设计四张核心表下面给出建表 SQL表名和字段命名保持简洁规范。-- 创建数据库 CREATE DATABASE IF NOT EXISTS parking_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE parking_db; -- 用户表 CREATE TABLE t_user ( id BIGINT NOT NULL AUTO_INCREMENT COMMENT 主键, openid VARCHAR(64) NOT NULL COMMENT 微信openid唯一标识, nickname VARCHAR(50) DEFAULT COMMENT 昵称, avatar VARCHAR(255) DEFAULT COMMENT 头像地址, phone VARCHAR(20) DEFAULT COMMENT 手机号, role TINYINT DEFAULT 1 COMMENT 角色1-普通用户2-车位主3-管理员, create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, PRIMARY KEY (id), UNIQUE KEY uk_openid (openid) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户表; -- 停车位表 CREATE TABLE t_parking_space ( id BIGINT NOT NULL AUTO_INCREMENT COMMENT 主键, owner_id BIGINT NOT NULL COMMENT 车位主用户ID, name VARCHAR(100) NOT NULL COMMENT 车位名称, address VARCHAR(255) NOT NULL COMMENT 详细地址, latitude DECIMAL(10,6) DEFAULT NULL COMMENT 纬度, longitude DECIMAL(10,6) DEFAULT NULL COMMENT 经度, type TINYINT DEFAULT 1 COMMENT 车位类型1-地上2-地下3-专属, price_per_hour DECIMAL(10,2) NOT NULL DEFAULT 0.00 COMMENT 小时价格, price_per_day DECIMAL(10,2) NOT NULL DEFAULT 0.00 COMMENT 天价格, image_url VARCHAR(500) DEFAULT COMMENT 车位图片多张用逗号分隔, status TINYINT DEFAULT 0 COMMENT 状态0-待审核1-已上架2-已下架, create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, PRIMARY KEY (id), KEY idx_owner_id (owner_id), KEY idx_status (status) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT停车位表; -- 预约订单表 CREATE TABLE t_booking_order ( id BIGINT NOT NULL AUTO_INCREMENT COMMENT 主键, order_no VARCHAR(32) NOT NULL COMMENT 订单编号, space_id BIGINT NOT NULL COMMENT 停车位ID, user_id BIGINT NOT NULL COMMENT 预约用户ID, start_time DATETIME NOT NULL COMMENT 预约开始时间, end_time DATETIME NOT NULL COMMENT 预约结束时间, total_price DECIMAL(10,2) NOT NULL DEFAULT 0.00 COMMENT 订单金额, status TINYINT DEFAULT 0 COMMENT 状态0-待确认1-已确认2-已完成3-已取消, create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, PRIMARY KEY (id), UNIQUE KEY uk_order_no (order_no), KEY idx_space_id (space_id), KEY idx_user_id (user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT预约订单表; -- 评价表 CREATE TABLE t_comment ( id BIGINT NOT NULL AUTO_INCREMENT COMMENT 主键, order_id BIGINT NOT NULL COMMENT 订单ID, user_id BIGINT NOT NULL COMMENT 用户ID, space_id BIGINT NOT NULL COMMENT 停车位ID, rating TINYINT DEFAULT 5 COMMENT 评分 1-5, content VARCHAR(500) DEFAULT COMMENT 评价内容, create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, PRIMARY KEY (id), KEY idx_space_id (space_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT评价表;在设计订单表时需要注意status字段的取值统一。很多同学在前后端联调时出现“订单状态对不上”的问题根本原因是同一套状态码在数据库、后端枚举、前端页面各写了一份没有统一维护。建议在项目中定义状态常量类前后端共用一套语义。3.3 预约冲突校验思路预约功能的难点不是简单写一条 insert而是避免同一个车位在同一时间段被重复预约。常见做法有两种代码层校验查询该车位已存在且状态为“已确认”的订单判断新订单时间段是否与已有订单重叠。数据库唯一约束配合状态机在订单表加车位id和时段约束但实现比较繁琐毕设阶段优先使用代码校验。简单的时间重叠判断条件如下已有订单开始时间 新订单结束时间 AND 已有订单结束时间 新订单开始时间 AND 车位id相同 AND 已有订单状态为已确认只要满足以上条件就说明时间段发生重叠应该拒绝创建新订单。这个逻辑可以封装在后端 Service 层避免前端重复判断。4. 小程序端核心功能实现4.1 小程序项目结构微信小程序原生开发目录结构建议如下miniprogram/ ├── app.js ├── app.json ├── app.wxss ├── utils/ │ ├── request.js │ └── util.js ├── pages/ │ ├── login/login │ ├── index/index │ ├── detail/detail │ ├── publish/publish │ ├── order/order │ └── mine/mine └── images/app.json配置页面路由和底部导航栏这是小程序的全局配置入口。{ pages: [ pages/index/index, pages/detail/detail, pages/publish/publish, pages/order/order, pages/mine/mine ], window: { navigationBarBackgroundColor: #1e90ff, navigationBarTitleText: 停车位预约共享, navigationBarTextStyle: white, backgroundColor: #f5f5f5 }, tabBar: { color: #999999, selectedColor: #1e90ff, list: [ { pagePath: pages/index/index, text: 首页 }, { pagePath: pages/order/order, text: 订单 }, { pagePath: pages/mine/mine, text: 我的 } ] }, style: v2, sitemapLocation: sitemap.json }4.2 封装请求工具小程序中所有接口请求都通过wx.request发出。为了避免每个页面重复写 url 和 header建议先封装一个utils/request.js。// utils/request.js const BASE_URL http://localhost:8080/api; function request(url, method, data) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL url, method: method || GET, data: data || {}, header: { Content-Type: application/json }, success(res) { if (res.statusCode 200) { resolve(res.data); } else { wx.showToast({ title: 请求失败 res.statusCode, icon: none }); reject(res); } }, fail(err) { wx.showToast({ title: 网络异常请检查后端服务, icon: none }); reject(err); } }); }); } module.exports { get: (url, data) request(url, GET, data), post: (url, data) request(url, POST, data) };这里有一个重要的提醒在小程序开发工具中勾选“不校验合法域名”后本地调试可以访问http://localhost:8080。但真机预览时手机无法直接访问你电脑上的 localhost需要把接口地址改成局域网 IP而且必须是https://或在开发者工具里开启“不校验合法域名”并配合真机调试。4.3 首页车位列表首页是用户进入小程序后的第一个页面职责是展示车位列表并提供按关键词搜索和价格筛选。页面核心逻辑放在index.js中// pages/index/index.js const request require(../../utils/request); Page({ data: { keyword: , spaceList: [], loading: false, pageNum: 1, pageSize: 10, hasMore: true }, onLoad() { this.loadSpaces(true); }, onPullDownRefresh() { this.loadSpaces(true).then(() { wx.stopPullDownRefresh(); }); }, onReachBottom() { if (this.data.hasMore !this.data.loading) { this.loadSpaces(false); } }, loadSpaces(reset) { const { keyword, pageNum, pageSize } this.data; if (this.data.loading) return Promise.resolve(); this.setData({ loading: true }); const targetPage reset ? 1 : pageNum 1; return request.get(/space/list, { keyword: keyword, pageNum: targetPage, pageSize: pageSize }).then((res) { const list res.data.list || []; this.setData({ spaceList: reset ? list : this.data.spaceList.concat(list), pageNum: targetPage, hasMore: list.length pageSize, loading: false }); }).catch(() { this.setData({ loading: false }); }); }, onKeywordInput(e) { this.setData({ keyword: e.detail.value }); }, onSearch() { this.loadSpaces(true); }, goDetail(e) { const id e.currentTarget.dataset.id; wx.navigateTo({ url: /pages/detail/detail?id id }); } });对应的index.wxml结构比较容易写使用wx:for渲染车位卡片即可view classpage view classsearch-bar input classsearch-input bindinputonKeywordInput placeholder输入小区或地址 / button classsearch-btn bindtaponSearch搜索/button /view view classspace-list view classspace-card wx:for{{spaceList}} wx:keyid bindtapgoDetail >// pages/detail/detail.js const request require(../../utils/request); Page({ data: { spaceId: null, space: null, startTime: , endTime: }, onLoad(options) { this.setData({ spaceId: options.id }); this.loadDetail(); }, loadDetail() { request.get(/space/detail, { id: this.data.spaceId }).then((res) { this.setData({ space: res.data }); }); }, onStartTimeChange(e) { this.setData({ startTime: e.detail.value }); }, onEndTimeChange(e) { this.setData({ endTime: e.detail.value }); }, submitOrder() { const { spaceId, startTime, endTime } this.data; if (!startTime || !endTime) { wx.showToast({ title: 请选择完整时间段, icon: none }); return; } if (new Date(endTime) new Date(startTime)) { wx.showToast({ title: 结束时间必须晚于开始时间, icon: none }); return; } request.post(/order/create, { spaceId: Number(spaceId), startTime, endTime }).then((res) { wx.showToast({ title: 预约成功, icon: success }); setTimeout(() { wx.navigateTo({ url: /pages/order/order }); }, 1000); }); } });预约页的时间选择使用微信小程序的picker modedate或picker modetime组件。如果要做更精确的时段选择可以扩展为按小时选择的组件毕业设计阶段用日期加时间拼接即可。4.5 发布车位发布车位是车位主端的核心入口。页面需要提交车位名称、地址、类型、价格、图片、空闲时段等信息。// pages/publish/publish.js const request require(../../utils/request); Page({ data: { form: { name: , address: , type: 1, pricePerHour: , pricePerDay: , imageUrl: } }, onFieldChange(e) { const field e.currentTarget.dataset.field; this.setData({ [form.${field}]: e.detail.value }); }, onTypeChange(e) { this.setData({ form.type: Number(e.detail.value) }); }, chooseImage() { wx.chooseMedia({ count: 1, mediaType: [image], success: (res) { const tempFilePath res.tempFiles[0].tempFilePath; this.uploadImage(tempFilePath); } }); }, uploadImage(filePath) { wx.uploadFile({ url: http://localhost:8080/api/file/upload, filePath: filePath, name: file, success: (res) { const data JSON.parse(res.data); this.setData({ form.imageUrl: data.data.url }); wx.showToast({ title: 图片上传成功, icon: success }); } }); }, submit() { const form this.data.form; if (!form.name || !form.address || !form.pricePerHour) { wx.showToast({ title: 请完善车位信息, icon: none }); return; } request.post(/space/publish, form).then(() { wx.showToast({ title: 发布成功等待审核, icon: success }); setTimeout(() { wx.switchTab({ url: /pages/mine/mine }); }, 1000); }); } });wx.chooseMedia是较新的图片选择接口比起旧的wx.chooseImage功能更强。如果你的基础库版本比较低需要改用wx.chooseImage。5. 后端核心接口实现后端部分使用 Spring Boot 实现 RESTful API。下面重点演示登录、车位列表、创建订单三个核心接口。5.1 工程结构parking-server/ ├── pom.xml ├── src/main/java/com/parking/ │ ├── ParkingApplication.java │ ├── controller/ │ │ ├── UserController.java │ │ ├── SpaceController.java │ │ └── OrderController.java │ ├── service/ │ │ ├── UserService.java │ │ ├── SpaceService.java │ │ └── OrderService.java │ ├── mapper/ │ │ ├── UserMapper.java │ │ ├── SpaceMapper.java │ │ └── OrderMapper.java │ ├── entity/ │ │ ├── User.java │ │ ├── ParkingSpace.java │ │ └── BookingOrder.java │ └── common/ │ └── Result.java └── src/main/resources/ ├── application.yml └── mapper/ └── *.xml为了方便演示这里先定义一个统一返回结构Result.java让所有接口保持相同的数据格式。// common/Result.java package com.parking.common; public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.code 200; result.message success; result.data data; return result; } public static T ResultT error(String message) { ResultT result new Result(); result.code 500; result.message message; return result; } public Integer getCode() { return code; } public void setCode(Integer code) { this.code code; } public String getMessage() { return message; } public void setMessage(String message) { this.message message; } public T getData() { return data; } public void setData(T data) { this.data data; } }5.2 微信登录接口小程序端调用wx.login获取临时code后端通过该 code 调用微信接口获取 openid。出于安全考虑实际项目中应在后端保存 appid 和 secret不能放在小程序前端代码中。// controller/UserController.java RestController RequestMapping(/api/user) public class UserController { Autowired private UserService userService; PostMapping(/login) public ResultUser login(RequestBody LoginRequest request) { return Result.success(userService.login(request.getCode())); } }对应的 Service 实现需要处理“第一次登录自动注册”的逻辑。简单版本如下// service/impl/UserServiceImpl.java Override public User login(String code) { // 实际项目通过 code 调用微信接口获取 openid // 这里以本地模拟 openid 为例 String openid getOpenIdByCode(code); User user userMapper.selectByOpenId(openid); if (user null) { user new User(); user.setOpenid(openid); user.setNickname(微信用户); user.setRole(1); userMapper.insert(user); } return user; }需要注意调用微信官方接口需要网络请求并且需要配置小程序的 appid 和 secret。如果是本地测试可以先 mock openid保证整条登录链路能跑通再接入真实微信接口。很多同学在开发中遇到小程序获取登录后的微信用户失败这类问题常见原因是小程序基础库版本和开发者工具版本不一致。在开发者工具中没启用“模拟操作”下的登录态。openid 获取接口返回异常后端没有做兜底。建议先在后端打印 code 和 openid 日志再逐段排查。5.3 车位列表接口车位列表接口需要支持分页和关键词搜索。Controller 层只做参数接收和结果返回业务判断放在 Service 层。// controller/SpaceController.java RestController RequestMapping(/api/space) public class SpaceController { Autowired private SpaceService spaceService; GetMapping(/list) public ResultPageResultParkingSpace list( RequestParam(required false) String keyword, RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize) { return Result.success(spaceService.queryList(keyword, pageNum, pageSize)); } GetMapping(/detail) public ResultParkingSpace detail(RequestParam Long id) { return Result.success(spaceService.getById(id)); } PostMapping(/publish) public ResultBoolean publish(RequestBody ParkingSpace space) { return Result.success(spaceService.publish(space)); } }一个容易被忽略的细节在查询车位列表时只能返回status 1已上架的车位。如果直接把所有状态的数据都返回给用户会出现“待审核车位被用户预约”的问题。这里需要在 SQL 中固定过滤条件。5.4 创建预约订单接口创建订单是后端业务复杂度最高的接口需要校验时间段、计算价格、防止重复预约。// service/impl/OrderServiceImpl.java Override Transactional(rollbackFor Exception.class) public BookingOrder createOrder(OrderCreateRequest request) { // 1. 校验参数 if (request.getStartTime() null || request.getEndTime() null) { throw new BusinessException(预约时间段不能为空); } if (request.getEndTime().before(request.getStartTime())) { throw new BusinessException(结束时间必须晚于开始时间); } // 2. 获取车位 ParkingSpace space spaceMapper.selectById(request.getSpaceId()); if (space null || space.getStatus() ! 1) { throw new BusinessException(车位不存在或已下架); } // 3. 校验时间冲突 ListBookingOrder conflictList orderMapper.selectConflictList( request.getSpaceId(), request.getStartTime(), request.getEndTime()); if (CollectionUtils.isNotEmpty(conflictList)) { throw new BusinessException(该时段已被预约请更换时间); } // 4. 计算金额按小时价格计算 long hours (request.getEndTime().getTime() - request.getStartTime().getTime()) / (60 * 60 * 1000); if (hours 0) { hours 1; } BigDecimal totalPrice space.getPricePerHour().multiply(BigDecimal.valueOf(hours)); // 5. 创建订单 BookingOrder order new BookingOrder(); order.setOrderNo(generateOrderNo()); order.setSpaceId(request.getSpaceId()); order.setUserId(request.getUserId()); order.setStartTime(request.getStartTime()); order.setEndTime(request.getEndTime()); order.setTotalPrice(totalPrice); order.setStatus(1); orderMapper.insert(order); return order; }这里的Transactional注解非常重要。如果创建订单过程中发生异常事务会回滚不会把未完成的订单写入数据库。毕设答辩时面试官或老师如果问“你怎么保证订单数据一致性”这个就是关键点。5.5 订单状态变更订单状态下单后可能存在三种状态流转用户主动取消状态从“已确认”变为“已取消”。使用完成后确认状态从“已确认”变为“已完成”。超时未使用可以由定时任务自动取消。简易实现中可以让用户在小程序端点击“取消订单”和“确认完成”调用统一的更新接口PostMapping(/order/updateStatus) public ResultBoolean updateStatus(RequestBody OrderStatusRequest request) { BookingOrder order orderMapper.selectById(request.getOrderId()); if (order null) { throw new BusinessException(订单不存在); } // 根据当前状态判断是否允许变更 if (order.getStatus() 3) { throw new BusinessException(订单已取消不能操作); } order.setStatus(request.getStatus()); orderMapper.updateById(order); return Result.success(true); }实际生产项目中订单状态变更应该用状态机来控制不允许任意状态跳转。毕业设计阶段至少要做好状态校验不能让已取消的订单再变成已完成。6. 运行与验证6.1 后端启动导入后端工程到 IDEA 后先修改application.yml中的数据库连接信息server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/parking_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml然后运行ParkingApplication的 main 方法。如果看到类似Tomcat started on port(s): 8080的日志说明启动成功。6.2 小程序端运行用微信开发者工具导入miniprogram文件夹需要做两件事把utils/request.js中的BASE_URL改成你的后端地址。在小程序后台配置 request 合法域名或在开发工具中勾选“不校验合法域名”。编译后即可看到首页。如果没有数据请先通过后端接口手动插入几条测试数据或者写一个初始化接口。6.3 真机调试注意事项真机调试时最容易遇到的问题是net::ERR_CONNECTION_RESET。这个错误通常与以下原因有关手机和电脑不在同一局域网。后端只监听了127.0.0.1没有监听0.0.0.0。电脑防火墙拦截了手机对 8080 端口的访问。排查方法在电脑命令行执行ipconfigWindows或ifconfigMac/Linux查看局域网 IP。把小程序端的BASE_URL改为http://局域网IP:8080。确保手机和电脑连接同一个 Wi-Fi。暂时关闭电脑防火墙或者添加 8080 端口的入站规则。6.4 接口测试建议后端接口写完先用 Apifox 或 Postman 自测一遍。建议至少测试以下接口接口方法正常场景异常场景/api/user/loginPOST返回用户信息code 为空/api/space/listGET返回分页列表页码超出范围/api/space/detailGET返回车位详情id 不存在/api/order/createPOST返回订单信息时间段冲突/api/space/publishPOST发布成功必填字段缺失7. 常见问题与排查思路在开发这套系统的过程中以下几类问题出现频率最高。问题现象常见原因解决思路真机预览接口请求失败net::ERR_CONNECTION_RESETlocalhost 指向手机本身局域网 IP 不通防火墙拦截改 BASE_URL 为局域网 IP保持同一 Wi-Fi关闭防火墙测试小程序获取不到微信用户信息wx.login返回的 code 未正确携带后端 appid/secret 配置错误测试号和正式号混用先打日志看 code 是否为空确认后端请求微信接口参数区分测试环境与正式环境编译报错maximum setlocal recursion level reachedWindows 环境变量 PATH 过长或项目路径嵌套过深清理系统环境变量把项目移动到盘符根目录下的简洁路径页面请求正常但数据不显示后端返回字段命名与前端不一致空数据未做处理统一 JSON 字段命名推荐使用驼峰命名并在后端配置驼峰映射预约同一时段不报错时间冲突校验缺失或状态过滤不对后端 Service 层增加重叠查询并只校验已确认订单图片上传失败wx.uploadFile的 url 未加入合法域名后端未开启文件上传配置本地开发可在详情页临时显示本地临时路径线上必须配置 HTTPS 域名除了表格中的问题还有一个容易被忽略的坑开发者工具中修改了文件路径或project.config.json中的小程序 id 后模拟器仍显示旧项目。这是开发者工具缓存导致的可以尝试“工具 - 清缓存 - 清除全部缓存”然后重新编译。此外如果你的后端用了 Spring Boot 3.x注意javax.servlet已经被替换为jakarta.servlet很多网上旧教程直接复制会报包不存在。这类问题优先查官方文档或工程内的依赖树不要盲目改包名。8. 最佳实践与工程建议8.1 前端规范页面职责单一化。首页只做展示和搜索详情页只做详情和下单不要把所有逻辑堆到一个页面 JS 中。请求统一走封装工具不要在页面中直接wx.request散落写 url。状态码在前端不要写死魔法数字可以用常量对象维护。图片资源统一上传到对象存储或后端静态目录小程序包里不要塞太多图片。8.2 后端规范接口返回统一使用ResultT包装避免有的接口返回对象、有的返回 Map。所有涉及金额计算的字段使用BigDecimal不要使用double或float。创建订单、修改状态等写操作必须有事务管理。数据库时间字段统一使用DATETIME避免时区差异。多表查询建议在业务层做不要在 SQL 中写过于复杂的关联子查询。8.3 安全边界后端接口必须校验用户身份不能仅靠前端传 userId。实际项目中应通过 token 或 session 获取当前登录用户。文件上传要限制文件类型和大小防止恶意文件上传。管理端接口必须校验管理员权限防止普通用户越权操作。线上部署连接数据库时使用独立的低权限账号不要直接用 root。8.4 毕设答辩加分点如果这是毕业设计可以在答辩中主动说明以下亮点订单时间冲突校验通过重叠查询防止重复预约。状态机规范化订单状态流转有明确规则。图片上传能力使用wx.uploadFile实现车位实拍图。分页加载列表页采用分页和触底加载而不是一次全量查询。9. 总结与后续拓展到这为止我们已经完成了停车位预约共享小程序从数据库设计到前后端联调的核心流程。你可以看到这套系统并不复杂但麻雀虽小五脏俱全它涵盖了微信登录、列表分页、订单事务、文件上传、状态管理等常见开发场景。动手实现一遍比单纯看一百篇教程都有效。如果你希望继续完善这个项目可以考虑以下方向接入微信支付把预约改造成在线付费闭环。增加订阅消息车位被审核通过或预约成功时通知用户。使用 WebSocket 实现车位空闲状态实时更新。管理后台使用 Vue 或 React 重写形成 PC 端管理系统。引入 Redis 缓存车位热数据降低数据库压力。在实际开发过程中建议先跑通“浏览车位 - 提交预约 - 查看订单”这条主链路再逐步补充评价、发布车位、搜索筛选等附加功能。主链路通了整个项目的骨架就稳了后面再增加功能也只是按同样模式扩展接口和页面。如果本文对你有帮助可以收藏备用也欢迎在评论区聊聊你在开发中遇到的问题。
