1
课程设计报告
学 院： 计算机学院
年级专业： 2022 级软件工程
课程名称： Web 前端开发技术
报告题目： Travelling 旅行服务网站的制作
项目组长：
组内成员：
学号
姓名
工作
得分
网站制作
2022 年 12 月 24 日
2
一、系统概述
1、开发背景
在近几年互联网技术的飞速发展中，越来越多的技术被能所熟知，越
来越多的新技术被人们所发现，被人们运用到网络开发的各个地方。网络
的网页开发也越来越贴近生活，使之能被越来越多的人接受，这同样也是
互联网技术飞速发展的缘由。其实，我国的旅游类型的网站从 2000 年就开
始出现了，在目前，能实现一定旅游信息咨询实时查询能力的网站也已经
有了 2000 多家，在众多旅游信息网站中，专业的旅游网站也有 200 多家，
其中主流的功能性网站是地区性的旅游网站，和专业网站还有门户交流网
站。在现在，我国的旅游网站良莠不齐，比较有实力的品牌网站数量不是
很多，而被人们熟知的旅游网站更是少之又少。
2、开发目的
随着时代发展，旅行服务业并不能完全匹配日益增长的高质量服务需
求，旅行系统开发行业对需求开发的不全面，对技术性选择的不重视，从
而无法开发出满意的功能性旅游网站。从而，我希望运用我所学的 Web 开
发技术，从需求出发，开发出一个适用实用的服务型旅游信息网站。
3、作品内容
Travelling 旅行服务网站主要是为热爱旅行，热爱欣赏各地风情旅地
的人们提供优质的旅行服务。Web 网站开发主页主要展示旅行地的搜索与预
定，一些高档旅行地的服务介绍，优质酒店介绍，以及预定信息展示等内
容，主要展示 Traveling 旅行服务网站的服务信息，旅行地址信息，酒店
服务信息等等。另外，通过对旅行地信息的了解，用户能在网站底页进行
预定。
4、作品意义
3
用过优质的界面交互体验，丰富的服务元素为用户提供层次丰富的使
用体验，提高旅行质量，优化旅行服务，为用户的旅行带来便利。
二、开发环境
开发环境
名称
操作系统
Win10 操作系统
代码编译工具
IntelliJ IDEA
项目调试工具
Google Chrome 浏览器
其他软件
Notepad++
三、系统分析
1.功能需求
Travelling 旅行服务网站主要实现优质旅行服务信息的展示，用户可以进行
旅行地查询，预定。并且在界面上能展示一些平台提供的优质旅行地的信息，酒
店信息等等，除此之外，网站透明清晰的展示了用户的服务评价，也为用户提供
了联系方式能够时刻联系网站开发者优化相关信息，反馈不足。
2.风格定位
Travelling 旅行服务网站主要是一款旅行服务类的前台网站，旨在为用户提
供优质的旅行服务，与“同城旅行”等热门软件相比，我们只突出优质服务规划
与热门旅行地选择预定等服务，有更加明确的使用定位。
3.页面布局规划
该网站页面布局主要采用了 flex 布局方式，因为它可以简便、完整、响应式
地实现各种页面布局，为盒状模型提供最大的灵活性。因此可以方便我们对 Web
网站的基本界面进行构建。
4.建设方案
在界面运行期间，通过引入 animation 属性实现一个简单的加载效果，网站
导航栏和侧边栏利用 bundle.min.css 实现动态的收缩与展开，内容区通过 flex
和列表标签实现旅游地信息的展示，并且通过 animation-name 的样式属性实现一
4
定的放大效果。在预定搜索区引入了 jqueryui 的样式，可以自行对日期进行选择，
图片展示区使用了 swiper.min.css 样式来实现图片的轮巡展示。
四、系统设计与实现
1，加载动态效果实现
准备相关的 animation 样式和 js 函数，当页面刷新时触发动态加载效果。
图 1.1 动态效果实现图
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background: #ffffff;
z-index: 999;
overflow: hidden;
}
.center {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.loader {
position: relative;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-gap: 2px;
5
width: 100px;
height: 100px;
}
.loader > div {
position: relative;
width: 100%;
height: 100%;
background: #6faed3;
transform: scale(0);
transform-origin: center center;
animation: loader 2s infinite linear;
}
对应的 js 函数
$(window).on("load", function () {
"use strict";
$('.side-menu').removeClass('hidden');
setTimeout(function(){
$('.preloader').fadeOut();
$('.cd-transition-layer').addClass('closing').delay(1000).q
ueue(function(){
$(this).removeClass("visible closing
opening").dequeue();
});
}, 1000);
setTimeout(function(){
$('.banner-slider .svg-div').removeClass('svg-anim');
}, 1000);
});
2，利用 flex 布局，实现导航栏的展示，主要包括主页，旅行地，酒店展示信息，
网站的应用评论以及联系方式等五个模块。
图 2.1 导航栏实现图
同时根据 bundle.min.css 样式实现页面下拉时，导航栏会自动固定在页面顶部，能
灵活的实现导航栏的展开与固定。
