Vue+SpringBoot打造智能停车场管理系统(附源码文档)(一)

简介: Vue+SpringBoot打造智能停车场管理系统(附源码文档)

项目源码及文档下载https://download.csdn.net/download/qq_41464123/87894045

项目交流讨论/文档预览帖https://bbs.csdn.net/topics/615889652

项目编号:S005

一、摘要

随着我国经济的不断发展,人民生活水平的也日益提高,外出购物、旅游意向也越来越强,对交通出行的需求也越来越大。在一些大型商贸场所,无论是人流量还是车流都格外大,而道路承载压力也随之增加,所以城市停车问题的解决也越发急迫。由此观之,如何解决商场等人流量多等地的停车问题,是解决交通拥堵的关键点。

综上所述,设计一个智能停车场管理系统能够简化人们停车流程,提高停车效率,从而解决拥挤问题,节省人们时间的同时也间接推动经济发展。本文研究的系统采用JAVA开发,智能停车场管理系统的应用取得了显著的效果。通过智能停车场管理系统的运行,停车场实现了车辆进出的自动化、停车场管理的精细化和收费流程的标准化,从而提高停车场管理效率和准确性,为停车场管理决策提供更完整、准确的数据支持。

  • 前端:Vue 2.7.10
  • 后端:Spring Boot 3.1.10
  • 数据库:MySQL 8.0.31

二、研究内容

能停车场管理系统包含的车主管理模块、车辆管理模块、停车场模块、停车记录模块、IC卡模块、IC卡挂失模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块,智能停车场管理系统基于角色的访问控制,给车主和停车场管理员使用,可将权限精确到按钮级别,您可以自定义角色并分配权限,系统适合设计精确的权限约束需求。

S005智能停车场管理系统录屏

A. 车主端功能

包括:我的车辆模块、我的停车模块、我的IC卡等模块。

  1. 我的车辆模块:用于车主查询自己的车辆数据,前端使用View UI组件库的Table组件来实现表格预览,包括车辆的车牌号、行驶证、车辆类型、车主姓名等数据,如对数据有异议,可以联系Button组件请求后端API接口,从而实现功能。
  2. 我的停车模块:用于车主查询自己的车辆的停车数据,前端使用View UI组件库的Form组件来实现,提交用户输入的表单数据,包括车辆的车牌号、停放开始时间、停放结束时间、停车费用等数据,如对数据有异议,可以联系系统管理员做核实处理。
  3. 我的停车模块:用于车主查询自己的IC卡数据,前端使用View UI组件库的List列表组件来实现,包括IC卡号、开卡日期、开卡经办人、服务电话等数据,如IC卡遗失,可以在线发起挂失手续。

B. 停车工作人员功能

包括:车辆管理、停车管理、IC卡管理模块。(提示:可以自助添加角色,可视化分配菜单权限实现)

  1. 车辆管理:受理车主提出的车辆新增、车辆编辑、车辆删除申请,增删改查由mybatis来实现。
  2. 停车管理:受理车主提出的停车数据更新业务,更新功能后端由mybatis来实现。
  3. IC卡管理:受理车主提出的挂失业务、开卡业务、余额充值业务,功能后端由mybatis来实现。

C. 系统管理员功能

在车主、停车工作人员所有功能的基础上,可以对系统角色权限进行更改维护、可以对停车费收费规则进行更新,采用RABC基于角色的访问控制,使用spring security 框架来实现鉴权控制。

1. 停车位模块

停车位是城市不可或缺的一部分,在城市和人民的生活、工作和流动中具有重要意义。随着城市化进程的加快和汽车保有量的增加,城市交通拥堵问题越来越明显。如果有足够的停车位,可以更好地引导交通,防止交通混乱,缓解交通拥堵,在城市内驾驶车辆的效率取决于停车位的数量和位置。良好的停车位规划和管理可以提高车辆停车效率,减少道路拥堵,提高城市交通效率。停车位的可用性直接影响市民的出行体验。当停车位紧张时,市民很难开车出去,如果有足够的停车位,市民出行将更加方便和舒适。停车位的可用性也会影响商业中心区域的吸引力,如果没有足够的停车位,消费者会选择其他商业中心,这将影响经济发展。

2. 车辆模块

车辆模块是智能停车场管理系统的关键组件之一,用于记录、管理和监控车辆信息和状态。车辆模块可以实现车辆进出的自动化和数据处理的自动化,从而提高停车管理的效率和准确性。通过车辆模块,停车可以为用户提供更智能、更方便的服务,减少用户等待时间和不良体验。车辆模块可以有效控制车辆的交通流量,缓解道路拥堵,改善城市交通拥堵问题。车辆模块可以记录和监控车辆的进出,可以减少非法侵入和车辆盗窃等安全问题。车辆模块在停车管理系统中具有重要的研究意义,可以提高停车管理的效率和服务质量,改善城市交通拥堵,加强安全监督管理,为停车管理提供数据支持。

3. 停车记录模块

停车记录是对车辆的停车位置、停留时间和计费状态等信息的有效记录和管理。停车记录可以让车主清楚地知道他们的车辆停在哪里和什么时候停,避免车辆被盗和其他安全问题。通过停车记录,可以获得停车位使用情况、停车流量等信息,让停车场管理者更好地分析和制定停车策略,帮助维护停车场的秩序和安全。停车记录也可以用于精细化管理,例如通过针对特定高峰时间和特定情况的差异化定价政策来提高停车利用率和管理效率。通过停车记录,可以了解车主的停车习惯和需求,为车主提供更好的停车服务,提高停车场的服务质量和用户体验。

4. IC卡模块

IC卡是智能卡的缩写,车主可以拥有一张或多张的IC卡,用于停车费用的缴纳,IC卡字段包括IC卡号、开卡日期、所属人、经办人、服务电话、余额、创建人、创建时间,车主可以申请新的IC卡,停车场管理员可以新增、挂失、编辑、条件查询车主的IC卡。

5. IC卡挂失模块

IC卡是一张实体卡,车主难免会遗失或损坏,当出现这类情况时则无法完成停车费用缴纳,这就需要建一个IC卡挂失模块,给车主的挂失卡替换为新的IC卡,IC卡挂失字段包括原卡号、新卡号、申请人、申请日期、申请状态、审核状态、经办人、创建时间,车主可以选择自己名下的IC卡发起挂失申请,停车场管理员可以审核车主的IC卡挂失申请。

三、界面展示

3.1 登录注册

登录界面的 Vue 代码如下。

<Tabs v-model="tabName" @on-click="changeTabName" class="loginTab">
    <TabPane label="账号密码登录" name="userAndPassword">
        <Form ref="usernameLoginForm" :model="form" :rules="usernameLoginFormRules" class="form">
            <FormItem prop="username" class="loginInput">
                <Row>
                    <Input v-model="form.username" size="large" clearable placeholder="登录账号" autocomplete="off">
                    <Icon class="iconfont icon-yonghu" slot="prefix" style="line-height:50px" />
                    </Input>
                </Row>
            </FormItem>
            <FormItem prop="password">
                <Input style="height:50px;line-height:50px" type="password" v-model="form.password" size="large" placeholder="请输入登录密码" password autocomplete="off">
                <Icon class="iconfont icon-mima1" slot="prefix" style="line-height:50px" />
                </Input>
            </FormItem>
            <FormItem prop="imgCode">
                <Row type="flex" justify="space-between" style="align-items: center;overflow: hidden;">
                    <Input v-model="form.imgCode" size="large" clearable placeholder="请输入验证码" :maxlength="10" class="input-verify" />
                    <div class="code-image" style="position:relative;font-size:12px;">
                        <Spin v-if="loadingCaptcha" fix></Spin>
                        <img :src="captchaImg" @click="getCaptchaImg" alt="验证码加载失败" style="width:110px;cursor:pointer;display:block" />
                    </div>
                </Row>
            </FormItem>
        </Form>
        <Row type="flex" justify="space-between" align="middle">
            <Checkbox v-model="saveLogin" size="large">是否自动登录</Checkbox>
            <router-link to="/regist">
                <a class="forget-pass">没有账号?点我注册</a>
            </router-link>
        </Row>
        <Row>
            <Button class="login-btn" type="primary" size="large" :loading="loading" @click="submitLogin" long>
                <span v-if="!loading" style="letter-spacing:20px; font-weight:bold">登录</span>
                <span v-else>正在登录...请稍后}</span>
            </Button>
        </Row>
    </TabPane>
    <TabPane label="企业微信扫码" name="mobile">
        <div id="qywxsmqywxsm"></div>
    </TabPane>
</Tabs>

查询用户(车主)的核心代码如下。

@RequestMapping(value = "/getUserList", method = RequestMethod.GET)
@ApiOperation(value = "查询所有车主")
public Result<List<User>> getUserList(@RequestParam Integer type){
    QueryWrapper<User> qw = new QueryWrapper<>();
    qw.eq("type",type);
    return new ResultUtil<List<User>>().setData(iUserService.list(qw));
}

3.2 车辆模块

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查询车辆")
public Result<IPage<Vehicle>> getByPage(@ModelAttribute Vehicle vehicle ,@ModelAttribute PageVo page){
    QueryWrapper<Vehicle> qw = new QueryWrapper<>();
    User currUser = securityUtil.getCurrUser();
    QueryWrapper<User> userQw = new QueryWrapper<>();
    userQw.eq("id",currUser.getId());
    userQw.inSql("id","SELECT user_id FROM a_user_role WHERE del_flag = 0 AND role_id = '1536606659751841799'");
    if(iUserService.count(userQw) < 1L) {
        qw.eq("owner_id",currUser.getId());
    }
    if(!ZwzNullUtils.isNull(vehicle.getCarNumber())) {
        qw.like("car_number",vehicle.getCarNumber());
    }
    if(!ZwzNullUtils.isNull(vehicle.getCarType())) {
        qw.like("car_type",vehicle.getCarType());
    }
    if(!ZwzNullUtils.isNull(vehicle.getOwnerName())) {
        qw.like("owner_name",vehicle.getOwnerName());
    }
    IPage<Vehicle> data = iVehicleService.page(PageUtil.initMpPage(page),qw);
    return new ResultUtil<IPage<Vehicle>>().setData(data);
}

@RequestMapping(value = "/insert", method = RequestMethod.POST)
@ApiOperation(value = "新增车辆")
public Result<Vehicle> insert(Vehicle vehicle){
    User user = iUserService.getById(vehicle.getOwnerId());
    if(user == null) {
        return ResultUtil.error("车主不存在");
    }
    vehicle.setOwnerName(user.getNickname());
    iVehicleService.saveOrUpdate(vehicle);
    return new ResultUtil<Vehicle>().setData(vehicle);
}
@RequestMapping(value = "/update", method = RequestMethod.POST)
@ApiOperation(value = "编辑车辆")
public Result<Vehicle> update(Vehicle vehicle){
    User user = iUserService.getById(vehicle.getOwnerId());
    if(user == null) {
        return ResultUtil.error("车主不存在");
    }
    vehicle.setOwnerName(user.getNickname());
    iVehicleService.saveOrUpdate(vehicle);
    return new ResultUtil<Vehicle>().setData(vehicle);
}

相关文章
|
9月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
932 1
|
5月前
|
前端开发 安全 Java
基于springboot+vue开发的会议预约管理系统
一个完整的会议预约管理系统,包含前端用户界面、管理后台和后端API服务。 ### 后端 - **框架**: Spring Boot 2.7.18 - **数据库**: MySQL 5.6+ - **ORM**: MyBatis Plus 3.5.3.1 - **安全**: Spring Security + JWT - **Java版本**: Java 11 ### 前端 - **框架**: Vue 3.3.4 - **UI组件**: Element Plus 2.3.8 - **构建工具**: Vite 4.4.5 - **状态管理**: Pinia 2.1.6 - **HTTP客户端
727 4
基于springboot+vue开发的会议预约管理系统
|
6月前
|
前端开发 JavaScript Java
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
本系统基于SpringBoot与Vue3开发,实现校园食堂评价功能。前台支持用户注册登录、食堂浏览、菜品查看及评价发布;后台提供食堂、菜品与评价管理模块,支持权限控制与数据维护。技术栈涵盖SpringBoot、MyBatisPlus、Vue3、ElementUI等,适配响应式布局,提供完整源码与数据库脚本,可直接运行部署。
377 6
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
|
8月前
|
监控 数据可视化 JavaScript
springboot + vue的MES系统生产计划管理源码
MES系统(制造执行系统)的生产计划管理功能是其核心模块之一,涵盖生产计划制定与优化、调度排程、进度监控反馈、资源管理调配及可视化报告五大方面。系统基于SpringBoot + Vue-Element-Plus-Admin技术栈开发,支持多端应用(App、小程序、H5、后台)。通过实时数据采集与分析,MES助力企业优化生产流程,适用于现代化智能制造场景。
451 1
|
9月前
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
763 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
|
8月前
|
机器学习/深度学习 数据采集 人机交互
springboot+redis互联网医院智能导诊系统源码,基于医疗大模型、知识图谱、人机交互方式实现
智能导诊系统基于医疗大模型、知识图谱与人机交互技术,解决患者“知症不知病”“挂错号”等问题。通过多模态交互(语音、文字、图片等)收集病情信息,结合医学知识图谱和深度推理,实现精准的科室推荐和分级诊疗引导。系统支持基于规则模板和数据模型两种开发原理:前者依赖人工设定症状-科室规则,后者通过机器学习或深度学习分析问诊数据。其特点包括快速病情收集、智能病症关联推理、最佳就医推荐、分级导流以及与院内平台联动,提升患者就诊效率和服务体验。技术架构采用 SpringBoot+Redis+MyBatis Plus+MySQL+RocketMQ,确保高效稳定运行。
656 0
|
5月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
528 2
|
4月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
434 137
|
8月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
995 0
|
8月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能