基于 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文件对应功能

10 后端服务文件对应功能