當前位置：首頁 > 运维知识 > 数据库 >内容正文

数据库

基于JSP+MySQL+HTML5的旅游网站系统

發布時間：2024/1/1 数据库 33 豆豆

生活随笔收集整理的這篇文章主要介紹了基于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技術為什么會非?？焖俚陌l展，原因是它的應用使得社會經濟發展變得極速，同時對社會的經濟利益帶來了非常大的改變。所以可行性的研究的對象變成了基于計算機系統的成本的分析。
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"><header class=""><nav class="navbar navbar-default navbar-fixed-top"><div class="container"><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><spanclass="icon-bar"></span> <span class="icon-bar"></span> <spanclass="icon-bar"></span></button><a class="navbar-brand" href="index.jsp"> <img src="public/img/header_logo.png" width="75px" /></a></div><div class="collapse navbar-collapse"id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="index.jsp">首頁 <spanclass="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></div></nav></header><div id="myCarousel" class="carousel slide banner"data-ride="carousel"><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"> <spanclass="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"> <spanclass="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div><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"><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><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><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><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> </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> <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>

總結

以上是生活随笔為你收集整理的基于JSP+MySQL+HTML5的旅游网站系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：安卓java：启动Bluedict深蓝词
下一篇： INTEL CPU 本子列表看你的是