SpringBoot+Vue 车辆充电桩系统

文章目录

  • 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、效果演示

效果图

SpringBoot+Vue 车辆充电桩系统_第1张图片

技术栈

开发语言: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、主要技术

技术名 作用
SpringBoot 后端框架
Vue 前端框架
MySQL 数据库

数据库设计与实现

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

3.4.1 数据库概念结构设计

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

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

SpringBoot+Vue 车辆充电桩系统_第2张图片

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

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

SpringBoot+Vue 车辆充电桩系统_第3张图片

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

3.4.2 数据库具体设计

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

表名3-1:配置文件

字段名称 类型 长度 字段说明 主键 默认值
id bigint 主键 主键
name varchar 100 配置参数名称
value varchar 100 配置参数值

表名3-2:充电桩报修

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

表名3-3:充电桩

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

表名3-4:用户

字段名称 类型 长度 字段说明 主键 默认值
id bigint 主键 主键
addtime timestamp 创建时间 CURRENT_TIMESTAMP
yonghuzhanghao varchar 200 用户账号
yonghuxingming varchar 200 用户姓名
mima varchar 200 密码
xingbie varchar 200 性别
nianling int 年龄
lianxidianhua varchar 200 联系电话

表名3-5:维修员

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

表名3-6:维修回复

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

表名3-7:用户表

字段名称 类型 长度 字段说明 主键 默认值
id bigint 主键 主键
username varchar 100 用户名
password varchar 100 密码
role varchar 100 角色 管理员
addtime timestamp 新增时间 CURRENT_TIMESTAMP

表名3-8:token表

字段名称 类型 长度 字段说明 主键 默认值
id bigint 主键 主键
userid bigint 用户id
username varchar 100 用户名
tablename varchar 100 表名
role varchar 100 角色
token varchar 200 密码
addtime timestamp 新增时间 CURRENT_TIMESTAMP
expiratedtime timestamp 过期时间 CURRENT_TIMESTAMP

表名3-9:收藏表

字段名称 类型 长度 字段说明 主键 默认值
id bigint 主键 主键
addtime timestamp 创建时间 CURRENT_TIMESTAMP
userid bigint 用户id
refid bigint 收藏id
tablename varchar 200 表名
name varchar 200 收藏名称
picture varchar 200 收藏图片
type varchar 200 类型(1:收藏,21:赞,22:踩) 1
inteltype varchar 200 推荐类型

表名3-10:充电常识

字段名称 类型 长度 字段说明 主键 默认值
id bigint 主键 主键
addtime timestamp 创建时间 CURRENT_TIMESTAMP
title varchar 200 标题
introduction longtext 4294967295 简介
picture varchar 200 图片
content longtext 4294967295 内容

表名3-11:电桩类别

字段名称 类型 长度 字段说明 主键 默认值
id bigint 主键 主键
addtime timestamp 创建时间 CURRENT_TIMESTAMP
dianzhuangleibie varchar 200 电桩类别

4 系统功能的具体实现

4.1 前台功能模块

4.1.1 首页功能

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

SpringBoot+Vue 车辆充电桩系统_第4张图片

图4-1系统首页界面图

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

SpringBoot+Vue 车辆充电桩系统_第5张图片

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

SpringBoot+Vue 车辆充电桩系统_第6张图片

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

SpringBoot+Vue 车辆充电桩系统_第7张图片

4.1.2 用户后台管理

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

SpringBoot+Vue 车辆充电桩系统_第8张图片

图4-5用户功能界面图

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

SpringBoot+Vue 车辆充电桩系统_第9张图片

4.2 后台功能模块

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

SpringBoot+Vue 车辆充电桩系统_第10张图片

图4-7后台登录界面图

4.2.1 管理员功能

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

SpringBoot+Vue 车辆充电桩系统_第11张图片

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

SpringBoot+Vue 车辆充电桩系统_第12张图片

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

SpringBoot+Vue 车辆充电桩系统_第13张图片

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

SpringBoot+Vue 车辆充电桩系统_第14张图片

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

SpringBoot+Vue 车辆充电桩系统_第15张图片

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

SpringBoot+Vue 车辆充电桩系统_第16张图片

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

SpringBoot+Vue 车辆充电桩系统_第17张图片

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

SpringBoot+Vue 车辆充电桩系统_第18张图片

4.2.2 维修员功能

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

SpringBoot+Vue 车辆充电桩系统_第19张图片

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

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

SpringBoot+Vue 车辆充电桩系统_第20张图片

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

SpringBoot+Vue 车辆充电桩系统_第21张图片

5、源码获取

你可能感兴趣的:(Java,SpringBoot,精品项目,spring,boot,vue.js,后端)