生活随笔
收集整理的這篇文章主要介紹了
基于JSP+MySQL+HTML5的旅游网站系统
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目 錄
前 言 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=%23&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
><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"><ahref
="http://www.hnsxly.com.cn/" target
="_blank" class="ts">嵩縣
</a
></li
><li
class="col-md-3 col-sm-3 col-xs-3"><ahref
="http://www.lclvyou.com/" target
="_blank" class="ts">欒川
</a
></li
><li
class="col-md-3 col-sm-3 col-xs-3"><ahref
="http://www.luoninglyw.com/" target
="_blank" class="ts">洛寧
</a
></li
><li
class="col-md-3 col-sm-3 col-xs-3"><ahref
="www.baidu.com" target
="_blank" class="ts">新安
</a
></li
><li
class="col-md-3 col-sm-3 col-xs-3"><ahref
="http://www.mjlvyou.cn/" target
="_blank" class="ts">孟津
</a
></li
><li
class="col-md-3 col-sm-3 col-xs-3"><ahref
="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
<!-- 底部版權聲明
--><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; var pageSize
= 4; getData(pageStart
, 8);function
getData(offset
,size
){$
.ajax({type
: 'POST',url
: 'ScenShow'+ '?' +'offset=' +offset
+ '&size=' + size
, dataType
: 'json',success
: function(scens
){sum
=scens
.length
;var result
= '';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; var pageSize
= 4; getData(pageStart
, pageSize
);function
getData(offset
,size
){$
.ajax({type
: 'post',url
: 'admin/InfoShow'+ '?' +'offset=' +offset
+ '&size=' + size
, dataType
: 'json',success
: function(infos
){sum
=infos
.length
;var result
= ''; console
.log("offset:"+offset
,"size:"+ size
, "sum:"+sum
); $
.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
>
總結
以上是生活随笔為你收集整理的基于JSP+MySQL+HTML5的旅游网站系统的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
