摘要
本项目旨在基于Java、SpringBoot、Vue及uniapp技术栈开发一款新能源汽车充电桩微信小程序,以解决用户充电过程中找桩难、操作繁琐、信息滞后等痛点,提升充电服务的便捷性与智能化水平。后端采用Java结合SpringBoot框架搭建轻量化服务,通过SpringMVC实现业务逻辑分层,利用MyBatis-Plus操作MySQL数据库存储管理充电桩信息、用户数据、订单记录等核心数据,并集成Spring Security或JWT保障认证与数据传输安全;前端基于Vue.js构建界面,采用组件化开发模式实现页面复用与动态渲染,借助uniapp跨平台框架实现微信小程序、H5等多端适配,同时结合微信小程序原生API实现定位、地图导航、支付等功能,前后端通过RESTful API以JSON格式交互数据。
本项目聚焦于开发一款基于 Java、Spring Boot、Vue 及 uniapp 的新能源汽车充电桩微信小程序,以解决用户在充电过程中遇到的找桩难、操作繁琐和信息滞后等问题。 在技术架构上,后端采用 Java 结合 Spring Boot 框架,搭建起轻量化且具备高可扩展性的服务体系。借助 Spring MVC 实现业务逻辑的分层处理,运用 MyBatis - Plus 对 MySQL 数据库进行操作,高效存储和管理充电桩信息、用户数据以及订单记录等核心数据。同时,集成 Spring Security 或 JWT 令牌机制,保障用户认证和数据传输的安全性。前端使用 Vue.js 框架构建小程序界面,利用其组件化开发模式实现页面的复用和动态渲染。通过 uniapp 跨平台开发框架,实现一次编码适配微信小程序、H5 等多端部署,降低开发和维护成本。结合微信小程序原生 API,如定位、地图组件和支付接口,实现充电桩地图定位、路线导航和在线支付等功能。前后端通过 RESTful API 以 JSON 格式进行数据交互,保证接口规范和跨平台兼容性。
综上所述,此新能源汽车充电桩微信小程序利用先进的技术架构和丰富的功能设计,有效提升了新能源汽车充电服务的便捷性和智能化水平,具有重要的应用价值和推广意义。
功能
本系统后台管理是PC浏览器端和小程序端共存,用户端是微信小程序。
功能应该包括:用户注册登录、会员管理、订单管理、留言管理、共享充电桩管理等功能,前台用户还可以进行资讯阅读、充电下单等操作。
注册、登录:管理员使用已经创建的账号信息可以登录后台管理系统。未注册的微信用户可以注册,有了账号后可以登录小程序;
会员管理:管理员可以查看所有注册会员信息,实现增删改查;
订单管理:管理员可以查看用户在小程序上的充电下单记录;
留言管理:主要是管理员对留言管理,进行增删改查;
共享充电桩管理:实现录入充电桩的所在充电站名称、停车场名称、所在位置(地图定位)、数量、收费、简介信息等。实现增删改查。
管理员可以给用户发消费券,用户在小程序端支付的时候可以抵扣充电费用,也可以查看已有的券,券分为已使用和未使用两种状态。
技术
后端 Java语言的SpringBoot框架、MySQL数据库、Maven依赖管理等;
前端 PC前端使用HTML页面、element-ui等,微信小程序使用Vue.js语法的UniApp框架。
小程序登录代码
<template>
<view class="container">
<view class="left-bottom-sign"></view>
<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
<view class="right-top-sign"></view>
<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
<view class="wrapper">
<view class="left-top-sign">LOGIN</view>
<view class="welcome">
欢迎回来!
</view>
<view class="input-content">
<view class="input-item">
<text class="tit">用户名</text>
<input
type="text"
placeholder="请输入用户名"
maxlength="11"
v-model="data.nick"
/>
</view>
<view class="input-item">
<text class="tit">密码</text>
<input
type="text"
v-model="data.pass"
placeholder="请输入密码"
placeholder-class="input-empty"
maxlength="20"
password
/>
</view>
</view>
<view style="text-align: center;width: 100vw;display: flex;justify-content: center;">
<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
</view>
<view class="forget-section">
还没有账号?
<text @click="toRegist">马上注册</text>
</view>
</view>
<!-- <view class="register-section">
还没有账号?
<text @click="toRegist">马上注册</text>
</view> -->
</view>
</template>
<script>
import appRequest from "@/common/appRequestUrl.js";
import base64 from "@/common/base64.js"
import {
mapMutations
} from 'vuex';
export default{
data(){
return {
data:{
nick:"",
pass:""
},
mobile: '',
password: '',
logining: false
}
},
onLoad(){
},
methods: {
//...mapMutations(['login']),
inputChange(e){
const key = e.currentTarget.dataset.key;
this[key] = e.detail.value;
},
navBack(){
uni.switchTab({
url:"../app/index"
});
},
toRegist(){
uni.navigateTo({
url:"regist"
})
},
toLogin(){
this.logining = true;
if(!this.data.nick || !this.data.pass){
this.$api.msg('请填写完整');
this.logining = false;
return;
}
let base64en = new base64()
this.data.pass = base64en.encode(this.data.pass);
let _this = this;
appRequest.request({
method: "POST",
data: this.data,
header : {
'content-type': 'application/x-www-form-urlencoded'
},
url: appRequest.urlMap.login,
success: function(res) {
let su = false;
if(res.data.code == 200){
_this.$api.msg('登录成功');
// if(res.data.data.type != 1){
// _this.$api.msg("商家和管理员请使用PC端登录");
// return;
// }
try {
uni.setStorageSync('userInfo', res.data.data);
su = true;
} catch (e) {
// console.log(JSON.stringify(e));
uni.clearStorage();
_this.logining = false;
_this.data.pass = "";
}
}else{
_this.$api.msg(res.data.msg);
_this.logining = false;
_this.data.pass = "";
}
if(su){
uni.switchTab({
url:"../app/index"
});
}
},
fail: function(res) {
_this.$api.msg("请求异常");
_this.logining = false;
_this.data.pass = "";
}
})
}
},
}
</script>
演示视频
Java,SpringBoot,uniAPP微信充电桩小程序