停车场管理系统web前后端

停车场管理系统

数据库系统课程作业：停车场管理系统

停车场管理系统，采用前后端c/s模式，包括后台管理系统和普通用户移动端页面，十张数据库表。

源码地址：https://gitee.com/aimaier4869/parking-front

后端地址：https://gitee.com/aimaier4869/parking-back

1. 运行效果

在线预览：https://sswa.top/parking/

管理员账号：admin

普通用户账号：用管理员登录后，使用 车主管理 中的任意一个手机号均可，例如：155123456

密码：123456

1. 停车场模拟器

2. 后台管理系统

3. 移动端

2. 概览

1. 技术栈

名称	地址	备注
vue	https://cn.vuejs.org/guide/introduction.html	Web 前端框架
Vue Router	https://router.vuejs.org/zh/	vue 路由
element-plus	https://element-plus.gitee.io/zh-CN/component/button.html	ElementUI 组件库
unocss	https://unocss.dev/	原子化 CSS
axios	https://www.axios-http.cn/	js 网络请求库
dayjs	https://www.npmjs.com/package/dayjs	轻量的处理时间和日期的 JavaScript 库
lodash-es	https://www.lodashjs.com/	js 工具库
spritejs	https://spritejs.com/#/zh-cn/api/sprite	Canvas 库
qrcode	https://www.npmjs.com/package/qrcode	二维码生成工具
Vite	https://vitejs.cn/vite3-cn/	js 构建工具
Typescript	https://ts.nodejs.cn/	一种基于 JavaScript 构建的强类型编程语言

2. 目录结构

src
├─ apis                     # 网络请求封装
├─ assets                   # 全局静态资源
├─ components               # 全局组件
│  └─ PayModal.vue          # 支付弹窗组件
├─ layouts                  # 布局
│  ├─ index.vue             # 默认布局，后台布局
│  └─ MobileLayout.vue      # 移动端布局
├─ pages                    # 页面
│  ├─ mobile                # 移动端页面
│  ├─ park                  # 后台管理系统页面
│  ├─ parkPlayground        # 停车场模拟器
│  ├─ Home.vue              # 首页
│  ├─ Login.vue             # 登录页
│  └─ User.vue              # 用户管理
├─ routers                  # 路由
│  └─ index.ts              # 路由配置
├─ utils                    # 工具函数
│  ├─ dateFormat.ts         # 日期格式化函数封装
│  └─ request.ts            # axios实例
├─ App.vue                  # 根组件
├─ main.ts                  # 入口文件
└─ style.css                # 全局样式

3. 功能介绍

数据库表结构

1. 停车场模拟器

用来模拟一个停车场，功能包括：

• 创建车辆
• 用鼠标点击车辆选中该车辆
• 使用键盘的上下左右导航键控制选中车辆的移动
• 车辆到达停车场入口时，自动识别车牌，在大屏上显示相关信息，自动打开停车场大门
• 车辆进入停车场时自动产生停车记录
• 停车位感应，当有车停在某个车位时，车位能感应出来
• 车辆到达停车场出口时，自动识别车牌，计算停车费并展示付款二维码
• 车主付款后自动打开停车场出口大门
• 车辆离开停车场后更新停车记录

2. 后台管理系统

给管理员使用

• 用户管理

  • 系统用户的增删改查
  • 该列表中的用户可以根据用户名和密码登录到后台管理端页面

• 停车场管理

  • 停车场的增删改查
  • 新增停车场时可以填写停车场内私人车位和公用车位的容纳量
  • 可以选择停车场公用车位的计费模式
  • 新增车位后根据容纳量自动创建停车位（可以在停车位管理中查看）
  • 在列表中分别统计出私人车位和公用车位的容纳量、现有的总数、正在空闲的停车位数量

• 停车位管理

  • 停车位的增删改查
  • 新增停车位时可以选择属于哪个停车场
  • 新增停车位时会自动检测，保证不会超过停车场的容纳量
  • 列表中显示出每一个停车位的类型和空闲状态

• 车主管理

  • 车主的增删改查
  • 该列表中的用户可以通过手机号登录移动端页面
  • 一个车主可以拥有多辆车，只能购买一个私人停车位

• 车辆管理

  • 车辆的增删改查
  • 列表中显示出车主姓名
  • 新增和编辑时可以从车主列表中按照姓名搜索车主

• 停车记录管理

  • 停车记录的增删查
  • 新增记录时可以按照车牌号搜索车辆
  • 列表中显示出车辆进出停车场的时间，支付状态，订单编号等信息
  • 可以点击支付按钮直接支付停车费

• 订单管理

  • 支付订单的增删改查
  • 购买车位、支付停车费的每一笔支付订单都会显示在列表中
  • 可以按照订单号，订单类型，支付状态等条件筛选订单

• 套餐管理

  • 购买私人车位套餐的增删改查
  • 可以添加购买私人车位的套餐，设置原价、现价、天数等信息
  • 用户购买车位时会显示在移动端页面中

• 公用车位计费模式管理

  • 公用车位计费模式的增删改查
  • 计费模式可以设置公用车位每小时的停车收费标准
  • 某个停车场使用了一个计费模式后当有车停在公用车位时，会按照该模式里的价格计算停车费

• 支付方式管理

  • 支付方式的增删改查
  • 车主购买车位、支付停车费时可以选择此处提供从支付方式

3. 移动端

• 首页中显示出每个停车场每个停车位的占用状态，车主可以通过此页面知道应该把车停在哪里
• 车主绑定车辆后可以查询自己的历史停车记录
• 在我的页面中车主可以查看自己的信息
• 车主可以修改自己的个人信息
• 车主可以购买一个私人停车位
• 车主可以绑定或解绑车辆