Spring Boot + Vue 停车场管理系统（前后端分离，附源码+数据库）

源代码+论文：https://pan.quark.cn/s/614ecf287196

本项目是一个基于 Spring Boot + Vue2 + MyBatis-Plus 的停车场管理系统，采用前后端分离架构，实现了车位管理、车辆进出、费用计算、用户管理等核心功能。本文从项目介绍、技术栈、系统架构、数据库设计、功能展示到环境搭建，完整记录整个项目的开发过程。

一、项目介绍

随着城市汽车保有量的持续增长，传统人工停车场管理模式效率低下、信息不透明的问题日益突出。本项目旨在通过信息化手段，实现停车场车位信息的实时管理、车辆进出的自动化记录、停车费用的精确计算，从而提高停车场运营效率。

系统分为管理员和普通用户两种角色：

管理员：用户管理、车位管理、费用设置、车辆进出管理、停泊车辆查询、登录日志查询
普通用户 ：个人信息查看、停车记录查询、余额充值

二、技术栈

分类	技术	版本	说明
后端框架	Spring Boot	2.3.7	RESTful API 服务
前端框架	Vue.js	2.6	渐进式 JS 框架
UI 组件库	Element UI	2.x	桌面端组件库
ORM 框架	MyBatis-Plus	3.4	增强版 MyBatis
数据库	MySQL	8.0	关系型数据库
鉴权框架	Sa-Token	1.28	轻量级权限认证
连接池	Druid	1.2	数据库连接池
构建工具	Maven / npm	3.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, role
`car`	车辆信息表	tid, card(车牌), car_type, person
`stall`	车位信息表	sid, stall_num, stall_type, stall_state
`stall_type`	车位类型表	oid, otype, omoney
`stall_res`	停车记录表	pid, person, stall_id, create_time, pay_money
`fee`	收费标准表	fid, car_type, money
`recharge`	充值记录表	cid, person, money, ctime
`login_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 开发环境要求

软件	版本	验证命令
JDK	1.8+	`java -version`
Maven	3.6+	`mvn -version`
MySQL	8.0+	`mysql --version`
Node.js	14+	`node --version`
npm	6+	`npm --version`

6.2 数据库配置

sql 复制代码

-- 创建数据库
CREATE DATABASE IF NOT EXISTS parking_manager
  CHARACTER SET utf8 COLLATE utf8_general_ci;

-- 导入数据（CMD方式）
mysql -u root -p你的密码 parking_manager < parking_manager.sql

6.3 后端启动

修改 application.yml 中的数据库密码：

yaml 复制代码

spring:
  datasource:
    dynamic:
      datasource:
        master:
          url: jdbc:mysql://localhost:3306/parking_manager?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&useSSL=false
          username: root
          password: 你的MySQL密码    # 修改这里

启动后端：

bash 复制代码

cd ParkingManagerApi\ -\ idea
mvn spring-boot:run

看到以下日志表示启动成功：

复制代码

Tomcat started on port(s): 9271 (http)
Started ParkingApplication in 9.948 seconds

6.4 前端启动

修改 vue.config.js 端口为 9090（如需）：

javascript 复制代码

devServer: {
    host: 'localhost',
    port: 9090,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:9271',
        changeOrigin: true,
        pathRewrite: { '^/api': '/' }
      }
    }
}

安装依赖并启动：

bash 复制代码

cd ParkingManagerVue
npm install
npm run dev

Node.js 17+ 用户注意 ：如果启动报 ERR_OSSL_EVP_UNSUPPORTED 错误，修改 package.json 中的 scripts，添加 set NODE_OPTIONS=--openssl-legacy-provider：
json 复制代码
{
"scripts": {
 "dev": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve"
}
}

6.5 访问系统

浏览器打开 http://localhost:9090，使用以下账号登录：

角色	用户名	密码
管理员	admin	123456
普通用户	user	123456

七、项目结构

复制代码

停车场管理系统/
├── 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 界面美观，交互友好

如果觉得有帮助，欢迎点赞收藏！