基于VueNode酒店管理系统的设计与实现.docx
《基于VueNode酒店管理系统的设计与实现.docx》由会员分享，可在线阅读，更多相关《基于VueNode酒店管理系统的设计与实现.docx（41页珍藏版）》请在冰豆网上搜索。
基于VueNode酒店管理系统的设计与实现
基于Vue/Node酒店管理系统设计与实现
摘要
旅游业的繁荣和各地地区经济程度都随着现在社会高速发展，人们有更多时间和能力前往世界各地旅游或者出差办公，这时候一个高效成熟的酒店管理系统可以快速帮助旅客完成开住退预约房等各式操作，不仅节约酒店方便人工操作成本，同时减少旅客用户在这期间等待时间，提升用户体验。
本酒店管理系统使用Vue框架写视图层，组件库使用了element，后端采用express的Node框架，较为传统模式设计代码框架更加具有层次易懂。
账号管理以及住房信息管理采用了NoSql进行存储，能够将注册用户个人信息和房间信息进行相应存储。
经过测试，本酒店管理系统不同用户的注册登录已经开退预约房间功能已实现，个别用户的信息修改，收支信息也成功完成，收支统计也已完成，可以快速处理用户订单信息，提升用户体验和工作效率。
关键词：
Vue、Node、NoSql、express、element
DesignandImplementationofHotelmanagementsystembasenofVue/Node
Abstract
Withtherapiddevelopmentoftourismindustryandtheeconomyofallregions,peoplehavemoretimeandabilitytotravelorworkaroundtheworld.Atthistime,anefficientandmaturehotelmanagementsystemcanquicklyhelppassengerstocompletevariousoperationssuchasopening,checkingoutandbookingrooms,notonlysavingthehotel'sconvenientmanualoperationcosts,butalsoreducingthenumberofpassengerusersinthisperiodWaitingtimetoimprovetheuserexperience.
ThehotelmanagementsystemusestheVueframeworktowriteandviewlayers,thecomponentlibraryuseselement,andthebackendusestheexpressnodeframework,whichismorehierarchicalandunderstandablethanthetraditionalpatterndesigncodeframework.TheaccountmanagementandhousinginformationmanagementuseNoSQLforstorage,whichcanstorethepersonalinformationandroominformationofregisteredusers.Aftertesting,theregistrationandloginofdifferentusersofthehotelmanagementsystemhavebeenrealized,thefunctionofopeningandreturningreservationroomhasbeenrealized,theinformationofindividualusershasbeenmodified,andtherevenueandexpenditureinformationhasbeensuccessfullycompleted,whichcanquicklyprocesstheuser'sorderinformation,improvetheuserexperienceandworkefficiency.
Keywords:
Vue;Node;NoSql;element;express
1前言
因为现在大力开展旅游产业的发展，现在各地都在不断大力推广自己旅游产业发展项目，同时旅游产业也有众多要素，其实包括：
“食住行游购娱体会养媒组配”等相辅相成的产业，但是其中住，也是旅游业中最基本的要求，也是旅游业中最重要的一项环节。
酒店管理系统，作为一种可以提高酒店管理效率的平台，具有的优势有提高效率，提高收益，加强管理等各类优点，所以在运营酒店时候拥有一个酒店管理系统是十分必要的。
但是相较于目前旅游区小酒店各地，由于客房数目较少，部分仍然采取非管理系统记录方式，效率明显更低，个人信息也没有更完善的保护，所以有一款小型酒店管理系统也是十分必要的。
本人曾经也去过云南等各地旅游，因为当时也是住在小酒店里面，也许是小酒店的缘故，而且印象中客房的数量也没超过20个样子，所以当时登记名字和房间采用纸记的方式，只有在验证身份的时候才采用了电子设备，所以我们在登记住房的时候也花费了近半小时时间，虽然旅游也不是很在意时间，不过能推出小型管理系统也方便店主和旅客的交互体验。
1.1系统开发的背景与意义
经济不断的发展与人们生活水平的提高，使得人们在衣食住行方面相较于以前来讲有着更高的要求，而且我国自从加入世贸组织后，在服务业的水准也是水涨船高，为了提升酒店服务业的水平，在各方面都要有各种改变。
所以酒店信息化是对于提高酒店水平非常重要的，无论从办公效率还是旅客的用户体验还是经营者的有效管理都是不可或缺的一项。
相应的服务水平提高，用户的占有率和回头率就会提高，而且还可以有效的控制成本。
所以有一套相对完善的管理信息系统，在现在来讲是十分必要的。
而目前仍然有部分小型酒店仍然采用传统人工记账的方式，由于传统人工需要一部分员工来记账，而且到经营旺季的时候容易生成大量数据，容易环节出错。
本系统就是为了克服这些缺点所制作的，能够方便工作人员检索房间，查找方便，存储量大，可靠性高，成本低等各优点。
酒店管理系统相较于传统人工记账方式来讲有着显著的提升，而且也符合现在酒店管理方式，是现在酒店发展减少成本提升质量的必然结果。
其中一部分，旅客在申请开房服务时，工作人员在系统界面上有专门界面可以输入用户信息，只需要旅客提供正确信息后就可以在短时间内完成信息的输入。
另一部分，用户信息以及工作人员信息数据都存放到服务器的数据库中，不是保存到本地上，可以有效的保护信息的安全，而且简洁易懂的界面可以减少工作人员的反复操作，减少耗时，也是可以有效地减少人工成本的方法。
1.2系统的功能概述目标和要求
本酒店管理系统在用户管理上有着两个方面。
在主程管理员上，用户可以登录我们系统内查看相关房间数据，可以完成普通工作人员所具备的开房间，退房间的功能，可以修改个人信息内的相关信息，例如修改用户名，修改密码以及邮箱。
可以在房间总览上面主管理员还可以进行新增新房间操作，而且也可以修改目前所有相应的房间信息，方便推出新的房间。
在普通工作人员上，相较于主管理员的方面上，普通人员就相对于不能修改房间信息，但是也可以进行开退房的各种操作，在用户首页也可以看到当前主页面发出的公告信息栏，也可以进行账户名称的修改操作，在主界面也可以方便看到还剩余多少房间。
以及本酒店管理系统在这次设计也有相应目标需要完成，满足各方面问题，实现项目结果。
1、有效率的注册。
工作人员等用户可以快速的注册使用账号，用时短，重复昵称会报重复。
2、交互快捷。
在开房与退房操作界面中简洁，直观，需要交互的按钮键有效减少。
3、稳定性。
用户数据和房间数据都存放在服务端中，可以更好的保护用户的信息以及也不容易丢失数据。
4、准确性。
使用电脑操作相对于传统人工记账可以有效减少人工造成的人为事故。
5、安全性。
使用电脑存储游客信息不仅可以有效减少纸张的浪费，而且电子记录也可以较为纸质可以保护好个人隐私。
6、可远程操作：
提供预约系统，用户可以在页面中观看还有多少剩余房间，对应剩余相应房间可以进行预约操作。
2需求分析
2.1功能性需求分析
2.1.1在线登录/注册页面
用户注册/登录页面模块，主要用于相关用户注册与登录功能，用户可以通过相应页面完成登录或者注册的操作。
用户信息存放在相应的MongoDB官网的数据库中进行保存和提取，用户申请访问都会从数据库提取信息识别确认，登录完成确认完用户信息可以进入到主系统中。
主要相关页面是使用Vue框架Es6语法来进行设计。
2.1.1.1注册页面
用户可以通过主登录界面进入到注册页面中，该注册页面主要是用于给尚未注册过的用户进行提供用户账号信息，用户需要填写相应的信息：
用户名，密码，邮箱，以及相应身份，填写完相应信息后，页面接受到的信息会传至服务器端的数据库中，然后用户就可以进行相应的访问。
2.1.1.2登录页面
主登录界面，含有相应模块和按钮，登录按钮，注册按钮，找回密码按钮。
1、登录按钮：
用户需要在页面的账号栏和密码栏输入相应的用户信息，输入之前已经注册过的用户的id名字和对应密码，然后将数据通过互联网传送到数据库服务器中，识别后进行返回格式数据，成功登录到系统主界面,否则会有登录失败的提示字样。
2、注册按钮：
用户点击注册按钮可以跳转到相关的用户注册界面进行注册。
3、找回密码按钮：
部分用户也许会遗失或者遗忘密码无法登陆到用户系统中，提供了相应的用户密码找回功能，用户仅需要在找回密码的页面中输入之前注册时使用的账号id和邮箱进行确认无误后，系统会发送原来的密码给予找回的密码。
2.1.2主界面
主界面主要模块分为三个部分，头部组件，侧边组件和中间组件。
（1）头部组件
头部组件主要功能是展示主界面的顶部栏，展示网站的logo，网站名字，用户id，以及个人菜单栏。
（2）侧边组件
侧边组件主要功能是显示网站功能，侧边主要由四个主菜单组成，首页按钮，开退房记录按钮，预约菜单，信息管理。
其中开退房记录按钮又分开房记录，退房记录。
信息管理含有个人信息分支。
（3）中间组件
中间组件主要功能是显示酒店管理系统的总体概况，有两个公告栏，一个用于显示当前酒店的各种优惠活动，另一个是员工公告系统，底部有一个简易观察当前观看还有多少剩余房间的组件。
2.1.2.1头部组件
头部组件用来显示主界面的头部，有四个部分共同组成，主网站的Logo，主网站的名称，登录使用的账户的id名称和个人账号操作。
个人账号操作可以选择跳转到个人信息和注销用户操作。
个人信息是直接跳转到个人信息列表，注销用户操作是退出用户然后跳转到用户登录界面中，并且删除之前登录令牌。
2.1.2.2侧边组件
侧边组件是用来显示主界面的侧边栏，也是有四个一级栏组成，分别是首页，开退房记录，预约服务，信息管理。
（1）首页
用来显示网站的主页面，页面中间主要由两个公告栏和一个显示剩余房间的提示栏组成。
（2）开退房记录
由开房登记和退房服务两个二级按钮组成。
开房登记可以通过操作人员点击按钮后可以观察到遍历房间信息数据表的尚未开房间的信息，可以选择相应的房间，然后让游客填写相应的个人信息以及登记住房时间，然后将房间移至需要退房的二级按钮项里面。
如果在列表中找不到有关房间还可以通过检索关键信息来显示特定的房间，如果是相关管理员还可以操作添加新房间。
退房服务，根据之前游客登记的住房信息，系统会自动计算游客居住日期然后确认应收多少金额的住房费用，然后退房后数据表中信息重新将房间重置为未开房状态，并且删除之前住房游客的个人信息。
（3）信息管理
里面含有个人信息栏，用来显示个人信息，如果想要修改个人账号信息的话可以点击修改个人信息按钮进行修改，更改后的个人信息会通过回传至数据库然后将数据表的个人信息更改。
收支信息可以方便管理员快速了解当天乃至近几天的收入情况，做成图表式也更加的通俗易懂，增加数字的可读性。
2.1.2.3中心组件
中间组件是用来显示首页总体信息的，中间总体是由两个公告栏组成，其中一个是通过element的table表格实现，一个通过走马灯click触发组成，用来展示网站总体框架页面，正下方也设置了一个table来显示剩下空余房间数目。
2.2系统可行性分析
本系统主要前端使用Vue框架，后端使用Node+express框架，采取完成前后分离进行开发，开发工具主要是Vscode和测试工具Postman。
前端。
而且前端分层为模型层，视图层和视图模型层，可以更为方便开发。
相关网页开发也可以在官网查找到开发文档，具体项目难度完成不高。
因为项目开发难度不大，而且相关开发项目软件也是免费开源软件，所以对于小型酒店来讲开发成本和维护费用需求量都比较低，符合系统体型，而且有了系统帮助也可以相应减少有关人工费用的支出，提升效率并且实现盈利创收。
3系统概要设计
3.1系统整体模块图
本系统主要整体框架通过账号登录进入主界面后可以进行的的一系列操作。
具体框架图如图所示：
图3.1系统整体模块图
3.2功能模块机构图
注册功能，因为不同用户注册身份不同，进入系统后也有相应不同的功能权限，注册主要分为两种身份，工作人员和游客。
图3.2.1注册系统结构框图
不同用户身份登录系统后也有不同使用功能区别，以下分别分为游客登录端和工作人员登录端。
游客登录端结构框图如下图所示：
图3.2.2游客登录端结构框图
工作人员端结构框图如下图所示：
图3.2.3用户角色功能模块结构框图
3.3技术选型
3.3.1系统开发环境
本次系统开发使用的是Windows7系统，安装Vue4.3.1,node12.16.1，使用了vscode作为开发工具,Postman作为数据库测试工具，npm作为前端包管理工具。
前端主要通过网页浏览器的形式显现，而且选择的Vue框架大部分浏览器也兼容，使用了element组件库，同时也基于html,jquery,es6等技术完成前端网页页面设计。
后台使用的是MongoDBAtlas服务器端，使用的Mongodb进行数据存储，在开发工具vscode编写了http的接口可以访问到服务器端的数据库。
用户可以通过服务器上的接口来实现前后端之间数据交互。
3.4开发流程
当用户要使用酒店管理系统时，可以通过浏览器的方式进入到我们系统登录界面上，通过访问服务器的8080端口，进入到登录界面中，用户通过填写已经注册好的账号进入到系统主页中。
因为存在多个用户同时进行系统操作，进行前端调用进行服务器请求，然后服务器进行请求然后重定向。
最终返回到前端页面中。
3.5存储结构说明
3.5.1数据库环境说明
数据库系统：
NosqlMongodb4.2.5
3.5.2数据字典
相关数据表名以及含义如下表所示：
表3.5.1数据库汇总术语表
缩写，表名
解释
UserSchema
账号用户信息
BriefsSchema
房间信息
TouristSchema
游客住房信息
LogSchema
公告栏信息
AppointSchema
预约栏信息
注册/登录信息表含义如下表所示：
表3.5.2注册/登录信息表
表名
注册/登录信息表UserSchema
列名
数据类型
可否空
中文描述
备注
Name
String
是
注册/登录用户名
password
String
是
账号登录密码
email
String
是
账号电子邮箱
identity
String
是
账号身份
date
Date
否
账号日期
住房房间信息表含义如下表所示：
表3.5.3住房房间信息表
表名
住房房间信息表BriefsSchema
字段名
数据类型
可否空
中文描述
备注
id
String
否
房间登记id
roomid
String
是
房间编号
type
String
是
房间类型
price
Number
是
房间价格
state
Number
是
房间状态
date
Date
否
登录日期
游客信息表含义如下表所示：
表3.5.4游客信息表
表名
游客信息表TouristSchema
字段名
数据类型
可否空
中文描述
备注
tname
String
是
游客姓名
tnumber
String
是
游客电话号码
tidentity
String
是
游客身份证号
tsex
String
是
游客性别
店铺信息表含义如下表所示：
表3.5.5公告信息表
表名
公告栏信息表LogSchema
字段名
数据类型
可否空
中文描述
备注
title
String
是
公告标题
content
String
是
公告内容
预约栏信息表含义如下表所示：
表3.5.6预约栏信息表
表名
预约栏信息表AppointSchema
字段名
数据类型
可否空
中文描述
备注
anumber
String
是
预约者电话号码
aidentity
String
是
预约者身份证号
aname
String
是
预约者姓名
date
Date
是
日期
4系统详细设计与实现
4.1用户账号注册与登录
当用户第一次使用本系统的时候，首先需要在这系统注册一个用户账号，才能够正常使用本系统。
因为本系统设置了不同用户权限会有不同操作效果，所以接下来会以不同登录操作者展示不同登录效果。
4.1.1工作人员/游客注册
工作人员注册是提供给在酒店工作人员的账号，工作人员可以使用相关账号进行对本系统相应的操作。
首先工作人员账号注册在登录到我们系统的登录界面中时，登录表单中可以看见右下角的注册按钮，然后点击这个按钮，然后网页跳转到注册页面中。
账号注册栏主要以表单的形式注册，使用了element框架，相关工作人员进入到注册页面中后就需要填写相应的账户信息，例如：
用户名、邮箱、密码、身份信息。
因为现在是工作人员注册账号，所以我们将身份调整为“工作人员”，当我们输入了别的信息后，页面会对当前输入的用户信息进行验证，注册也有一定的规则判断，相关规则逻辑如下：
（1）用户名不能为空，判断用户名长度是否是以2~30字符的账号，并且判断用户数据库中没有相同的用户名，否则报已经有相同用户名的错误。
（2）密码不能为空，并且判断用户密码长度是否以6~30字符密码。
（3）邮箱不能为空，并且设置这行类型是email类型，确保是正确的邮箱格式。
（4）确认密码不能为空，在输入确认密码后，会用之前输入的密码与其比较，如果相同则正确输出不报错，否则提醒用户两次密码不相同。
如果以上判断都没有出现错误后，工作人员点击表单中右下角的“确认注册”，页面就会将表单的数据传输中服务器中的数据库中，确认完注册后页面重新跳转到登录界面中，工作人员可以将之前注册过的用户名和密码进行登录操作。
同样游客注册同理，仅需把选择身份修改成为“游客”就行。
图4.1.1注册页面
4.1.2用户登录
当用户注册完成或者已经拥有账号时，用户可以通过登录界面输入相应的账号用户名和密码，后台确认是正确账号信息后可以进入到系统主界面中。
登录页面依然采用的是表单形式，输入框中的账号id和密码失去焦点后会进行判断，判断如下：
（1）账号要求跟注册要求一样，判断用户id长度是否在2~30位。
（2）密码也如注册要求相同，判断密码长度是否在6~30位。
如果不符合要求就会弹出红框提醒。
用户填写完表单信息后，页面便会将表单内数据提交，调用后台接口。
后台接收到表单信息后，与数据库内信息进行比较，相同用户便成功登录，否则失败。
用户成功登录后，与此同时服务器端也会给用户一个token，时长设置为十小时，主界面的各种操作都是要通过该token进行访问，如果该token过期后，后台会检测到相应信息，并且通过路由守卫将用户强制返回到登录页面，需要用户重新登录以获取新的token。
图4.1.2用户登录页面
4.1.3用户登出
相关用户操作完相关操作后，想要登出用户账号，可以在主界面右上角点击下拉列表中的用户注销。
点击注销按钮后，用户将会自动返回登录界面中，并且之前登录信息的token也会一同被清除，想要获得新的token就需要重新登录新的账户信息。
图4.1.3用户登出按钮
4.1.4忘记密码
本系统也考虑过相关人员忘记了密码账号问题，如果遗失账号不仅又要重新开一个新用户添加麻烦，而且频繁开新用户也会给服务器端造成负担影响，所以也设置了一个用户找回密码功能。
在登录界面中可以选择忘记密码按钮，然后进入到找回密码界面。
进入找回密码界面后，用户需要输入之前在注册过程中用户id以及email，如果用户成功在表单中输入正确的id和email与数据库中对应信息相匹配后，然后会跳转到修改密码页面，之后修改密码的判定和之前注册判定相同，用户只需输入附和判定的密码后就可以成功修改密码。
修改完密码，表单将数据重新传回到数据库中，并且更改相应的数据，极少时间等待后自动跳转到登录界面，用户可以直接使用新密码来登录系统。
图4.1.4用户找回密码界面
图4.1.5用户更新密码并返回首页界面
4.2主界面
主界面主要分三个部分组成，头部栏，侧边栏，以及主体内容区域，因为为了防止主体内容区域代码混乱，我也是将这三部分分为了三个文件去写，写完再用import进行引入，使得代码可读性提升。
4.2.1首页
主要用来展示系统的总体概貌，展示系统功能，主界面内容里面有公告栏和走马灯，可以快速浏览最近的公告信息以及提醒用户。
主界面下方是可以快速观察到现在还有多少剩余房间剩下，减少工作人员的按键操作，减少工作繁琐性。
公告采用的是自定义Table属性，图片浏览展示使用的是带click指示器触发的走马灯。
剩余房间数是引入房间信息库，将未开房间id数目统计显示到主页面中。
4.2.2开房信息
用户想要查看房间信息时，可以点击侧边栏的开退房记录的二级下拉框的开房信息进行查看。
房间查看使用的是element的table属性，因为房间数目过多也使用了分页功能。
房间的具体信息是首先调用了后台的RoomDialog接口，就是房间数据库中的信息，然后遍历房间信息，成功后边将房间数据显示在准备好的table表格属性里。
图4.2.2房间信息列表
4.2.2.1添加房间
工作人员登录到系统，可以对房间的相关信息进行操作，如果有酒店范围扩大后，需要添加新的房间信息，工作人员便可以使用该按钮来进行添加房间操作。
点击添加房间按钮，网页便会弹出一个填写框，用来填写房间相关数据，为了防止员工在填写出现差错，填写完后也有相应的判断：
（1）房间号不能为空，并且不能与现在已经有相同的房间号重复，否则无法添加。
（2）房间类型以及价
升级会员 