基于 Vue,SPringBoot开发的新能源充电桩的系统

一、项目概述

这是一个基于 Vue,SPringBoot开发的新能源充电桩的系统,包括管理员管理系统，用户预约系统，主要用于管理充电桩预约、订单处理、用户管理等功能。

二、系统架构

**1. **技术栈

 前端框架: Vue.js

 UI框架: Element UI

 图表库: ECharts

 路由管理: Vue Router

 状态管理: Vuex

 HTTP请求: Axios

**2. **项目结构

src/

├── components/ # 组件目录

├── views/ # 页面视图

├── assets/ # 静态资源

├── utils/ # 工具类

├── icons/ # 图标资源

└── App.vue # 根组件

三、核心功能模块

1 组件的注册

** **导入组件,这些组件你可以看成java中的类，@后跟的是组件的位置

import Index from '@/views/index'
import Home from '@/views/home'
import Login from '@/views/login'
import NotFound from '@/views/404'
import UpdatePassword from '@/views/update-password'
import pay from '@/views/pay'
import register from '@/views/register'
import center from '@/views/center'
import beifen from '@/views/modules/databaseBackup/beifen'
import huanyuan from '@/views/modules/databaseBackup/huanyuan'// 其他组件导入...

从项目的不同路径导入多个 Vue 组件，这些组件会在后续的路由配置里使用。

配置路由

const routes = [{path: '/index',name: '首页',component: Index,children: [// 子路由配置...]
},
{path: '/login',name: 'login',component: Login,meta: {icon:'', title:'login'}
},
// 其他路由配置...
]

• routes 是一个数组，包含了多个路由对象。
• 每个路由对象包含以下属性：
  • path：路由的路径。
  • name：路由的名称。
  • component：该路由对应的组件。
  • children：可选属性，用于定义子路由。
  • meta：可选属性，用于存储与路由相关的元数据，例如图标和标题。

实例化 VueRouter

const router = new VueRouter({mode: 'hash',/*hash模式改为history*/routes // （缩写）相当于 routes: routes
})

• new VueRouter 用于创建一个 Vue Router 实例。
• mode: 'hash'：指定路由模式为 hash 模式，URL 会带有 # 符号。
• routes：将之前定义的路由规则传递给 Vue Router 实例。

2. 请求路径映射

vue.config.js配置了路由端口的转发，主要转到后端的端口，用于和数据库进行交互。

devServer: {host: "0.0.0.0", //指定使用一个 host。默认是 localhost，这里默认值即可port: 8082, //指定端口hot: true, // 开启热更新https: false, // 是否开启https模式proxy: { // 请求代理服务器'/xinnengyuanchongdainxitong': { //匹配到这个路径target: 'http://localhost:8080/xinnengyuanchongdainxitong/', //转发到 8080 端口pathRewrite: {'^/xinnengyuanchongdainxitong': ''  // 重写路径}}}},

以登录为例：

前端发出的初始uri
http://localhost:8082/xinnengyuanchongdainxitong/users/login?username=duhong&password=123456

经过映射后，转发到后端服务中：

http://localhost:8080/xinnengyuanchongdainxitong/users/login?username=duhong&password=123456

基础路径是在base.js中设置的

const base = {get() {return {url : "http://localhost:8080/xinnengyuanchongdainxitong/",name: "xinnengyuanchongdainxitong",// 退出到首页链接indexUrl: 'http://localhost:8080/xinnengyuanchongdainxitong/front/index.html'};},getProjectName(){return {projectName: "新能源充电系统"} }
}
export default base

3 处理逻辑，如何查找

根据vue中的请求的登录路径，找到UserController，请求最先经过Controller

UserController

后面你可以查看调用的方法

请求->Controller->Service->dao->数据库操作

4 登录状态如何维持的

看上面的登录处理逻辑，如果有该用户就通过工具类获取token,并在实例化的R类中添加token以及其他字段并返回json数据，再回看登录的Vue页面

从then开始，主要是处理登录请求的返回数据，将数据存入本地储存并跳转到/index路径对应的组件。

每次请求时api都会从本地储存中带上token,在http.js中设置。

那么后端是如何识别是否是正确的token呢？

通过拦截器：

那么整个请求响应的逻辑就变成了

请求->拦截器->Controller->Service->Dao

对于不需要鉴权的路径，如登录，注册等，可以通过@IgnoreAuth，忽略权限验证。

5 如何通过网页操作查看到响应操作的请求路径

浏览器打开开发者工具

点击网络，找到对应的功能点击，就可以查看到对应的请求了。

6 说明

用户界面

http://localhost:8080/xinnengyuanchongdainxitong/front/index.html

管理员界面

http://localhost:8082/

7 数据库

（1）下图是客服聊天实体和其具备的属性。

客服聊天实体属性图

（2）下图是新能源公告实体和其具备的属性。

新能源公告实体属性图

（3）下图是反馈实体和其具备的属性。

反馈实体属性图

（4）下图是用户实体和其具备的属性。

用户实体属性图

（5）下图是充电桩预约实体和其具备的属性。

充电桩预约实体属性图

（6）下图是充电桩实体和其具备的属性。

8 功能实现，部分

**5.1 **管理员功能实现

**5.1.1 **充电桩管理

图5.1 即为编码实现的充电桩管理界面，管理员在充电桩管理界面中可以对界面中显示的所有数据进行，可以对充电桩信息的充电桩状态进行查看，可以添加新的充电桩信息等。

图5.1 充电桩管理界面

**5.1.2 **充电桩预约管理

图5.2 即为编码实现的充电桩预约管理界面，管理员在充电桩预约管理界面中查看奖罚种类信息，奖罚描述信息，可以导出充电桩预约信息，新增充电桩预约信息等。

图5.2 充电桩预约管理界面

**5.1.3 **报修管理

图5.3 即为编码实现的报修管理界面，管理员在报修管理界面中新增报修，并设置报修的角色，可以删除报修。

图5.3 报修管理界面

**5.1.4 **公告管理

图5.4 即为编码实现的公告管理界面，管理员在公告管理界面查看公告的工作状态为正式公告还是实习公告，可以对公告的数据进行导出，可以添加新公告的信息，可以编辑公告信息，删除公告信息。

图5.4 公告管理界面

**5.2 **用户功能实现

**5.2.1 **充电桩

图5.5 即为编码实现的充电桩界面。

图5.5 充电桩界面

**5.2.2 **在线客服

图5.6 即为编码实现的在线客服界面。

图5.6 在线客服界面

**5.2.3 **报修

图5.7 即为编码实现的报修界面。

图5.7 报修界面

支付功能

9 vue文件对应功能

文件名/模块名	类型	主要功能
404.vue	组件	展示404错误页面，页面中有错误图片和提示文字，起简单的错误提示作用。
center.vue	组件	作为用户中心页面，提供用户信息表单用于显示和修改用户信息，同时处理用户角色权限相关逻辑。
home.vue	组件	作为系统首页，显示欢迎信息和项目名称，进行简单的首页展示。
index.vue	组件	作为系统主框架页面，包含头部导航和侧边栏，是整个系统的整体布局容器。
login.vue	组件	作为用户登录页面，包含登录表单，处理用户登录逻辑，对用户输入进行验证。
modules/baoxui/	模块	报修管理模块，有报修列表可查看报修信息，具备添加和编辑报修信息的功能，处理报修相关业务逻辑。
modules/chat/	模块	聊天模块，包含聊天列表，能进行消息处理，实现用户之间的通信功能。
modules/chongdianzhuang/	模块	充电桩管理模块，有充电桩列表可查看充电桩信息，具备添加和编辑充电桩信息的功能，处理充电桩库存和状态管理。
modules/chongdianzhuangOrder/	模块	充电桩订单管理模块，包含订单列表，可进行订单处理，实现预约、取消预约等订单相关功能。
modules/config/	模块	系统配置管理模块，有配置列表，可对配置项进行管理，处理系统参数的设置。
modules/databaseBackup/	模块	数据库备份还原模块，具备备份和还原数据库的功能，用于数据库的维护操作。
modules/dictionary/	模块	数据字典管理模块，有字典列表，可对字典项进行管理，将系统字典数据整理成表格形式。

10 后端服务文件对应功能

分类	名称	主要功能描述
注解相关	LoginUser.java	用于获取当前登录用户信息，支持从请求头获取token并解析用户信息
注解相关	APPLoginUser.java	专门用于APP端用户认证，处理APP特有的认证逻辑
注解相关	IgnoreAuth.java	标记不需要token验证的接口，用于公开接口的访问控制
配置相关	InterceptorConfig.java	配置请求拦截器，处理跨域请求，配置静态资源访问，设置拦截路径
配置相关	MybatisPlusConfig.java	配置分页插件、乐观锁插件、SQL性能分析插件、动态表名插件
配置相关	MyMetaObjectHandler.java	自动填充创建时间、更新时间、创建人、更新人
业务控制器	BaoxuiController.java	提交报修信息，查询报修列表，更新报修状态，删除报修记录
业务控制器	ChatController.java	发送消息，获取聊天记录，获取未读消息，标记消息已读
业务控制器	ChongdianzhuangController.java	添加充电桩，修改充电桩信息，查询充电桩列表，删除充电桩，充电桩状态管理
业务控制器	ChongdianzhuangOrderController.java	创建订单，支付订单，查询订单列表，取消订单，订单状态更新
业务控制器	CommonController.java	文件上传，文件下载，数据统计，系统信息查询
业务控制器	ConfigController.java	获取配置信息，更新配置信息，配置项管理
业务控制器	DictionaryController.java	获取字典数据，添加字典项，修改字典项，删除字典项
业务控制器	FileController.java	上传文件，下载文件，删除文件，文件列表查询
业务控制器	GonggaoController.java	发布公告，修改公告，删除公告，查询公告列表
业务控制器	UsersController.java	添加管理员，修改管理员信息，删除管理员，查询管理员列表，重置密码
业务控制器	YonghuController.java	用户注册，用户登录，修改用户信息，查询用户列表，重置密码
数据访问层（Dao）	BaoxuiDao.java	报修信息CRUD，报修状态查询，报修统计
数据访问层（Dao）	ChatDao.java	消息记录CRUD，未读消息查询，聊天记录统计
数据访问层（Dao）	ChongdianzhuangDao.java	充电桩信息CRUD，充电桩状态查询，充电桩统计
数据访问层（Dao）	ChongdianzhuangOrderDao.java	订单信息CRUD，订单状态查询，订单统计
数据访问层（Dao）	CommonDao.java	文件信息CRUD，系统配置CRUD，字典数据CRUD
数据访问层（Dao）	ConfigDao.java	配置信息CRUD，配置项查询，配置更新
数据访问层（Dao）	DictionaryDao.java	字典项CRUD，字典类型查询，字典值查询
数据访问层（Dao）	FileDao.java	文件信息CRUD，文件查询，文件统计
数据访问层（Dao）	GonggaoDao.java	公告信息CRUD，公告查询，公告统计
数据访问层（Dao）	UsersDao.java	管理员信息CRUD，管理员查询，权限管理
数据访问层（Dao）	YonghuDao.java	用户信息CRUD，用户查询，用户统计
服务层（Service）	BaoxuiService.java	报修信息处理，报修状态流转，报修通知推送，报修统计服务
服务层（Service）	ChatService.java	消息发送处理，消息存储管理，未读消息处理，消息推送服务
服务层（Service）	ChongdianzhuangService.java	充电桩信息管理，充电桩状态监控，充电桩预约处理，充电桩统计服务
服务层（Service）	ChongdianzhuangOrderService.java	订单创建处理，订单支付处理，订单状态管理，订单统计服务
服务层（Service）	CommonService.java	文件处理服务，数据统计服务，系统信息服务，缓存管理服务
服务层（Service）	ConfigService.java	配置信息管理，配置缓存处理，配置更新通知，配置验证服务
服务层（Service）	DictionaryService.java	字典数据管理，字典缓存处理，字典数据转换，字典验证服务
服务层（Service）	FileService.java	文件上传处理，文件存储管理，文件下载处理，文件清理服务
服务层（Service）	GonggaoService.java	公告发布处理，公告推送服务，公告状态管理，公告统计服务
服务层（Service）	UsersService.java	管理员信息管理，权限管理服务，密码加密服务，登录认证服务
服务层（Service）	YonghuService.java	用户注册服务，用户认证服务，用户信息管理，用户统计服务
服务实现层（ServiceImpl）	BaoxuiServiceImpl.java	实现报修信息处理逻辑，报修状态流转逻辑，报修通知推送逻辑，报修统计逻辑
服务实现层（ServiceImpl）	ChatServiceImpl.java	实现消息发送逻辑，消息存储逻辑，未读消息处理逻辑，消息推送逻辑
服务实现层（ServiceImpl）	ChongdianzhuangServiceImpl.java	实现充电桩信息管理逻辑，充电桩状态监控逻辑，充电桩预约处理逻辑，充电桩统计逻辑
服务实现层（ServiceImpl）	ChongdianzhuangOrderServiceImpl.java	实现订单创建处理逻辑，订单支付处理逻辑，订单状态管理逻辑，订单统计逻辑
服务实现层（ServiceImpl）	CommonServiceImpl.java	实现文件处理逻辑，数据统计逻辑，系统信息逻辑，缓存管理逻辑
服务实现层（ServiceImpl）	ConfigServiceImpl.java	实现配置信息管理逻辑，配置缓存处理逻辑，配置更新通知逻辑，配置验证逻辑
服务实现层（ServiceImpl）	DictionaryServiceImpl.java	实现字典数据管理逻辑，字典缓存处理逻辑，字典数据转换逻辑，字典验证逻辑
服务实现层（ServiceImpl）	FileServiceImpl.java	实现文件上传处理逻辑，文件存储管理逻辑，文件下载处理逻辑，文件清理逻辑
服务实现层（ServiceImpl）	GonggaoServiceImpl.java	实现公告发布处理逻辑，公告推送逻辑，公告状态管理逻辑，公告统计逻辑
服务实现层（ServiceImpl）	UsersServiceImpl.java	实现管理员信息管理逻辑，权限管理逻辑，密码加密逻辑，登录认证逻辑
服务实现层（ServiceImpl）	YonghuServiceImpl.java	实现用户注册逻辑，用户认证逻辑，用户信息管理逻辑，用户统计逻辑
工具类	JwtUtils.java	生成token，验证token，解析token，刷新token
工具类	StringUtils.java	字符串处理，字符串验证，字符串转换
工具类	DateUtils.java	日期格式化，日期计算，日期验证
工具类	FileUtils.java	文件操作，文件验证，文件类型判断
工具类	RedisUtils.java	Redis操作，缓存管理，分布式锁
工具类	ValidatorUtils.java	数据验证，参数校验，格式验证
工具类	SecurityUtils.java	密码加密，安全验证，权限检查
工具类	ExcelUtils.java	Excel导出，Excel导入，Excel模板处理