旅游网站的实现

2023.08.14

余萍

[摘要] 随着社会的发展，旅游业的发展越来越好。现在人们都会利用节假日、双休日旅游来释放自己的压力，由于目标不确定都会选择一些旅游网站来制定行程。但是，这些网站页面太过繁杂，功能也太多不太适合那些想旅游又没有计划的人，所以我做了一个比较简洁的旅游网站，其中有景点介绍、适合当季游玩的地点推荐，也增加了一些团购：可以团购酒店、景点门票以及当地美食。系统主要实现用户注册、登录，购物车、景点酒店搜索等主要功能。在开发过程中，使用JQ语言编写，数据存储采用Cookie，整个系统外观比较美观大方。

[关键词] JQ语言；旅游网站；AJAX

[中图分类号] TP393 [文献标志码] A [文章编号] 2096-0603（2018）07-0228-02

一、引言

（一）研究背景

随着网络的飞速发展，旅游行业也越来越热门，现在市面上有很多的旅游网站。但是这些网站页面不太适合那些想旅游但是没有目标的人，这些网站主要是机票酒店订购以及跟团游比较商业化，并不怎么会有景点介绍，以及当地特色风俗，这些都需要自己上网去查。所以大多数人只能选择跟团游，但是这样太过拘束，不适合一些喜欢自由的小情侣、闺蜜、朋友等，所以本人设计了一个比较简洁的旅游网站，有景点介绍、团购以及一些适合各季节和各类人旅游的城市推荐。

（二）研究的应用前景

该系统是一款旅游网站，用户可以在上面查看当季适合旅游的城市，上面也有其他用户上传的推荐旅游线路，用户确定旅游城市也可以在该网站团购酒店、当地美食以及景点门票省去了排队的时间，此网站主要方便旅游的人查看当地的特色景点、民俗风情，省去了自己一个个查找。

二、开发环境及技术支持

（一）H5前端开发环境

HTML5是万维网的核心语言，它是标准通用标记语言下的一个应用超文本标记语言的第五次重大修改。网页前端主要是根据UI设计师提供的规划布局好的设计图，然后用代码把它给展示出来再根据用户的体验进一步的优化。这主要由HTML、CSS、JQ这三种语言完成。

（二）H5前端开发工具

1.Sublime Text

它是一个复杂的文本编辑器，用于代码、标记和散文。最主要的是他和其他开发工具相比他的体积比较小所以运行速度比较快。

2.Fireworks

Fireworks是Adobe推出的一款网页作图软件，它简化了图形设计的工作难度，所以使网页设计更加快速，使用它都能轻易地完成大量图片的完美切割。

3.谷歌浏览器

（三）H5前端开发技术

1.JavaScript介绍

JS是一种直译式脚本语言，一般都被用来为网站添加各种动态功能，来达到用户所想要的浏览效果，它是嵌入到html中来实现自己想要的功能的。

2.CSS介绍

CSS又名层叠样式表，它是一种用来表现HTML、XML等文件样式的计算机语言，它可以用来修饰网页布局算是一种辅助修饰页面的“工具”。

3.jQuery

jQuery是一个JavaScript函数库也是一个轻量级的“写得少，做得多”的JavaScript库。

三、系统功能需求及可行性分析

（一）技术可行性分析

1.模块分布

网站最重要最基础的就是模块的划分，如果一个页面布局不好很可能导致整个页面瘫痪，所以在前期搭建框架的時候一定要做好这样为后期做功能的时候省去了很多时间。

2.色彩搭配

色彩主要由红、绿、蓝，也就是RGB产生，由十六进制00 00 00表示，采用相邻的颜色设计网页可以使网页看起来舒服，整个页面更加和谐统一。因为做的是旅游网站，所以我选择了绿色，这样会显得很有生机，更加贴合主题。

文字部分大多数以灰色、黑色为主，抢购页面主要以红色为主更加体现了抢购的主题，选择的图片色彩也要和整个页面颜色搭配，这样才不会使整个网站显得突兀。在旅游景点介绍时我采用了文字环绕图片的方式来进行排版，这样不会显得有太多空白。

3.CSS盒模型

CSS盒模型应该都具备内容（content）、填充（pad-ding）、边框（border）、边界（margin）这些功能，我们可以用日常生活中的盒子来理解这四个属性：（1）内容（content）：就是盒子里面装的东西；（2）填充（padding）：就是怕盒子里装的贵重的东西损坏而添加的泡沫；（3）边框（border）：就是纸盒子本身的厚度；（4）边界（margin）：就是盒子与盒子之间的空隙还有就是大盒子与嵌套在它里面的小盒子之间的空隙。

（二）需求分析原则

本旅游网站主要包括：首页、目的地、酒店、团购、旅游攻略、名胜古迹等子网页。制作过程过程如下：

1.首页分析

首先利用fireworks把首页logo图片做出来，在对页面进行合理的分配布局。

2.其余页面分析

剩余页面的设计风格基本和主页一致，导航栏始终贴在登录、注册版块下面，然后就是各大模块内容的显示。

四、系统总体设计

设计该系统的主要目的是为了给用户一个更好的旅游网站，为了给用户提供一个更加快捷了解旅游线路的平台，省去用户查看的时间，也为用户提供了更多的选择，让用户了解各城市适合游玩的时间以及当地特色。用户还可以在网站团购当地酒店和美食，省去了不少开销。

参考文献：

[1]Nicholas C.Zakas.JavaScript高级程序设计[M].3版. 人民邮电出版社，2012.

[2]Elizabeth Castro.HTML5與CSS3基础教程[M].8版.人民邮电出版社，2014.

[3]董庆帅.UI设计师的色彩搭配手册[M].电子工业出版社，2016.

[4]费里曼.HTML5权威指南[M].人民邮电出版社，2014.

[5]张容铭.Javascript设计模式[M].人民邮电出版社，2015.

[6]曾探.JavaScript设计模式与开发实践[M].人民邮电出版社，2015.

Implementation of Travel Network

YU Ping

Abstract：With the development of society， tourism is becoming more and more popular. Now people will use holidays， weekend travel to release their pressure， because the target is uncertain， will choose some travel sites to develop itinerary， such as Ctrip， the way cattle and so on. However， these web pages are too busy， too many functions are not suitable for those who want to travel and no plan， so I made a simple comparison of tourism website there are attractions， where seasonal seasons recommended to play， but also increased the number of group purchase group purchase： to hotels， attractions tickets and local delicacy. This system mainly realizes the user registration， login， shopping cart， attractions， hotel search and other main functions. In the development process， the use of JQ language， data storage using Cookie. The overall appearance of the system is beautiful and generous.

Keywords：JQ；Tourism website；AJAX