基于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>