文章目录
- 一、功能模块
-
- [1.1 用户认证与权限管理模块](#1.1 用户认证与权限管理模块)
- [1.2 车位管理模块](#1.2 车位管理模块)
- [1.3 车辆进出管理模块](#1.3 车辆进出管理模块)
- [1.4 违规处罚管理模块](#1.4 违规处罚管理模块)
- [1.5 社区互动模块](#1.5 社区互动模块)
- [1.6 内容管理模块](#1.6 内容管理模块)
- [1.7 数据统计与报表模块](#1.7 数据统计与报表模块)
- [1.8 系统配置模块](#1.8 系统配置模块)
- 二、核心业务流程
-
- [2.1 用户登录流程](#2.1 用户登录流程)
- [2.2 车辆入场流程](#2.2 车辆入场流程)
- [2.3 车辆离场缴费流程](#2.3 车辆离场缴费流程)
- 三、技术栈
-
- [3.1 前端技术栈](#3.1 前端技术栈)
- [3.2 后端架构](#3.2 后端架构)
- [3.3 架构特点](#3.3 架构特点)
- 四、项目项展示
-
- [4.1 管理端](#4.1 管理端)
- [4.2 前台功能展示](#4.2 前台功能展示)
一、功能模块
1.1 用户认证与权限管理模块
功能说明：
- 提供用户登录、注册、身份验证功能
- 实现基于角色的访问控制(RBAC)
- 包含管理员和普通用户两种角色
1.2 车位管理模块
功能说明：
- 提供用户登录、注册、身份验证功能
- 实现基于角色的访问控制(RBAC)
- 包含管理员和普通用户两种角色
1.3 车辆进出管理模块
功能说明：
- 车辆入场登记
- 车辆离场结算
- 停车时长计算与费用核算
1.4 违规处罚管理模块
功能说明：
- 违规行为记录
- 处罚金额设定
- 违规处理流程
1.5 社区互动模块
功能说明：
- 用户论坛交流
- 投诉建议收集
- 在线客服支持
1.6 内容管理模块
功能说明：
- 新闻资讯发布
- 系统公告管理
- 帮助文档维护
1.7 数据统计与报表模块
功能说明：
- 停车数据统计
- 收入报表生成
- 占用率分析
1.8 系统配置模块
功能说明：
- 系统参数配置
- 计费规则设置
- 基础数据维护
二、核心业务流程
2.1 用户登录流程
用户 前端页面 后端服务 数据库 输入用户名密码 发送登录请求 验证用户信息 返回验证结果 生成Token 返回Token和用户信息 登录成功跳转主页 用户 前端页面 后端服务 数据库
流程说明：
- 用户在登录页面输入账号密码，前端收集用户输入的认证信息
- 前端通过HTTP请求将用户凭证发送到后端认证接口
- 后端服务接收到登录请求后，查询数据库验证用户身份
- 数据库根据提供的用户名查找对应用户记录并返回验证结果
- 若验证通过，后端生成访问令牌(Token)并设置用户会话信息
- 后端将Token和基本用户信息返回给前端
- 前端接收响应后存储Token，并跳转到系统主页开始正常使用
2.2 车辆入场流程
用户 前端页面 后端服务 数据库 车辆驶入停车场 发送入场请求 查询可用停车位 返回空闲车位 分配车位并记录入场时间 更新车位状态 返回入场凭证 显示入场成功信息 用户 前端页面 后端服务 数据库
流程说明：
- 车辆到达停车场入口，系统自动或手动触发入场流程
- 前端向后端发送车辆入场请求，包含车辆基本信息
- 后端服务接收到请求后，查询数据库获取当前可用停车位列表
- 数据库检索所有空闲车位信息并返回给后端服务
- 后端根据车位分配策略选择合适车位，记录车辆入场时间戳
- 后端更新数据库中该车位的状态为"已占用"
- 后端生成入场凭证(如停车号码、车位信息等)并返回给前端
- 前端展示入场成功信息，包括车位位置和入场时间
2.3 车辆离场缴费流程
用户 前端页面 后端服务 数据库 车辆准备离场 发送离场请求 查询入场记录 返回停车记录 计算停车费用 返回缴费金额 确认支付 发送支付确认 更新支付状态 释放车位 返回离场凭证 显示离场成功 用户 前端页面 后端服务 数据库
流程说明：
- 车辆准备离开停车场，用户在出口处发起离场请求
- 前端向后端发送离场请求，通常包含车牌号或停车凭证
- 后端服务根据请求参数查询数据库中的车辆入场记录
- 数据库返回完整的停车记录，包括入场时间、车位信息等
- 后端根据计费规则计算停车时长和应缴费用
- 后端将计算出的费用信息返回给前端展示给用户
- 用户确认支付金额并完成支付操作
- 前端将支付确认信息发送给后端服务
- 后端更新数据库中该停车记录的支付状态为"已支付"
- 后端同时更新车位状态为"空闲"，释放该车位资源
- 后端生成离场凭证并返回给前端
- 前端显示离场成功信息，允许车辆离开停车场
三、技术栈
3.1 前端技术栈
- 框架: Vue.js
- UI组件库: Element UI
- 构建工具: Webpack (通过vue-cli配置)
- 包管理: npm
- 路由管理: Vue Router
- 状态管理: Vuex
- 代码规范: ESLint
- 开发语言: JavaScript (ES6+)
- 模板引擎: Vue单文件组件(.vue)
- 样式预处理器: CSS/SCSS
- 地图服务: 高德地图API集成
- 图表库: ECharts
- HTTP客户端: Axios
- 数据可视化: Canvas动画背景
3.2 后端架构
- 框架: Spring Boot
- 持久层框架: MyBatis Plus
- 数据库: 关系型数据库 (具体类型未明确，可能是MySQL)
- 安全框架: 自定义权限拦截器 (AuthorizationInterceptor)
- ORM工具: MyBatis Plus
- JSON处理: Jackson
- 工具类库: Apache Commons系列
- 开发语言: Java 8+
- 构建工具: Maven
- Web容器: 内嵌Tomcat
- 缓存机制: 自定义Token管理
- 数据校验: 自定义验证工具 (ValidatorUtils)
- 分页处理: 自定义分页工具 (PageUtils)
- 响应封装: 统一封装响应对象 ®
- 数据库连接池: 默认Spring Boot配置(HikariCP)
3.3 架构特点
- 前后端分离: 前后端通过RESTful API进行通信
- 模块化设计: 功能按照业务模块进行划分
- 统一异常处理: 全局异常捕获和处理机制
- 权限控制: 基于注解的接口权限控制
- 配置管理: 外部化配置文件管理
- 代码生成: 完整的CRUD代码模板结构
四、项目项展示
4.1 管理端
4.2 前台功能展示
