基于微信小程序+SpringBoot的停车位共享管理系统的设计和实现(二)

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS PostgreSQL,集群系列 2核4GB
简介: 基于微信小程序+SpringBoot的停车位共享管理系统的设计和实现

4.5 数据库分析与设计

共享停车的数据库是一个引用停车信息的数据库,非常专业。数据库的设计和创建是为了通过数据反映业务流程,以及存储数据。

4.5.1 系统概念层结构设计

通过对需求功能的分析和各模块的设计,对数据库的各个模块进行了设计,并在E-R图中进行了显示。

系统配置模块注册和管理相关的登录帐户。登录帐号信息包括登录帐号、用户名、手机号、帐号类型、性别、帐号邮箱等。登录帐户是系统用户的决定性因素。如图4-8所示。

车辆也是系统的主体之一,需要将车辆的基础信息入库存储,例如车辆ID、车辆类型、车牌号、行驶证、驾驶员、驾驶员手机、备注等等。如图4-9所示。

车位模块功能主要是停车厂车位的记录和存储,例如车位ID、车位名称、所属停车场ID、所属停车场名称、备注等信息。如图4-10所示。

租赁记录表主要是维护不同类型车辆的租赁记录,包括记录ID、租赁时间、租赁IP地址、车位ID、车位号、车主ID、车主姓名、备注信息。如图4-11所示。

4.5.2 逻辑结构设计

本系统重要数据表的主要逻辑结构设计如下文所示。

本系统采用MySQL作为后台数据库,在MySQL中创建了名为shared_park的数据库,该数据库中包含了用户信息表、停车场表、车位档案表、等等,以下是各表的详细信息。

(1)用户信息表(sys_user),主要用于存储在注册页面中由用户所输入的信息,该表中openId是主键。用户数据定义的格式如表4-1所示。

(2)车位租赁记录表(rent_record),该表主要负责存储车位租赁记录的基本信息,其中id是主键,用于标识租赁记录编号的唯一性。其详细信息如表4-2所示。

(3)业主车位审核管理表(stall),该表主要负责存储审核的基本信息,其中id是主键,用于标识审核单的唯一性。其详细信息如表4-3所示。

(4)系统日志表(sys_log),该表主要负责存储日志的基本信息,其中id是主键,用于标识日志的唯一性。其详细信息如表4-4所示。

(5)系统角色表(sys_role),该表主要负责存储角色的基本信息,其中role_id是主键,用于标识角色的唯一性。其详细信息如表4-5所示。

(6)系统用户Token表(parking_order),该表主要负责存储用户Token的数据,其中user_id是主键,用于标识Token的唯一性。其详细信息如表4-6所示。

4.6 本章小结

本部分是停车系统总体设计的一部分。本章主要介绍了系统设计的基本思想和系统的总体设计,以及系统的各个模块,如系统核心模块、停车场管理模块、停车场租赁模块、停车模块、订单支付模块、5个通用模块。说明了各个模块的设计。并进行了详细的系统设计和数据库设计。

5 系统功能与界面的实现

5.1 系统基础模块的设计和实现

图5-1是共享停车位小程序的登录界面,顶部是“云车位共享小程序”的标题,下面是用户名、密码、图形验证码这三个输入表单,接着是一个粉色的“立即登陆”按钮,用户需要完成用户名、密码的正确输入,然后输入动态图形验证码,点击登陆按钮即可进入系统,如图5-1所示。

小程序登陆模块核心代码如下所示:

dataFormSubmit() {
    this.$api.R(
        'sys/login',
        'POST', 
        {
            username: this.dataForm.userName,
            password: this.dataForm.password,
            uuid: this.dataForm.uuid,
            captcha: this.dataForm.captcha,
            role:this.dataForm.role
        },
    ).then((res) => {
        //请求成功
        if(res.data && res.data.code === 0){
            this.loading = false;
            this.token =res.data.token
            //设置token缓存信息
            uni.setStorageSync('token',this.token)
            uni.setStorageSync('role',res.data.role)
            uni.setStorageSync('classInfo',res.data.classNnfo)
            uni.setStorageSync('user',res.data.user)
            //登录成功后跳转页面(页面需要在pages.json页面中注册)
            //注意:跳转到 tabBar 页面只能使用 switchTab 跳转
            uni.switchTab({
                url: '../index1/index1'
            })
            console.log('请求返回结果', res)
        }else{
            uni.showToast({
                title: res.data.msg,
                icon:false,
                mask: true
            });
            //重新获取验证码
            this.getCaptcha();
        }
    }).catch((err) => {
        this.loading = false;
        console.log('request fail', err);
    })
}

当用户没有账号时,可以点击底部的“还没有账号?点此注册”的超链接,进入到注册界面。用户在注册时,需要输入登陆账号、姓名、密码、QQ号、邮箱、手机号字段,其中登陆账号不能和已有的账号重复,邮箱和手机号有正则表达式的验证,如图5-2所示。

注册核心代码如下所示:

user.setCreateTime(new Date());
//sha256加密
String salt = RandomStringUtils.randomAlphanumeric(20);
user.setPassword(new Sha256Hash(user.getPassword(), salt).toHex());
user.setSalt(salt);
this.save(user);
//检查角色是否越权
checkRole(user);
//保存用户与角色关系
sysUserRoleService.saveOrUpdate(user.getUserId(), user.getRoleIdList());

当用户登陆成功后,则自动进入到共享停车位小程序的首页,如图5-3所示。本系统拥有三个页签,分别是首页、车位、我的,接下来将详细阐述这三个分页签。

同样,管理员可以在管理后台进行登陆操作,管理员需要输入自己的账号、密码和动态图形验证码,完成系统登陆,如图5-4所示。

后台登陆逻辑核心代码如下所示:

@PostMapping("/sys/login")
public Map<String, Object> login(@RequestBody SysLoginForm form)throws IOException {
   boolean captcha = sysCaptchaService.validate(form.getUuid(), form.getCaptcha());
   if(!captcha){
      return R.error("验证码不正确");
   }
   //用户信息
   SysUserEntity user = sysUserService.queryByUserName(form.getUsername());
   //账号不存在、密码错误
   if(user == null || !user.getPassword().equals(new Sha256Hash(form.getPassword(), user.getSalt()).toHex())) {
      return R.error("账号或密码不正确");
   }
   //账号锁定
   if(user.getStatus() == 0){
      return R.error("账号已被锁定,请联系管理员");
   }
   //生成token,并保存到数据库
   R r = sysUserTokenService.createToken(user.getUserId());
   return r;
}

管理员登陆系统后,可以进入用户管理模块,查看系统的所有用户信息,如图5-5所示。

用户管理模块核心代码如下:

@Transactional
public void saveUser(SysUserEntity user) {
   user.setCreateTime(new Date());
   //sha256加密
   String salt = RandomStringUtils.randomAlphanumeric(20);
   user.setPassword(new Sha256Hash(user.getPassword(), salt).toHex());
   user.setSalt(salt);
   this.save(user);
   //检查角色是否越权
   checkRole(user);
   //保存用户与角色关系
   sysUserRoleService.saveOrUpdate(user.getUserId(), user.getRoleIdList());
}

系统采用基于角色的访问控制,管理员可以通过赋予用户角色,从而让用户有权限看到菜单,角色管理模块如图5-6所示。

角色管理模块核心代码如下:

@GetMapping("/list")
@RequiresPermissions("sys:role:list")
public R list(@RequestParam Map<String, Object> params){
   if(getUserId() != Constant.SUPER_ADMIN){
      params.put("createUserId", getUserId());
   }
   PageUtils page = sysRoleService.queryPage(params);
   return R.ok().put("page", page);
}

5.2 车位管理模块的设计和实现

车位管理模块的界面如图5-3所示,系统会将可共享的停车位档案显示在首页页签中,并且展示所属车库名称、租赁价格和备注说明文字,用户可以点击进入车位详情页,如图5-7所示。

车位详情页中顶部是车位所在区域的图片,用户可以查看车位附近的情况,判断是否符合自己的租赁标准。下方展示了地图组件,根据车位的经纬度信息,精确展示车位所在的位置,用户可以点击白色“去这里”按钮,跳转到其他导航工具进行导航,也可以点击绿色“去预定”按钮,调转到预定界面,完成缴费支付操作。

车位列表核心代码如下:

<view class="uni-padding-wrap1">
    <view class="page-section1 swiper1">
        <view class="page-section-spacing1">
            <swiper class="swiper1" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
                <swiper-item v-for="(item, index) in bannerDateList" :key="index">
                    <view class="swiper-item1"><image class="swiper-item1" :src="item.imageUri"></image></view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</view>

车位详情核心代码如下:

<view>
    <view class="banner">
        <image class="banner-img" :src="banner.img"></image>
        <view class="banner-title">{{banner.title}}</view>
    </view>
    <view class="article-meta">
        <text class="article-author">{{banner.littleTitle}}</text>
        <text class="article-text">租金:</text>
        <text class="article-time">{{banner.amount}}</text>
    </view>
        <view class="page-section page-section-gap ">
            <map class="map-box" :latitude="latitude" :longitude="longitude" :markers="covers">
            </map>
        </view>
        <button type="default" style="width: 50%;">去这里</button>
        <button type="primary" style="width: 50%;">去预订</button>
</view>

5.3 车位租赁模块的设计和实现

管理员可以在后台查询车位租赁数据,如图5-8所示。

对于用户提交的租赁订单,可以根据实际情况完成审核操作,如图5-9所示。

车位租赁核心代码如下所示:

getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/generator/rentrecord/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'key': this.dataForm.key
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},

6 结论与展望

6.1 结论

本文介绍并设计了一个共享停车的小程序。在系统总体结构设计的基础上,提出了共享停车方案的五个功能模块。最后,实现了一个通用停车系统的开发。

本系统设计主要包括以下工作内容:

在设计初期,笔者收集和比较了大量的国内外文献,分析了小型公共停车场规划的现状,说明了研究的背景和重要性,以及当前世界的优势。并分析了不足之处,确定了本次开发的具体技术,并说明了所采用技术的优缺点。

对共享停车小程序进行系统需求分析和功能需求分析,确定系统功能,进行系统开发可行性分析,确定系统开发的可行性,并在此基础上创建数据库来完成。

在编码实现阶段,IDEA开发工具完成了编码实现,并引入了Spring Start框架来简化web开发。在数据级,使用MyBatis和MySQL框架,使用Maven进行管理,使用他的VUE框架开发前端。

6.2 展望

本文开发的通用停车小程序能够满足停车需求,过程恰当,操作方便,界面简单美观,适合停车工人和车主使用。它是。然而,由于缺乏个人水平等因素,本研究仍存在许多问题和不足。例如,本文中开发的共享停车小应用程序使用MySQL存储系统生成的数据。但是,如果以后信息量增加,可能会在一定程度上影响性能。其次,考虑将缓存增加到他的第二个,确保司机的信息安全也是很重要的。员工的信息安全是非常重要的。本文不涉及信息安全。为了完善系统,信息安全也需要深入探讨,由于系统本身并没有与停车系统相连,所以不可能了解到相关的停车信息。

参考文献

[1] 区县停车管理系统设计与实现[D]. 岳建涛.重庆大学 2008

[2] 财政部. 关于开展城乡停车工作的指导意见[J]. 中国实用乡村医生杂志, 2012, 019(021):1-3.

[3] 邓本霞. 停车改, 惠及民生[J]. 法制与经济(中旬), 2013, 000(004):93+95.

[4] 石枫. 停车运行困境及问题[J]. 现代经济信息, 2015(12):51-52.

[5] 黄华波. 停车的制度特性与经办模式分析[J]. 中国社会保障, 2015(8).

[6] 精准施策是决胜停车脱贫攻坚的关键[J]. 王运柏. 新湘评论. 2020(07)

[7] 停车委托商保承办的现状及问题分析[J]. 朱铭来,解莹,李海燕. 中国停车. 2020(03)

[8] 新农合停车系统的设计与实现[D]. 张业恒.郑州大学 2016

[9] 停车助推精准扶贫的现状、问题与对策[J]. 向运华,罗家琪. 决策与信息. 2019(12).

[10] Suggestion on Critical Illness Insurance in China[J] . L Zhu,H Xu,X Cui. Value in Health . 2016 (7)

[11] 云南省城镇居民停车信息系统开发研究[D]. 李锐.云南大学 2010

[12] 李若翰. 停车管理系统设计与实现[D].江西财经大学,2020.

[13] 金霞.广西城乡停车制度存在的问题及建议[J].现代商贸工业,2021,42(11):40-41.


引用说明:

引用以上内容的用户,必须同意以下内容,否则请勿引用!

  1. 出于自愿而使用本文,了解引用本文的风险,且同意自己承担引用本文的风险。
  2. 利用本文内容构建的任何信息内容以及导致的任何版权纠纷和法律争议及后果和作者无关,作者对此不承担任何责任。
  3. 在任何情况下,对于因引用本文而导致的任何难以合理预估的损失(包括但不仅限于商业利润损失、业务中断与业务信息丢失),作者概不承担任何责任。
  4. 必须了解使用本文内容的风险,作者不对其提供二次维护服务,也不提供任何有关资料。

相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
2月前
|
小程序 JavaScript 开发工具
|
1月前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
45 0
|
4月前
|
移动开发 安全 JavaScript
SpringBoot接入微信JSSDK,看这篇妥妥的
这篇教程详细介绍了如何在Spring Boot项目中接入微信JSSDK,实现H5页面的自定义分享和调用相册选取图片等功能。文章首先通过对比理想与现实的分享效果,引出了接入微信JSSDK的必要性。接着,作者提供了GitHub和Gitee上的项目源码链接,并逐步讲解了整个接入过程的关键步骤,包括配置文件、主要类和方法的实现细节,以及必要的微信公众号设置。此外,还特别强调了几个常见问题及其解决方案,如域名绑定、IP白名单设置和签名验证等。最后,通过实际测试验证了功能的正确性。适合初学者快速上手微信JSSDK接入。
75 8
SpringBoot接入微信JSSDK,看这篇妥妥的
|
3月前
|
小程序 JavaScript 开发工具
微信小程序——全局数据共享
微信小程序——全局数据共享
|
4月前
|
小程序 JavaScript Java
微信小程序+SpringBoot接入后台服务,接口数据来自后端
这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互,包括后端接口的编写、小程序获取接口数据的方法,以及数据在小程序中的展示。同时,还涉及到了使用Vue搭建后台管理系统,方便数据的查看和管理。
微信小程序+SpringBoot接入后台服务,接口数据来自后端
|
4月前
|
小程序 安全 Java
|
4月前
|
小程序 Java API
springboot 微信小程序整合websocket,实现发送提醒消息
springboot 微信小程序整合websocket,实现发送提醒消息
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的公园管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的公园管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
32 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
333 3
下一篇
DataWorks