基于Vue的预约停车位APP设计与实现

目 录

摘 要 I
Abstract II
引 言 1
1 相关技术 3
1.1 Vue简介 3
1.2 Node.js简介 3
1.3 JavaScript基本介绍 4
1.4 Ajax基本介绍 4
1.5 本章小结 4
2 软件需求分析与体系结构设计 5
2.1 系统定义用户 5
2.2 系统功能需求描述 5
2.3 系统用例分析 6
2. 3. 1 用户用例分析 6
2. 3. 2 管理员用例分析 7
2.4 非功能需求分析 7
2.5 本章小结 8
3 系统设计 9
3.1 系统总体设计 9
3. 1. 1 系统体系结构设计 9
3. 1. 2 系统功能结构设计 9
3.2 系统详细设计 10
3. 2. 1 系统数据库设计 10
3. 2. 2 数据库表设计 11
3. 2. 3 系统功能模块详细设计 15
3.3 本章小结 16
4系统具体功能实现 17
4.1车主用户功能实现 17
4. 1. 1 用户预约停车位功能实现 17
4. 1. 2 用户查看已预约车位功能实现 19
4. 1. 3 用户查看已完成车位功能实现 20
4. 1. 4 用户购买闲置车位功能实现 21
4. 1. 5 用户上传闲置车位功能实现 22
4.2 管理员功能实现 23
4. 2. 1 管理员管理停车场信息功能实现 23
4. 2. 2 管理员回答用户问题功能实现 23
4.3 本章小结 24
5 系统测试 25
5.1 系统测试计划模块 25
5.2 登录测试 25
5.3 用户评价停车场测试 25
5.4 系统高并发压力测试 26
5.5 本章小结 26
结 论 27
致 谢 28
参考文献 29

摘 要

随着科学技术的不断发展，一些新兴技术不断地改变着人们的生活。在现如今的社会中，停车难问题是大多数车主用户每天都会面临到的一个问题。现在真可谓是一位难求，出现这样的现象正是因为近些年来私家车的迅速增多，让车位供不应求。停车排队、停车场拥堵、停车位难找这些问题时时刻刻都在困扰着车主用户。本文针对当前存在的诸多问题和车主用户需求开发了预约停车位APP系统。
通过用户需求和现如今的社会状况，此系统整体的运用到了前后端分离的开发技术。例如前端使用了Vue前端框架技术，后端使用Node.js+MySQL数据库进行系统的设计与开发。此系统可以很好的解决人们日常出行停车难的问题，让车主用户可以随时随地的了解到附近的停车信息。能够在很大程度上降低城市停车场拥堵的问题，能够极大的改善人们的日常出行。
此系统具有数据结构复杂性，外部接口多样化，便于用户反复使用等特点。通过后期对系统进行的测试，预约停车位APP系统各个模块都已完成，符合用户的需求。
关键词：预约车位； 空闲车位租赁； Vue；

Abstract

With the continuous development of science and technology, some emerging technologies are constantly changing people’s lives. In today’s society, parking is a problem that most car owners will face every day. It is difficult to find a parking space now, because the rapid increase of private cars in recent years has caused a shortage of parking Spaces. Parking queue, parking lot congestion, parking space is difficult to find these problems are always troubling the owners of users. This paper develops an APP system for reserving parking Spaces according to the existing problems and the needs of car owners.
Based on user needs and current social conditions, the system as a whole applies the development technology of separation of front and rear ends . For example, the front-end USES Vue front-end framework technology, and the back-end USES node. js+MySQL database to design and develop the system. This system can well solve the problem of parking difficulty in People’s Daily travel, so that car owners and users can know the parking information in the vicinity at any time and anywhere. It can greatly reduce the problem of urban parking lot congestion and greatly improve People’s Daily travel.
This system has the characteristics of complex data structure, diversified external interfaces and easy for users to use repeatedly. After testing the system in the later stage, all modules of the APP system for parking space reservation have been completed to meet the needs of users.
Keywords:Reserved parking space; Rental of free parking Spaces; Vue

引 言

自从改革开放以来，中国的经济状况越来越好，人们的收入水平越来越高。汽车的出现很好的解决了人们因为路途较远而出行困难的问题，近些年来汽车价格不断下调，所以人们都会选择购买私家车来改善自己家庭的生活品质。然而随着人们购买私家车的数目越来也多，许多问题也显现出来。首当其冲的就是“停车难”的问题，而且停车难的问题在中国的许多城市越演越烈。
在一些小区，公共车位被随意私自霸占，小区的篮球场和活动场都被人们私自停放了汽车，甚至一些车主为了争抢一个停车位而大打出手。这些问题的出现不仅仅会影响人们的日常生活状态，更有可能会扰乱社会的安全秩序。
近些年来，政府虽然大力修建停车场，对停车场进行规划，努力改变现有的停车状况。但是私家车的增涨速度早已远远的超过了停车场的建成速度。市中心的一些停车场每天依旧车水马龙，依然需要排队停车。所以急需一种方式，让车主用户们在任何时间任何地点都可以知道哪里的停车场有空余车位，哪里的停车场需要排队。这样可以减少了到处寻找空余停车位的时间，也能避免停车场排队带来的道路交通拥堵问题。本系统可以让车主用户随时随地的了解到附近的停车场信息，还配备了用户上传和购买闲置停车位等一系列功能。极大的便捷了人们日常出行，很好的解决了人们为停车而发愁的问题。
在英国伦敦，由于人们普遍收入较高，所以停车费用也比较昂贵。伦敦市政府特意开发和完成了本市的停车场网站。当伦敦市民想要外出的时候，可以在本市的停车场网站查看目的地周围的停车场信息，了解到哪些停车场有空余的停车位并且可以对这些空余停车位进行预约。当车主到达预约停车场时，只需要出示特定的二维码即可进行停车[1]。伦敦市政府为了鼓励市民使用停车网站进行停车位预约，提供了一系列的优惠服务。在线上预约的停车位可以比普通的停车位便宜百分之二十。车主不仅可以在网站上预约停车位，还可以在网站上直接对停车费用进行交付。这一功能可以直接避免车主出停车场排队缴费的问题[2]。
2016年重庆市开启了“智慧停车”的项目，在一些主城区取得了可观的成果。“智慧停车”集成了本市主要大型停车场和公共停车位的停车信息。市民们可以在手机软件上对这些停车信息进行查看。重庆市还对一些停车场设施进行改造，各种智能化停车场相继建成。同时还鼓励企业单位、住宅小区对各自的私有停车场进行智能化改造。
本文主要对预约停车位APP系统所使用到的相关技术、系统的详细设计、系统的具体实现以及系统测试做出详细的介绍，主要包括以下几个章节。第一章：介绍所运用到的技术，包括Vue前端框架技术、Node.js技术和Ajax异步传输数据技术。第二章：系统分析，对系统进行需求分析，分析各个功能之间的用例关系。第三章：系统设计，介绍系统的设计流程和中心设计思想。包括系统的结构设计、功能模块设计以及系统的数据库设计[3]。第四章：系统功能实现介绍，介绍了项目编码流程和前后端的接口实现。第五章：系统测试，系统测试是开发系统的最后一个环节，是为了验证所开发完成的系统是否满足设计要求和之前所列出的需求分析，以及检查系统是否存在问题并及时改正。结论：总结所完成的工作，并分析系统有哪些部分可以优化。

1 相关技术

1.1 Vue简介
Vue是一款目前主流的前端开发框架，Vue具有响应式数据绑定的特点。当界面的数据发生变化的时候，界面的视图可以自动更新。前端界面可以专心的进行数据处理，不需要再进行一些没有必要的dom操作。Vue官方操作说明文档也较为清晰，比其他的一些前端框架更加简单易学。缺点是Vue是一个种新的前端框架技术[4]，没有其他的前端框架那么成熟。影响度不是很大，只是在一些中小型的项目上应用，在大多数大型项目上并没有广泛应用。
易上手的特点也使得Vue框架成为诸多前端开发人员第一个学习和掌握的前端框架技术。Vue项目中各个组件之间通讯及其方便，父子组件传参、子父组件传参、兄弟组件传参以及路由之间的相互通讯。都可以解决开发过程中的数据传递问题[5]。Vue特有的模块化开发思想，可以把页面中相同的部分作为一个组件，这个组件可以被每个页面随意调用。对页面重复代码做出了很好的规划，符合现如今程序开发代码重用的思想，在一定程度上减少了开发人员的工作量，提高了开发人员的开发体验。
1.2 Node.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可以完成创建本地服务，连接数据库&