开发停车管理系统时，Web后台和小程序前端如何配合使用？

在开发停车管理系统时，Web后台（通常用于管理员或运营人员）和小程序前端（用于车主用户）需要紧密配合，通过合理的架构设计实现数据互通、功能互补。以下是两者如何协同工作的详细说明：

一、系统架构概述

+------------------+        +------------------+
|   小程序前端     | ←HTTP→ |   Web后台服务    |
| （车主使用）     |        | （Node.js/Java/  |
|                  |        |  Python等）      |
+------------------+        +------------------+
                                 ↓
                         +------------------+
                         |   数据库（MySQL,  |
                         |   MongoDB等）     |
                         +------------------+

• Web后台：提供管理界面，支持停车场管理、车位监控、订单统计、用户管理等功能。
• 小程序前端：面向车主，提供车位查询、导航、预约、支付、进出记录查看等功能。
• 后端服务（API）：作为中间桥梁，统一处理前后端请求，连接数据库。

二、前后端职责划分

1. 小程序前端（微信小程序）

主要功能：

• 用户登录/注册（微信授权）
• 查看附近停车场、空余车位
• 车位预约与取消
• 扫码入场/离场
• 在线支付停车费
• 查看停车记录、账单
• 实时导航到车位（结合地图API）

技术栈：

• 前端框架：原生小程序 / Taro / Uniapp
• 网络请求：wx.request() 调用后端API
• 存储：本地缓存（如用户token、常用地址）

2. Web后台（PC管理端）

主要功能：

• 停车场信息管理（增删改查）
• 车位状态监控（实时显示占用/空闲）
• 订单管理（查看、导出、退款）
• 收益统计报表（日/月/年）
• 用户管理（黑名单、优惠券发放）
• 设备管理（道闸、摄像头、地磁传感器状态）
• 操作日志审计

技术栈：

• 前端：Vue / React / Element UI / Ant Design
• 后端：Spring Boot / Express / Django 等
• 权限控制：RBAC（角色权限管理）

三、前后端如何配合

1. 统一后端API接口

所有数据交互都通过后端提供的RESTful API 或 GraphQL 接口完成。

示例接口：

✅ 小程序和Web后台共用同一套后端API，避免重复开发。

2. 用户体系统一

• 使用 JWT（JSON Web Token） 实现认证。
• 小程序用户登录后获取 token，后续请求携带 token。
• Web后台管理员也通过 token 验证身份，但角色不同（user vs admin）。

// JWT payload 示例
{
  "userId": "u1001",
  "role": "user",  // 或 "admin"
  "exp": 1735689600
}

3. 实时数据同步

• 小程序中“空余车位”需实时更新：
  • 方式1：定时轮询（简单，适合低频）
  • 方式2：WebSocket 推送（推荐，实时性高）
• Web后台可监听设备上报数据（如地磁传感器），更新数据库并推送给小程序。

4. 支付流程协作

sequenceDiagram
    小程序->>后端: 请求生成订单
    后端->>数据库: 创建订单（未支付）
    后端-->>小程序: 返回订单ID
    小程序->>微信支付: 发起支付
    微信支付-->>后端: 异步通知支付结果
    后端->>数据库: 更新订单状态为“已支付”
    后端-->>小程序: 主动查询支付成功

Web后台可查看该订单状态，进行财务对账。

5. 数据共享与权限隔离

• 同一数据库，但通过 角色权限控制 隔离数据访问。
• 普通用户只能查自己的订单。
• 管理员可查全部数据，但敏感操作需二次验证。

四、典型业务流程示例：停车缴费

1. 车主进入停车场

   • 小程序扫描二维码 → 调用 /api/entry 记录入场时间
   • 后端写入数据库，状态：in_parking

2. 离场时自动计费

   • 小程序调用 /api/exit?orderId=xxx → 后端计算费用
   • 返回应付金额，小程序调起微信支付

3. 支付成功后放行

   • 后端收到微信回调 → 更新订单状态 → 通知道闸系统开闸

4. Web后台查看

   • 管理员在后台查看该订单：车牌、时间、金额、支付方式等

五、部署建议

六、安全注意事项

• 所有接口启用 HTTPS
• 接口鉴权（JWT + refreshToken）
• 防止刷单：频率限制（如每秒1次）
• 敏感操作日志记录（如删除订单）
• 小程序不暴露私密API密钥（如微信支付key放在后端）

总结

✅ 最佳实践：前后端分离 + 统一API + 权限控制 + 实时通信

通过合理分工和接口设计，Web后台和小程序前端可以高效协同，构建一个完整的智能停车管理系统。