Java毕业设计 SpringBoot 新能源充电桩管理系统

Java毕业设计 SpringBoot 新能源充电桩管理系统

SpringBoot 新能源充电桩管理系统 功能介绍

管理员 登录 验证码 注册 系统用户管理 普通用户管理 通知公告管理 留言管理 充电站管理 充电桩管理 充电桩预约 充电管理 订单管理 修改密码

普通用户 登录 修改个人资料 通知公告查询 留言 充电桩预约和查询 充电查询 订单查询 修改密码

角色:用户 管理员

使用技术
  • SpringBoot框架

  • Mybaits

  • Mysql数据库

  • vue

功能展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

充电站管理页面vue
<template><div><el-form :inline="true" :model="formInline" class="user-search"><el-form-item label=""><el-input size="small" v-model="formInline.zhandianmingcheng" placeholder="输入站点名称"></el-input></el-form-item><el-form-item label=""><el-input size="small" v-model="formInline.dizhi" placeholder="输入地址"></el-input></el-form-item><el-form-item><el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button><el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()" >添加</el-button><el-button size="small" type="danger" icon="el-icon-delete" @click="handleDeleteList()" v-if="userInfo.roles[0] == 'guanliyuan'">批量删除</el-button></el-form-item></el-form><el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" @selection-change="handleSelectionChange"><el-table-column align="center" type="selection" width="60"></el-table-column><el-table-column sortable prop="zhandianmingcheng" label="站点名称"></el-table-column><el-table-column sortable prop="shebeishuliang" label="设备数量"></el-table-column><el-table-column sortable prop="dizhi" label="地址"></el-table-column><el-table-column align='center' sortable prop='tupian' label='图片' width='120'><template slot-scope='scope'><el-image :src='scope.row.tupian' style='height:70px'/></template></el-table-column><el-table-column sortable prop="addtime" label="添加时间" width="160"><template slot-scope="scope"><div>{{scope.row.addtime|datePipe('yyyy-MM-dd hh:mm:ss')}}</div></template></el-table-column><el-table-column align="center" label="操作" min-width="160"><template slot-scope="scope"><el-button size="mini"  type="danger" @click="addSalary(scope.$index, scope.row)">添加充电桩</el-button><!--liangbuan--><el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)" v-if="userInfo.roles[0] == 'guanliyuan' ">编辑</el-button><el-button size="mini" type="danger" @click="deleteChongdianzhanxinxi(scope.$index, scope.row)" v-if="userInfo.roles[0] == 'guanliyuan' ">删除</el-button><el-button size='mini' type='primary' @click="handleDetail(scope.$index, scope.row)">详细</el-button></template></el-table-column></el-table><Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination><el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog"><el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm"><el-form-item  label="站点名称" prop="zhandianmingcheng"><el-input size="small" v-model="editForm.zhandianmingcheng" auto-complete="off" placeholder="请输入站点名称" style='width:50%'></el-input></el-form-item><el-form-item  label="设备数量" prop="shebeishuliang"><el-input-number size="small" v-model="editForm.shebeishuliang" auto-complete="off" placeholder="请输入设备数量" style='width:50%'></el-input-number></el-form-item><el-form-item  label="地址" prop="dizhi"><el-input size="small" v-model="editForm.dizhi" auto-complete="off" placeholder="请输入地址" style='width:50%'></el-input></el-form-item><el-form-item  label='图片' prop='tupian'><el-upload class='avatar-uploader' action='http://localhost:9999/files/upload' :headers='headers' :show-file-list='false' :on-success='handleTupianSuccess' :before-upload='beforeTupianUpload'><img v-if='editForm.tupian' :src='editForm.tupian' class='avatar'><i v-else class='el-icon-plus avatar-uploader-icon'></i></el-upload></el-form-item><el-form-item  label="简介" prop="jianjie"><el-input type="textarea" size="small" v-model="editForm.jianjie" auto-complete="off" placeholder="请输入简介" style='width:100%'></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button size="small" @click="closeDialog">取消</el-button><el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button></div></el-dialog><el-dialog :title="title" :visible.sync="detailFormVisible" width="60%" @click="closeDialogdetail"><table width="100%" border="0"  align="center" cellpadding="3" cellspacing="1"  style="line-height: 50px;  " class="table table-striped table-bordered table-hover"><tr><td width='11%' height=44>站点名称:</td><td width='39%'>{{editForm.zhandianmingcheng}}</td>
<td  rowspan=3 align=center><el-upload class='avatar-uploader'  :headers='headers' :show-file-list='false'  ><img v-if='editForm.tupian' :src='editForm.tupian' class='avatar'><i v-else class='el-icon-plus avatar-uploader-icon'></i></el-upload></td></tr><tr>
<td width='11%' height=44>设备数量:</td><td width='39%'>{{editForm.shebeishuliang}}</td>
</tr><tr>
<td width='11%' height=44>地址:</td><td width='39%'>{{editForm.dizhi}}</td>
</tr><tr><td width='11%' height=100  >简介:</td><td width='39%' colspan=2 height=100 >{{editForm.jianjie}}</td></tr></table><div slot="footer" class="dialog-footer"><el-button size="small" @click="closeDialogdetail">关闭</el-button></div></el-dialog></div>
</template><script>
import Pagination from "@/layout/pagination/Pagination";
import { chongdianzhanxinxiList, chongdianzhanxinxiSave, chongdianzhanxinxiDelete,chongdianzhanxinxiEdit,chongdianzhanxinxiDeleteList } from '@/api/chongdianzhanxinxi/chongdianzhanxinxiApi';import {Session} from "@/utils/storage";
export default {name: 'user',data() {return {loading: false, //是显示加载title: '',editFormVisible: false, //控制编辑页面显示与隐藏detailFormVisible: false,editForm: {},user:[],rules: {zhandianmingcheng: [{ required: true, message: '请输入站点名称', trigger: 'blur' },],shebeishuliang: [{ required: true, message: '请输入设备数量', trigger: 'blur' },{ type: 'number', message: '设备数量必须为数字'},],dizhi: [{ required: true, message: '请输入地址', trigger: 'blur' },],},formInline: {page: 1,limit: 10,},listData: [],chongdianzhanxinxis:[],checkmenu: [],pageparm: {currentPage: 1,pageSize: 10,total: 0}};},computed:{headers(){return {"token":Session.get("token")}}},watch: {'$route' (to, from) {// 路由发生变化页面刷新this.$router.go(0);}},components: {Pagination},created() {if (!Session.get('userInfo')) return false;this.userInfo = Session.get('userInfo');this.getdata(this.formInline)},methods: {getdata(parameter) {chongdianzhanxinxiList(parameter).then(res => {this.loading = falseif (res.success == false) {this.$message({type: 'info',message: res.msg})} else {this.listData = res.data.list// 分页赋值this.pageparm.currentPage = this.formInline.currentthis.pageparm.pageSize = this.formInline.currentNumthis.pageparm.total = res.data.total}}).catch(err => {this.loading = falsethis.$message.error('菜单加载失败,请稍后再试!')})},// 分页插件事件callFather(parm) {this.formInline.current = parm.currentPagethis.getdata(this.formInline)},// 搜索事件search() {this.getdata(this.formInline)},addSalary(index,row){this.$router.push({name:'chongdianzhuangxinxiAdd',params:{id:row.id}})},//显示编辑界面handleEdit: function (index, row) {this.editFormVisible = trueif (row != undefined && row != 'undefined') {this.title = '修改充电站信息'this.editForm = row} else {this.title = '添加充电站信息'this.editForm = {}}},handleDetail: function (index, row) {this.detailFormVisible = trueif (row != undefined && row != 'undefined') {this.title = '充电站信息详细'this.editForm = row}},closeDialogdetail() {this.getdata(this.formInline)this.detailFormVisible = false},//liangbuedit// 编辑、增加页面保存方法submitForm(editData) {this.$refs[editData].validate(valid => {if (valid) {if(this.editForm.id){chongdianzhanxinxiEdit(this.editForm).then(res => {this.editFormVisible = falsethis.loading = falseif (res.code == '0') {this.getdata(this.formInline)this.$message({type: 'success',message: '充电站信息修改成功!'})} else {this.$message({type: 'info',message: res.msg})}}).catch(err => {this.editFormVisible = falsethis.loading = falsethis.getdata(this.formInline)if(err){this.$message.error(err)}else {this.$message.error('操作失败,请稍后再试!')}})}else {chongdianzhanxinxiSave(this.editForm).then(res => {this.editFormVisible = falsethis.loading = falseif (res.code == '0') {this.getdata(this.formInline)this.$message({type: 'success',message: '充电站信息添加成功!'})} else {this.$message({type: 'info',message: res.msg})}}).catch(err => {this.editFormVisible = falsethis.loading = falseif(err){this.$message.error(err)}else {this.$message.error('操作失败,请稍后再试!')}})}} else {return false}})},// 删除公司deleteChongdianzhanxinxi(index, row) {this.$confirm('确定要删除吗?', '信息', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {chongdianzhanxinxiDelete(row.id).then(res => {if (res.code == '0') {this.$message({type: 'success',message: '充电站信息已删除!'})this.getdata(this.formInline)} else {this.$message({type: 'info',message: res.msg})}}).catch(err => {this.loading = falsethis.$message.error('操作失败,请稍后再试')})}).catch(() => {this.$message({type: 'info',message: '已取消删除'})})},handleSelectionChange(val){this.chongdianzhanxinxis = val;},handleDeleteList(){const chongdianzhanxinxis = this.chongdianzhanxinxis;if(chongdianzhanxinxis.length == 0){this.$message({type: 'error',message: '请至少选择一项进行删除'})}else {this.$confirm('确定要批量删除吗?', '信息', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {chongdianzhanxinxiDeleteList(chongdianzhanxinxis).then(res => {if (res.code == '0') {this.$message({type: 'success',message: '批量删除成功!'})this.getdata(this.formInline)} else {this.$message({type: 'info',message: res.msg})}}).catch(err => {this.loading = falsethis.$message.error('操作失败,请稍后再试')})}).catch(() => {this.$message({type: 'info',message: '已取消删除'})})}},//xuaxnzeshxifouhandleTupianSuccess(res, file) {if(res.code == "0") {this.editForm.tupian = "/files/download/"+res.data.id}},beforeTupianUpload(file) {const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上传图片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上传图片大小不能超过 2MB!');}return isJPG && isLt2M;},// 关闭编辑、增加弹出框closeDialog() {this.getdata(this.formInline)this.editFormVisible = false}},
};
</script><style scoped lang="scss">@import './index.scss';
</style>
运行

创建数据库, 然后修改数据库连接相关信息。

启动 Springboot 类的main方法

运行vue

npm run serve

访问地址:http://localhost:8080/springboot/admin/dist/index.html

管理员账号:liang 密码:liang

注册或使用用户账号: qqq 密码:qqq

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/124035.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

虹科分享|确保冻干工艺开发中精确测量和数据完整性的5步指南

文章来源&#xff1a;虹科环境监测技术 阅读原文&#xff1a;虹科分享 | 确保冻干工艺开发中精确测量和数据完整性的5步指南 一、介绍 冻干周期的工艺开发在冻干中起着至关重要的作用&#xff0c;因为它可以优化关键工艺参数&#xff0c;以实现理想的产品质量和工艺一致性。优…

MappingMongoConverter原生mongo 枚举类ENUM映射使用的是name

j.l.IllegalArgumentException: No enum constant com.xxx.valobj.TypeEnum.stringat java.lang.Enum.valueOf

*Django中的Ajax 纯js的书写样式1

搭建项目 建立一个Djano项目&#xff0c;建立一个app&#xff0c;建立路径&#xff0c;视图函数大多为render, Ajax的创建 urls.py path(index/,views.index), path(index2/,views.index2), views.py def index(request):return render(request,01.html) def index2(requ…

Python 读取 Word 详解(python-docx)

文章目录 1 概述1.1 第三方库&#xff1a;python-docx 2 新建文档2.1 空白文档2.2 标题2.3 段落2.4 文本2.5 字体2.6 图片2.7 表格 3 扩展3.1 修改文档3.2 读取文档 1 概述 1.1 第三方库&#xff1a;python-docx > pip install python-docx2 新建文档 2.1 空白文档 impo…

Python运维学习Day02-subprocess/threading/psutil

文章目录 1. 检测网段在线主机2. 获取系统变量的模块 psutil 1. 检测网段在线主机 import subprocessdef checkIP(ip):cmd fping -n 1 -w 1 {ip}null open(nlll,modewb)status subprocess.call(cmd,shellTrue,stdoutnull,stderrnull)if status 0:print(f"主机[{ip}]在…

ue5 右击.uproject generator vs project file 错误

出现如下错误 Unable to find valid 14.31.31103 C toolchain for VisualStudio2022 x64 就算你升级了你的 vs installer 也不好使 那是因为 在C:\Users\{YourUserName}\AppData\Roaming\Unreal Engine\UnrealBuildTool\BuildConfiguration.xml 这个缓存配置文件中写死了 14…

leetcode-链表

链表是一个用指针串联起来的线性结构&#xff0c;每个结点由数据域和指针域构成&#xff0c;指针域存放的是指向下一个节点的指针&#xff0c;最后一个节点指向NULL&#xff0c;第一个结点称为头节点head。 常见的链表有单链表、双向链表、循环链表。双向链表就是多了一个pre指…

​轻量应用服务器有什么优势?如何评价亚马逊云科技轻量应用服务器?

什么是轻量应用服务器&#xff1f; 随着如今各行各业对云计算的需求越来越多&#xff0c;云服务器也被越来越多的企业所广泛采用。其中&#xff0c;轻量应用服务器是一种简单、高效、可靠的云计算服务&#xff0c;能够为开发人员、企业和个人提供轻量级的虚拟专用服务器&#…

AWTK 液体流动效果控件发布

液体流动效果控件。 主要特色&#xff1a; 支持水平和垂直方向。支持正向和反向流动。支持设置头尾的图片。支持设置流动的图片。支持设置速度的快慢。支持启停操作。 准备 获取 awtk 并编译 git clone https://github.com/zlgopen/awtk.git cd awtk; scons; cd -运行 生成…

JMeter简单使用

JMeter是一个功能强大的开源性能测试工具&#xff0c;用于对各种应用程序、协议和服务器进行性能和负载测试。它被广泛用于测试Web应用程序的性能&#xff0c;并可以模拟多种负载条件和行为。 JMeter使用 添加线程组 设置线程组的配置 设置请求 配置请求 添加监听器 查看压…

JVM虚拟机:Java对象的头信息有什么?

本文重点 在前面的课程中,我们学习了对象头,其中对象头包含Mark Word和class pointer,当然数组还会有一个数组长度。本文主要分析Mark Work中包含的信息。 Mark Word 以下两张图是一个意思: 32位 32位 64位 以上就是Mark Word会存储的信息,这个意思是说Java对象在不同…

计网小题题库整理第一轮(面向期末基础)(2)

该系列第二期&#xff0c;第一期链接在这~ 计网小题题库整理第一轮&#xff08;面向期末基础&#xff09;&#xff08;1&#xff09;https://blog.csdn.net/jsl123x/article/details/134030486?spm1001.2014.3001.5501 一.选择题 1、Internet的前身是 &#xff08;C &#x…

2015年亚太杯APMCM数学建模大赛B题城市公共交通服务水平动态评价模型求解全过程文档及程序

2015年亚太杯APMCM数学建模大赛 B题 城市公共交通服务水平动态评价模型 原题再现 城市公共交通服务评价是城市公共交通系统建设和提高公共交通运营效率的重要组成部分。对于公交企业&#xff0c;管理和规划部门&#xff0c;传统公交车站、线路和换乘枢纽的规划数据只是基于主…

【MySQL索引与优化篇】InnoDB数据存储结构

文章目录 1. 数据库的存储结构:页1.1 磁盘与内存交互基本单位:页1.2 页结构概述1.3 页的上层结构 2. 页的内部结构3. InnoDB行格式(或记录格式)3.1 Compact行格式3.2 Dynamic和Compressed行格式3.3 Redundant行格式 4. 区、段与碎片区4.1 为什么要有区&#xff1f;4.2 为什么要…

Ortec974A EPICS IOC程序

1&#xff09; 创建一个用户存放这个IOC程序结构的目录&#xff1a; rootorangepi4-lts:/usr/local/EPICS/program# mkdir ortec974A rootorangepi4-lts:/usr/local/EPICS/program# cd ortec974A/ rootorangepi4-lts:/usr/local/EPICS/program/ortec974A# ls2&#xff09;使用…

mediapipe 训练自有图像数据分类

参考&#xff1a; https://developers.google.com/mediapipe/solutions/customization/image_classifier https://colab.research.google.com/github/googlesamples/mediapipe/blob/main/examples/customization/image_classifier.ipynb#scrollToplvO-YmcQn5g 安装&#xff1a…

CSS中的栅格布局

CSS中的栅格布局 在写前端项目的时候&#xff0c;我之前一直习惯使用flex布局&#xff0c;flex布局写起来比较随心&#xff0c;几乎可以实现任意形式的页面布局。不过自从B占看到某位大佬的grid布局后&#xff0c;发现布局居然还可以这么玩&#xff0c;正好自己在写一个vue3的…

【大数据Hive】hive 表数据优化使用详解

目录 一、前言 二、hive 常用数据存储格式 2.1 文件格式-TextFile 2.1.1 操作演示 2.2 文件格式 - SequenceFile 2.2.1 操作演示 2.3 文件格式 -Parquet 2.3.1 Parquet简介 2.3.2 操作演示 2.4 文件格式-ORC 2.4.1 ORC介绍 2.4.2 操作演示 三、hive 存储数据压缩优…

在线主动学习算法评估策略:prequential evaluation procedure

在线主动学习算法评估策略&#xff1a;prequential evaluation procedure 在在线主动学习领域(Online Active Learning)&#xff0c;对在线主动学习算法的评估策略有多种方法&#xff0c;而现如今常用的方法是prequential evaluation procedure(出自论文《High density-focuse…

c++二叉树遍历

参考文献 数据结构c语言版&#xff0c;严蔚敏_吴伟民著。 二叉树 中序遍历代码实现 #include<vector> #include<iostream> using namespace std;//Definition for a binary tree node. struct TreeNode {int val;TreeNode *left;TreeNode *right;TreeNode() : v…