SpringBoot+Vue车辆充电桩系统设计与实现

╰半橙微兮° 2023-09-30 00:00 9阅读 0赞

#### 文章目录 ####

*  1、效果演示
 *   *  效果图
     *  技术栈
 *  2、 前言介绍（完整源码请私聊）
 *  3、主要技术
 *   *   *  3.4.1 数据库概念结构设计
         *  3.4.2 数据库具体设计
 *  4 系统功能的具体实现
 *   *  4.1 前台功能模块
     *   *  4.1.1 首页功能
         *  4.1.2 用户后台管理
     *  4.2 后台功能模块
     *   *  4.2.1 管理员功能
         *  4.2.2 维修员功能
 *  5、源码获取

## 1、效果演示 ##

### 效果图 ###

![img][]

### 技术栈 ###

开发语言：Java

框架：springboot

JDK版本：JDK1.8

服务器：tomcat7

数据库：mysql 5.7（一定要5.7版本）

数据库工具：Navicat11

开发软件：eclipse/myeclipse/idea

Maven包：Maven3.3.9

浏览器：谷歌浏览器

## 2、 前言介绍（完整源码请私聊） ##

本车辆充电桩管理系统以springboot作为框架，b/s模式以及MySql作为后台运行的数据库，同时使用Tomcat用为系统的服务器。本系统主要包括首页、个人中心、维修员管理、用户管理、电桩类别管理、充电桩管理、充电桩报修管理、维修回复管理、系统管理等功能，通过这些功能的实现基本能够满足日常车辆充电桩管理的操作。

本文着重阐述了车辆充电桩管理系统的分析、设计与实现，首先介绍开发系统和环境配置、数据库的设计，接着说明功能模块的详细实现，最后进行了总结。

## 3、主要技术 ##

<table> 
 <thead> 
  <tr> 
   <th>技术名</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>SpringBoot</td> 
   <td>后端框架</td> 
  </tr> 
  <tr> 
   <td>Vue</td> 
   <td>前端框架</td> 
  </tr> 
  <tr> 
   <td>MySQL</td> 
   <td>数据库</td> 
  </tr> 
 </tbody> 
</table>

数据库设计与实现

在每一个系统中数据库有着非常重要的作用，数据库的设计得好将会增加系统的效率以及系统各逻辑功能的实现。所以数据库的设计我们要从系统的实际需要出发，才能使其更为完美的符合系统功能的实现。

#### 3.4.1 数据库概念结构设计 ####

数据库的E-R图反映了实体、实体的属性和实体之间的联系。下面是各个实体以及实体的属性。

用户注册实体属性图如下所示：

![img][img 1]

图3-2用户注册实体属性图

充电桩实体属性图如下所示：

![img][img 2]

图3-3充电桩实体属性图

#### 3.4.2 数据库具体设计 ####

根据E-R图，设计每张表的变量名，变量的类型及主键等如下。

表名3-1：配置文件

表名3-2：充电桩报修

<table> 
 <thead> 
  <tr> 
   <th>字段名称</th> 
   <th>类型</th> 
   <th>长度</th> 
   <th>字段说明</th> 
   <th>主键</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>bigint</td> 
   <td></td> 
   <td>主键</td> 
   <td>主键</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>addtime</td> 
   <td>timestamp</td> 
   <td></td> 
   <td>创建时间</td> 
   <td></td> 
   <td>CURRENT_TIMESTAMP</td> 
  </tr> 
  <tr> 
   <td>dianzhuangbianhao</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>电桩编号</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>dianzhuangleibie</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>电桩类别</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>tupian</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>图片</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>suochuweizhi</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>所处位置</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>guzhangmiaoshu</td> 
   <td>longtext</td> 
   <td>4294967295</td> 
   <td>故障描述</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>yonghuzhanghao</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>用户账号</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>yonghuxingming</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>用户姓名</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>baoxiushijian</td> 
   <td>datetime</td> 
   <td></td> 
   <td>报修时间</td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

表名3-3：充电桩

<table> 
 <thead> 
  <tr> 
   <th>字段名称</th> 
   <th>类型</th> 
   <th>长度</th> 
   <th>字段说明</th> 
   <th>主键</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>bigint</td> 
   <td></td> 
   <td>主键</td> 
   <td>主键</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>addtime</td> 
   <td>timestamp</td> 
   <td></td> 
   <td>创建时间</td> 
   <td></td> 
   <td>CURRENT_TIMESTAMP</td> 
  </tr> 
  <tr> 
   <td>dianzhuangbianhao</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>电桩编号</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>dianzhuangleibie</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>电桩类别</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>tupian</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>图片</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>shurudianya</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>输入电压</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>shuchugonglv</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>输出功率</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>shiyongfangshi</td> 
   <td>longtext</td> 
   <td>4294967295</td> 
   <td>使用方式</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>zhuyishixiang</td> 
   <td>longtext</td> 
   <td>4294967295</td> 
   <td>注意事项</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>suochuweizhi</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>所处位置</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>meishidanjia</td> 
   <td>float</td> 
   <td></td> 
   <td>每时单价</td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

表名3-4：用户

表名3-5：维修员

<table> 
 <thead> 
  <tr> 
   <th>字段名称</th> 
   <th>类型</th> 
   <th>长度</th> 
   <th>字段说明</th> 
   <th>主键</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>bigint</td> 
   <td></td> 
   <td>主键</td> 
   <td>主键</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>addtime</td> 
   <td>timestamp</td> 
   <td></td> 
   <td>创建时间</td> 
   <td></td> 
   <td>CURRENT_TIMESTAMP</td> 
  </tr> 
  <tr> 
   <td>weixiugonghao</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>维修工号</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>weixiuxingming</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>维修姓名</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>mima</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>密码</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>xingbie</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>性别</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>lianxidianhua</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>联系电话</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>shenfenzheng</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>身份证</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>jiatingzhuzhi</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>家庭住址</td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

表名3-6：维修回复

<table> 
 <thead> 
  <tr> 
   <th>字段名称</th> 
   <th>类型</th> 
   <th>长度</th> 
   <th>字段说明</th> 
   <th>主键</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>bigint</td> 
   <td></td> 
   <td>主键</td> 
   <td>主键</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>addtime</td> 
   <td>timestamp</td> 
   <td></td> 
   <td>创建时间</td> 
   <td></td> 
   <td>CURRENT_TIMESTAMP</td> 
  </tr> 
  <tr> 
   <td>dianzhuangbianhao</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>电桩编号</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>dianzhuangleibie</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>电桩类别</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>tupian</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>图片</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>suochuweizhi</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>所处位置</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>yonghuzhanghao</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>用户账号</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>yonghuxingming</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>用户姓名</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>dengjishijian</td> 
   <td>datetime</td> 
   <td></td> 
   <td>登记时间</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>weixiugonghao</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>维修工号</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>weixiuxingming</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>维修姓名</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>weixiuzhuangtai</td> 
   <td>varchar</td> 
   <td>200</td> 
   <td>维修状态</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>weixiudengji</td> 
   <td>longtext</td> 
   <td>4294967295</td> 
   <td>维修登记</td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

表名3-7：用户表

表名3-8：token表

表名3-9：收藏表

表名3-10：充电常识

表名3-11：电桩类别

## 4 系统功能的具体实现 ##

### 4.1 前台功能模块 ###

#### 4.1.1 首页功能 ####

车辆充电桩管理系统，用户进入到系统首页，可以查看首页、充电桩、充电常识、个人中心、后台管理等内容进行操作，如图4-1所示。

![img][img 3]

图4-1系统首页界面图

用户注册；在用户注册页面中输入用户账号、用户姓名、密码、确认密码、年龄、联系电话等内容进行用户注册操作；如图4-2所示。

![img][img 4]

充电桩；在充电桩页面中可以查看电桩编号、充电桩类别、输入电压、输出功率、使用方式、所处位置、每时单价、注意事项、图片、地图等内容；并进行报修或收藏操作；如图4-3所示。

![img][img 5]

个人中心；在个人中心页面中输入用户账号、用户姓名、密码、性别、年龄、联系电话等内容进行更新信息，并可以根据需要对我的收藏进行详细的操作管理，如图4-4所示。

![img][img 6]

#### 4.1.2 用户后台管理 ####

用户登录进入车辆充电桩管理系统可以对首页、个人中心、充电桩报修管理、维修回复管理等功能进行详细操作，如图4-5所示。

![img][img 7]

图4-5用户功能界面图

充电桩报修管理；在充电桩报修管理页面中可以查看索引、电桩编号、电桩类别、图片、气息位置、用户账号、用户姓名、报修时间等内容，并进行详情，修改和删除等操作；如图4-6所示。

![img][img 8]

### 4.2 后台功能模块 ###

管理员和维修员登录，通过填写注册时输入的用户名、密码、选择角色等信息进行登录操作，如图4-7所示。

![img][img 9]

图4-7后台登录界面图

#### 4.2.1 管理员功能 ####

管理员登录进入车辆充电桩管理系统可以查看首页、个人中心、维修员管理、用户管理、电桩类别管理、充电桩管理、充电桩报修管理、维修回复管理、系统管理等功能进行详细操作，如图4-8所示。

![img][img 10]

维修员管理；在维修员管理页面中可以查看索索引、维修工号、维修姓名、性别、联系电话、身份证、家庭住址等内容，并进行详情，修改和删除等操作；如图4-9所示。

![img][img 11]

用户管理；在用户管理页面中可以查看索引、用户账号、用户姓名、性别、年龄、联系电话等内容，并进行详情，修改和删除等操作；如图4-10所示。

![img][img 12]

电桩类别管理；在电桩类别管理页面中可以查看索引、电桩类别等内容，并进行详情，修改和删除等操作；如图4-11所示。

![img][img 13]

充电桩管理；在充电桩管理页面中可以查看索引、电桩编号、电桩类别、图片、输入电压、输出功率、所处位置、每时单价等内容，并进行详情，修改和删除等操作；如图4-12所示。

![img][img 14]

充电桩报修管理；在充电桩报修管理页面中可以查看索引、电桩编号、电桩类别、图片、所处位置、用户账号、用户姓名、报修时间等内容，并进行详情，修改和删除等操作；如图4-13所示。

![img][img 15]

维修回复管理；在维修回复管理页面中可以查看索引、电桩编号、电桩类别、图片、所处位置、用户账号、用户姓名、登记时间、维修工号、维修姓名、维修状态等内容，并进行详情，修改和删除等操作；如图4-14所示。

![img][img 16]

系统管理；在充电常识页面中可以查看索引，标题，图片等内容，并进行详情，修改和删除等操作；还可以对轮播图管理进行详细操作；如图4-15所示。

![img][img 17]

#### 4.2.2 维修员功能 ####

维修员登录进入车辆充电桩管理系统可以查看首页、个人中心、充电桩报修管理、维修回复管理等功能进行详细操作，如图4-16所示。

![img][]

图4-16维修员功能界面图

充电桩报修管理；在充电桩报修管理页面中可以查看索引、电桩编号、电桩类别、图片、所处位置、用户账号、用户姓名、报修时间等内容，并进行详情或维修回复等操作；如图4-17所示。

![img][img 18]

维修回复管理；在维修回复管理页面中可以查看索引、电桩编号、电桩类别、图片、所处位置、用户账号、用户姓名、登记时间、维修工号、维修姓名、维修状态等内容，并进行详情，修改和删除等操作；如图4-18所示。

![img][img 19]

## 5、源码获取 ##

[img]: https://img-blog.csdnimg.cn/img_convert/e6bafb4fc89c18130588d8ef4bc02846.jpeg
[img 1]: https://img-blog.csdnimg.cn/img_convert/0507ad2a34256b6b077c66c6be2670fe.gif
[img 2]: https://img-blog.csdnimg.cn/img_convert/cb64090b1c2d4bcfa5e9450c63afc25e.gif
[img 3]: https://img-blog.csdnimg.cn/img_convert/edb52ca7fc55c6c468c66d0d0ca5dfb3.jpeg
[img 4]: https://img-blog.csdnimg.cn/img_convert/52926d830b5ecedb76182aa1bc2b597d.jpeg
[img 5]: https://img-blog.csdnimg.cn/img_convert/73a7577e03790f823fea4c440bfa14c8.jpeg
[img 6]: https://img-blog.csdnimg.cn/img_convert/02bbf3e5997c3a8e89ab4a0cae9078d6.jpeg
[img 7]: https://img-blog.csdnimg.cn/img_convert/d83bc5593a7baccec0f3e0e6e970e4fd.jpeg
[img 8]: https://img-blog.csdnimg.cn/img_convert/4280ef973b15e67bbbc34a836e01eac3.jpeg
[img 9]: https://img-blog.csdnimg.cn/img_convert/64ad6c43318b93676e9329c5b7ab248f.jpeg
[img 10]: https://img-blog.csdnimg.cn/img_convert/d18b17743c7ccfd52f62f9447d647621.jpeg
[img 11]: https://img-blog.csdnimg.cn/img_convert/ea4b65c2a2a5f19f01e889a483a3dc8c.jpeg
[img 12]: https://img-blog.csdnimg.cn/img_convert/ab829e630af4246c623ad32ad33e4265.jpeg
[img 13]: https://img-blog.csdnimg.cn/img_convert/79fc56e7ad7c49d27e10a8f88866d810.jpeg
[img 14]: https://img-blog.csdnimg.cn/img_convert/5727d6de85b43c477f7b9ec845596c98.jpeg
[img 15]: https://img-blog.csdnimg.cn/img_convert/f92bd7a376e86679e7a739ddc6578c7e.jpeg
[img 16]: https://img-blog.csdnimg.cn/img_convert/60b1ce021e71adba62801485d88d54b5.jpeg
[img 17]: https://img-blog.csdnimg.cn/img_convert/388e8edc07fcebd2f6ee81b666178bdf.jpeg
[img 18]: https://img-blog.csdnimg.cn/img_convert/48046de9a32459c7c271d3bd950f214b.jpeg
[img 19]: https://img-blog.csdnimg.cn/img_convert/a2f54a83ab9cbbc2d892e07d96aedf81.jpeg