基于Vue的预约停车位APP设计与实现Word格式文档下载.docx
《基于Vue的预约停车位APP设计与实现Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《基于Vue的预约停车位APP设计与实现Word格式文档下载.docx（30页珍藏版）》请在冰豆网上搜索。
RentaloffreeparkingSpaces;
Vue
引言
自从改革开放以来，中国的经济状况越来越好，人们的收入水平越来越高。
汽车的出现很好的解决了人们因为路途较远而出行困难的问题，近些年来汽车价格不断下调，所以人们都会选择购买私家车来改善自己家庭的生活品质。
然而随着人们购买私家车的数目越来也多，许多问题也显现出来。
首当其冲的就是“停车难”的问题，而且停车难的问题在中国的许多城市越演越烈。
在一些小区，公共车位被随意私自霸占，小区的篮球场和活动场都被人们私自停放了汽车，甚至一些车主为了争抢一个停车位而大打出手。
这些问题的出现不仅仅会影响人们的日常生活状态，更有可能会扰乱社会的安全秩序。
近些年来，政府虽然大力修建停车场，对停车场进行规划，努力改变现有的停车状况。
但是私家车的增涨速度早已远远的超过了停车场的建成速度。
市中心的一些停车场每天依旧车水马龙，依然需要排队停车。
所以急需一种方式，让车主用户们在任何时间任何地点都可以知道哪里的停车场有空余车位，哪里的停车场需要排队。
这样可以减少了到处寻找空余停车位的时间，也能避免停车场排队带来的道路交通拥堵问题。
本系统可以让车主用户随时随地的了解到附近的停车场信息，还配备了用户上传和购买闲置停车位等一系列功能。
极大的便捷了人们日常出行，很好的解决了人们为停车而发愁的问题。
在英国伦敦，由于人们普遍收入较高，所以停车费用也比较昂贵。
伦敦市政府特意开发和完成了本市的停车场网站。
当伦敦市民想要外出的时候，可以在本市的停车场网站查看目的地周围的停车场信息，了解到哪些停车场有空余的停车位并且可以对这些空余停车位进行预约。
当车主到达预约停车场时，只需要出示特定的二维码即可进行停车[1]。
伦敦市政府为了鼓励市民使用停车网站进行停车位预约，提供了一系列的优惠服务。
在线上预约的停车位可以比普通的停车位便宜百分之二十。
车主不仅可以在网站上预约停车位，还可以在网站上直接对停车费用进行交付。
这一功能可以直接避免车主出停车场排队缴费的问题[2]。
2016年重庆市开启了“智慧停车”的项目，在一些主城区取得了可观的成果。
“智慧停车”集成了本市主要大型停车场和公共停车位的停车信息。
市民们可以在手机软件上对这些停车信息进行查看。
重庆市还对一些停车场设施进行改造，各种智能化停车场相继建成。
同时还鼓励企业单位、住宅小区对各自的私有停车场进行智能化改造。
本文主要对预约停车位APP系统所使用到的相关技术、系统的详细设计、系统的具体实现以及系统测试做出详细的介绍，主要包括以下几个章节。
第一章：
介绍所运用到的技术，包括Vue前端框架技术、Node.js技术和Ajax异步传输数据技术。
第二章：
系统分析，对系统进行需求分析，分析各个功能之间的用例关系。
第三章：
系统设计，介绍系统的设计流程和中心设计思想。
包括系统的结构设计、功能模块设计以及系统的数据库设计[3]。
第四章：
系统功能实现介绍，介绍了项目编码流程和前后端的接口实现。
第五章：
系统测试，系统测试是开发系统的最后一个环节，是为了验证所开发完成的系统是否满足设计要求和之前所列出的需求分析，以及检查系统是否存在问题并及时改正。
结论：
总结所完成的工作，并分析系统有哪些部分可以优化。
1相关技术
1.1Vue简介
Vue是一款目前主流的前端开发框架，Vue具有响应式数据绑定的特点。
当界面的数据发生变化的时候，界面的视图可以自动更新。
前端界面可以专心的进行数据处理，不需要再进行一些没有必要的dom操作。
Vue官方操作说明文档也较为清晰，比其他的一些前端框架更加简单易学。
缺点是Vue是一个种新的前端框架技术[4]，没有其他的前端框架那么成熟。
影响度不是很大，只是在一些中小型的项目上应用，在大多数大型项目上并没有广泛应用。
易上手的特点也使得Vue框架成为诸多前端开发人员第一个学习和掌握的前端框架技术。
Vue项目中各个组件之间通讯及其方便，父子组件传参、子父组件传参、兄弟组件传参以及路由之间的相互通讯。
都可以解决开发过程中的数据传递问题[5]。
Vue特有的模块化开发思想，可以把页面中相同的部分作为一个组件，这个组件可以被每个页面随意调用。
对页面重复代码做出了很好的规划，符合现如今程序开发代码重用的思想，在一定程度上减少了开发人员的工作量，提高了开发人员的开发体验。
1.2Node.js简介
Node.js为前端开发人员提供了一个使用js代码来实现后端操作的平台，可以实现现有后端语言的功能，一定程度上降低了项目开发的成本。
通过Node.js当中的router模块，可以创建本地服务和后端路由接口。
通过这些后端路由接口可以接收前端界面通过Ajax传递过来的参数，对数据库和数据库当中的数据进行操作。
并且Node.js配备了自己独立的第三方库安装程序。
开发人员可以通过快捷指令npm
去下载任何开发过程中需要使用的第三方库。
省去了开发人员寻找第三方库进行下载，然后再引用到本地的过程。
缩短了开发的时间。
Node.js的实现代码与普通的原生js代码大同小异。
所以开发人员只需要掌握原生js代码即可使用Node.js对项目程序进行编写，操作难度较低[6]。
Node.js和JavaScript的区别是：
原生js必须依赖于浏览器而运行，而Node.js则可以不在依赖于浏览器而运行。
并且因为Node.js不需要依赖于浏览器，所以不会存在特别大的兼容问题。
Node.js可以完成创建本地服务，连接数据库，操作本地文件读写等操作，而原生js则不能。
Node.js在大型项目中存在计算量少的缺陷，目前只作为中间层或者用来做一些小项目的后端。
1.3JavaScript基本介绍
JavaScript是一门轻量级弱势编程语言，可以实现页面之间的动态交互。
JavaScript是一种可以插入HTML页面，并且辅助HTML页面进行功能展示和界面交互的编程语言[7]，可以给页面增添一些动态功能。
JavaScript被当今许多浏览器所支持。
1.4Ajax基本介绍
Ajax为前后端数据交互提供了一个桥梁，使用脚本语言将前后端进行连接，可以实现前后端数据的交互功能。
可以提高前后端交互的运行效率，提高用户的使用体验，让多件事情可同时发生。
可以在不刷新界面的情况下对局部数据进行加载和刷新[8]。
Ajax相当于创建了一个请求代理，通过这个代理去完成客户端与服务器端的数据信息交互。
交互的过程中，客户端不需要进行数据的请求等待，还可以进行网页的其他功能操作。
等待交互完成之后，代理再将交互的结果返回给客户端界面[9]。
1.5本章小结
以上介绍的就是预约停车位APP所使用的所有相关技术，预约停车位APP系统使用VisualStudioCode作为系统的开发工作。
通过XX地图api接口可以让用户通过地图显示了解到停车场信息。
通过各个技术的灵活应用和相互嵌套，可以完整的完成此系统。
2软件需求分析与体系结构设计
2.1系统定义用户
通过对系统的分析，最后将系统的使用者分为两种类型车主用户和系统管理员。
各个人物都有自己的管理权限和实际功能，使用者的身份不一样所提供的功能也不一样[10]。
车主用户使用APP查询附近空余车位，并预约空余车位，停车结束并进行线上支付。
查看自己之前的停车记录，对余额进行充值，查看充值记录。
上传自己的空余车位和购买他人上传的空余车位。
对APP提出建议和使用当中的问题。
作为APP之后升级和改进的依据[11]。
“管理员”可以对数据库中的停车场信息进行操作，查看用户的注册和登录记录。
查看用户提出的建议并且回答用户使用当中出现的问题。
2.2系统功能需求描述
对于预约停车位APP系统为用户提供的需求描述如下。
（1）用户注册功能。
当新用户首次使用软件时，提供注册服务。
（2）用户登录功能。
用户可以通过用户名和密码进行登录。
（3）如果用户想修改密码，提供修改密码服务。
（4）用户预约停车位。
为用户提供查看附近空余车位的功能，用户可以通过地图显示了解到附近有哪些停车场有空余车位，填写完成相关信息即可完成预约[12]。
（5）用户完成停车订单并线上支付后可以对停车场进行评价，可以在已完成界面查看到之前的停车记录。
（6）用户可以在订单记录页面查看到之前每一笔停车记录的扣款详情。
（7）用户可以在钱包界面进行余额充值，并可以详细的看到之前的充值记录。
（8）用户可以收藏停车场信息，并且在我的收藏界面可以看到之前的收藏记录。
（9）用户可以查看并且购买闲置车位。
（10）用户可以上传和查看自己之前上传的空闲车位。
（11）用户可以提交简历并且有机会成为开发此APP的一员。
（12）为用户提供导航服务，用户可以使用此系统查看所在地到预约停车场的路线规划。
（13）系统提供两种车位，闲置车位是用户上传的私有车位，是长时间车位，是按月起租的。
普通车位是系统管理员记录在系统的临时停车位，是按小时起租的。
对于预约停车位APP系统为系统管理员提供的需求描述如下。
（1）管理员可以查看用户的相关信息。
（2）管理员可以对停车场的信息进行操作。
（3）管理员可以查看用户提出的问题并回答问题。
2.3系统用例分析
2.3.1用户用例分析
如图2.1所示，车主用户参与用例登录、注册、参与招聘、提出意见、查看空闲车位、上传空闲车位、提出使用中的问题、收藏车位信息、查看收藏车位、查看余额充值记录[13]。
在查看停车场信息时，主要分为查看停车场空余车位和查看停车场联系人信息，将这两个功能抽象为两个用例。
当预约停车位的时候，需要进行预约停车场导航这个功能，而在正常情况下用不到这个功能，所以用例预约停车位和用例预约停车场导航之间是拓展关系。
当支付停车费用的时候，需要进行评价停车场这个功能，而在正常情况下用不到这个功能，所以支付停车费用和评价停车场之间是拓展关系。
其中余额充值有两种方式，一种是支付宝充值，另一种是微信充值。
所以余额充值是父用例，而支付宝充值和微信充值是子用例，之间的关系是泛化关系[14]。
图2.1用户的用例图
2.3.2管理员用例分析
如图2.2所示，系统管理员可以登录、查看用户登录信息、查看用户注册信息、查看用户修改密码信息、查看提交简历。
查看用户提出的问题，回答用户提出的问题。
在管理停车场信息时，主要分为新增停车场信息、修改停车场信息、删除停车场信息。
将这三个功能分别抽象为三个用例[15]。
因为修改、新增和删除停车场信息的时候都要保存停车场信息，所以将保存停车场信息抽象出来作为单独的一个用例[16]。
当查看用户提出问题的时候，需要进行回答用户提出问题的功能，而在正常情况下用不到回答用户提出问题这个功能。
所以用例查看用户提出问题和用例回答用户提出问题之间是扩展关系。
图2.2管理员的用例图
2.4非功能需求分析
所有编写完成的界面要符合简介明了的设计理念，重点要展示出界面的功能展示部分，让使用者可以很好的了解到此页面的具体功能。
所有页面的页面布局要尽可能的保持统一。
页面中的字体大小、文字与图片之间的距离、各个模块之间的边距和间距、页面当中内容的布局要保持一致。
选取的图标要含义明确、色彩鲜明，输入框要位于界面的明显位置，页面整体布局要简介大方，使得用户有很好的观感体验，进而可以提升用户的使用体验。
系统各个模块和组织结构之间要求密切相关，保证模块和界面之间的数据可以顺利传递。
因为采取的是前后端分离的开发思想，所以项目要保证前后端分别创建的服务都可以顺利启动，数据可以顺利传输。
在开发系统的时候，需要保证系统具有较强的可维护性，这样可以使系统有较长的可使用期限。
一个系统可使用期限的长短，可以直接显现出项目投资的收益。
一个系统的可维护性，在开发初期就必须要进行考虑。
系统需要保持较高的可拓展性，这样可以便于提高系统的稳定性。
当系统具有较高的可拓展性之后，就可以满足用户不断变化发展的用户需求。
便于系统日后的升级与维护，减少了系统二次开发所带来的成本，可以在一定程度上降低开发成本。
2.5本章小结
本章讲述了预约停车位APP系统的需求分析及其功能的用例描述。
将系统功能使用用例图的方式进行组织和描述，可以很直观的看出系统具有哪些功能，各个功能之间的相互依赖关系。
系统分为车主用户和系统管理员两个角色，不同角色登录会进入到不同的界面中，进行不同的操作和使用不同的功能。
在今后，系统的一些功能会与一些停车场的硬件设备进行进行连接，通过软件和硬件的相互结合，可以给给用户带来更好的用户体验。
3系统设计
3.1系统总体设计
3.1.1系统体系结构设计
预约停车位APP系统体系结构分为5层，分为视图层、调度层、数据存储层、数据访问层、数据层。
第一层为视图层，一般情况下为使用HTML所编写的前端界面，供用户查看显示页面。
第二层为调度层，分割试图层和数据存储层，使得两者之间不会有直接联系[17]。
如果两者需要进行数据传递需要使用调度层做中间处理。
第三层为数据存储层，这一层主要存储了从后端接口请求到的数据。
这三层符合Vue前端框架的MVVM设计模式。
第四层为数据访问层，主要是对MySQL数据库中的数据进行访问和应用。
第五层为数据层，是指MySQL数据库中的数据[18]。
预约停车位APP采用前后端分离开发的思想，所以会启用两个服务器。
两个服务器之间通过特定的IP地址和端口号进行数据的交换。
在Vue框架所开启的服务中包括了视图层、调度层、数据存储层。
在Node.js所开启的服务中包括了数据访问层[19]。
3.1.2系统功能结构设计
预约停车位APP系统主要分为了两个模块车主用户模块和系统管理员模块。
车主用户的功能模块包括：
（1）用户预约停车位功能模块，此模块可以实现用户预约停车位的功能。
用户可以查看附近停车场的空余车位信息，包括停车场地点、空余车位数量、停车场联系人信号等等。
用户可以线上预约空余车位，并且支持用户收藏停车场信息。
（2）用户闲置停车位功能模块。
此模块可以实现用户上传和购买闲置停车位的功能。
用户可以查看其他用户上传的闲置停车位，并且购买闲置停车位。
（3）用户个人中心功能模块。
此功能模块可以实现用户查看个人信息及消费记录的功能。
用户可以修改自己的登陆账号密码。
用户可以对账户的余额进行充值，并且查看之前对账户余额的充值记录。
用户可以查看之前所收藏的停车场信息。
用户可以查看使用过程中可能会出现的问题及其解决方法，还可以向管理员提出使用中出现的问题。
用户可以查看到之前的停车消费记录。
用户可以向系统提出意见及建议。
（4）用户订单详情功能模块。
此功能模块可以实现用户对停车订单的管理功能。
当用户到达预约停车场时，可以开始停车订单。
当用户结束停车，可以结束该停车订单，并对此停车订单进行线上支付。
用户还可以对之前所消费过的停车场进行评价。
（5）用户提交简历功能模块。
此模块可以实现用户提交简历的功能。
如果用户很看好此系统在未来的发展形势，可以向系统提交自己的简历，并有可能成为开发此系统的一员。
系统管理员的功能模块包括：
（1）管理员管理停车场信息功能模块。
此模块可以实现管理员对系统数据库中停车场信息进行管理的功能。
管理员可以把一些新增的停车场信息上传到系统的数据库中。
可以对之前所保存的停车场信息进行信息修改。
还可以删除掉一些没有用的停车场信息。
这个功能模块可以保证系统当中存储的停车场信息每时每刻都在刷新，保证了数据信息的时效性。
（2）管理员查看用户相关信息功能模块。
此模块可以实现管理员对车主用户信息进行查看的功能。
管理员可以查看用户的登录、注册、修改密码的相关信号。
（3）管理员回答用户提出问题功能模块。
此模块可以实现管理员对用户使用过程中提出的问题进行查看和回答的功能。
管理员可以查看到用户向管理员提出的所有问题，并对每一个问题进行针对性的回答。
（4）管理员查看提交简历功能模块。
此模块可以实现管理员对用户所提交的简历进行查看的功能。
管理员可以查看之前用户提交的简历信息。
3.2系统详细设计
3.2.1系统数据库设计
此系统一共用到二十张数据表，包括停车场信息表、用户预约车位信息表、闲置车位信息表等等。
系统的E-R图如图3.1所示[20]。
通过这些数据表中字段的相互结合和嵌套可以很好的对停车场信号、用户信息、用户停车订单信息进行存储。
图3.1预约停车位APP系统E-R图
3.2.2数据库表设计
（1）停车场信息表用来存储停车场的相关信息。
一共8个字段，3个整型字段，5个字符串字段，id为自增长字段，所有字段不能为空，如表3.1所示。
表3.1停车场信息表
条件
字段名称
数据类型（精度范围）
空/非空
约束条件
其它说明
id
int
非空
主键、自增长
自增id
title
varchar
停车场名称
point
停车场经纬度
number
停车场空余车位
tel
停车场电话
contact
停车场联系人
price
停车场价格
imgSrc
停车场图片路径
（2）预约停车位信息表用来存储用户预约的停车位信息。
一共10个字段，3个整型字段，7个字符串字段，id为自增长字段，所有字段不能为空，如表3.2所示。
表3.2预约车位信息表
startAddress
开始地址
endAddress
结束地址
time
预约车位时间
name
预约车位联系人
address
varcahr
预约车位地址
carNumber
预约车位车牌号
预约停车场价格
peopleId
用户id
预约停车场图片
（3）用户已评价停车位信息表用来存储用户已评价的停车信息。
一共9个字段，3个整型字段，6个字符串字段，id为自增长字段，所有字段不能为空，如表3.3所示。
表3.3已评价车位信息表
startTime
停车开始时间
endTime
停车结束时间
total
停车总金额
grade
停车
升级会员 