2 系统关键技术
2.1 微信小程序
微信小程序,简称小程序,英文名Mini Program,是一种全新的连接用户与服务的方式,可以快速访问、快速传播,并具有良好的使用体验。
小程序的主要开发语言是JavaScript,它与普通web的开发有很多相似之处。小程序和普通网页开发并不是相同的东西,是有差异的。网页开发的渲染线程和脚本线程是互斥的,而在小程序中,确实分开的,分别在不同的线程之中运行。网页开发的工作者可以运用各种浏览器暴露出来的DOM API,进行DOM选中和操作,但小程序不行,它并没有一个完整的浏览器对象,因此缺失DOM API和BOM API。这样的差别使得前端开发中经常用到的一些库是无法在小程序中运行的。另外,网页开发的工作者在开发网页时所要面对的环境是在各式各样系统上运行的各式各样的浏览器,,而小程序只,只需面对iOS和Android这两道操作系统下的微信就足够了。
小程序和传统的APP相比,有着开发成本更低,获客成本更低,开发周期更短,发展空间更大等的优点。不过,为了体现"用完即走"、"无需安装"等理念,小程序的功能、性能还有大小都受到了制约,可以说是各有利弊。
2.2 微信Web开发者工具
为了实现微信小程序编写,腾讯公司推出微信web开发者工具[2],用来调试编写微信小程序,微信小游戏,微信公众号的编写和调试,该软件是支持微信小程序官方API 和相应的辅助工具和插件,支持微信端的代码编辑,查看,预览,发布。该工具拥有自己的前端代码文件,视图文件是.wxml、样式文件是.wxss、交互则是JS文件[8],当然还有支持相应的网络框架,通过接口wx.request和后台进行数据传输,通过配置https域名配置跟服务器对接并发布项目,这是一款集开发、预览、发布等功能的微信产品的开发工具,目前还在更新版本。
2.3 JavaScript简介
JavaScript是一种在现在都极为流行极为热门的脚本语言,最早是在HTML网页上被使用,使用JavaScript,我们可以给HTML网页添加更是各样的动态功能,并且给这些功能设置好不同的触发动作,通过用户在浏览器上的各种操作进行触发。
随着时代的发展,JavaScript的用途也越来越多,例如:将动态文字嵌入到HTML页面之中,读写HTML元素、在数据被提交到服务器之前检验数据等等。而且,不同于服务器端脚本语言,JavaScript并不依赖于操作系统,无需访问数据库,只需要浏览器的支持,有效的减轻了服务器的负担。
2.4 微信小程序API接口
微信小程序API接口是腾讯公司为了微信小程序和微信公众号提供的接口文档,里面包含了各种需要使用的接口技术,例如本项目用到的获取微信用户信息(wx.getUserInfo)、蓝牙通讯传输功能、网络请求(wx.request)、定位功能等,总的来说,小程序API是满足一个程序开发的大部分接口。
2.5 MYSQL数据库
所谓数据库,实际上就是一个容器,按照数据结构来组织、存储和管理。数据库的作用就是为大量的信息进行管理并提供高效的解决方案。
MySQL是典型的关系数据库系统,拥有开源免费、稳定、高效等特点,一直是中小型web项目的最佳数据库选择。MySQL作为当今IT领域使用人数最多的开源关系型数据库软件之一,在2018年的数据库使用率排名中位居第二,仅次于目前为止最成功的商业版数据库Orcle。MySQL最大的优势之一就是无偿使用,这也是它成功的关键。
MySQL支持标准化数据库查询语言SQL。MySQL是一款非常适合个人开发者或小型组织开发团体的数据库管理系统,因为它是开源并且免费的,体积小、速度快、成本低以及其最重要的一点开放源码,深受程序设计人员的喜爱,这也让它成为了许许多多中小型开发网站数据库的首选,同时提供了多种开发的连接API。MySQL将数据的存放按照记录之间的关系存放到了不同的表中,减少了数据的冗余并且提高了开发的工作效率。MySQL支持开发中需要用的大型数据库,并能处理数以万计的记录。因为MySQL是开源的软件,所以在项目的预算中的时候不用花费额外的资金,大大降低了开发的总体成本,这也是MySQL数据库在中小型企业和独立的开发者中广泛流行的原因。
3 系统分析
3.1 可行性分析
在软件开发第一阶段时,就应该对整个系统进行一次可行性分析。在开发进行过程中,并不是所有的问题都能在预计的范围内解决。通过可行性分析可以提前从中发现问题,解决问题,从而避免财力、人力和物力的浪费。
3.1.1 技术可行性
技术可行性是指学习的技术是否能够完成本项目,如果团队本身没有相关的技术储备,而又能够迅速掌握此类技术,那项目应该达不到我们的设计要求。本基于语音识别的停车共享小程序采用JAVA技术、MYSQL数据库开发设计,作为计算机专业学生,在学校期间就接触到许多关于编程方面的知识,当然也包括各种编程软件,对他们的了解度也比较系统,所以技术开发上面还是有一定把握。
3.1.2 经济可行性
经济可行性主要是研究和分析系统的投入和产出的关系,非常明了问题不能产出大于投入。由于自己本身就是学生,还没有正式参加工作,金钱上面一直都处于缺乏状态。所以在开发程序过程中,我是不会花太多经济成本在上面的。针对开发软件和数据库,还有界面设计等在百度上面就可以直接下载,然后根据各种安装视频进行安装,这些资源都是免费的,程序编码阶段使用的源代码在百度上面可以轻松获得,在有网络的环境下就能下载下来,不需要支付任何费用,经济成本很低。所以系统在开发人力、财力要求不高,具有经济可行性。
3.1.3 操作可行性
操作可行性主要是针对系统用户而言,一个系统再完美,技术再先进,用户不去使用,或者用户根本不会使用,该系统存在的价值也是不大的。本人自己就是学生,程序开发经验不足,在界面设计上面不会设计太复杂,要讲究简单好看,操作上要方便,不能让用户觉得不流畅。用户一旦进入操作界面,界面上就会有相应提示,跟着操作提示就可以找到对应的功能操作模块,对于用户来说免培训就能使用,没有任何学习成本,因此,操作上是可行性的。
3.1.4 律可行性
自己本人开发的软件和用到的资料来源都是图书馆、百度文库、百度网页等渠道,并不涉及违法。在个人毕业设计上面,无论源代码还是论文编写内容不存在抄袭行为。
从上面几个部分的可行性分析得出,这次开发的基于语音识别的停车共享小程序在开发上面没有什么大问题,值得开发。
3.2 系统性能分析
(1)响应效率需求:用户的每个操作响应时间不得超过2秒。
(2)简单性需求:系统设计的应该简单易学的,设计的各种功能应该简单操作,不需要努力学习培训,缩短用户熟悉系统的进程。
(3)稳定性需求:不会因为用户操作错误的原因而导致整个系统奔溃,且要保证系统不会存在字体、图片模糊的现象。
(4)安全性需求:防止横向越权和纵向越权,保证用户的个人信息安全。
3.3 系统功能分析
本基于语音识别的停车共享小程序主要分管理员和用户两大功能模块,下面将详细介绍管理员和用户分别实现的功能。
3.3.1 用户功能分析
用户通过微信平台可打开系统,注册登录后主要功能模块包括首页、停车场(可查看停车场,选择车位进行预约)以及我的(车辆信息、停车场、停车预约、停车缴费),用户用例图如图3-1所示。
图3-1 用户用例图
3.3.2 管理员功能分析
管理员可登录系统后台,登录后可对系统进行全面管理,包括个人中心、用户管理、停车场管理、停车预约管理、停车缴费管理以及系统管理,管理员用例图如图3-2所示。
图3-2 管理员用例图
3.4 用户体验需求分析
这个基于语音识别的停车共享小程序要求在微信平台上可以运行,主要实现了用户查看停车场、预约车位的基本功能。一个好的程序要具备以下两方面用户体验:
(1)界面友好
用户界面要简洁直观、操作方便。
(2)响应快速
对用户的请求能快速响应,对一些耗时的应用程序,以进度条的形式显示,让用户随时了解程序执行情况[11]。
3.5 系统流程分析
3.5.1 登录流程
登录模块主要满足了用户和管理员的权限登录,登录流程图如图3-3所示。
图3-3 登录流程图
3.5.2 注册流程
没有账号的用户可进行注册操作,用户注册流程图如图3-4所示。
图3-4 注册流程图
4 系统设计
4.1 系统设计目标
(1)流畅性:众所周知,对于一个微信小程序来说最重要的是它是否流畅,该项目是车位预约的系统,保持流畅性是本系统开发的重点。
(2)轻巧性:对于基于语音识别的停车共享小程序,需要通过网络方式调用,把所需的多媒体文件存储在云端,通过网络连接的方式访问获取,这样能大大节省了项目的大小,使得小程序变得实在的"小程序"。
(3)适配性:做移动端的项目,首先页面要考虑的就是适配的问题,不同的手机有不同尺寸的屏幕,随着现在手机的高速发展,刘海屏,水滴屏,挖孔屏都出现在生活中,要让小程序适配这些屏幕。
(4)简单趣味性:该项目首要目的是停车场查询、预约简单化,能简单的获取停车场的数据,并实现预约操作,简单的操作使用。
4.2 系统开发流程设计
在开发本基于语音识别的停车共享小程序时,首先进行需求分析,进而对系统进行总体的设计规划,设计系统功能模块,数据库的选择等,本系统的开发流程如图4-1所示
图4-1 系统开发流程图
4.3 系统结构设计
系统的设计和划分是系统的核心研究问题,以确定整体结构和功能模块。该系统的结构化设计的思想,是自顶向下的方式将系统分成若干个子系统,以及反过来的子系统分成模块,其被划分成子模块,层划分各计算机可执行模块可迄今用作一个单独的程序。
本基于语音识别的停车共享小程序结构图如图4-1所示。
图4-2 系统功能模块图
4.4 数据库设计
一个好的数据库可以关系到程序开发的优劣,数据库设计离不开表结构的设计,还有表与表之间的联系,以及系统开发需要设计的数据表内容等信息。在进行数据库设计期间,还是需要多花时间进行考虑,最终设计出配套程序的数据库出来。
4.4.1 数据库E-R图设计
本基于语音识别的停车共享小程序采用的是MYSQL数据库,数据存储快,因为基于语音识别的停车共享小程序,主要的就是对信息的管理,信息内容比较多,这就需要好好的设计一个好的数据库,分类要清楚,不能添加信息的时候,造成信息太过混乱,设计好的数据库首先就需要先把各个实体之间的关系表达明确,下面我们用E-R图来具体表示。
E-R图是一种描述显示数据类型间的关系的数据描述方法,E-R图可以完整地映射出现实模型的关系。E-R图中的三个最为重要的元素就是实体、属性、关系。E-R图即由这三点组成。本基于语音识别的停车共享小程序的E-R图如下所示:
1、管理员实体属性图如图4-3所示
图4-3 管理员实体属性图
2、用户实体属性图如图4-4所示
图4-4 用户实体属性图
3、车辆实体属性图如图4-5所示
图4-5 车辆实体属性图
4、停车场实体属性图如图4-6所示
图4-6 停车场实体属性图
5、停车预约实体属性图如图4-7所示
图4-7 停车预约实体属性图
4.4.2 数据库表设计
本基于语音识别的停车共享小程序采用MYSQL数据库,数据库的功能主要是存储网站中所有数据,以便进行操作。关于数据库中的数据表如下:
表 4-1 users管理员信息表
列名 | 数据类型 | 长度 | 允许空 | 说明 |
---|---|---|---|---|
id | int | 11 | 否 | 编号 |
username | varchar | 80 | 是 | 用户名 |
password | varchar | 32 | 是 | 密码 |
role | tinyint | 3 | 是 | 角色 |
addtime | timestamp | 是 | 新增时间 |
表 4-2 yonghu用户信息表
列名 | 数据类型 | 长度 | 允许空 | 说明 |
---|---|---|---|---|
id | bigint | 20 | 否 | 编号 |
addtime | timestamp | 是 | 创建时间 | |
zhanghao | varchar | 200 | 是 | 账号 |
mima | varchar | 200 | 是 | 密码 |
xingming` | varchar | 200 | 是 | 姓名 |
xingbie | varchar | 200 | 是 | 性别 |
shouji | varchar | 200 | 是 | 手机 |
youxiang | varchar | 200 | 是 | 邮箱 |
shenfenzheng` | varchar | 200 | 是 | 身份证 |
touxiang | varchar | 200 | 是 | 头像 |
chepaihao | varchar | 200 | 是 | 车牌号 |
表 4-3 cheliangxinxi车辆信息表
列名 | 数据类型 | 长度 | 允许空 | 说明 |
---|---|---|---|---|
id | bigint | 20 | 否 | 编号 |
addtime | timestamp | 是 | 创建时间 | |
zhanghao` | varchar | 200 | 是 | 账号 |
xingming | varchar | 200 | 是 | 姓名 |
chexing | varchar | 200 | 是 | 车型 |
chepaihao | varchar | 200 | 是 | 车牌号 |
cheliangtupian | varchar | 200 | 是 | 车辆图片 |
userid | bigint | 20 | 是 | 用户编号 |
表 4-4 tingchechang停车场信息表
列名 | 数据类型 | 长度 | 允许空 | 说明 |
---|---|---|---|---|
id | bigint | 20 | 否 | 编号 |
addtime | timestamp | 是 | 创建时间 | |
tingchechangmingcheng | varchar | 200 | 是 | 停车场名称 |
`tingchechangdizhi | varchar | 200 | 是 | 停车场地址 |
lianxidianhua | varchar | 200 | 是 | 联系电话 |
cheweishuliang | int | 11 | 是 | 车位数量 |
tingchefei | int | 11 | 是 | 停车费 |
fengmian | varchar | 200 | 是 | 封面 |
tingchechangjieshao | longtext | 是 | 停车场介绍 | |
userid | bigint | 20 | 是 | 用户编号 |
表 4-5 tingcheyuyue停车预约信息表
列名 | 数据类型 | 长度 | 允许空 | 说明 |
---|---|---|---|---|
id | bigint | 20 | 否 | 编号 |
addtime | timestamp | 是 | 创建时间 | |
tingchechangmingcheng | varchar | 200 | 是 | 停车场名称 |
`tingchechangdizhi | varchar | 200 | 是 | 停车场地址 |
cheweishuliang | int | 11 | 是 | 车位数量 |
tingchefei | int | 11 | 是 | 停车费 |
fengmian | varchar | 200 | 是 | 封面 |
zhanghao | varchar | 200 | 是 | 账号 |
xingming | varchar | 200 | 是 | 姓名 |
shouji | varchar | 200 | 是 | 手机 |
chepaihao | varchar | 200 | 是 | 车牌号 |
tingcheshijian` | varchar | 200 | 是 | 停车时间 |
userid | bigint | 20 | 是 | 用户编号 |
5 系统的实现
5.1 用户功能模块的实现
5.1.1 用户注册登录界面
没有账号的用户可进行注册操作,注册后可进入登录界面进行登录系统,用户注册登录界面展示如图5-1所示。
添加图片注释,不超过 140 字(可选)
图5-1 用户注册登录界面图
5.1.2 首页界面
用户通过微信平台进入本系统后可查看所有停车场信息,首页界面展示如图5-2所示。
图5-2 首页界面图
5.1.3 停车场界面
用户在停车场界面可查看所有停车场信息,并可选择查看详情,停车场界面展示如图5-3所示。
图5-3 停车场界面图
5.1.4 车辆信息界面
用户登录后可管理个人车辆信息,对已有车辆可进行修改和删除,也可添加车辆信息,车辆信息界面如图5-4所示。
添加图片注释,不超过 140 字(可选)
图5-4 车辆信息界面图
5.1.5 车位预约界面
用户可查看个人已有车位预约信息,并可进行缴费和删除操作,车位预约界面如图5-5所示。
添加图片注释,不超过 140 字(可选)
图5-5 车位预约界面图
5.2 管理员功能模块的实现
5.2.1 管理员登录界面
管理员可以通过正确的登录账号和密码进行登录系统后台,管理员登录界面展示如图5-6所示。
图5-6 管理员登录界面图
5.2.2 用户管理界面
管理员在用户管理界面可查看所有用户信息,并可对其进行修改和删除操作,同时也可添加用户信息,用户管理界面展示如图5-7所示。
图5-7 用户管理界面图
5.2.3 停车场管理界面
管理员可增删改查停车场信息,停车场管理界面展示如图5-8所示,添加停车场界面展示如图5-9所示。
图5-8 停车场管理界面图
图5-9 添加停车场界面图
5.2.4 停车预约管理界面
管理员可查看用户停车预约信息,并可对其进行删除操作,停车预约管理界面如图5-10所示。
图5-10 停车预约管理界面图
5.2.5 停车缴费管理界面
管理员可查看所有停车缴费信息,并可对其进行删除操作,停车缴费管理界面如图5-11所示。
图5-11停车缴费管理界面图