基于Spring Boot框架的车库停车管理系统的设计与实现

深碍√TFBOYSˉ_ 2023-10-01 17:47 16阅读 0赞

> 源码获取：私聊回复【SpringBoot、车库停车】获取
> 
> 更多选题参考：
> 
> [Java练手项目 & 个人学习等选题参考][Java_ _]

**目录**

一、背景及意义

选题背景

选题意义

二、系统设计

系统功能结构图

用例图

数据库ER图

运行环境

三、所使技术与难点

技术路线

技术难点——车库位置

相关代码如下：

页面实现：车主查车库位置页面

界面设计规范

四、系统实现

车主留言界面

管理员回复留言界面

车主查车位界面

管理员管理车位界面

车主查看订单页面

管理员查看订单页面

--------------------

# 一、背景及意义 #

### 选题背景 ###

背景：随着私家车数量不断增加，有关停车问题也倍受社会关注，面对庞大的信息量和各种车辆带来的问题，需要有车库管理系统来提高车主停车的效率，为车主提供便利。做到信息的规范，科学的管理和统计等，从而减少管理方面的工作量。

### 选题意义 ###

意义：通过充分利用各种管理工具帮助车主达到合理分配的目的，满足对管理安全性，收益性等多样化要求。开发一个车库管理系统是现代社会发展的趋势，对车主和管理人员及社会起到了重要意义。

# 二、系统设计 #

### 系统功能结构图 ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54mn576K5Lu7aQ_size_20_color_FFFFFF_t_70_g_se_x_16][]

### 用例图 ###

在下图这些用例可以从车库对车主的服务、管理员管理车位和车主两个主要方面完成整个车库管理系统的正常运作

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54mn576K5Lu7aQ_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

### 数据库ER图 ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54mn576K5Lu7aQ_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

### **运行环境** ###

（1）操作系统：windows 10/11或者 Mac OS

（2）数据库：mysql-8.0.29 版本及以上

（3）开发环境： IntelliJ IDEA 2018.3.4 x64，IntelliJ IDEA 2022.2.2都可以

（4）服务器：apache-maven-3.8.6、apache-tomcat-9.0.22

（5）浏览器：qq浏览器或 Win10自带浏览器或者其他浏览器都可以

**大部分配置都是越高越好，但难免有些新出版本不稳定，所以一定要选稳定的**

# 三、所使技术与难点 #

### 技术路线 ###

本系统使用SpringBoot框架进行项目搭建，前端使用jQuery开发技术

后台使用SpringBoot mybatis技术，Java语言，数据库使用MySQL作为数据库开发平台

选择 IntelliJ IDEA 作为系统的开发工具

### 技术难点——车库位置 ###

关键技术难点：车库位置，怎样才能让车主最快的到达车库位置停车，并按照指示找到车位。

解决方案：直接在浏览器中写入地图API功能，做出导航。

直接在浏览器中写入地图API功能，做出导航。

### 相关代码如下： ###

<div class="attr fl" style="width:200px">
                <p>车位编号：<span th:text="${car.name}"></span></p>
                <p>价格：<span th:text="${car.price}">东北理工大学</span></p>
                <p>路线推介：进入停车场后直行50米，左转弯行驶<span th:text="${car.id*3}">
    </span>米</p>
                <a th:href="@{'/car/buy?id='+${car.id}}" class="pay">立即预约</a>
             </div>
             <div class="clearfix"></div>
          </div>
       </div>
    </div>
    <span th:replace="/common/foot :: footer"></span>
    <script type="text/javascript"
    src="http://api.map.baidu.com/api?v=2.0&ak=QUSzk8g7c6Z10cAmLmfjgG1NB7aaBiyo">
    </script>
    <scripttype="text/javascript"
    src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js">
    </script>   
    <script type="text/javascript">   // 百度地图API功能
     var map = new BMap.Map('allmap');
        var poi = new BMap.Point(116.493237,40.005951);
        map.centerAndZoom(poi, 16);
        map.enableScrollWheelZoom();
        var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
            '' + '地址：北京绿地中心<br/>电话：(010)0000000<br/>简介：车库停车系统。' + '</div>';   
     //创建检索信息窗口对象
        var searchInfoWindow = null;
       searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
             title  : "大众车库停车场",      //标题
             width  : 290,             //宽度
             height : 105,              //高度
             panel  : "panel",         //检索结果面板
             enableAutoPan : true,     //自动平移
             searchTypes   :[
                BMAPLIB_TAB_TO_HERE,  //到这里去 
    ]      
    });

### 页面实现：车主查车库位置页面 ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54mn576K5Lu7aQ_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

### **界面设计规范** ###

对于界面的设计要按照以下原则：

（1）界面的易用性

（2）界面的规范性

（3）界面的合理性

（4）界面的美观与协调性

（5）界面的设计风格应统一设计，让使用者一看就觉得是个整体，布局连贯性好

# 四、系统实现 #

管理员登陆：http://localhost:8080/admin/login  
用户登陆：http://localhost:8080/user/login

**在此仅找出几张页面运行截图进行展示**

### **车主留言界面** ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54mn576K5Lu7aQ_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

### **管理员回复留言界面** ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54mn576K5Lu7aQ_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

### **车主查车位界面**  ###

![6db3108f51f047c696b7d9741a34291b.png][]

### **管理员管理车位界面** ###

![5bc34cf3088d4d6b9aba2e9c1d8b2b35.png][]

### **车主查看订单页面** ###

### ![14be4df317074412bb9b538cc7fe6001.png][] ###

### **管理员查看订单页面** ###

### ![938db898b00942b1bea8a10f7edba6bc.png][] ###

[Java_ _]: https://rej177.blog.csdn.net/article/details/125826754?spm=1001.2014.3001.5502
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54mn576K5Lu7aQ_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/1b5aec695bd14ddf91f8a1eb6542fd15.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54mn576K5Lu7aQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54mn576K5Lu7aQ_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/3d6bb2957d70447c9bed902e4056d0e1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54mn576K5Lu7aQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54mn576K5Lu7aQ_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/6ce08d0a927744c5be59a2927c42dcc6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54mn576K5Lu7aQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54mn576K5Lu7aQ_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/9858304ef19340ca8827623ad323c3e8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54mn576K5Lu7aQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54mn576K5Lu7aQ_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/0a3788c77db1426da99576b64dcd8ae6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54mn576K5Lu7aQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54mn576K5Lu7aQ_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/08c1f5987e284ceaba842f54f66d88b2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54mn576K5Lu7aQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[6db3108f51f047c696b7d9741a34291b.png]: https://img-blog.csdnimg.cn/6db3108f51f047c696b7d9741a34291b.png
[5bc34cf3088d4d6b9aba2e9c1d8b2b35.png]: https://img-blog.csdnimg.cn/5bc34cf3088d4d6b9aba2e9c1d8b2b35.png
[14be4df317074412bb9b538cc7fe6001.png]: https://img-blog.csdnimg.cn/14be4df317074412bb9b538cc7fe6001.png
[938db898b00942b1bea8a10f7edba6bc.png]: https://img-blog.csdnimg.cn/938db898b00942b1bea8a10f7edba6bc.png