基于VueNode酒店管理系统的设计与实现Word下载.docx
- 文档编号:17077550
- 上传时间:2022-11-28
- 格式:DOCX
- 页数:41
- 大小:1.32MB
基于VueNode酒店管理系统的设计与实现Word下载.docx
《基于VueNode酒店管理系统的设计与实现Word下载.docx》由会员分享,可在线阅读,更多相关《基于VueNode酒店管理系统的设计与实现Word下载.docx(41页珍藏版)》请在冰豆网上搜索。
在主程管理员上,用户可以登录我们系统内查看相关房间数据,可以完成普通工作人员所具备的开房间,退房间的功能,可以修改个人信息内的相关信息,例如修改用户名,修改密码以及邮箱。
可以在房间总览上面主管理员还可以进行新增新房间操作,而且也可以修改目前所有相应的房间信息,方便推出新的房间。
在普通工作人员上,相较于主管理员的方面上,普通人员就相对于不能修改房间信息,但是也可以进行开退房的各种操作,在用户首页也可以看到当前主页面发出的公告信息栏,也可以进行账户名称的修改操作,在主界面也可以方便看到还剩余多少房间。
以及本酒店管理系统在这次设计也有相应目标需要完成,满足各方面问题,实现项目结果。
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
账号登录密码
账号电子邮箱
identity
账号身份
date
Date
否
账号日期
住房房间信息表含义如下表所示:
表3.5.3住房房间信息表
住房房间信息表BriefsSchema
字段名
id
房间登记id
roomid
房间编号
type
房间类型
price
Number
房间价格
state
房间状态
登录日期
游客信息表含义如下表所示:
表3.5.4游客信息表
游客信息表TouristSchema
tname
游客姓名
tnumber
游客电话号码
tidentity
游客身份证号
tsex
游客性别
店铺信息表含义如下表所示:
表3.5.5公告信息表
公告栏信息表LogSchema
title
公告标题
content
公告内容
预约栏信息表含义如下表所示:
表3.5.6预约栏信息表
预约栏信息表AppointSchema
anumber
预约者电话号码
aidentity
预约者身份证号
aname
预约者姓名
日期
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)房间类型以及价格不能为空,房间类型也仅限“单人房”,“多人房”,“总统房”这三种类型,否则无法添加。
工作人员在填写完相应的房间数据后,点击提交按钮后,页面便会将当前表单数据的内容传送至数据库中的房间数据表中进行存储,存储完毕后可以在当前房间信息中找到新的房间记录。
图4.2.2.1添加房间信息
4.2.2.2开房信息
当有游客想要预订房间,工作人员便可以点击开房按钮进行开房操作,因为工作人员登录有相应的token权限,所以可以进行操作。
开房操作需要游客填写相应信息,名字,性别,身份证号,电话号码信息,以及确认入住时间。
这些数据表都存放在房间信息的state(状态)里面,房间在没人入住时,状态表示的是‘0’状态,有人入住便转换到‘1’转态。
填写相应信息数据也会进行判断,判断部分如下:
(1)身份证号必须为17位数字,否则系统提示不符合正确格式身份证号。
(2)电话号码必须为11位数字,否则系统也会提示不符合正确格式。
填写正确后表单便将获得的数据存放到对应房间状态的数据表中。
图4.2.2.2开房操作表单
4.2.2.3精准查询
用户可以使用精准查询按钮,可以用房间价格和房间类型精确找出想要的房间类型,用户点击左上角精确查询按钮,选择想要查询的房间范围,选择好范围后,数据库会根据选择的房间价格(room.price)和房间类型(room.type)进行比较,然后选出符合项目显示在页面的表单中。
图4.2.2.3精准查询操作
4.2.3退房操作
有游客需要进行退房登记时候,工作人员可以选择游客对应房间进行退房操作,工作人员点击退房按钮时,系统会弹出表框,自动计算从游客开始入住以来到现在的日期,然后根据经过的时间自动计算需要交纳的费用,并且游客在退房手续时还要在报一次之前登记房间时的身份证号和电话号码,以防发生错误。
表单中输入身份证号和电话号码与后台的数据表进行比较,相同则返回,并在用户交纳完费用后,删除房间相关的游客信息,并且房间重置为未开房状态,房间的收入也同时记录在总支出收入表里面。
以下数据都是随意填写,不涉及真实人名数据。
图4.2.3退房操作
4.2.4收支信息
工作管理人员可以通过进入收支信息栏里面观察最近一段时间酒店的收支情况,因为文字的收支情况大多数都是繁复冗杂的,所以系统使用了Echart图表库,用可视化的形象使得查看收支信息简单。
导入Echarts组件,定义折线图表样式,在绑定option,收入状况选取游客退房时付费的金额,可以观察到酒店的收入情况。
图4.2.4收支图表
4.2.5预约信息
来访游客想要提前预约入住酒店可以使用本系统功能,游客登录本系统中,点击预约按钮,页面便会调用服务器房间(Room)接口,遍历完整目前尚处于未开房状态的房间,然后展示出来给游客看,游客可以选择心仪的房间,在预约房间只需要提供当前游客的电话号码,以及一部分的押金便可以完成预约,完成预约后,表单数据将会传入数据库中,同时房间的状态也会变更为开房状态。
后台也将预约的游客信息暂存到房间的state数据表中。
图4.2.5预约房间
4.3个人信息
用户可以在信息管理项目中找到个人信息按钮,里面包含用户注册时候的所有信息,以及每个用户独有的id码,用户可以在个人信息表修改个人信息。
个人信息栏中是调用了UserSchema用户数据库的用户名,并调用相应接口将用户信息输入到
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于 VueNode 酒店 管理 系统 设计 实现
![提示](https://static.bdocx.com/images/bang_tan.gif)