小型戶外網(wǎng)站的設計與實現(xiàn)

1、小型戶外網(wǎng)站的設計與實現(xiàn) 本科畢業(yè)論文 學學 生生： 學學 號號： 專專 業(yè)業(yè)： 軟件工程 班班 級級： 指導教師指導教師： 二二xx 年年 x 月月 小型戶外網(wǎng)站的設計與實現(xiàn) 1 目目 錄錄 1 緒論.3 1.1 課題背景、目的及意義.3 1.1.1 課題背景.3 1.1.2 課題目的和意義.4 1.2 國內(nèi)外研究現(xiàn)狀 .4 1.2.1 國外的研究現(xiàn)狀.4 1.2.2 國內(nèi)的研究現(xiàn)狀.4 2 可行性分析.5 2.1 社會可行性.5 2.2 技術(shù)可行性.5 2.3 操作可行性.5 2.4 系統(tǒng)的技術(shù)介紹.5 2.5 網(wǎng)站開發(fā)平臺及運行環(huán)境.8 2.5.1 網(wǎng)站開發(fā)平臺.8 2.5.2 運行環(huán)境

2、.8 3 需求分析.8 3.1 網(wǎng)站功能模塊概述和分析.8 3.2 網(wǎng)站功能模塊設計.9 3.3 數(shù)據(jù)庫分析.10 4 小型戶外網(wǎng)站的設計與實現(xiàn)前臺設計與實現(xiàn).16 4.1首頁設計.17 4.2用戶模塊.18 4.3資訊模塊.19 4.4活動模塊.20 4.5圖片模塊.20 4.6文章模塊.21 5 小型戶外網(wǎng)站的設計與實現(xiàn)后臺設計與實現(xiàn).22 5.1管理員登錄.22 5.2后臺主頁.22 5.3管理員管理.22 小型戶外網(wǎng)站的設計與實現(xiàn) 2 5.4資訊管理.23 5.5文章管理.23 5.6 照片管理.23 5.7 活動管理.23 5.8 用戶管理.23 6 結(jié)論.23 參考文獻.25 致謝

3、.26 附錄.27 小型戶外網(wǎng)站的設計與實現(xiàn) 3 小型戶外網(wǎng)站的設計與實現(xiàn)小型戶外網(wǎng)站的設計與實現(xiàn) 摘 要：隨著科學技術(shù)的發(fā)展，網(wǎng)絡在人們生活中的應用越來越廣泛，足不出戶就能 獲取到大量的有用信息，并可以通過網(wǎng)絡交流互動。 小型戶外網(wǎng)站的開發(fā)為人們帶來了很大的方便，使對戶外旅游感興趣的人們輕松 的獲取到自己想了解的知識，以及通過互動交流分享旅途中的樂趣和建議，通過分 享照片得到真實有效的戶外信息。讓人們感受到身未動心已遠的心境。 小型戶外網(wǎng)站以 java 為設計語言，運用 javascript、servlet、jsp 以及當下流行的 java 框架 struts+hibernamte+spri

4、ng 和 mysql 數(shù)據(jù)庫設計實現(xiàn)。本網(wǎng)站實現(xiàn)了登錄、 注冊、主頁信息顯示、查詢并顯示文章、查詢并顯示照片、登錄用戶創(chuàng)建活動并參 加活動、普通用戶瀏覽主頁、管理員登錄后臺進行網(wǎng)站用戶以及信息的管理等。 關鍵字：戶外網(wǎng)站；文章；留言；照片；活動 abstract:with the development of science and technology, internet is applied more and more widely in peoples lives. people can get lot of information at home and have conversati

5、on with others. minitype outdoor website make peoples life more convenience, people can get information they interested in easily. whats more, they can share the joy with each other, they can get the real message by share the photos that make people feel like on the way. minitype outdoor website des

6、igned by java language. use javascript, servlet, jsp and java framework struts + hibernate + spring and mysql database developing. this websit implements login, register, information display, query and show articles, query and show photos, people who logined in can create or attend activity, adminis

7、trator can manage the whole website. keywords: outdoor website; article; message; photo; activity 1 緒論 1.1 課題背景、目的及意義 1.1.1 課題背景 隨著人們生活水平的提高以及 internet 的普及，人們在網(wǎng)絡獲取信息已經(jīng)非常普 小型戶外網(wǎng)站的設計與實現(xiàn) 4 遍。網(wǎng)絡中獲取資訊的形式與傳統(tǒng)的書本報刊上獲取資訊的方式相比擁有許多優(yōu)勢： 一是方便，人們不用走出家門就能獲取想要的資訊，不管走到那里只要有網(wǎng)絡的地 方就可以獲得自己想了解的信息；二是網(wǎng)絡中傳遞的信息更加迅速快捷，資訊更新 也相

8、當快；三是網(wǎng)絡信息非常豐富，包含各種領域的知識信息；四是通過網(wǎng)絡人們 可以互動交流，世界各地的人們都可以輕松容易的交流分享信息。正是由于這些優(yōu) 勢，戶外網(wǎng)站這樣的資訊網(wǎng)站得到了飛速的發(fā)展，人們可以進入網(wǎng)站瀏覽自己感興 趣的資訊、文章、圖片以及活動，登錄網(wǎng)站發(fā)表文章、上傳照片、參加活動，豐富 人們的業(yè)余生活。 1.1.2 課題目的和意義 旅游業(yè)具有“無煙產(chǎn)業(yè)”和“永遠的朝陽產(chǎn)業(yè)”的美稱，旅游業(yè)、石油業(yè)以及汽車 產(chǎn)業(yè)為世界主要產(chǎn)業(yè)，旅游業(yè)的發(fā)展帶動了人們的收入、就業(yè)率，促進了相關企業(yè) 的發(fā)展。據(jù)統(tǒng)計，每年旅游業(yè)上的收入達到了一個相當可觀的數(shù)目，也是全世界人 民關注的熱點。隨著生活水平的提高，以及經(jīng)

9、濟的發(fā)展，旅游在人民的日常生活中 占據(jù)著日益增長的地位，國內(nèi)旅游業(yè)的作用也越來越突出。隨著旅游業(yè)的發(fā)展，各 個國家相繼推出了商務旅游、抽獎旅游、人文旅游、學業(yè)旅游、自駕旅游、組隊旅 游、以及各種主題的旅游方式等等。西方發(fā)達國家在新興旅游業(yè)態(tài)上的發(fā)展尤為突 出。旅游行業(yè)需求信息量逐步增大。開發(fā)一個戶外網(wǎng)站主要是為旅游愛好者提供一 個可以獲取信息及交流心得的平臺，迎合市場的發(fā)展。另外，通過本網(wǎng)站的設計與 實現(xiàn)提高自身的技術(shù)能力。 1.2 國內(nèi)外研究現(xiàn)狀 1.2.1 國外的研究現(xiàn)狀 網(wǎng)上獲取資訊這是信息社會發(fā)展的必然要求?；ヂ?lián)網(wǎng)在全世界范圍覆蓋，為當 今信息社會發(fā)展提供了有利的條件，在發(fā)達國家當中網(wǎng)

10、絡發(fā)展更為迅猛。據(jù)統(tǒng)計， 互聯(lián)網(wǎng)用戶達 17 億之多，占全球總?cè)丝诘乃姆种?，毫無疑問，在接下來的幾年中 會有更多的人使用互聯(lián)網(wǎng)。加之網(wǎng)絡信息獲取的方便，信息量的博大，咨詢網(wǎng)站成 為各國信息社會發(fā)展的首選目標，各國網(wǎng)站中信息類網(wǎng)站有很大的占比。只要網(wǎng)絡 發(fā)展沒有停止，網(wǎng)絡上獲取資訊的途徑就不會斷。 1.2.2 國內(nèi)的研究現(xiàn)狀 近年來，隨著計算機網(wǎng)絡技術(shù)的飛速發(fā)展，網(wǎng)絡技術(shù)應用已經(jīng)相當普及，使得 網(wǎng)絡上獲取資訊的途徑得到廣泛發(fā)展，各種各樣的咨詢網(wǎng)站層出不窮，國內(nèi)各大出 版商、地方政府等都在創(chuàng)建自己的咨詢網(wǎng)站。隨著科學技術(shù)的飛速發(fā)展，internet 作 小型戶外網(wǎng)站的設計與實現(xiàn) 5 為昔日的一種

11、高級科研工具為高端科學人才所用，現(xiàn)如今已成了普通百姓家中必備 的辦公娛樂工具，成為一種大眾型媒體傳播手段。 2 可行性分析 2.1 社會可行性 隨著計算機技術(shù)的發(fā)展和網(wǎng)絡人口的增加，網(wǎng)絡世界也越來越豐富，網(wǎng)上獲取 即時信息已經(jīng)成為一股潮流。人們在網(wǎng)上可以隨心所欲的搜索獲取自己感興趣的信 息，并通過與人交流互動發(fā)展興趣愛好。沒有時間空間和范圍的限制，更加方便豐 富了人們的業(yè)余生活。 2.2 技術(shù)可行性 本系統(tǒng)采用的 jsp、servlet、struts、hibernate、spring、javascript 和 mysql 開 發(fā)，在 windows xp 操作系統(tǒng)之上運行，采用 struts

12、進行前臺頁面 form 表單的管理， hibernate 負責數(shù)據(jù)庫的連接與數(shù)據(jù)增、刪、查、改的實現(xiàn)，采用 spring 的依賴注入 功能管理整個項目。由于 jsp、servlet 靈活開發(fā)方便，struts+hibernate+spring 在作 為項目管理框架在開發(fā)項目的運用上已經(jīng)非常成熟，實際應用廣泛。mysql 為開源 數(shù)據(jù)庫，小巧靈活且運行速度快，開發(fā)方便。因此使用 jsp、servlet、struts、hibernate、spring、javascript、mysql 是開發(fā)網(wǎng)站的最佳組 合，從而說明本系統(tǒng)在技術(shù)方面可行。 硬件方面，現(xiàn)存計算機速度都相當快，容量足夠大并且可以擴充，

13、安全性也很 好，普通硬件平臺完全能滿足此系統(tǒng)的運行要求。 2.3 操作可行性 目前，只要計算機上安裝了瀏覽器，并且能夠連接網(wǎng)絡，該網(wǎng)站就能正常的運 行，不需要安裝軟件。該網(wǎng)站的更新、調(diào)試、運行都會在服務器端設置和布局，使 用人員無需關心這些問題。網(wǎng)站界面簡單，提示信息完整，無需指導用戶就能方便 的操作此網(wǎng)站。 2.4 系統(tǒng)的技術(shù)介紹 （1）javascript javascript 是客戶端腳本語言。也是一種廣泛應用于 web 開發(fā)的客戶端腳本語 言，由于其編寫靈活、功能強大、使用方便被廣泛用于網(wǎng)站的建設。 javascript 盡 管與 java 名字類似，但他們是完全不一樣的兩種語言形式，

14、javascript 主要用來動態(tài) 處理網(wǎng)站頁面。 （2）jquery 小型戶外網(wǎng)站的設計與實現(xiàn) 6 jquery 是繼 pototype 之后又一個優(yōu)秀的 javascript 框架，它是輕量級的 js 庫， 兼容 css3 以及各種瀏覽器。jquery 封裝了 javascript 中繁雜的功能，使代碼編寫更 加精簡方便。如今，jquery 已經(jīng)成為最流行的 javascript 框架，全世界的各個網(wǎng)站 很大程度上都運用了 jquery 的強大功能。jquery 在 2006 年 1 月在紐約的 barcamp 發(fā)布，其創(chuàng)始人為 dave methvin。至此世界范圍的 javascrip

15、t 使用者都開始關注 jquery 的發(fā)展，并加入其開發(fā)團隊。jquery 是免費、開源的，使用 mit 許可協(xié)議。 jquery 封裝了 javascript 中復雜的語法形成自己獨特的簡潔的的語法設計，使開發(fā) 者更加便捷的處理 html、events、實現(xiàn)動畫效果以及為網(wǎng)站提供 ajax 交互。并 且，jquery 的文檔說明非常全面，方便開發(fā)者查詢。其模塊化的使用方式使開發(fā)者 可以很輕松的開發(fā)出功能強大的靜態(tài)或動態(tài)網(wǎng)頁。 （3）mysql mysql 是一個開放源碼的小型關聯(lián)式數(shù)據(jù)庫管理系統(tǒng)，屬于 oracle 公司。其 命運卻經(jīng)歷多次轉(zhuǎn)折。mysql 最初由瑞典的 mysql ab 公

16、司開發(fā)，后來 mysql ab 公司由 sun 公司收購，2009 年 sun 公司又被歸入 oracle 門下，但這些都不妨礙 中下型網(wǎng)站對它熱衷的支持與厚愛。mysql 支持多線程、提供多種語言支持、支持 多種存儲結(jié)構(gòu)、總體擁有成本低、開源、占用資源很少，運行速度快。mysql 沒有 oracle 等大型數(shù)據(jù)庫功能強大，但其靈活性和開源性在中小型網(wǎng)站的開發(fā)上占據(jù)很 大優(yōu)勢，并且使用 mysql 作為開發(fā)數(shù)據(jù)庫可以大大的降低開發(fā)成本。 （4）mvc mvc（model-view-controller）即模型視圖控制器。mvc 應用程序總是由 這三部分組成。mvc 模式被廣泛使用于軟件開發(fā)中。

17、mvc 在 javaee 開發(fā)中得到 廣泛應用，越來越多的開發(fā)者加入 mvc 的推廣。mvc 是一種復雜的架構(gòu)模式模式， 它強制性的按照 model，view，controller 方式將應用程序進行分離，這樣一個應用 程序被分為三個層模型層、視圖層、控制層，它們各自處理自己的任務，互不 干涉又相互聯(lián)系。 模型層：模型就是業(yè)務流程/狀態(tài)的處理以及業(yè)務規(guī)則的制定。模型接受視圖請 求的數(shù)據(jù)，將處理后的結(jié)果返回到視圖層。模型層是 mvc 的核心組成部分。mvc 提供了一種便于模型重構(gòu)和提高重用性的設計方法。 視圖層：視圖代表用戶交互界面，對于 web 應用來說，可以概括為 html 界 面。本層是展

18、現(xiàn)給用戶并與之交互。視圖層采集、處理、顯示數(shù)據(jù)和用戶的請求， 跳轉(zhuǎn)到相應的控制層，并沒有業(yè)務邏輯的操作。視圖層只需要做出相應的顯示數(shù)據(jù) 小型戶外網(wǎng)站的設計與實現(xiàn) 7 方法，不管數(shù)據(jù)是怎樣被操作的，它都不關心。 控制層：控制可以理解為從用戶接受請求，將模型與視圖匹配在一起，共同完 成用戶的請求。控制層起著分發(fā)器的作用。控制層不關心數(shù)據(jù)是如何被處理的，它 只對其他層發(fā)來的請求作出分配，顯示或是數(shù)據(jù)處理的過程控制層是不關心的。因 此，一個模型可能對用多個視圖，一個視圖可能對應多個模型。 綜上所述，mvc 的各個層外部之間是有耦合性很低的聯(lián)系的，但在其層內(nèi)部作 出怎樣的處理對其他層而言是暗箱操作的。視

19、圖層用于用戶信息顯示，控制層負責 分發(fā)請求給對應模型層處理，模型層再將其處理結(jié)果返回給視圖層，供用戶查看。 （5）servlet servlet 是一種獨立于平臺和協(xié)議的服務器端的 java 應用程序，有動態(tài)的擴展服 務器的能力，采用請求-響應模式提供 web 服務。servlet 是 java 語言中用于客戶端 和服務器端交互的一門技術(shù)。servlet 具有可移植性好、執(zhí)行效率高、使用方便的特 點。servelt 的編寫 html 代碼非常繁復，經(jīng)常與 jsp 結(jié)合完成服務器端代碼的實現(xiàn)。 （6）jsp jsp 全名為 java serever pages，它是由 sun 公司倡導、許多公司

20、參與一起建立 的一種動態(tài)技術(shù)標準。jsp 繼承了 java 的多種優(yōu)點：可移植性、可伸縮性、易學性、 功能強大。支持服務器端組件的優(yōu)勢被眾多公司所支持，并迅速發(fā)展成為商業(yè)應用 的服務器端語言，廣泛的應用于 web 應用程序的開發(fā)中。jsp 的根本是一個 servlet，它實現(xiàn)了 html 語法中的擴展。jsp 在編譯的時候被翻譯成 servlet 文件， jvm 對其字節(jié)碼文件作出處理生成瀏覽器可顯示的 html 格式返回給客戶端的瀏覽 器。運用 jsp 的優(yōu)勢主要用于編寫客戶端代碼，與 servlet 結(jié)合完成整個 web 應用 程序的開發(fā)。 （7）struts struts 是 apach

21、e 軟件基金會贊助的一個開源軟件，它通過一個核心的攔截器攔 截用戶提交的表單信息，對其作出處理，其在項目開發(fā)中應用廣泛，大大提高了開 發(fā)人員的開發(fā)速度。struts 使開發(fā)人員不用將過多的精力放在前端頁面跳轉(zhuǎn)、顯示、 form 表單的處理上，盡可能多關心業(yè)務邏輯的處理。作為 web 項目開發(fā)，struts 是 一個很好的選擇。 （8）hibernate hibernate 是在 jdbc 處理中最常用的框架。它將數(shù)據(jù)庫數(shù)據(jù)的處理轉(zhuǎn)換為對象 小型戶外網(wǎng)站的設計與實現(xiàn) 8 的處理，使 java 面向?qū)ο缶幊痰乃枷塍w現(xiàn)的更加徹底。由于 hibernate 具有 hql 簡 潔性、移植性好、支持透明持

22、久化的特點，在 web 應用程序開發(fā)中運用成熟。 hibernate 可以應用與普通的 java application，也可以用戶 java web 項目開發(fā)，以及 j2ee 大型項目的開發(fā)。 （9）spring spring 是一個開源框架，它由 rod johnson 創(chuàng)建。它是為了解決企業(yè)應用開發(fā)的 復雜性而創(chuàng)建的。spring 使用基本的 javabean 來完成以前只可能由 ejb 完成的事情。 spring 是一個輕量級的控制反轉(zhuǎn)和面向切面的容器框架，它使開發(fā)變得更加簡單。 2.5 網(wǎng)站開發(fā)平臺及運行環(huán)境 2.5.1 網(wǎng)站開發(fā)平臺 網(wǎng)站的開發(fā)是在 tomcat 環(huán)境下進行的。to

23、mcat 是一個服務器同時也是一個 servlet 容器，目前最新版本為 8.0。tomcat 技術(shù)先進、性能穩(wěn)定、開源，廣泛用戶 j2ee 網(wǎng)站的實現(xiàn)與教學案例的使用中。雖然 tomcat 不能完成大型 ejb 項目的部署 運行，但在 java web 的應用中綽綽有余。 tomcat 的環(huán)境主要有以下幾方面技術(shù)優(yōu)勢： 1）tomcat 中的應用程序是一個 war（web archive）文件。war 是 sun 提出 的一種 web 應用程序格式，與 jar 類似，也是許多文件的一個壓縮包。 2）應用程序的部署很簡單。只需將應用程序的 war 文件或應用程序文件夾放 到其 webapp 目

24、錄下。 3）tomcat 是 web 服務器，同時也是 servlet 容器。 4）tomcat 也可以與其它一些軟件集成，用以開發(fā)實現(xiàn)更多的功能。 2.5.2 運行環(huán)境 操作系統(tǒng)：windows xp 以上版本。 服務器軟件：tomcat6.0 以上版本。 瀏覽器：ie、fire fox、google chrome。 3 需求分析 3.1 網(wǎng)站功能模塊概述和分析 小型戶外網(wǎng)站是典型的咨詢網(wǎng)站，包括前臺和后臺兩大模塊，前臺包括用 戶登錄，瀏覽文章和照片等。后臺包括管理員登錄、資訊信息的發(fā)布、修改及對用 戶的管理等功能。本網(wǎng)站采用 servlet、jsp 和 struts+hibernate+s

25、pring 和 mvc 開發(fā) 模式管理應用框架開發(fā)，分析設計給出可行性報告，遵守軟件工程的規(guī)范，盡量達 小型戶外網(wǎng)站的設計與實現(xiàn) 9 到減少系統(tǒng)模塊間的偶合，增強系統(tǒng)的穩(wěn)定性、提高可重用性和可擴充性。 小型戶外網(wǎng)站主要功能如下： （1）前臺（登錄用戶）部分：用戶管理：注冊會員、用戶登錄、退出；資訊顯示： 查看所有資訊；文章發(fā)布：寫文章、顯示自己的文章、顯示所有文章；上傳照片： 上傳照片、查看自己的照片、查看所有照片；參加活動：創(chuàng)建活動、參加活動、顯 示活動信息。 （2）前臺（普通用戶）部分：用戶管理：注冊會員、用戶登錄、退出；資訊顯示： 查看所有資訊；查看文章：查看所有文章；查看照片：查看所有

26、照片；查看活動： 查看所有活動。 （3）后臺（管理員管理）部分：管理員：管理員登錄、創(chuàng)建管理員；資訊管理：發(fā) 布資訊、查看資訊、刪除資訊；文章管理：顯示所有文章、刪除文章；照片管理： 查看所有照片、刪除照片；活動管理：查看所有活動、刪除活動；用戶管理：刪除 用戶。 3.2 網(wǎng)站功能模塊設計 根據(jù)網(wǎng)站功能分析，可以畫出網(wǎng)站的功能模塊圖。 前臺登錄用戶功能如圖 1 所示。 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上

27、上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 圖 1 前臺登錄用戶功能模塊圖 前臺普通用戶功能如圖 2 所示。 小型戶外網(wǎng)站的設計與實現(xiàn) 10 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 圖 2 前臺普通用戶功能模塊圖 后臺管理員功能如圖 3 所示。 上 上 上 上 上 上 上 上 上 上 上 上

28、 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 圖 3 后臺管理員功能模塊圖 3.3 數(shù)據(jù)庫分析 信息系統(tǒng)的主要任務是通過大量數(shù)據(jù)獲得管理所需要的信息，這就要求系統(tǒng)本 身能夠存儲和管理大量的數(shù)據(jù)，而這一功能的實現(xiàn)必須借助數(shù)據(jù)庫系統(tǒng)。本系統(tǒng)的 小型戶外網(wǎng)站的設計與實現(xiàn) 11 開發(fā)選擇 mysql 作為后臺數(shù)據(jù)庫

29、開發(fā)工具。 （1）概念模型設計 概念模型就是將現(xiàn)實世界中的事務抽象化，使得其特征符合 dbms 的數(shù)據(jù)模型， 再將抽象的數(shù)據(jù)模型轉(zhuǎn)化為計算機能識別的二進制碼。實際上，概念模型是現(xiàn)實世 界到機器世界的一個中間層次。 信息世界中包含的基本概念有實體和聯(lián)系。實體 (entity)：客觀存在并可相互區(qū) 別的事物稱為實體。實體可以是具體的人、事、物，也可以是抽象的概念或聯(lián)系。 例如，一個學生、一門課、一個老師、一個教室、一臺電腦、一位讀者等都是實體。 聯(lián)系 (relationship)：在現(xiàn)實世界中，兩個實體型之間的聯(lián)系主要分為：一對一聯(lián)系 (1:1)；一對多聯(lián)系(1 : n)；多對多聯(lián)系(m : n)

30、。 本系統(tǒng)概念模型的表示方法為實體，聯(lián)系方法(entity-relationship approach)簡記 為 e-r 表示法)。該方法用 e-r 圖來描述現(xiàn)實世界的概念模型，稱為實體-聯(lián)系模型， 簡稱 e-r 模型。根據(jù)數(shù)據(jù)流程分析，繪制小型戶外網(wǎng)站的全局 e-r 模型。 全局 e-r 模型如圖 4 所示。 上 上 上 上 上 上 上 上上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 上 1 1 1 1 1 1 n n nn n n 上 上 上 上 1 n 圖 4 系統(tǒng) e-r 圖 根據(jù)設計規(guī)劃的主要實體有：用戶、管理員、文章、照片、資訊、活動、留言。 小型戶外網(wǎng)站的設計與

31、實現(xiàn) 12 （2）數(shù)據(jù)庫表設計 數(shù)據(jù)庫表設計主要是把概念結(jié)構(gòu)設計時設計好的基本 e-r 圖轉(zhuǎn)換為與選用 dbms 產(chǎn)品所支持的數(shù)據(jù)模型相符合的邏輯結(jié)構(gòu)。它包括數(shù)據(jù)項、記錄及記錄間的 聯(lián)系、安全性和一致性約束等。導出的邏輯結(jié)構(gòu)是否與概念模式一致，從功能和性 能上是否滿足用戶的要求，要進行模式評價。本網(wǎng)站數(shù)據(jù)庫表如下： 管理員表主要用來存放管理員登錄名和登錄密碼的，管理員表如表 1 所示。 表 1 admin 表 字段名稱數(shù)據(jù)類型主鍵是否為空說明 admin_idint(11)yesnot nullauto_increment adminnamevarchar(30)nonot null管理員姓名

32、 passwordvarchar(30)nonot null管理員密碼 用戶表主要是用來存放用戶登錄名和登錄密碼以及的信息的，用戶表如表 2 所示。 表 2 user 表 字段名稱數(shù)據(jù)類型主鍵是否為空說明 user_idint(11)yesnot nullauto_increment emailvarchar(30)nonot null郵件 usernamevarchar(30)no not null用戶名 passwordvarchar(30)nonot null密碼 headvarchar(50)nonull頭像地址 gender enum(男, 女) nonot null性別 telin

33、t(11)nonull電話 addressvarchar(50)nonull住址 selfintroductionvarchar(1000)nonull自我介紹 hobbyvarchar(500)nonull興趣愛好 分組表用于存放用戶照片和文字分類的，分組表如表 3 所示。 表 3 group 表 字段名稱數(shù)據(jù)類型主鍵是否為空說明 group_idint(11)yesnot nullauto_increment titlevarchar(30)nonot null標題 小型戶外網(wǎng)站的設計與實現(xiàn) 13 user_idint(11)nonot null用戶 id clazzenum(0,1)no

34、not null所屬類別 圖片表用于存放圖片信息，圖片表如表 4 所示。 表 4 photo 表 字段名稱數(shù)據(jù)類型主鍵是否為空說明 photo_idint(11)yesnot nullauto_increment uploaddatedatetimenonot null上傳時間 photovarchar(50)nonot null圖片地址 titlevarchar(40)nonot null標題 user_idint(11)nonot null用戶 id group_idint(11)nonull分組 id 文章表用于存放文章信息，文章表如表 5 所示。 表 5 article 表 字段名稱數(shù)

35、據(jù)類型主鍵是否為空說明 article_idint(11)yesnot nullauto_increment createdatedatetimenonot null創(chuàng)建時間 contenttextnonot null內(nèi)容 user_idint(11)nonot null用戶 id group_idint(11)nonull分組 id hasreadint(11)nonull是否已讀 titlevarchar(40)nonot null標題 評論表用于存放評論信息，評論表如表 6 所示。 表 6 comment 表 字段名稱數(shù)據(jù)類型主鍵是否為空說明 comment_idint(11)yesno

36、t nullauto_increment commdatedatetimenonot null評論時間 commentvarchar(1000)nonot null評論內(nèi)容 commentator_idint(11)nonot null評論人 id article_idint(11)nonull文章 id photo_idint(11)nonull照片 id 評論回復表主要用于存放評論的信息以及評論回復的信息，方便數(shù)據(jù)的存取。 小型戶外網(wǎng)站的設計與實現(xiàn) 14 評論回復表如表 7 所示。 表 7 comment_back 表 字段名稱數(shù)據(jù)類型主鍵是否為空說明 cb_idint(11)yesnot

37、 nullauto_increment comment_idint(11)nonull評論 id message_idint(11)nonull留言 id commentator_idint(11)nonot null評論人 id commenttextnonot null評論內(nèi)容 commdatedatetimenonot null評論時間 信息表用于存放留言信息，信息表如表 8 所示。 表 8 message 表 字段名稱數(shù)據(jù)類型主鍵是否為空說明 message_idint(11)yesnot nullauto_increment createdatedatetimenonot null留

38、言時間 messagetextnonot null留言內(nèi)容 visitor_idint(11)nonull留言用戶 id user_idint(11)nonull用戶 id 活動表用于存放活動信息，活動表如表 9 所示。 表 9 activity 表 字段名稱數(shù)據(jù)類型主鍵是否為空說明 activity_idint(11)yesnot nullauto_increment createdatedatetimenonot null創(chuàng)建時間 actdatedatetimenonot null活動時間 deadlinedatetimenonot null截止時間 initiator_idint(11)

39、nonull創(chuàng)建人 id contenttextnonot null活動內(nèi)容 titlevarchar(40)nonot null標題 用戶活動表用戶存放用戶參加活動的信息，用戶活動表如表 10 所示。 表 10 user_activity 表 字段名稱數(shù)據(jù)類型主鍵是否為空說明 小型戶外網(wǎng)站的設計與實現(xiàn) 15 ua_idint(11)yesnot nullauto_increment activity_idint(11)nonot null活動 id user_idint(11)nonot null用戶 id 資訊表用于存放資訊信息，資訊表如表 11 所示。 表 11 information

40、表 字段名稱數(shù)據(jù)類型主鍵是否為空說明 info_idint(11)yesnot nullauto_increment titlevarchar(40)nonot null標題 contenttextnonot null內(nèi)容 createdatedatetimenonot null創(chuàng)建時間 4 小型戶外網(wǎng)站的設計與實現(xiàn)前臺設計與實現(xiàn) 小型戶外網(wǎng)站的整個前臺部分是供用戶瀏覽咨詢、發(fā)表并查看文章、上傳 并查看照片、留言、創(chuàng)建并參加活動的。 4.1首頁設計 首頁模塊包括 3 個主要的部分，采用內(nèi)嵌框架技術(shù)。位置分別為上、中、下。 上部分如圖 5 所示。 圖 5 主頁上部分 中間部分如圖 6 所示。 小

41、型戶外網(wǎng)站的設計與實現(xiàn) 16 圖 6 主頁中間部分 上部的實現(xiàn)：網(wǎng)站標題與“登錄|注冊”/“用戶名|注銷” ，網(wǎng)站標題導入的是一 張寫有“在途中”字樣的圖片。當用戶以游客身份進入主頁的時候顯示“登錄|注冊” 超鏈接，當用戶登錄后顯示其對應 “用戶名|注銷”超鏈接，點擊相應超鏈接頁面 跳轉(zhuǎn)到相應的頁面或本頁面進行處理；菜單是由一系列超鏈接組成，當用戶鼠標懸 浮于相應的超鏈接上，其字體背景變成藍色，點擊后跳轉(zhuǎn)到相應的頁面。 中間部分的實現(xiàn)：中間部分是網(wǎng)站的主要組成部分，由上邊的圖片輪換、本頁 面功能介紹以及下邊的戶外資訊、活動、熱門圖片、熱門文章組成。圖片自動輪換 是通過 jquery 實現(xiàn)的，點

42、擊圖片左右的按鈕可以控制圖片的顯示。本頁功能介紹讓 用戶更清楚地了解和使用網(wǎng)站的功能。點擊戶外資訊、活動、熱門圖片、熱門文章 下邊的文章標題，跳轉(zhuǎn)到對于的信息全部顯示頁面；點擊“more”按鈕，跳轉(zhuǎn)到相 應頁面顯示所有的信息。 底部的實現(xiàn)：運用一個 div 存放網(wǎng)站版權(quán)、版本等信息。 4.2用戶模塊 注冊用戶是構(gòu)成網(wǎng)站主體的一個重要組成部分，網(wǎng)站設置注冊用戶的目的之一 在于方便網(wǎng)站信息的管理。用戶以游客身份進行瀏覽網(wǎng)頁時一些功能是無法使用的， 如寫文章、留言、上傳照片、創(chuàng)建并參加活動等，這時用戶可以注冊新用戶，當用 戶注冊之后頁面跳轉(zhuǎn)到登錄頁面，登錄之后便可以發(fā)布文章、上傳照片、參加活動 等。

43、 （1）用戶注冊：用戶在首頁點擊“注冊”進行用戶注冊，或在登錄頁面點擊“注冊 小型戶外網(wǎng)站的設計與實現(xiàn) 17 新用戶”按鈕進行注冊。如圖 7 所示。 圖 7 注冊頁面 注冊頁面使用 jquery 對用戶輸入的數(shù)據(jù)進行校驗：用戶名：不能為空；用戶名 為 2-7 個漢字或 4-14 個英文字母；不能是已注冊過的。賬號（郵箱）：不能為空； 郵箱必須符合郵箱格式“”長度必須在 2-15 之間；不能是已注冊過的 郵箱。密碼：不能為空；密碼為 6-16 個字符，區(qū)分大小寫。驗證碼：不能為空；必 須與圖片上的驗證碼相同。用戶協(xié)議：用戶必須同意用戶協(xié)議條款才能進行注冊。 表單校驗中，用戶名是否被注冊過、郵箱是

44、否被注冊過、驗證碼是否正確這三項都 需要請求服務器，servlet 返回信息，通過 jquery 的 ajax()來異步的取得此信息進行 驗證。 （2）用戶登錄：在首頁點擊“登錄”鏈接就可以來到登錄頁面，或用戶注冊后直接 跳轉(zhuǎn)到登錄頁面進行登錄。如圖 8 所示。 圖 8 登錄頁面 表單校驗：用戶名：不能為空；用戶名為 2-7 個漢字或 4-14 個英文字母；用戶 小型戶外網(wǎng)站的設計與實現(xiàn) 18 名是否存在.密碼：不能為空；長度必須在 6-16 之間，區(qū)分大小寫。登錄表單校驗使 用 jquery 完成。其中用戶名是否存在，使用 jquery 的 ajax()向服務器發(fā)送異步請求。 用戶登錄成功后

45、，會回到首頁。這時在首頁會顯示“當前用戶名稱|注銷”超鏈接， 并可以寫文章、上傳照片、留言、創(chuàng)建并參加活動。 （3）當前用戶個人信息設置：登錄成功后點擊用戶名進入用戶個人頁面，進行用戶 個人信息設置。 （4）修改當前用戶密碼：登錄成功后點擊用戶名進入用戶個人頁面，點擊修改密碼 進行密碼修改。 （5）注銷：當用戶登錄后，點擊注銷鏈接可以完成注銷當前用戶信息。注銷成功后 會到達登錄頁面。 4.3資訊模塊 資訊模塊用以顯示數(shù)據(jù)庫中多有的戶外資訊信息，包括戶外新聞、戶外知識等 內(nèi)容，本模塊內(nèi)容為管理員添加管理。頭部：資訊模塊頭部菜單顯示為選中“資訊” ， 菜單下面顯示的是“戶外資訊”的介紹內(nèi)容。主體部

46、分：主體部分顯示的是所有戶 外資訊文章，點擊標題可以看到相應文章的全部信息。文章列表下面的“首頁” 、 “上一頁” 、 “下一頁” 、 “尾頁”進行翻頁。右邊的 services 為管理員添加的額外信 息，下面的提示框顯示其他信息。如圖 9 所示。 圖 9 咨詢頁主體部分 4.4活動模塊 活動模塊用以顯示用戶創(chuàng)建的全部獲得、用戶所參加的活動以及參加活動。頭 部：活動模塊頭部菜單顯示為選中“活動” ，菜單下面顯示的是“活動”的介紹內(nèi)容。 小型戶外網(wǎng)站的設計與實現(xiàn) 19 主體部分：活動列表顯示的是所有活動，點擊相應題目活動具體內(nèi)容便展示在左邊 部分，活動列表最后為翻頁超鏈接。登錄用戶點擊“參加活動

47、” 、 “創(chuàng)建活動”按鈕 可以參加、創(chuàng)建活動。如圖 10 所示。 圖 10 活動頁主體部分 4.5圖片模塊 頭部：圖片模塊頭部菜單顯示為選中“圖片” ，菜單下面顯示的是“圖片”的介 紹內(nèi)容。主體部分：照片模塊主體部分顯示的是所有照片信息，點擊超鏈接進行翻 頁。登錄用戶點擊上傳照片進行照片上傳。如圖 11 所示。 圖 11 圖片頁主體部分 小型戶外網(wǎng)站的設計與實現(xiàn) 20 4.6文章模塊 頭部：文章模塊頭部菜單顯示為選中“文章” ，菜單下面顯示的是“文章”的介 紹內(nèi)容。主體部分：文章主體部分顯示為所有文章信息，點擊翻頁超鏈接進行翻頁。 登錄用戶點擊“寫文章”進行文章發(fā)表。如圖 12 所示。 圖 1

48、2 文章頁主體部分 5 小型戶外網(wǎng)站的設計與實現(xiàn)后臺設計與實現(xiàn) 網(wǎng)站的后臺管理模塊是為管理員進行網(wǎng)站管理而設計的，管理員登錄后臺可以 操作管理資訊、活動、照片、文章、用戶信息。 5.1管理員登錄 后臺管理員登錄頁面，登錄成功后到達后臺主頁，管理本網(wǎng)站。 5.2后臺主頁 管理員登錄成功后，到達主頁。主頁由上、下兩部分構(gòu)成。上部顯示標題、管 理員姓名、退出和菜單，菜單分別為：管理員管理、資訊管理、文章管理、照片管 理、活動管理、用戶管理；下部顯示歡迎界面，當點擊菜單中的鏈接后改變?yōu)橄鄳?頁面。 5.3管理員管理 管理員管理模塊分為創(chuàng)建管理員和修改管理員。 表單校驗：姓名：不能為空；用戶名為 2-7

49、 個漢字或 4-14 個英文字母；用戶名 是否存在。密碼：不能為空；長度必須在 6-16 之間，區(qū)分大小寫。登錄表單校驗使 小型戶外網(wǎng)站的設計與實現(xiàn) 21 用 jquery 完成。其中用戶名是否存在，使用 jquery 的 ajax()向服務器發(fā)送異步請求。 創(chuàng)建管理員如圖 13 所示。 圖 13 創(chuàng)建管理員 修改管理員：修改管理員的表單驗證參考“創(chuàng)建管理員” ，如圖 21 所示： 圖 21 修改管理員 5.4資訊管理 資訊管理包括：發(fā)布資訊、查看資訊和刪除資訊。頁面右邊分頁顯示資訊信息， 點擊相應資訊題目，左邊部分顯示其具體信息；點擊“發(fā)布資訊”按鈕，顯示發(fā)布資 訊的表單，信息資訊發(fā)布。管理

50、員有權(quán)將有歧義或不符合規(guī)定的資訊刪除。 5.5文章管理 文章管理包括：顯示所有文章和刪除文章。在文章管理頁面，將顯示本網(wǎng)站所 有的文章信息；管理員有權(quán)將不符合規(guī)定的文章刪除。 5.6 照片管理 照片管理包括：查看照片和刪除照片。進入本頁面分頁顯示所有照片信息；管 理員有權(quán)將不合格規(guī)定的照片刪除。 小型戶外網(wǎng)站的設計與實現(xiàn) 22 5.7 活動管理 活動管理包括：顯示活動和刪除活動。頁面右邊分頁顯示所有活動，左邊顯示 具體某個活動信息；管理員有權(quán)將過期的活動或不符合規(guī)定的活動刪除。 5.8 用戶管理 用戶管理包括：顯示用戶信息、修改用戶信息、刪除用戶信息和刪除用戶。頁 面主題部分顯示所有用戶信息，

51、管理員可以在此對用戶進行管理。 6 結(jié)論 通過開發(fā)小型戶外網(wǎng)站的設計與實現(xiàn) ，我對 java 知識和網(wǎng)站設計過程有了 進一步的了解，并對開發(fā)能力有了很大的提高。更加充分的認識了 mvc 模式的靈 活性、jquery 的便捷、struts+hibernate+spring 框架的好處及其成熟性。在整個網(wǎng)站 的開發(fā)過程中我總結(jié)出：要想得到一個好的系統(tǒng)程序，必不可少的是充分的分析設 計。在開發(fā)一個系統(tǒng)之前，應充分的分析系統(tǒng)的需求，詳細的設計系統(tǒng)的各個模塊 和借口。在正式開始編程的時候做到胸有成竹、有條不紊。同時也能大大的減少開 發(fā)時間，并能開發(fā)出可維護性好、擴展性好的系統(tǒng)。 此外，由于缺乏經(jīng)驗，在本

52、網(wǎng)站的開發(fā)中沒有按照上述的過程一步一步進行， 導致開發(fā)到一定階段出現(xiàn)瓶頸，在查閱資料和老師的指導下才得以將系統(tǒng)完成。 由于經(jīng)驗的不足以及時間關系本網(wǎng)站還存在很多不足的地方，希望各位老師、同行 提成寶貴的建議。 小型戶外網(wǎng)站的設計與實現(xiàn) 23 參考文獻 1張孝祥java 就業(yè)培訓教程m北京：清華大學出版社，2007.7 2石志國，薛為民，董潔jsp 應用教程m北京：清華大學出版社，2004.10 3李曙光jsp 開發(fā)實例完全剖析m北京：中國電力出版社，2011.7 4楊易 jsp 高級程序設計m北京：人民郵電出版社，2006.1 5vivek chopra.jsp 高級程序設計m北京：機械工業(yè)出

53、版社，2006.3 6申吉紅，廖學峰，余健jsp 課程設計案例精編m北京：清華大學出版社， 2011.9 7盧瀟軟件工程m北京：清華大學出版社，2004.8 8薩師煊，王姍數(shù)據(jù)庫系統(tǒng)概論m北京：高等教育出版社，2006.5 9馬運濤eclipse 精要與高級開發(fā)技術(shù)m北京：電子工業(yè)出版社，2005.1 10pauljperrone etal，張志偉，譚郁松，張明杰j2ee 構(gòu)建企業(yè)系統(tǒng)m北京：清 華大學出版社，2002.3 11chuck，cavanessprogramming jakarta strutsj/ol，2002.10 12bruce shiveresearch direction in object-oriented programmingj/ol，2002.4 13miao h.k.mcdermid j.a，tony ianchinese journal of advanced software researchj/ol