基于HTML5的旅游网站设计

陈希

摘要：HTML5的优点在于可以进行跨平台使用，目前越来越的网页和网站使用了HTML5。该文基于HTML5从网站架构设计、系统功能模块结构设计、数据库设计、B/S与MVC结构图4个方面叙述了旅游网站的设计。

关键词：HTML5； B/S；旅游网站设计

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2016）27-0265-02

Abstract： HTML5 has the advantages of cross platform use， at present more and more web sites to use HTML5. This paper describes the design of Travel website based on HTML5 from 4 aspects： website architecture design， system function module structure design， database design， B/S and MVC structure diagram.

Key words： HTML5； B/S； travel website design

1 引言

随着人们的生活水平不断提高，人们的生活方式和观念也发生了改变。旅游作为一种休闲方式已经成为人们假期的重要选择。电子商务模式的发展和不断扩张的网民规模，也让越来越多的人习惯了从旅游网站上获取相应的信息和订购旅游产品。随着技术的发展，HTML5的出现也为旅游网站的建立带来了一些新的技术。

HTML5是W3C（万维网联盟）制定的一个新标准，提供了众多的新元素，它代表了web业务和云业务在实现方式上的改变。HTML5是一种专门用于组织Web内容的语言，它通过创建一种标准化的、直观的UI标记语言简化Web设计和开发[1]。本文将设计一个基于HTML5的旅游网站。

2 旅游网站设计

旅游网站服务的对象是旅游者，所以网站提供的信息也应围绕游客的需求而制定。网站的主要设计思想是从用户角度出发，尽可能让用户能方便快捷的获取相关的旅游信息和订购相应的旅游产品。应设计美观和操作方便的界面，且各个界面之间相互关联。因此基于用户的需求本网站的开发目标主要为三个方面：一、为用户提供详细全面的旅游咨询服务；二、为用户提供便捷的票务、酒店预订等服务；三、为用户定制合适的旅游路线服务。

2.1 网站架构设计

通过对旅游网站进行需求分析，确定该系统的主要功能为：资讯管理、用户信息管理。资讯管理主要包含对景点的相关内容介绍、景点的游玩路线、旅游产品的订购等。用户信息管理包括用户咨询浏览、旅游路线订购情况、特色信息等。确定了系统的主要功能后就可以对系统的总体架构进行设计，其架构设计主要遵循四层：显示层、应用层、逻辑层、数据层，如图1所示。

2.2系统功能模块结构设计

该旅游网站采用HTML5+CSS3+Javascript编写，将页面内容和数据分离，使用了数据库存储相关数据信息。系统的功能模块是旅游网站设计的一个重要元素，功能模块包含了旅游资讯、预定中心、风景欣赏、公司简介、信息查询、管理员模块。旅游资讯模块包含了国内和国外旅游资讯，预定中心包含了火车票、机票、酒店等相关旅游产品订购。管理员模块包含了对各种信息的维护与更新。如图2所示。

2.3 数据库设计

旅游网站的数据库模块是网站的一个重要部分，所有的页面都是围绕数据库的相关操作编写展开的。如果用户以游客身份进入网站，只能浏览旅游网站提供的资讯信息而不能进行相关旅游产品的订购。如果用户以注册用户登录就要用到用户注册模块，用户注册模块将用户提交的个人信息存储到数据库相对应的表中。用户注册登录后可以进入信息显示模块、信息操作模块、用户管理模块。如图3所示。

用户的注册模块与登录模块使用同一张数据库表，当用户注册时，系统通过连接池中已有的连接取得数据的操作权限，将数据信息写入到数据表中。如果没有所需要的连接，则直接访问数据库建立该连接并将连接写入连接池。用户登录模块是当连接池获得连接后，系统从数据库相对应的数据表中读取数据，由用户登录模块验证数据正确性。用户成功登录后可以获得相应的服务，可以对相关信息进行操作和管理。

2.4 B/S与MVC结构图

本旅游网站采用的是浏览器/服务器（Browser/Serve）模式。B/S架构是WEB的一种网络结构模式，B/S模式以访问数据服务器为中心，HTTP协议为传输协议，客户端通过浏览器（Browser）访问WEB服务器和数据服务器。这种模式最大的优点是统一了客户端，将系统核心内容集中到服务器上，简化了系统开发、维护和使用的代价[2]。而MVC的出现是为程序解藕，从而达到分工明确并且系统强容错性的目标。

MVC是一个框架模式，使用MVC应用程序被分成三个核心部件：模型、视图、控制器。模型表示企业数据和业务规则，表示了应用程序的状态。视图决定如何将数据展示给用户，可以访问模型的数据但不能对其进行修改。控制器接受用户动作并负责统一管理[3-5]。因此MVC将应用程序的输入、处理和输出分开，作为独立的但彼此之间相互联系的模块。如图4所示。

3 总结

在设计旅游网站的时候，设计人员需要认真考虑用户的需求和体验。HTML5的出现使得用户不管是使用笔记本、台式机还是智能手机都能很方便地浏览基于HTML5的网站。本文从用户需求出发结合旅游网站的行业特点设计了旅游网站的架构和系统功能模块。使用数据库做到页面内容和数据分离，在B/S和MVC结构下设计了旅游网站。随着目前移动设备广泛普及，HTML5在移动设备下将会越来越流行。

参考文献：

[1] 涂频.基于HTML5的网页设计应用[J].办公自动化：学术版，2013（9）：31-33.

[2] 刘文君，潘永惠.MVC模式在B/S架构中的应用[J].电脑知识与技术，2010，6（26）：7283-7284.

[3] 朱涛，张水平.基于B/S模式的教师信息管理系统的实现[J].电脑知识与技术：学术交流，2005（2）：60-62.

[4] 余冬梅，张秋余，林常须，等.基于J2EE支持多客户端的MVC设计模式研究[J].计算机工程与设计，2005，26（3）：784-786.

[5 吴艳.基于MVC模式B/S体系结构的课程管理系统的设计[J].浙江工业大学学报，2008，36（1）：86-89.