摘 要
随着经济的飞速发展与社会的不断进步，中国酒店产业的发展速度也随之攀升。如快捷酒店以及假日酒店等特色酒店也为了满足不同团体的住宿需求因此应运而生。现代化酒店的服务构成包括各种各样的如客房、餐饮以及娱乐等服务设施，其是集成各式各样的服务为一体的消费场所。因此，这类酒店通常具备较大的组织规模以及服务品类等。而酒店服务质量以及管理水平的提升可促进经济效益的勃发，因此，有必要设计一套基于JavaScript的酒店管理系统。本酒店管理系统以改善酒店管理的效率为出发点，设计了一个现代化的网上酒店管理系统。
关键词：JavaScript；现代化酒店管理系统；服务设施；高效率
1绪论
1.1设计的背景与意义
伴随着互联网的飞速发展，电子商务在企业中所发挥的作用越来越重要。随着网上购物的普及和电子商务的在线购物服务的持续改善，电子商务逐渐形成了规模宏达的经济体，与实体经济一起为社会和经济的发展注入了新的活力。
与传统商业相比，商业的电子化具备着传统商业无可比拟的优势，即低成本率与高效率性。商业电子化的开放性也能给企业带来更多且质量更高的交易机会。电子化的物流模式能减少许多中间环节，能够轻易实现生产者与消费者之间的直接交易，能够实现互惠互利[1][2]。
在此次毕业设计中，从整体规划出发，以温德姆酒店网站为基础，将其作为对外宣传、推广、服务的载体，来配合酒店的发展和需要。本人设计并开发的酒店管理网站具有鲜明、动感、庄重、大方而又不失功能的特色。
酒店管理网站的建设，首先必须确定网站目标群体，并根据网站整体风格的预设、网站客户的要求进行网页设计，内容丰富、实用的网页可以吸引更多顾客关注网页。作为酒店信息的载体，这个网站提供的信息服务的深度和宽度是由目标的需求决定的，网站信息的内容和形式决定网站的功能。因此，本人通过对广州温德姆酒店的调研情况，结合自己大学中所掌握的知识以及课外自学知识，选择基于JavaScript的酒店管理系统设计与实现为毕设题目。设计实现一个功能齐全完美的“酒店管理系统”网站[3][4]。
1.2国内外研究现状
相较于网页制作发展成熟的国外网站，其技术含量普遍高于国内的多数网页。国外的网站有不少成熟的技术例子，例如使用到Bootstrap、jQuery等框架。他们的成熟技术使得网站在各方面都有不错的表现，比如X亚马逊网站和TIK TOK官网，在内容以及视觉效果上都能吸引用户的眼球。在内容上，国外网站的布局大气、清晰，使人能在舒适的用户体验下循序地了解网站所陈述的主题。在形式上，网站运用了多种优秀的写法，使网站在有不错的互动动画的同时不卡顿，完美地提高了用户的体验，又如人们熟知的X的google网站，它利用了特殊写法，完美解决了多次检索造成的搜索速度减慢，影响客户的体验感的问题。
在近几年，中国的网站制作技术也有不小的进步。随着网络技术的发展，5G网的出现和操作系统不断地更新，操作系统Window10的出现，以及chrome、Firefox等优秀浏览器的广泛应用，中国互联网的制作技术在各方面都有了质的飞跃。过去网站的作用仅具有图片的内容介绍和简单的动画。而今的网站覆盖了企业生产经营管理的各个部门，在整个企业范围内能提供实时的硬件、软件和信息资源共享。从国内一些著名的游戏官网可以看出，开发者对网站的编程不断改进，就如腾讯游戏中的《地下城与勇士》官网，它能够进行游戏的数据模拟。当然也有不少网站也开始针对用户需求，提供各种应用。总体来说，用户对网站的需求在与日俱增，网站的开发者需要不断的对自身的网站系统进行改进，从而达到用户的需求甚至超过用户的需求。
1.3酒店管理系统的设计优势
酒店网站其表现形式是对酒店海量的信息数据输入、存储、处理和输出的过程，其作用主要表现在酒店的管理以及经济效益提升、整体服务质量的提升、管理人员工作效率的提高以及酒店内部管理体制的完善。
在酒店的管理以及经济效益提升中，酒店管理系统应用程序可以节省很多劳动资源，简化酒店服务项目，改善酒店服务水平，减少管理漏洞，整体来说能改善酒店的经济利益。建立预约功能可以有效防止房间不能租借，或者重复预约房间，提高房间的租金，随时可以提供准确的房间使用情况。合理控制房间的价格，减少管理漏洞，提高酒店房间收入。
在整体服务质量的提升中，计算机信息高速处理的使用，可以大大减少客人的等待时间，以便工作人员检查和改善服务质量。管理系统的使用能迅速取得顾客信息，解决顾客的需求，让顾客得到满意的答复。管理系统加入顾客入住信息的管理，让客人的“个性化”服务可以更好地实现。同时积累以消费者为对象的历史信息，通过分析数据，可以对一次消费量达到一定水平的顾客自动给予便利性的折扣。
在管理人员工作效率的提高中，使用电脑管理可以大大提高酒店管理人员的操作速度和精度。电脑资料的正确保存避免了手抄客人入住信息的低效率工作，同时也减少纸张的使用，减少资源的浪费。同时，严格的数据检查避免了工作人员操作的疏忽而造成的错误。
在酒店内部管理体制的完善中，科学、标准化、系统化的酒店网站系统在酒店管理系统中发挥着强大、稳定的作用。系统提供的多种安全级别，更能保证各类数据不被无权访问的陌生人查询和操作，进一步加强了酒店的相关管理手段。
2相关技术
2.1 JavaScript
JavaScript是名副其实的脚本语言，是以动态型、弱型、原型为基础的语言。内置支持类型，具有自己独特的垃圾回收等机制，解释器被称为JavaScript引擎，属于浏览器的一部分。目前，最新的JavaScript引擎是使用C++语言开发的V8引擎，广泛应用于主流浏览器的各种版本。JavaScript是当前脚本语言中广泛使用的一种，主要是提供网页动态效果的功能。
它的出现，起初只是进行简单的信息和用户之间的一种实时的，动态的，可交互的脚本表达能力。基于CGI静态的HTML页面将可以通过JavaScript提供动态实时信息，并对客户操作进行一系列的反馈。目前它是属于众多脚本语言中表现较为优异的一种编程语言。随着HTML5的出现，JavaScript的扩展功能可以实现HTML5和交互平台应用Web的开发。因此，我们必须更加注意学习和掌握写脚本语言的基础能力。
JavaScript之所以应用范围如此广泛，主要是由于其具备面向对象的特点、简单易学的特点以及具备安全性与动态性特点。具体来说，JavaScript是面向对象的语言，也是面向对象的编程语言。这意味着可以像其他语言一样声明并编译所创建的对象。因此，可以从脚本环境中的对象和脚本方法之间的相互作用中获得许多功能；JavaScript的简单性主要体现在：它是一种语言的弱脚本。而且，由于现版本编程数据类型的使用率较高，因此无法达到严格的声明要求，而JavaScript是基于Java基本声明和控制的脚本语言；JavaScript是安全性高的人气编程语言。这不允许将数据存储在服务器上，不允许访问本地硬盘数据。JavaScript的安全限制受到同一源策略的保护。脚本只可以从同一源读取Windows和文档属性。这里的同一源主要是主机名、协议报文和端口号的组合。仅通过浏览器实现信息的阅览和动态的相互作用，更有效地防止数据的损失；JavaScript是动态的，它可以直接在浏览器中发现用户的行为，并根据事件驱动作出相应的反应，而不需要使用网络服务程序。事件驱动主要是指通过执行页面内的特定操作而生成的特定事件。例如，单击事件、滚轮事件、鼠标移动事件，触发这些事件时，会发生相应的程序事件，以响应程序。
2.2 jQuery
jQuery是免费的开源。使用jQuery的语法设计、文档对象的操作、DOM元素的选择、动画效果、事件处理、AJAX等设计更方便。另外，jQuery还提供开发者撰写插件的API，使用此模块将有助于开发者开发强大的静态或动态页面。
jQuery具备漂亮的页面动态效果，可创建Ajax无刷新页面，并能够提供针对JavaScript语言的增强，且也能增强事件处理机制。具体来说，jQuery中内置了一系列动画效果，可以开发出视觉效果最佳的页面，现主流的大多网站都使用jQuery的内置效果，比如淡入淡出、元素移除等动态特效。Ajax是异步JavaScript和XML的省略形式。而且，它可以开发一个功能强大的网页，特别是开发PHP网站等服务器页面时，需要经常和服务器前后通信。如果不使用Ajax，需要每次更新页面，而使用Ajax后，你可以更新局部页面的同时也能提供动态效果。jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。jQuery提供所有类型的页面事件。这可以避免在HTML中添加太多的事件处理代码。最重要的是，事件处理程序排除了所有类型的浏览器兼容性问题。
2.3 Microsoft SQL Server 2005
SQL Server是一个全面的终端对终端数据解决方案。它为企业用户提供安全、可靠、高效的平台，用来管理他们自己的数据和商业信息。SQL Server 2005减轻了从移动设备到企业数据系统的多个平台上的企业数据和分析应用的创建、展开、管理和使用的复杂性，为网站开发者及相关的IT行业的专家提供强大且熟悉的工具。SQL Server 2005提供了一个相对完整的数据解决方案，通过对小功能集、现有系统的整合以及日常业务的自动管理能力，进一步贴合不同程度和规模的企业。
3详细设计与优化
详细设计阶段的基本目标是决定酒店系统的实现方法。也就是说，在该阶段的设计工作之后，需要获得目标系统的准确描述，再将描述通过编码的程序实现。详细设计的目的不仅是在逻辑上准确地实现每个模块的功能，而且尽可能简单地完成设计。
3.1前端总体设计
3.1.1总体分层开发
根据项目不同内容，分为不同功能的子模块，项目开发根据模块分阶段执行，便于将来开展和维护系统。在有限的时间内用有规律的方法完成模块和功能，减少时间的浪费，降低开发成本。整个过程使用JavaScript脚本来构建底层，并完成整个结构框架的构建、每个子模块的设计和规划、每页网页的设计和制作、交互效果，最后进行内部测试、缺陷修复、代码优化等作业。
3.1.2代码编写
大致流程如下：利用HTML5搭建各个子模块的页面结构，对页面中的元素和页面布局添加样式来美化页面，最后搭建JavaScript脚本语音编写相应的代码，在代码中所需的脚本插件。利用自模块逐层开发的方法，减少整体调试
代码所消耗的时间，从长远发展的角度看，这种开发有利于系统的维护、管理、完善和扩展。
在整个设计过程当中，首先计划每个子模块的开发序列，根据每个模块的布局设计必要的页面元素，撰写每个页面的对应代码。再调试、检测分析各个子模块的页面代码。最后将各个子模块连接未一体，进行整体的检测。
3.1.3内部测试及后续优化
前端内部测试主要优化页面的细节样式，以便观察页面与整体设计的差异，发现问题并对其进行修改。使用IEtext显示页面兼容性问题。修正所有细节和兼容性的问题，进一步优化文件代码，尽量压缩文件大小，减少外部HTTP连接请求的数量，优化访问速度。
3.2网站结构布局与设计
3.2.1网站首页结构
本网站实际内容约占网页60%~80%的空间，导航部分不超过10%。
网页色彩的搭配具备色彩鲜明、艺术性、独特性以及合理性的特点。具体来说，色彩鲜明，为的是让客户耳目一新的感觉，引人注意；色彩具有艺术性，本人考虑本网站本身的特点，大胆进行艺术创新，设计出了既符合网站要求，又具有一定的艺术特点的酒店管理网站；色彩具有独特性，本网站以淡蓝色为主调，并且用了多色彩搭配的渐变背景色和条渲染效果，以便给浏览者留下深刻的印象；色彩搭配合理，本网站中的各个网页的色彩是根据主题确定的，不同的主题选用不同的色彩；图片的展示，本人采用动态轮播图方式展示酒店的风格样貌以及房间样式，为客人提供客房的最优选择；文字的展示，标题区和正文区使用了不同大小的字体，主要使用的是静态的宋体文字，并用鲜明色彩显示标题级文字，引起客户注意。
总体来说本网站具有较为完善的功能，风格简洁大方不单调。现已调试完成整体系统的功能，各个子模块和相应的子页面都可以达到预期效果。
3.2.2子页面设计
子页面的设计风格遵循主页的设计风格，设计样式基本一致，网页主体信息板块便是各大模块内容的显示，制作过程中采用的制作方法和调用的模块内容跟主页的基本一致。
4功能实现与界面展示
4.1设计总体功能
本设计以广州温德姆酒店需要建立新网站业务，以MicrosoftSQL Server2005为数据库开发平台，采用JavaScript+jQuery技术展示动态网页技术，实现前台用户页面和后台管理员页面。本系统所使用数据库中的表共有5张表，如上3.3节所示：客户注册信息表、客房信息表、餐饮信息表、酒店工作人员信息表、酒店停车位信息表。本系统的总体功能如图4-1总功能模块图所示：
图4-1总功能模块图
如上图4-1所示的总共能模块图，可将酒店管理系统分为前台功能模块与后台功能模块。具体来说：
在酒店系统前台功能模块中包括：
（1） 首页：包含客房展示、客房预订、新闻浏览、酒店简介、会员注册和登录
（2） 注册：注册页面实现注册用户功能。
（3） 登录：登录页面实现用户登录功能
（4） 信息页面：包含客房展示页面、预定客房和客房信息查询
在酒店系统后台给酒店管理者使用的网页界面中包括：
（1） 用户管理界面：用于浏览和修改酒店用户信息
（2） 客房管理界面：用于查询入住用户的基本信息以及客房信息
（3） 日常业务管理：用于管理会员信息和退换房管理
本网站的主要特点是以蓝白色为主导颜色；主题颜色：白色；字体：微软雅黑。网站统一顶部为导航条，内容包括：酒店的LOGO，首页，客房介绍，会员登录，联系我们。首页网站上中部分：banner图片，实现自动轮播功能，也可以自行选择图片查看。 网站中部：预定信息；新闻内容；图文信息。网站底部：网站/版面制作；版权信息。
4.2具体文档设计
4.2.1网站导航栏设计
本页是浏览本站的首页面，在首页面中除了要考虑系统的功能，对于页的分布布局设计也很重要，好的布局更能吸引消费者的眼球，给消费者留下深刻的印象。在本页中，主导航页在最顶端，整体色调以蓝白渐变为主，导航条包括酒店的LOGO，首页，客房介绍，会员注册和联系我们。非注册用户可以通过注册浏览酒店的信息，成为会员可以享受第一时间的客房更新信息。导航界面如下图4-1所示：
图4-1导航栏界面
具体实现为利用浮动，合理分配LOGO跟子页面链接信息进行布局，对超链接<a>标签下划线进行去除操作，利用background-image属性的liner-gradient属性进行渐变渲染，使得导航栏的背景颜色不凸显生硬，让导航整体视觉效果更柔顺。利用ul+li无序列表进行排列，部分按钮的具体代码如:<ul><li>首页</li></ul>。当点击“首页”、“房间介绍”、“会员注册”、“联系我们”按钮时，会自动跳转到该页面。也可以点击左侧的LOGO进行首页的跳转。
4.2.2网站轮播设计
在网站轮播设计中，其具体页面展示如下图4-2所示：
图4-2轮播界面设计
具体功能实现为利用一个盒子将4张图片进行存储，然后利用CSS3样式对图片进行编辑，把4张图片按先后顺序展示，并把图片多余部分进行隐藏操作。其中transform: translateY(-50%);为控制前进和后退按钮，其下方还有加了-webkit-，-moz-，-o-，-ms-前缀的样式，目的是兼容别的浏览器厂商，然后利用JavaScript实现图片的自动轮播效果。
4.2.3客房查询设计
在客房查询设计中，其界面设计如下图4-3所示：
图4-3客房查询界面
此部分由一个form表单完成，主要利用表单的required属性来对信息进行查空检查，如果客户未能正确填写表单内容，网页会自动提示信息，提醒客户进行正确的填写。当客户点击<label>入住日期:</label><input type=”date” name=”” placeholder=”Date” required=””>，会弹出一个日期的选择栏，客户可根据需要预订的入住时间进行选择。当客户入住离开时间，人数和价格都选好以后，点击查找房间（具体代码：<input class=”checkedbtn” type=”submit” id=”ckbtn” value=”查找房间”>）便可进行房间查询。css样式方面总体利用float进行浮动调整位置，使得选项与选项之间的位置合理分布，提高整体页面的美观程度。
4.2.4客房信息及酒店环境展示设计
在客房信息及酒店环境展示设计中，其界面展示如下图4-4所示：
图4-4克服信息及酒店环境展示界面
此部分运用jQuery+JavaScript技术实现图片的展示，当鼠标移动到上半部分的图片时候，两张重叠的图片的Zindex进行分层，上层图片的css样式设置为{left: 20px; top: 200px; z-index: 2; }，当移动到前面的图片时候，后面的图片会被前一张覆盖（具体样式为：.content .content_right img:hover {z-index: 3; }。下半部分的图片为点击放大效果展示图，当客户鼠标移动到其中一张图片的时候会触发图片鼠标移动事件（代码具体为：onMousemove=”visible(this,0)” width=”148″ height=”121″），图片会进一步放大，从而展示更为细节的图片效果。
4.2.5底部信息设计
其底部信息栏设计，如下图4-5所示：
底部版权信息由三部分构成，分别为二维码图片，底部分栏以及版权号信息条。利用浮动效果给各个部分进行浮动修改，在运用position属性的relative（相对定位）来进行位置的修订。底部分栏采用VUE技术，利用v-for来进行数据遍历，目的是为了减轻代码量（代码为：<dl v-for=”item in server”><dt><h3>{{item.title}}</h3></dt><dd v-for=”i in item.content”><a href=”#”>{{i}}</a></dd></dl>），从而使得浏览器对HTTP的请求量减少，提高浏览器的加载速度。当客户浏览本网页，可根据需求点击快速链接下的超链接，进行“房间介绍”、“服务介绍”、“新闻中心”、“联系我们”页面访问。也可以了解本酒店的餐厅、酒吧、接送、泳池、SPA、健身等服务。如果需要更改个人信息，也可以点击个人服务下的“账户管理”、“购物指南”、“订单操作”进行操作。
5结论
本设计基于JavaScript的酒店管理系统设计的网站，其前端设计使用了JavaScript以及jQuery。在页面布局使用HTML5中页面布局元素进行了页面的设计；利用JavaScript和jQuery实现相应的效果及交互。本网站的建立，不仅能使得的客户了解酒店的 信息，更能让世界了解企业。网站将企业的资源信息进一步展示给客户，极大地提高了酒店的知名度。
为了完成此次网站建设所涉及的知识和技术，让作品更完美，本人在学习
JavaScript的同时，利用Ps以及jQuery进一步完善了网站的建设，使得页面交互性、动态效果更强。通过本设计本人体会到，学海无涯苦作舟，以后要学习的知识还很多。
在本设计的制作过程中，本人借鉴了欧美相关网站的设计风格，并尝试运用自学VUE框架技术，减少相关代码量，从而方便日后的维护任务。同时在编程过程中，需要注意的细节有很多，比如各个模块程序之间的样式功能代码是否冲突，JavaScript和jQuery的实现代码中是否存在命名ID冲突的问题。如果不对此加以注意，极容易造成网站的崩溃，从而功亏一篑，细节决定成败。在以后的开发软件的道路中，本人一定要认真细心编制、调试代码，做到不粗制滥造，使得各个模块代码功能清晰、易读，维护起来既能方便自己也能方便他人。
本文详细介绍了设计“广州温德姆酒店网站”的各个模块功能和设计流程。虽然本网站具有交互性较强、是一个实用的网站，但是网站中仍存在一些不足之处，如网站仍存在部分的bug没完善修复等，这些问题还有待于本人进一步学习和修改。
参考文献
[1]梁静琳.DIV+CSS布局技术在网页设计中的应用[J].武汉工程职业技术学院学报,2009,21(01):42-45+52.
[2]李炳练.基于jQuery框架的无刷新技术设计与实现[J].珠海城市职业技术学院学报，2011.
[3]俞国红.利用jQuery框架技术快速开发网站前端页面[J].健雄职业技术学院学报，2011.
[4]刘玉红. HTML5+CSS3+JavaScript网页设计案例课堂[M].北京：清华大学出版社，2015.
致 谢
本次毕业设计能够顺利完成离不开指导老师的帮助，非常感谢老师在各个方面的指导，悉心教导我如何做学问和做人，这对我今后的人生旅途和发展道路有莫大的启发。同时在老师的指导下，动手能力有所提高，对编程中指令的书写更规范。同时在系统开发的过程中，我的同学也给予了很大帮助，不仅帮我解决了不少难题，更使我认识到团队协作的重要性，相信世上无难事，只要肯登攀，没有克服不了的困难。
由于时间比较少，加上本人对网站设计的经验不足，因此在分析问题，解决问题上显得不够严谨、完善，还需要在以后的工作中不段地改进。同时在此次毕业设计中，也让我深深感受到了网站的开发并不是一件轻而易举的事，这需要网站开发者具备多方面的专业知识、缜密的思维和踏实严谨认真的工作态度，以及较高的分析问题和解决问题的能力，而我在很多方面都有所欠缺。
最后，还是要衷心感谢大学四年里传授我知识的所有老师，四年中是他们给予我无私的帮助和教诲，我将永生难忘。在平常的学习生活中，各位老师不辞艰辛的工作，为的就是让我们在各个方面的能力都能得到一定的提高。虽然我就要离开学校、离开可敬的老师们，但我要继续不断的学习新知识，不辜负老师们的希望，紧跟社会发展的步伐，成为社会有用的人才。
1、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“文章版权申述”（推荐），也可以打举报电话：18735597641(电话支持时间：9:00-18:30)。
2、网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友投稿，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务。
原创文章，作者：1158，如若转载，请注明出处：https://www.447766.cn/chachong/160391.html,
