本文已参与「新人创作礼」活动，一起开启掘金创作之路。 # 【Web前端】酒店管理系统 # 一、系统概述：该系统通过Sublime Text编辑器编写完成，涉及到了htnl、css及javasrcipt的相关代码，实现了一个酒店管理系统。该系统分为前台页面和后台页面，前台页面用于客户浏览与选择预订客房，后台页面则只能由酒店管理人员进行操作。在前台页面，客户可以查看相关的酒店信息与浏览相关客房信息，并可以通过手机号等信息进行客房的预订。登陆后可以看到自己的相关酒店预订信息。只有酒店的管理人员才可以通过对应账号密码进入后台，对客户的一些预订信息进行审核修改等一系列操作。同时，系统中还有设置了英文界面与酒店的地理位置联系方式等信息，及相关的新闻资讯可以直接点击跳转至相关页面，以为客户提供更好的服务。 # 二、系统功能分析前台模块：实现用户与酒店管理人员的登录、客房信息与酒店信息的展示、客房预订界面与新闻资讯界面后台模块：实现对客户信息与酒店客房信息的增删改查 # 三、系统主要内容： 1.酒店主页：展示酒店概要等相关信息 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc895181a8ab4b01aff34a07f8fcfc7a~tplv-k3u1fbpfcp-watermark.image?) 关键代码： `` ```html 拟家商务酒店-首页

★★★★★

拟家商务酒店

H.L Business Hotel

语言：中文 | English 登录

：XXXXXXXXXXX

地址：厦门集美区银江路185号(集美区政府对面)

最新资讯

在线查询

客房预订流程

酒店简介 Introduction

　　拟家商务酒店是金叶级绿色饭店，酒店占地25万平方米，最漂亮的是她价值连城的生态花园—馨韵园，面积达7万平方米。郁郁葱葱的凤凰山、风光旖旎的馨悦湖、春色满园的绿茵、争奇斗艳的鲜花、翩翩起舞的蝴蝶伴随着中国都市里极其罕见的超大型稀有生态花园。酒店四季如春、自然奢华，风景如画，静、美、雅、温馨并具中国文化特色的“都市绿洲”浑然天成，是成功商务、会议和度假的世外桃源。
　　拟家商务酒店位于厦门市集美区银江路185号，集美区政府对面。地理位置优越，交通十分便利。
　　拟家商务酒店康体设施一应俱全，是高档的休闲、健康、运动场所，拥有室内恒温水疗游泳馆、1690米店内花园跑道和2个国际标准网球场，有氧运动的自然健康生活方式在这里精彩体现，随时享受大自然，从中获取心灵的满足。
　　酒店会议宴会场所主要有1100㎡高度6米的无柱的千人会议宴会大厅、370㎡国际会议厅、530㎡的宴会大厅和超级奢华的总统别墅贵宾楼大厅，同时配备最新的和专业的会议设施，包括六国语言同步传译系统和环形麦克风系统等高科技会议设备。酒店设有金潮苑中餐厅、绿庭自助餐厅、红夫人西餐厅、日本料理，主营潮州菜、闽菜、川菜、淮扬菜、法式菜肴等。厦门悦华酒店共有427间套各式五星级豪华花园客房或别墅客房。完全独立的行政楼宇空间非常宽敞、全程行政管家服务、独立行政中心配置，房内高速宽带网络、会议室、阅览室、网吧、自助餐厅和行政酒廊一应俱全，更加方便，是厦门高档商务客人聚集之所。馨韵商务楼花园客房视野开阔，推窗即是拟家上万平方米的皇家花园，6-7楼客房更可欣赏杏林海湾美景。
【温馨提示】：酒店可免费提供24小时别克商务车免费接送机服务，如有需要请提前24小时预订并告知客人姓名、手机号码、航班号和抵达时间和人数等详细信息。

2020年开业共666间房
客房WIFI免费,房间内高速上网,公共区WIFI免费,免费停车场

友情链接

网站首页 | 关于我们 | 人才招聘
Copyright @ HLHotel.cn All rights reserved
中国•厦门市　拟家商务酒店　H.L Business Hotel ICP备11101838号

``` 2.客房预订界面：实现客房的预订 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1794da6992c8403c92e0797aa2b475fc~tplv-k3u1fbpfcp-watermark.image?) 关键代码： ```html 拟家商务酒店-首页

★★★★★

拟家商务酒店

H.L Business Hotel

语言：中文 | English

：XXXXXXXXXXX

地址：厦门集美区银江路185号(集美区政府对面)

在线查询

客房预订流程

在线预订 Reservations

首页 > 在线预订

客房名称	客房类别	余房(间）	单价(元)
环礁泳池大床房	标准	172	¥666.00
环礁泳池双床房	标准	103	¥699.00
豪华海景双床房	豪华	96	¥1413.00
豪华园景别墅	豪华	16	¥1314.00

共5页，当前显示第 1 页

1、请选择您需要的入住时间和离店时间查询房价，不同时间段价格可能不一样；
2、报价为散客现付最低优惠价，即打折后的价格，已经低于前台散客价；
3、如您到店时间晚于预订保留时间、或房间紧张时，为确保入住，可能要求您提供信用卡资料进行担保；
4、在线提交订单后，预订信息会同步进入我们的订单库，请勿再通过其他途径预订，以免产生重复预订。

网站首页 | 关于我们 | 人才招聘
Copyright @ HLHotel.cn All rights reserved
中国•厦门市　拟家商务酒店　H.L Business Hotel ICP备11101838号

``` 3.登录界面：实现用户与酒店管理人员的登录 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d33444cf370c4c769e6e40e7ee652d8b~tplv-k3u1fbpfcp-watermark.image?) 关键代码： ```html 欢迎登录后台管理系统

您好，欢迎登录后台管理界面平台

记住密码忘记密码？

网站首页 | 关于我们 | 人才招聘
Copyright @ HLHotel.cn All rights reserved
中国•厦门市　拟家商务酒店　H.L Business Hotel ICP备11101838号

``` 4.英文界面：实现界面的英文化 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/337cd751f1c14a34ae6735b31f8655bc~tplv-k3u1fbpfcp-watermark.image?) 关键代码： ```html H.L Business Hotel

★★★★★

H.L Business Hotel

Language：简体中文 | English

：XXXXXXXXXXX

Addres：185 Yinjiang Road, Jimei District, Xiamen (opposite to the government of Jimei District)

NEWS

Search Online

Booking

Introduction

友情链接

``` 5.新闻资讯界面：实现新闻资讯的查看 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4ca9a8cde1294b88b5bfbc70e57befe3~tplv-k3u1fbpfcp-watermark.image?) 关键代码： ```html 山西首家，太原万怡酒店开业-厦门悦华酒店

★★★★★

拟家商务酒店

H.L Business Hotel

语言：中文 | English

：XXXXXXXXXXX

地址：厦门集美区银江路185号(集美区政府对面)

在线查询

客房预订流程

酒店新闻 News

首页 > 酒店新闻 > 酒店新闻展示

山西首家，太原万怡酒店开业

2020.05.25

太原万怡酒店作为山西省内首家万怡酒店，标志着万怡酒店品牌在大中华区业务版图的持续扩张，以“燃情并进”的全新品牌定位，为更多商旅宾客带来优质的住宿体验。

万豪国际集团大中华区特许经营及运营支持副总裁叶海英表示：“我们很高兴迎来太原万怡酒店的盛大开业，成为万怡品牌在山西省的首家酒店。太原万怡酒店位于太原新城南部的核心地带，我相信酒店将会为这个日益繁荣的目的地带来全新活力，与宾客以燃情前行，打造活力焕发的商旅和休闲旅行体验。”

拟家快捷酒店交通指南

酒店位于厦门集美区中心地段，步行可至集美学村地铁站，交通便利。
- 距离嘉庚公园1公里，步行约20分钟；
- 距离厦门高崎国际机场2公里，乘坐出租车约15分钟；
- 距离厦门北站2公里，乘坐出租车约15分钟。

``` # 四、总结在该酒店管理系统中，我主要完成了酒店客房预订、酒店相关信息、客房图片的展示、英文界面等功能。通过表格框架与div分别实现页面整体布局，同时使用css样式美化界面。在系统的编码过程中还运用了javascript中的相关控键进行酒店管理系统的优化。通过本次系统的实现，学会了通过Sublime Text编辑器对网页系统进行编码与运行。能够更加熟练的运用Web前端开发的相关知识到实际系统当中。对于不足之处，在系统设计过程中，对于一些样式样式的运用不能够熟练还需要多加练习。同时，系统还有一些酒店地理位置显示、英文显示等界面有待优化。

入住时间：
离店时间：

入住时间：
离店时间：

Check-in：
Check-out：

入住时间：
离店时间：