基于java,SpringBoot,Vue,uniapp的共享充电宝微信小程序

摘要

本项目是一个基于Java、SpringBoot、Vue和uniapp技术栈的共享充电宝微信小程序。该小程序后端利用Java语言结合SpringBoot框架进行开发，确保了服务的高效性和稳定性。前端则采用流行的Vue.js框架配合uniapp，以实现跨平台的功能，特别是对微信小程序的良好支持。

整个系统设计旨在简化用户租借共享充电宝的过程，提供一个简洁、直观的用户界面，并通过微信生态系统实现无缝的用户体验。系统架构考虑了易用性、扩展性和维护性，以满足未来可能增长的用户需求和技术演进。

通过这个小程序，用户能够享受到便捷的共享充电服务，而管理者也能通过后台系统有效地管理充电宝资源和用户信息。整体上，该项目体现了现代Web和移动应用开发的最佳实践，为用户提供了一个可靠的共享充电解决方案。

实现的功能

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

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

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

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

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

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

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

用到的技术

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

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

部分代码展示

<template>
	<view style="padding: 20rpx;">
		<view class="map-box" v-for="(item,index) in orderList">
			<view class="bootom-list">
				<view class="list-block">
					<image class="map-item-img"
						src="https://cqrs.itux.cn/assets/addons/gaga/img/app/9.png" mode="">
					</image>
					<view class="item-block" >
						<view class="item-header">
							<view class="item-header-left">
								<image style="width: 50rpx;height: 50rpx;" class="logo" src="../../static/images/nuoMi.png" mode=""></image>
								<view class="cong-name">{{ item.title }}</view>
							</view>
							<view class="item-header-right">
								<view class="distance">单号:{{ item.id }}</view>
							</view>
						</view>
						<view class="item-type">
							<view class="type" >
								地址：<text style="color: cornflowerblue;">{{ item.station.area }}</text>
							</view>
						</view>
						<view class="item-type">
							<view class="type">
								{{ item.stationItem.title +"-充电宝" }}
							</view>
							<view class="type u-p-l-20" :style="{color: item.state==0 ?'forestgreen':'red'}">
								{{ item.state == 0 ?'充电中':'已完成'}}
							</view>
							<view class="type u-p-l-20" style="color:goldenrod;" v-if="item.state==2">
								<text class="u-tips-color"></text>{{ item.star}}星评价
							</view>
						</view>
						
						<view class="item-price" v-if="item.state!=0">
							
							<view class="price">
								<view class="unit-money inline u-tips-color" >总计：￥</view>
								<view class="inline">{{item.price}}</view>
								<view class="unit inline"> 元</view>
							</view>
						</view>
						<view class="item-header-right">
							<view class="distance u-tips-color">{{ item.createTime +"  "}} 开始充电</view>
						</view>
						<view class="item-header-right"  v-if="item.state!=0">
							<view class="distance u-tips-color">{{ item.endTime+" " }} 结束充电</view>
						</view>
						
					</view>
					
					<view  v-if="item.state==0" class="navigation" @click="endOrder(item)">
						<view>结束充电</view>
					</view>
					<view v-if="item.state==1" class="navigation" @click="change(item)">
						<view>评价</view>
					</view>
					
				</view>
			</view>
		</view>
		
		
		<u-select @confirm="confirm" v-model="show" :list="list"></u-select>
			
	</view>
</template>

演示视频

基于JAVA,Vue和UniApp共享充电宝微信小程序设计