目 录
前 言 1
第1章 系统概述 2
1.1 课题研究的背景 2
1.2 课题研究的概述 2
1.2.1 课题研究的内容 2
1.2.2 课题研究的目的 3
第2章 系统分析 4
2.1 可行性分析 4
2.1.1 经济可行性 4
2.1.2 技术可行性 4
2.1.2 系统可行性 4
2.2 需求分析 5
2.2.1功能需求分析 5
第3章 开发技术分析 6
3.1 三层架构 6
3.2 前端开发技术 7
3.3 JSP和Java概述 7
3.4 MySql数据库 8
3.5 Eclipse开发环境介绍 8
第4章 设计与实现 9
4.1 系统总体结构设计分析 9
4.2 网站模块设计 9
4.2.1 前台界面 9
4.2.2 后台管理 10
4.3 数据库设计与实现 11
4.4 前台展示模块介绍 14
4.4.1 首页 14
4.4.2 魅力洛阳 16
4.4.3 畅游 16
4.4.4 资讯 17
4.4.5 服务 17
4.5 后台管理模块介绍 18
4.5.1 管理员模块 19
4.5.2 轮播图管理模块 21
4.5.3 景点管理模块 21
4.5.4 资讯管理模块 22
4.5.5 留言管理模块 23
第5章 网站发布和推广 24
5.1 网站访问流程 24
5.2 网站域名和空间 25
5.2.1 域名申请 25
5.2.2 空间购买 26
5.2.3 域名解析 27
5.3 网站发布和推广 27
5.3.1 网站程序上传 27
5.3.2 网站的推广 27
结 论 28
谢 辞 29
参考文献 30
1.2 课题研究的概述
1.2.1 课题研究的内容
洛阳的历史非常的久远，有着众多的旅游景点和好玩的地方，洛阳旅游网是集景点展示，人文地理，新闻发布等为一体的旅游管理的网站，该网站具备游览信息浏览功能。还可以对游客的浏览信息进行实时的反馈，最终实现一键就可以留言。
前端页面使用响应式设计，使得网站能够自动识别手机、平板、电脑的分辨率，自动调整网页大小。网站采取HTML5的特性优化网页的提示功能，并且提高加载速率。让各个平台的用户能够方便的浏览信息。
后台的管理员能够对景点的信息、资讯的信息以及管理人员执行CURD的操作。
1.2.2 课题研究的目的
本系统严格依据面向对象的程序思想和软件工程的开发过程来设计网站，按照先简单后复杂、先大后小的次序来对系统进行设计开发。
通过该课题的设计实践，使得我们利用面向对象的开发思想、三层架构的使用能够完成一个网站系统的搭建，最终完成洛阳旅游网的设计与实现，主要目标就是为了更好的管理洛阳的旅游景点和一些资讯相关信息，让游客们能够更人性化、直观的浏览各样信息。
第2章 系统分析
2.1 可行性分析
2.1.1 经济可行性
IT技术为什么会非常快速的发展，原因是它的应用使得社会经济发展变得极速，同时对社会的经济利益带来了非常大的改变。所以可行性的研究的对象变成了基于计算机系统的成本的分析。
2.1.2 技术可行性
技术可行性，主要分析的技术条件是：是不是能够成功的完成设计与开发，以及软、硬件是否能够满足需要。该系统系统基于HTML5来设计友好美观的人机界面，更利于游客的交互操作和使用。该系统的数据文件的管理采用轻量级的关系型数据库MySql5.5，它能完成对大批数据信息的操作，同时还能让数据保持完整和安全。因此该网站系统的设计环境已相当成熟。科技的不断的高度的发展，如今天的硬件的换新速度逾来逾快，容积也越大，可靠性以及稳定性也变得越来越好，物更美价更廉，因此我们使用的一般的硬件平台就能够满足该系统的使用。
2.1.2 系统可行性
本系统的客户端使用的图形界面的方式，使用B（浏览器）/S（服务器）模式， B/S是现在互联网时代一种比较受欢迎的模式。在客户端只需安装浏览器一个，比如说Fire Fox，进行操作往服务器系统中设定数据库的类型，我们使用的是MySql数据库。浏览器就会使浏览器客户端与服务器端的数据库之间的进行数据的交互。
B/S设计的成果就是可以实现在没有装入其他专业软件的情况下进行随时随地的操作，它的实现只需要能够接入网络的电脑就行，客户也没必要安装任何客户端和后期的维修保护。系统的扩展也很便利。
2.2 需求分析
需求分析的意思是指用户要求该网站系统在现有的各种约束条件下，必须满足全部的功能和性能要求，包含可靠性、安全性、功能以及性能等要求，通过可行性的分析之后，建立了初步的逻辑模型，在需求分析这个阶段，要很周全的把握客户的需求，准确的理解网站的系统功能。
2.2.1功能需求分析
本网站系统由前台的信息浏览模块以及后台的内容管理模块构成。
前台展示部分主要针对游客，主要分为首页信息的检索、景点展示、洛阳的人文地理的展示、资讯的信息展示以及服务页面，旅客可以浏览景点、资讯及其详细的说明，也可以查看设计者的相关信息，本文转载自http://www.biyezuopin.vip/onews.asp?id=12440实现一键的留言的功能，对系统功能进行反馈。
后台网站的管理模块在确保整个网站系统可靠的时候，对管理员设计不同的的角色权限来对网站的信息执行不同的分类管理。管理部分细分为管理员管理、景点信息管理，资讯信息管理、首页轮播图管理以及留言管理等。
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="keywords" content="旅游，旅游景点信息,旅游资讯"/>
<meta name="description" content="旅游网，旅游，旅游景点，旅游资讯"/>
<title>首页 - 洛阳旅游网</title>
<link rel="Bookmark" href="favicon.ico">
<link rel="Shortcut Icon" href="favicon.ico"/>
<link rel="stylesheet" type="text/css" href="public/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="public/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="public/css/travel/index.css"/>
</head>
<body>
<div class="page">
<!-- 头部导航 NAV-->
<header class="">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<!--LOGO-->
<a class="navbar-brand" href="index.jsp">
<img src="public/img/header_logo.png" width="75px" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.jsp">首页 <span
class="sr-only">(current)</span></a></li>
<li><a href="luoyang.jsp">魅力洛阳</a></li>
<li><a href="travel.jsp">畅游</a></li>
<li><a href="info.jsp">资讯</a></li>
</ul>
<!-- 全站搜索 -->
<form class="navbar-form navbar-left" role="search" action="http://zhannei.baidu.com/cse/search" method="get" target="_blank" class="bdcs-search-form" autocomplete="off" id="bdcs-search-form">
<div class="form-group">
<input type="hidden" name="s" value="4106996640374743104">
<input type="hidden" name="entry" value="1">
<input type="search" name="q" class="bdcs-search-form-input form-control" id="bdcs-search-form-input" placeholder="请输入关键词" autocomplete="off" style="height: 34px; line-height: 34px;">
</div>
<button type="submit" class="btn btn-success">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="server.jsp">服务</a></li>
</ul>
<!-- 天气预报插件-->
<iframe class="nav navbar-nav navbar-right" width="190"
scrolling="no" height="49" frameborder="0"
allowtransparency="true"
src="http://i.tianqi.com/index.php?c=code&id=12&bdc=#&icon=1&py=luoyang&num=5">
</iframe>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<!-- 导航结束 -->
<!-- 图片轮播 BANNER-->
<div id="myCarousel" class="carousel slide banner"
data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"
onclick="linkGo(0,this)"></li>
<li data-target="#myCarousel" data-slide-to="1" onclick="linkGo(1,this)"></li>
<li data-target="#myCarousel" data-slide-to="2" onclick="linkGo(2,this)"></li>
<li data-target="#myCarousel" data-slide-to="3" onclick="linkGo(3,this)"></li>
<li data-target="#myCarousel" data-slide-to="4" onclick="linkGo(4,this)"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="scens.jsp?scenid=5" target="_blank" id="banner-a">
<img class="first-slide" id="banner-img" src="image/banner/1.jpg" alt="" title="">
</a>
</div>
</div>
<!-- 上一页-->
<a class="left carousel-control" id="getPrev" href="#myCarousel"
role="button" data-slide="prev"> <span
class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<!-- 下一页-->
<a class="right carousel-control" id="getNext" href="#myCarousel"
role="button" data-slide="next"> <span
class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- /.carousel -->
<!-- 轮播图结束 -->
<img src="public/img/sea-hot.png" class="center-block sea-hot" />
<!-- 景点展示-->
<div class="container scens">
<div class="row scen-list">
<%/*
<div class="col-sm-6 col-md-3 scen">
<div class="thumbnail">
<a href="" class="scens-a"> <img class="scen-img" src="image/scen/laojunshan.jpg" alt="">
</a>
<h3 class="scen-title">白云山</h3>
</div>
</div>
*/ %>
</div>
<p class="center-block text-center more">
<a class="btn btn-default" href="travel.jsp" target="_blank" role="button">查看更多 »</a>
</p>
<hr />
</div>
<!-- 景点展示结束-->
<img src="public/img/hot-info.png" class="center-block sea-hot" />
<!-- 资讯展示 -->
<div class="info-show">
<div class="container">
<!-- Example row of columns -->
<div class="row info-list">
</div>
<p class="center-block text-center more">
<a class="btn btn-default" href="info.jsp" target="_blank" role="button">查看更多 »</a>
</p>
<hr>
</div>
</div>
<!-- 资讯展示结束INFO-->
<img src="public/img/play.png" class="center-block sea-hot" />
<!-- 洛阳玩乐-->
<div class="more-scen">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="more-site col-md-6 center-block">
<blockquote class="">
<h4>相关站点</h4>
</blockquote>
<div class="sites">
<a href="https://baike.baidu.com/" target="_blank"><img src="public/img/bai4C20.png" alt=""/></a>
<a href="http://www.lvmama.com/" target="_blank"><img src="public/img/lvm8E67.png" alt=""/></a>
<a href="http://www.ctrip.com/" target="_blank"><img src="public/img/xieE7A6.png" alt=""/></a>
<a href="https://www.qunar.com/" target="_blank"><img src="public/img/qun3B35.png" alt=""/></a>
</div>
</div>
<div class="col-md-6 arround center-block">
<blockquote class="">
<h4>周边景点</h4>
</blockquote>
<ul class="arround-scen">
<li class="col-md-3 col-sm-3 col-xs-3"><a
href="http://www.hnsxly.com.cn/" target="_blank" class="ts">嵩县</a>
</li>
<li class="col-md-3 col-sm-3 col-xs-3"><a
href="http://www.lclvyou.com/" target="_blank" class="ts">栾川</a>
</li>
<li class="col-md-3 col-sm-3 col-xs-3"><a
href="http://www.luoninglyw.com/" target="_blank" class="ts">洛宁</a>
</li>
<li class="col-md-3 col-sm-3 col-xs-3"><a
href="www.baidu.com" target="_blank" class="ts">新安</a></li>
<li class="col-md-3 col-sm-3 col-xs-3"><a
href="http://www.mjlvyou.cn/" target="_blank" class="ts">孟津</a>
</li>
<li class="col-md-3 col-sm-3 col-xs-3"><a
href="http://www.ryly.gov.cn/" target="_blank" class="ts">汝阳</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 玩乐结束-->
<!-- Welcome-->
<div class="welcome">
<div class="container-fluid">
<div class="row">
<p class="text-center col-md-12 col-sm-12 col-xs-12 welcome-title">
古都洛阳 — 欢迎您！</p>
</div>
</div>
</div>
<!-- welcome //end-->
<!-- 底部版权声明 -->
<jsp:include page="include/footer.jsp"></jsp:include>
<div class="back-top">
<a href="javascript:;" class="top-button"> <img src="public/img/top-arrow.png" class="top-img" title="返回顶部" />
</a>
</div>
</div>
<!-- 主页完index-->
</body>
<script src="public/js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="public/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="public/js/back-top.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
pics = new Array();
urls = new Array();
titles= new Array();
scenid=new Array();
var picIndex = 0;
$(function() {
$(".index").addClass("active");
/*图片地址的数组*/
$.ajax({
type : "get",
url : "BannerShow",
dataType : 'json',
success : function(banners) {
//请求成功后调用回调函数
$.each(banners, function(index, banner) {
/* 向数组末尾追加新的元素 ，将返回的轮播图片放到数组 */
pics.push(banner.path);
urls.push(banner.url);
titles.push(banner.name);
scenid.push(banner.scenid);
});
}
});
})
/* 上一张*/
$("#getPrev").click(function() {
picIndex--;
/*下标减一，显示上一张*/
if (picIndex < 0)
/*当第一张显示结束后，显示最后一张*/
{
picIndex = pics.length - 1;
}
/*修改图片路径*/
$("#banner-img").attr("src", pics[picIndex]);
$("#banner-img").attr("title", titles[picIndex]);
$("#banner-a").attr("href", "scens.jsp?scenid="+scenid[picIndex]);
});
/* 下一张*/
$("#getNext").click(function() {
picIndex++;
if (picIndex == pics.length) {
picIndex = 0;
}
/*修改图片路径*/
$("#banner-img").attr("src", pics[picIndex]);
$("#banner-img").attr("title", titles[picIndex]);
$("#banner-a").attr("href", "scens.jsp?scenid="+scenid[picIndex]);
});
/* 点击跳转 */
function linkGo(picIndex,obj) {
$("#banner-img").attr("src", pics[picIndex]);
$("#banner-img").attr("title", titles[picIndex]);
$("#banner-a").attr("href", "scens.jsp?scenid="+scenid[picIndex]);
$(".carousel-indicators>li").removeClass("active");
$(obj).addClass("active");
}
/* 下一张*/
function getNext() {
picIndex++;
if (picIndex == pics.length) {
picIndex = 0;
}
$("#banner-img").attr("src", pics[picIndex]);
$("#banner-img").attr("title", titles[picIndex]);
$("#banner-a").attr("href", "scens.jsp?scenid="+scenid[picIndex]);
}
/*自动轮播*/
setInterval(getNext, 5000);
</script>
<!-- 景点的AJAx -->
<script>
$(function(){
/*初始化*/
var counter = 0; /*计数器*/
var pageStart = 0; /*offset*/
var pageSize = 4; /*size*/
/*首次加载*/
getData(pageStart, 8);
function getData(offset,size){
$.ajax({
type: 'POST',
url: 'ScenShow'+ '?' +'offset=' +offset + '&size=' + size, //这里offset,size无作用，仅方便调试
dataType: 'json',
success: function(scens){
/* 每次读取数据个数 */
sum=scens.length;
/* 实现页面的拼接 */
var result = '';
/************业务逻辑块：实现拼接html内容并append到页面*****************/
console.log("offset:"+offset ,"size:"+ size, "sum:"+sum);
$.each(scens,function(index,scen){
console.log(index,scen);
result +='<div class="col-sm-6 col-md-3 scen">'+
'<div class="thumbnail">'+ '<a target="_blank" href="scens.jsp?scenid='+scen.scenid+'">'+
'<img class="scen-img" src="'+scen.scenpic+'" alt="'+scen.scenname+'"></a>'+
'<h3 class="scen-title">'+ scen.scenname +'</h3>'+
'</div>'+
'</div>';
});
/* 将新读取的页面拼接到页面 */
$('.scen-list').append(result);
},
error: function(xhr, type){
alert('Ajax error!');
}
});
}
});
</script>
<script>
$(function(){
/*初始化*/
var counter = 0; /*计数器*/
var pageStart = 0; /*offset*/
var pageSize = 4; /*size*/
/*首次加载*/
getData(pageStart, pageSize);
function getData(offset,size){
$.ajax({
type: 'post',
url: 'admin/InfoShow'+ '?' +'offset=' +offset + '&size=' + size, //这里offset,size无作用，仅方便调试
dataType: 'json',
success: function(infos){
/* 每次读取数据个数 */
sum=infos.length;
/* 实现页面的拼接 */
var result = '';
/************业务逻辑块：实现拼接html内容并append到页面*****************/
console.log("offset:"+offset ,"size:"+ size, "sum:"+sum);
/*使用for循环模拟SQL里的limit(offset,size)*/
$.each(infos,function(index,info){
console.log(index,info);
result+="<div class='col-md-6 col-sm-6 infos'><blockquote class=''>"+
"<h4>"+info.info_title+"</h4>"+
"</blockquote>"+
"<div class='col-md-12'>"+
"<p class='col-md-7 info_txt'>"+info.info_txt+"</p>"+
"<a href='infos.jsp?infoid="+info.info_id+"'target='_blank' class='col-md-5'>"+
"<img src='"+info.info_pic+"' class='img-responsive'/>"+
"</a>"+
"</div>"+
"</div>";
});
/* 将新读取的页面拼接到页面 */
$('.info-list').append(result);
},
error: function(xhr, type){
alert('Ajax error!');
}
});
}
});
</script>
</html>
