基于Vue uniapp和java SpringBoot的汽车充电桩微信小程序

摘要：

        随着新能源汽车市场的迅猛发展，汽车充电桩的需求日益增长。为了满足市场需求，本课题开发了一款基于Java SpringBoot后端框架和Vue uniapp前端框架的汽车充电桩微信小程序。该小程序旨在为用户提供一个简洁高效的充电服务平台，同时为充电桩运营商提供强大的后台管理功能。通过利用SpringBoot的快速开发特性和uni-app的跨平台能力，本项目成功实现了一个既能够适应不断变化的市场需求，又能够保证用户体验的充电服务解决方案。整体系统设计考虑了易用性、稳定性与扩展性，以期在未来的发展中持续满足用户需求和业务拓展。

实现的功能：

本系统后台管理是PC浏览器端，用户端是微信小程序。

功能应该包括：用户注册登录、会员管理、订单管理、留言管理、共享充电桩管理等功能，前台用户还可以进行资讯阅读、充电下单等操作。

注册、登录：管理员使用已经创建的账号信息可以登录后台管理系统。未注册的微信用户可以注册，有了账号后可以登录小程序；

会员管理：管理员可以查看所有注册会员信息，实现增删改查；

订单管理：管理员可以查看用户在小程序上的充电下单记录；

留言管理：主要是管理员对留言管理，进行增删改查；

共享充电桩管理：实现录入充电桩的所在充电站名称、停车场名称、所在位置、数量、收费、简介信息等。实现增删改查。

用到的技术：

后端 java语言的SpringBoot框架、MySql数据库、Maven依赖管理等；

前端 PC前端使用element-ui、微信小程序使用Vue.js语法的UniApp框架。

部分代码展示

<template><view><view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30"><view class="u-m-r-10"><image style="width: 140px;height: 140px;" src="../../static/images/nuoMi.png"></image></view><view class="u-flex-1"><view class="u-font-18 u-p-b-20">{{user.nickName}}</view><view class="u-font-14 u-tips-color">车牌号:{{user.carNo}}</view><view class="u-font-14 u-tips-color">身份:{{user.type==1?'管理员':'会员'}}</view></view><!-- <view class="u-m-l-10 u-p-10"><u-icon name="scan" color="#969799" size="28"></u-icon></view> --><!-- <view class="u-m-l-10 u-p-10"><u-icon name="arrow-right" color="#969799" size="28"></u-icon></view> --></view><view class="u-m-t-20"><u-cell-group><u-cell-item :iconStyle="{color:'#3f80de'}" @click="toCollect" icon="setting" title="我的收藏"></u-cell-item><u-cell-item :iconStyle="{color:'#3f80de'}" @click="showInfo" icon="setting" title="留言"></u-cell-item><u-cell-item :iconStyle="{color:'#3f80de'}" @click="clear" icon="man-add-fill" title="清除缓存"></u-cell-item><u-cell-item :iconStyle="{color:'#3f80de'}" @click="showAppInfo" icon="question-circle-fill" title="关于小程序"></u-cell-item></u-cell-group></view><!-- <view class="u-m-t-20"><u-cell-group><u-cell-item :iconStyle="{color:'#3f80de'}" icon="setting" title="设置"></u-cell-item></u-cell-group></view> --><u-select @confirm="selConfirm" v-model="show" :list="deptList"></u-select><u-popup v-model="showModel" mode="center" border-radius="14" width="600"><view class="c-model-view u-p-25"><u-field style="height: 25vh;" label="留言" type="textarea" placeholder="请输入留言内容"v-model="commentText"></u-field><u-button type="primary" class="u-m-t-50" @click="submitComment"  :ripple="true">发布</u-button></view></u-popup></view>
</template><script>import appRequest from "@/common/appRequestUrl.js"export default {data() {return {commentText:"",showModel:false,pic: 'https://uviewui.com/common/logo.png',show: false,nick: "未登录",userNo: "未绑定",deptName: "未绑定",user: "",admin: "",c:[],selObj:{},student:{name:"",userNo:"",deptFk:"",project:"",phone:"",deptNo:""},deptList:[]}},onShow:function() {this.user = appRequest.getUserInfo();if(!this.user){uni.navigateTo({url:"/pages/login/login"})}console.log(this.user.carNo);},methods: {toCollect(){uni.navigateTo({url:"/pages/app/collect/collect"})},submitComment(){if(!this.commentText){uni.showToast({title:"请输入留言",icon:"none"});return;}let _this = this;appRequest.request({method: "POST",data: {content:this.commentText,type:3,uid:this.user.uid,uname:this.user.uname},url: appRequest.urlMap.addNmComment,success: function(res) {if(res.data.code == 200){_this.$api.msg("提交成功");_this.showModel = false;}else{_this.$api.msg(res.data.msg);}},fail: function(res) {_this.$api.msg("提交失败");}})},showInfo(){this.showModel = true;this.commentText="";},showAppInfo:function(){uni.showModal({title:"关于",content:"糯米充电，版本号0.012",showCancel:false})},clear:function(){uni.clearStorageSync();uni.showToast({title:"已清除",icon:"none"})uni.navigateTo({url:"/pages/login/login"})},selConfirm(e) {this.selObj = e[0];for(let i=0;i<this.deptList.length;i++){if(this.deptList[i].value == this.selObj.value){this.selObj['no'] = this.deptList[i].no;break;}}},getDeptInfo: function(level) {let _this = this;appRequest.request({method: "GET",url: appRequest.getDeptData,success: function(res) {_this.deptList = [];res.data.data.map(function(item, index, arr) {if(level == item.level){_this.deptList.push({value: item.id,label: item.name,no:item.deptNo})}});},fail: function(res) {}})},submitCheck(){let _this = this;_this.student.deptFk = _this.selObj.value;_this.student.deptNo = _this.selObj.no;console.log(JSON.stringify(_this.student))if(!_this.student.name || !_this.student.userNo || !_this.student.deptFk || !_this.student.project ){uni.showToast({title:"请填写完整",icon:"none"})return;}try{let year = Number((new Date().getFullYear() + "").slice(2,4));let usrYear = Number((_this.student.userNo+"").slice(0,2));let dept = (_this.student.userNo+"").slice(2,4);if(year - usrYear > 4 ||  year - usrYear < 0 || dept != _this.selObj.no || (_this.student.userNo+"").length!=10){uni.showToast({title:"学号错误",icon:"error"})return;}}catch(e){//TODO handle the exceptionuni.showToast({title:"验证错误",icon:"error"})return;}},checkStudent() {let _this = this;// if (this.userInfo.token) {// 	uni.showToast({// 		title: '已完成学生认证,无需重复认证',// 		icon: "none"// 	})// 	return;// }_this.showModel = true;_this.getDeptInfo(1);}}}
</script>

演示视频

基于java和Vue uniapp的汽车充电桩微信小程序

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

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

相关文章

Pytest中doctests的测试方法应用！

Pytest中doctests的测试方法应用！

在 Python 的测试生态中&#xff0c;Pytest 提供了多种灵活且强大的测试工具。其中&#xff0c;doctests 是一种独特而直观的测试方法&#xff0c;通过直接从文档注释中提取和执行测试用例&#xff0c;确保代码示例的正确性。本文将深入介绍 Pytest 中 doctests 的测试方法&…
阅读更多...
如何使用Python+Flask搭建本地Web站点并结合内网穿透公网访问？

如何使用Python+Flask搭建本地Web站点并结合内网穿透公网访问？

文章目录 前言1. 安装部署Flask并制作SayHello问答界面2. 安装Cpolar内网穿透3. 配置Flask的问答界面公网访问地址4. 公网远程访问Flask的问答界面 前言 Flask是一个Python编写的Web微框架&#xff0c;让我们可以使用Python语言快速实现一个网站或Web服务&#xff0c;本期教程…
阅读更多...
云计算底层技术奥秘、磁盘技术揭秘、虚拟化管理、公有云概述

云计算底层技术奥秘、磁盘技术揭秘、虚拟化管理、公有云概述

云计算基础 实验图例 虚拟化平台安装 创建虚拟机 1、创建虚拟机 2cpu&#xff0c;4G内存&#xff08;默认用户名: root 密码: a&#xff09; 2、验证 ecs 是否支持虚拟化 [rootecs ~]# grep -Po "vmx|svm" /proc/cpuinfovmx... ...[rootecs ~]# lsmod |grep kvm…
阅读更多...
OpenHarmony—Gradle工程适配为Hvigor工程

OpenHarmony—Gradle工程适配为Hvigor工程

该适配场景适用于开发者希望将原OpenHarmony API 7的工程升级到OpenHarmony API 9的工程。 原OpenHarmony API 7的工程采用的是Gradle自动化构建工具&#xff0c;而OpenHarmony API 9的工程则采用Hvigor自动化构建工具&#xff0c;由于Gradle构建工具和Hvigor构建工具的配置文…
阅读更多...
自动化测试系列 —— UI自动化测试！

自动化测试系列 —— UI自动化测试！

UI 测试是一种测试类型&#xff0c;也称为用户界面测试&#xff0c;通过该测试&#xff0c;我们检查应用程序的界面是否工作正常或是否存在任何妨碍用户行为且不符合书面规格的 BUG。了解用户将如何在用户和网站之间进行交互以执行 UI 测试至关重要&#xff0c;通过执行 UI 测试…
阅读更多...
win11安装Telnet功能

win11安装Telnet功能

win11上很多设置都可以直接搜索了&#xff0c;菜单功能也总是换位置&#xff0c;记录一下。 搜索可选功能 选择可选功能 或者 添加可选功能到最地下选更多Windows功能 选择Telnet客户端即可
阅读更多...
企业局域网传输文件最快的方式有哪些？

企业局域网传输文件最快的方式有哪些？

在当今企业运营的背景下&#xff0c;文件的传递和交换&#xff0c;无论是在公司内部网络还是跨越不同网络环境&#xff0c;都是日常业务运作的关键环节。这种文件交换对于团队协作以及与外部合作伙伴的数据共享至关重要&#xff0c;而一个高效且安全的文件传输系统则是提高工作…
阅读更多...
QT使用QFileSystemModel实现的文件资源管理器(开源)

QT使用QFileSystemModel实现的文件资源管理器(开源)

文章目录 效果图现实的功能总体框架功能介绍视图双击进入处理复制与剪切粘贴重命名&#xff0c;新建显示文件详细信息文件路径导航栏 总结 效果图 现实的功能 支持文件/文件夹复制&#xff0c;粘贴&#xff0c;剪切&#xff0c;删除&#xff0c;重命名的基本操作支持打开图片&…
阅读更多...
git远程仓库基本操作

git远程仓库基本操作

目录 gitremote &#xff08;查看远程仓库&#xff09; git remote add [仓库名] [url] git clone [url]&#xff08;克隆远程仓库到本地&#xff09; git push [名][分支名]&#xff08;提交到远程仓库&#xff09;​编辑 git pull [名][分支名]从远程仓库拉取​编辑 注意操作…
阅读更多...
图形绘制-仪表盘（3）

图形绘制-仪表盘（3）

本章节我们介绍如何绘制仪表盘内的车速、单位&#xff08;Km/h&#xff09;、标题等信息。 效果如下&#xff1a; 关于通过继承重写QWidget的绘制事件paintEvent()&#xff0c;来绘制仪表盘的基础操作&#xff0c;请看 《图形绘制-仪表盘&#xff08;1&#xff09;-CSDN博客》…
阅读更多...
鸿蒙南向开发——GN快速入门指南

鸿蒙南向开发——GN快速入门指南

运行GN(Generate Ninja) 运行gn&#xff0c;你只需从命令行运行gn&#xff0c;对于大型项目&#xff0c;GN是与源码一起的。 对于Chromium和基于Chromium的项目&#xff0c;有一个在depot_tools中的脚本&#xff0c;它需要加入到你的PATH环境变量中。该脚本将在包含当前目录的…
阅读更多...
2024年【陕西省安全员B证】最新解析及陕西省安全员B证证考试

2024年【陕西省安全员B证】最新解析及陕西省安全员B证证考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 陕西省安全员B证最新解析参考答案及陕西省安全员B证考试试题解析是安全生产模拟考试一点通题库老师及陕西省安全员B证操作证已考过的学员汇总&#xff0c;相对有效帮助陕西省安全员B证证考试学员顺利通过考试。 1、【…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023