基于Java,SpringBoot,Vue,UniAPP智能停车场微信小程序管理系统设计

摘要

随着城市汽车保有量的持续增长,停车场管理面临着效率低下、智能化程度不足等诸多挑战。为提升停车场管理的智能化水平和用户体验,本文设计并实现了一款基于Java、SpringBoot、Vue和UniAPP的智能停车场微信小程序管理系统。该系统采用Java作为后端开发语言,利用SpringBoot框架简化开发流程,提高系统的稳定性和可维护性。前端部分,运用Vue进行管理端页面的构建,实现高效的用户交互体验;同时,使用UniAPP开发微信小程序,便于用户在移动端便捷操作。系统涵盖了停车场信息管理、车位实时监控、车辆进出管理、在线缴费、订单查询等功能模块。通过对系统的功能测试和性能评估,结果表明该系统能够有效提高停车场的管理效率,优化用户停车体验,具有较高的实用性和推广价值,为智能停车场管理提供了一种切实可行的解决方案。 希望以上内容对你有所帮助,若你还需要对摘要的字数、侧重点等方面进行调整,欢迎继续向我提问。

主要功能

1.用户端多种方式登陆(微信授权、注册登录)

2.个人信息:头像、昵称、性别、手机号、车牌号(可有多个)

3.修改密码:原密码验证,修改密码:手机号验证

4.钱包充值:用户充值到钱包

5.在线支付:钱包自动扣费(低于某值,提醒用户充值)

6.对经常停的停车场,可以充值包月、包年,一次性支付,就不收停车费了

7.采用积分制:停车次数或者停车时长获得对应积分。积分可用于获得免费停车时长,兑换免费停车时长后停车自动扣时长。

8.缴费记录:可以查看每次缴费详细信息

9.停车场收藏、发票

10.系统通知:向用户发送订单状态变化通知,如预订成功、支付成功、订单取消等

11.车位预警:某停车场车位不足,对经常停该停车场的用户,进行车位预警通知

12.意见反馈,调查问卷(满意度调查)

13.停车场导航:根据地图导航到目的停车场

14.停车位预约:预定选定停车场的停车位,推荐该停车场车位,用户可查看或取消预订信息。可提前10分钟取消。未在规定时间内到达,则取消预约,并扣费惩罚。

15.搜索目的地停车场

16.停车场列表展示: 推荐停车场; 向用户展示附近的停车场信息或定位某地点附近停车场,包括停车场名称、地址、剩余车位数等。 可根据距离、价格、评价、是否收费等条件进行排序。

17.停车场详情查看: 用户可查看停车场的详细信息,如是否收费、营业时间等。 显示实时的车位状态,包括空闲车位数、已占用车位数、预约车位数等。 提供用户评价和评分(停过车的用户)。

18.后台对前台功能做出适当的管理,统计分析每个停车场的日收入、月收入、人流量等。

主要技术

后端:JAVA语言,SpringBoot框架,MySQL数据库,Maven依赖管理等;

前端:基于Vue的UniAPP框架,可编译成微信小程序。

部分代码展示

复制代码
<template>
	<view class="warp">
		
		<view class="all_title_box">
			<view class="title">停车场信息</view>
		</view>
		
		<!-- <view class="car_park u-m-t-30" style="width: 100%;" >
			<picker @change="car_confirm" :value="index" :range="columns" style="width: 100%;">
				<view class="uni-input">{{columns[index]}}</view>
			</picker>
			<u-icon name="arrow-down" color="#999" size="16"></u-icon>
		</view> -->
		
		<!-- <u-subsection :list="tagList" :current="current" @change="sectionChange"></u-subsection> -->
		
		<view v-for="(item,index) in parkInfo" :key="index" :class="'card-bg'+(index%2==0?'':2) " class="view-shadow padding-15 margin-t text-shadow text-bold" style="border-radius: 30rpx;width:100%;">
			<view style="width: 100%;max-width: 80vw;">
				<view class="v-flex v-r-between padding-2 text-shadow">
					 <view class="v-flex v-r-left padding-2">
						 <u-icon name="car-fill" color="#2b85e4" size="30"></u-icon>
						 <view class="text-bold text-middle " style="padding-left: 10rpx;">{{item.name}}</view>
					 </view>
					 <view class="v-flex v-c-center" style="width: 20%;"><u-icon color="#ff9900" size="20" name="star-fill"></u-icon><text style="margin-left: 10rpx;">{{item.star||0}}</text></view>
				</view>
				<view class="v-flex v-r-between padding-2" style="width: 90vw;">
					<view class="v-flex v-r-left v-c-center">
						<view style="min-width: 90rpx;"  >位置:</view>
						<text class="text-ellipsis" >{{item.address}}</text>
					</view>
					
				</view>
				<view class="v-flex v-r-between padding-2" style="width: 90vw;">
					<view class="v-flex v-r-between" style="min-width: 300rpx;flex-wrap: nowrap;">距离:{{item.distance}}</view>
				</view>
				<view class="v-flex v-r-between padding-2">
					<view>空位:{{getSpace(item.parkItem)}}/{{item.num}}</view>
				</view>
				<view class="v-flex v-r-between padding-2 text-bold">
					<view class="text-blue" style="text-shadow: none;"> {{ item.price <= 0 ?'免费停车':(item.freeTime+"分免费,"+(item.price * 60)+"元/时") }}</view>
					<view class=" v-flex v-r-center v-c-center" style="text-shadow: none;"> 
						<view class="margin-r v-flex v-r-center v-c-center" @click="collect()"><u-icon color="#f6ad55" name="star-fill"></u-icon>收藏</view>
						<view class="margin-l v-flex v-r-center v-c-center" @click="toMap"><u-icon color="#409EFF" name="map-fill"></u-icon>导航</view>
					</view>
					
				</view>
			</view>
			
		</view>
		<view class="all_title_box">
			<view class="title">车位信息</view>
		</view>
		<view class="lattice_box" style="width: 100%;">
			<view class="park-content">
				<view @click="order(item)" v-for="(item,index) in carParkItems" :key="index" class="demo-layout" :class="item.stat == 1?'parking':''">
					<view>{{item.itemName}}</view>
					<view>{{item.stat == 0?'空置':(item.stat==1?'使用中':'已预约')}}</view>
				</view>
			</view>
		</view>	
		<view class="all_title_box">
			<view class="title">评价</view>
		</view>
		<view>
			<u-cell-group>
					<u-cell v-for="(item,index) in comment" :key="index" icon="chat-fill" :title="item.content" :value="item.star+'分'" :label="item.createTime"></u-cell>
				</u-cell-group>
		</view>
		<u-popup :show="showCars" mode="center" :round="10" :closeable="true" @close="showCars=false">
			<view style="width: 500rpx;margin-top: 100rpx;">
				<u-cell-group>
					<u-cell v-for="(item,index) in allUserInfo.userItem" :key="index" icon="car-fill" :title="item.carNo" value="选择" @tap="setCar(item)"></u-cell>
				</u-cell-group>
			</view>
		</u-popup>
		<u-datetime-picker
		:minHour="get20Min().getHours()"
		:minMinute="get20Min().getMinutes()"
		                :show="showTime"
		                v-model="selTime"
		                mode="time" @confirm="subTime" @cancel="showTime=false"></u-datetime-picker>
	</view>
</template>

演示视频

Java,SpringBoot,uniApp停车场微信小程序

相关推荐
小丁爱养花2 分钟前
MyBatis-Plus:告别手写 SQL 的高效之道
java·开发语言·后端·spring·mybatis
黄名富4 分钟前
深入探究 JVM 堆的垃圾回收机制(二)— 回收
java·jvm·算法·系统架构
威迪斯特4 分钟前
Linux环境变量:深入解析与实用指南
java·linux·运维·服务器·管理·环境变量·用户环境变量
述雾学java19 分钟前
Servlet、Servlet的5个接口方法、生命周期、以及模拟实现 HttpServlet 来写接口的基本原理
java·servlet·网络编程·java基础
yzhSWJ44 分钟前
vue设置自定义logo跟标题
前端·javascript·vue.js
绿蚁新亭1 小时前
Docker安装,并pullMySQL和redis
java
无极低码1 小时前
基于deepseek的智能语音客服【第二讲】后端异步接口调用封装
java·人工智能·deepseek
江沉晚呤时1 小时前
深入解析 C# 中的装饰器模式(Decorator Pattern)
java·开发语言·javascript·jvm·microsoft·.netcore
vvilkim1 小时前
Vue.js 中的 Tree Shaking:优化你的应用性能
前端·javascript·vue.js
浪裡遊2 小时前
uniapp中的vue组件与组件使用差异
前端·vue.js·uni-app