Spring Boot Vue 停车场管理系统前后端分离附源码数据库源代码论文https://pan.quark.cn/s/614ecf287196本项目是一个基于Spring Boot Vue2 MyBatis-Plus的停车场管理系统采用前后端分离架构实现了车位管理、车辆进出、费用计算、用户管理等核心功能。本文从项目介绍、技术栈、系统架构、数据库设计、功能展示到环境搭建完整记录整个项目的开发过程。一、项目介绍随着城市汽车保有量的持续增长传统人工停车场管理模式效率低下、信息不透明的问题日益突出。本项目旨在通过信息化手段实现停车场车位信息的实时管理、车辆进出的自动化记录、停车费用的精确计算从而提高停车场运营效率。系统分为管理员和普通用户两种角色管理员用户管理、车位管理、费用设置、车辆进出管理、停泊车辆查询、登录日志查询普通用户个人信息查看、停车记录查询、余额充值二、技术栈分类技术版本说明后端框架Spring Boot2.3.7RESTful API 服务前端框架Vue.js2.6渐进式 JS 框架UI 组件库Element UI2.x桌面端组件库ORM 框架MyBatis-Plus3.4增强版 MyBatis数据库MySQL8.0关系型数据库鉴权框架Sa-Token1.28轻量级权限认证连接池Druid1.2数据库连接池构建工具Maven / npm3.9 / 8依赖管理三、系统架构系统采用前后端分离的 B/S 架构分为三层┌─────────────────────────────────────────┐ │ 表现层前端 │ │ Vue.js 2.6 Element UI Axios │ │ 端口: 9090 │ ├─────────────────────────────────────────┤ │ 业务逻辑层后端 │ │ Spring Boot 2.3 Sa-Token │ │ Controller → Service → Mapper │ │ 端口: 9271 │ ├─────────────────────────────────────────┤ │ 数据存储层 │ │ MySQL 8.0 (parking_manager) │ └─────────────────────────────────────────┘前端通过vue.config.js中的 proxy 代理配置将/api前缀的请求转发到后端 9271 端口实现跨域请求。四、数据库设计数据库名为parking_manager共 8 张表表名说明关键字段user用户信息表uid, username, password, money, rolecar车辆信息表tid, card(车牌), car_type, personstall车位信息表sid, stall_num, stall_type, stall_statestall_type车位类型表oid, otype, omoneystall_res停车记录表pid, person, stall_id, create_time, pay_moneyfee收费标准表fid, car_type, moneyrecharge充值记录表cid, person, money, ctimelogin_info登录日志表yid, person, ip, browser, os, login_time核心 ER 关系user (1) ──── (N) stall 用户拥有车位 user (1) ──── (N) stall_res 用户停车记录 stall (1) ──── (N) stall_res 车位对应停车记录 stall_type (1) ── (N) stall 车位类型关联车位五、功能展示5.1 登录页面系统提供用户名密码登录支持管理员和普通用户两种角色。登录后由 Sa-Token 生成 Token 保存在 localStorage 中。5.2 系统首页管理员登录后进入首页左侧导航栏展示全部功能菜单。5.3 用户信息管理管理所有注册用户支持新增、编辑、删除用户查看账户余额。5.4 车位信息管理管理停车场车位包括车位编号、区域、类型、使用状态。车位状态分为空闲和占用车辆进出时自动更新。5.5 车位费用设置配置不同车位类型的收费标准支持按车辆类型设置计费规则。5.6 停泊车辆查询实时查询当前停车场内停泊的车辆显示车牌号、车位编号、入场时间、停车时长和预估费用。5.7 车辆进出管理记录车辆入场和出场信息出场时自动计算停车费用。5.8 登录日志查询查看所有用户的登录记录包括 IP、浏览器、操作系统等信息用于安全审计。六、环境搭建6.1 开发环境要求软件版本验证命令JDK1.8java -versionMaven3.6mvn -versionMySQL8.0mysql --versionNode.js14node --versionnpm6npm --version6.2 数据库配置-- 创建数据库CREATEDATABASEIFNOTEXISTSparking_managerCHARACTERSETutf8COLLATEutf8_general_ci;-- 导入数据CMD方式mysql-u root-p你的密码 parking_managerparking_manager.sql6.3 后端启动修改application.yml中的数据库密码spring:datasource:dynamic:datasource:master:url:jdbc:mysql://localhost:3306/parking_manager?useUnicodetruecharacterEncodingUTF-8serverTimezoneAsia/ShanghaiuseSSLfalseusername:rootpassword:你的MySQL密码# 修改这里启动后端cdParkingManagerApi\-\idea mvn spring-boot:run看到以下日志表示启动成功Tomcat started on port(s): 9271 (http) Started ParkingApplication in 9.948 seconds6.4 前端启动修改vue.config.js端口为 9090如需devServer:{host:localhost,port:9090,proxy:{/api:{target:http://127.0.0.1:9271,changeOrigin:true,pathRewrite:{^/api:/}}}}安装依赖并启动cdParkingManagerVuenpminstallnpmrun devNode.js 17 用户注意如果启动报ERR_OSSL_EVP_UNSUPPORTED错误修改package.json中的 scripts添加set NODE_OPTIONS--openssl-legacy-provider{scripts:{dev:set NODE_OPTIONS--openssl-legacy-provider vue-cli-service serve}}6.5 访问系统浏览器打开http://localhost:9090使用以下账号登录角色用户名密码管理员admin123456普通用户user123456七、项目结构停车场管理系统/ ├── ParkingManagerApi - idea/ # 后端项目 │ ├── src/main/java/com/rabbiter/pm/ │ │ ├── controller/ # 控制器层 │ │ ├── service/ # 业务逻辑层 │ │ ├── mapper/ # 数据访问层 │ │ ├── entity/ # 实体类 │ │ └── config/ # 配置类 │ ├── src/main/resources/ │ │ ├── application.yml # 配置文件 │ │ └── mapper/ # MyBatis XML │ └── parking_manager.sql # 数据库脚本 │ ├── ParkingManagerVue/ # 前端项目 │ ├── src/ │ │ ├── components/ # Vue 组件 │ │ ├── router/ # 路由配置 │ │ ├── store/ # 状态管理 │ │ └── utils/ # 工具函数 │ ├── vue.config.js # Vue CLI 配置 │ └── package.json八、论文文档九、总结本项目基于 Spring Boot Vue 实现了停车场管理系统的核心功能采用前后端分离架构代码结构清晰功能完整。系统具备以下特点前后端分离职责清晰便于维护Sa-Token 轻量鉴权登录安全可靠MyBatis-Plus 简化数据操作开发效率高Element UI 界面美观交互友好如果觉得有帮助欢迎点赞收藏
