畢業(yè)設計----在線像冊的設計與實現

1、<p><b>　　畢業(yè)設計（論文）</b></p><p>　　題目： 在線像冊的設計與實現</p><p><b>　　目 錄</b></p><p><b>　　摘要V</b></p><p><b>　　前言1</b><

2、/p><p><b>　　第1章 緒論2</b></p><p>　　1.1系統(tǒng)開發(fā)的背景和意義2</p><p>　　1.2國內外發(fā)展狀況2</p><p>　　1.3研究內容3</p><p>　　第2章 選擇平臺與架構5</p><p>　　2.1 開發(fā)環(huán)

3、境5</p><p><b>　　2.2 架構5</b></p><p>　　2.3 運行環(huán)境5</p><p><b>　　2.4本章小結5</b></p><p>　　第3章 電子像冊系統(tǒng)需求分析6</p><p>　　3.1可行性分析6</p>

4、<p>　　3.1.1系統(tǒng)總體目標6</p><p>　　3.1.2技術可行性分析6</p><p>　　3.1.3功能需求6</p><p>　　3.1.4性能需求6</p><p>　　3.2系統(tǒng)總體結構6</p><p>　　3.2.1 系統(tǒng)總體結構7</p><p&g

5、t;　　3.2.2用例圖7</p><p>　　3.3系統(tǒng)功能模塊結構8</p><p>　　3.3.1相片管理模塊8</p><p>　　3.3.2相冊管理模塊8</p><p>　　3.3.3用戶管理模塊9</p><p>　　3.3.4評論管理模塊9</p><p>　　3.4

6、數據庫模塊10</p><p>　　3.5 本章小結11</p><p>　　第4章 系統(tǒng)實現12</p><p>　　4.1 注冊用戶登陸設計12</p><p>　　4.1.1 注冊用戶登陸界面的創(chuàng)建12</p><p>　　4.1.2 注冊用戶登陸界面12</p><p>　　

7、4.1.3 實現過程13</p><p>　　4.2 未注冊用戶注冊設計16</p><p>　　4.3 相冊列表17</p><p>　　4.4添加相片20</p><p>　　4.6相片管理29</p><p>　　4.6.1修改相片29</p><p>　　4.6.2刪除相片

8、30</p><p>　　4.7 實現DAO層30</p><p>　　4.7.1 DAO組件的定義30</p><p>　　4.7.2實現DAO組件30</p><p>　　4.8數據庫設計33</p><p>　　4.9系統(tǒng)測試33</p><p>　　4.9.1 軟件測試的目的

9、33</p><p>　　4.9.2 各模塊測試33</p><p>　　4.10 本章小結36</p><p><b>　　緒論37</b></p><p><b>　　參考文獻39</b></p><p><b>　　致謝40</b>&l

10、t;/p><p>　　在線像冊的設計與實現</p><p>　　摘要：隨著人們生活水平的逐步提高，旅游照相成了大家必不可少放松項目。雖然照片最后會存入到自己的電腦里，但是時間一長、照片一多，這些有著勾起回憶的“資料”，就會顯得雜亂無章，即不方便欣賞，也不方便管理。而在線相冊具有欣賞、傳播方便，界面美觀等特點，可以很好的管理所存入的照片，不失為最佳欣賞、保存照片的相冊工具。在線相冊系統(tǒng)平臺也就應

11、此應運而生。</p><p>　　本系統(tǒng)是一種基于B/S架構的在線管理系統(tǒng)，它采用目前最流行的java語言編寫，用到了當今先進的技術如 jsp技術、基于JSP+Servlet+DAO模式在小型應用系統(tǒng)中式靈活并穩(wěn)定的架構，是典型的基于MVC模式的架構。同時采用MVC框架技術也提高了系統(tǒng)的可維護性。</p><p>　　系統(tǒng)分為：個人管理模塊、相冊管理模塊、相片管理、評論管理模塊。注：注冊用

12、戶登陸后可以進行添加相冊，上傳，刪除照片，修改資料等一系列操作。而如果是未注冊用戶只能查看相冊中的內容，沒有權力進行相應的修改。特別是上傳相片、相冊列表、相冊管理、相片查看及評論管理等模塊是在線相冊系統(tǒng)的重點。</p><p>　　關鍵詞：JAVA；電子相冊； MVC </p><p>　　Abstract:As people gradually increase the standard

13、 of living， travel photography has become essential to relax the project everyone. While the photos will eventually be deposited to your computer， but over time，more than one photo，which has brought back memories of the

14、"data"，will be very chaotic， that is inconvenient to enjoy， not to facilitate management. Electronic album with appreciation，the spread of convenience，the interface appearance characteristics such as good manag

15、ement can be deposit</p><p>　　The system is based on B / S architecture online management system, it uses the most popular java language, used in today's advanced technologies such as jsp technology, bas

16、ed on JSP + Servlet + DAO patterns in small application flexibility and stability of Chinese The structure is a typical architecture based on MVC pattern. MVC framework while using technology to improve the maintainabili

17、ty of the system.      System is divided into: personal management module, photo album management module</p><p><b>　　前言</b></p><p>　　相冊在很早以前就開始有，原來是以紙質照片的形式的存在

18、，后來隨著時代的發(fā)展，科技的進步，旅游業(yè)的進步，照片越來越多，電腦的普及，傳統(tǒng)的相冊在使用人工進行管理，存在工作量大，各種多而復雜的文件信息占用大量地方，相冊簿方便攜帶，不易保管，容易丟失，翻看時不方便等等問題。</p><p>　　隨著科技的進步，電腦時代的來臨，加速了電子相冊的產生與進步，在網絡上，電子相冊發(fā)展迅速，很多網站，博客都需要電子相冊的功能，而隨著微機的普及使用，人們生活質量的提升，越來越多的人選擇

19、旅游，此時會照大量的照片，對相冊的需求都有了更高的要求，這就要求傳統(tǒng)的相冊能夠實現計算機化，讓人們能方便快捷共享式的瀏覽照片。</p><p>　　由于現在網絡競爭激烈，人們對電子相冊的要求不斷提高，使得電子相冊開發(fā)者必須以完善相冊功能和質量來取悅于顧客，電腦的不斷普及和軟件業(yè)的飛速前進，使得人們擁有自己獨特的電子相冊成為可能，也成為必然。在現在生活質量不斷提高的環(huán)境下，電子相冊系統(tǒng)越來越貼近于用戶，貼近于顧客。

20、電子相冊管理系統(tǒng)的存在也使網站擁有者獲得了更多的用戶。</p><p>　　目前，雖然很多網站都有了相冊功能，但是，這些系統(tǒng)都是針對性非常強，都是針對網站當前的狀況而開發(fā)的，對現在應用來說還算可以，但對很多不需要關注該網站的用戶來說有很多的局限性。很多用戶只是需要一個電子相冊功能，并不需要什么博客網站等等，所以，他們需要的是一個獨立的電子相冊系統(tǒng)，用戶能夠在自己的電腦安裝上電子相冊系統(tǒng)，能夠自己制作自己的電子相冊

21、，不受網站、博客提供商的約束。</p><p>　　對此，我們針對現有相冊功能，開發(fā)了適合多數用戶使用的電子相冊系統(tǒng)，在這個系統(tǒng)中，我們綜合了原來舊式紙質相冊的功能，又參考了很多具有相冊功能的網站，博客空間，開發(fā)出具有自己特色的電子相冊管理系統(tǒng)，這個系統(tǒng)可以實現注冊用戶對相冊的上傳刪除修改等管理功能。整個系統(tǒng)我們要求功能完善，組織全面，具有可擴展性，能夠針對一些報錯事件可以做出反應的系統(tǒng)。</p>

22、<p><b>　　第1章 緒論</b></p><p>　　隨著數碼攝影時代的到來，不論是專業(yè)攝影師建立圖片檔案或是向他人展示自己的攝影作品，還是家庭生活攝影，都需要電子相冊來保管攝影作品。如同傳統(tǒng)的照相簿，電子相冊既有展示功能也有存儲和管理功能。</p><p>　　在線相冊是現在時下最流行的一種網絡元素，它可以應該在很多的領域，例如時下最流行的空間及博

23、客就是大量的應該這一技術，而且受到大多數網友的認可及追捧，其以靜態(tài)照片為素材(獲得源方式為掃描儀掃描、數碼相機所拍等)，配合動感的背景、前景和字幕等視頻處理的特殊效果，配上音樂就可制作成電子相冊。制作好的在線相冊可以在電腦上，各類影碟機上，以及手機和MP4里都能觀看，這是電子相冊技術發(fā)展到今天的一個新的突破，即不再像傳統(tǒng)那樣，只能在電腦上或在影碟機上觀看了，并且還可以通過手機將自己的個性化MTV發(fā)送給遠方的親朋好友們分享。當然，如果考慮

24、到長期保存的話，制作成電子相冊光盤那是最好的選擇啦，金碟可保存100多年之久，標準VCD、SVCD、DVD格式，兼容性好，通過影牒機即可與家人、朋友、客戶觀賞。若保存在硬盤上，也便于隨時調閱、欣賞，永久保存。</p><p>　　系統(tǒng)開發(fā)的背景和意義</p><p>　　隨著人們生活水平的逐步提高，旅游成了大家必不可少放松項目，每當筆者走到一個美麗的景點，就會忍不住拿起數碼相機照上幾張留做

25、回憶。雖然照片最后會存入到自己的電腦里，但是時間一長、照片一多，這些有著勾起回憶的資料，就會顯得雜亂無章，即不方便欣賞，也不方便管理。而在線相冊具有欣賞、傳播方便，界面美觀等特點，可以很好的管理所存入的照片，不失為最佳欣賞、保存照片的相冊工具。另外隨著數碼相機、手機照相等功能的普及，想必每個人手上都儲存了大量的電子相片，但這此照片如果不進行處理，僅僅以一張張圖片的形式放置在電腦上，不僅 不易觀賞，也不方便分類管理，是否有軟件能將這些照片

26、整理成一本本的相冊呢？在線相冊系統(tǒng)平臺就是一款集相冊制作、生成、瀏覽專業(yè)軟件，有了它的幫助，制用相冊再也不需要專業(yè)的技術，普通用戶也可以在五分鐘內制作出精美的在線相冊，支持170余種照片顯示特技，可以為相片加入文件注釋及說明。</p><p><b>　　國內外發(fā)展狀況</b></p><p>　　在線相冊是現在時下最流行的一種網絡元素，它可以應該在很多的領域，例如時

27、下最流行的空間及博客就是大量的應該這一技術，而且受到大多數網友的認可及追捧，其以靜態(tài)照片為素材(獲得源方式為掃描儀掃描、數碼相機所拍等)，配合動感的背景、前景和字幕等視頻處理的特殊效果，配上音樂就可制作成電子相冊。制作好的電子相冊可以在電腦上，各類影碟機上，以及手機和MP4里都能觀看，這是在線相冊技術發(fā)展到今天的一個新的突破，即不再象傳統(tǒng)那樣，只能在電腦上或在影碟機上觀看了。并且還可以通過手機將自己的個性化MTV發(fā)送給遠方的親朋好友們分

28、享。當然，如果考慮到長期保存的話，制作成電子相冊光盤那是最好的選擇啦，金碟可保存100多年之久，標準VCD、SVCD、DVD格式，兼容性好，通過影牒機即可與家人、朋友、客戶觀賞；若保存在硬盤上，也便于隨時調閱、欣賞，永久保存。</p><p><b>　　研究內容</b></p><p>　　在線相冊系統(tǒng)是一種基于B/S架構的管理系統(tǒng)，它采用目前最流行的java語言編

29、寫，用到了當今先進的技術如 jsp技術、基于JSP+Servlet+DAO模式在小型應用系統(tǒng)中式靈活并穩(wěn)定的架構，是典型的基于MVC模式的架構。同時采用MVC框架技術也提高了系統(tǒng)的可維護性。為了自己的發(fā)展，各個網站都開始尋求適合用戶使用的電子相冊系統(tǒng)，為此而開發(fā)的電子相冊管理系統(tǒng)已經非常多，并且大部分都是從用戶使用的角度出發(fā)，給用戶的使用帶來了很大的方便。本系統(tǒng)所研究的是從在線相冊的管理到相冊的生成等一系列的問題，大致分為：用戶管理、相

30、片分類、相冊管理、相片的評論管理、個人信息，我的主頁。 </p><p>　　本文共分5章，第1章是緒論，第2章介紹開發(fā)本系統(tǒng)所用到的相關技術，第3章是系統(tǒng)的需求分析及結構圖，第4章是相冊系統(tǒng)的系統(tǒng)實現，第5章是總結。各章節(jié)的研究內容如下：</p><p>　　(1) 第1章主要介紹了選題的背景和意義，論述了系統(tǒng)的國內發(fā)展狀況。</p><p>　　(2) 第2章主

31、要介紹了實現在線相冊系統(tǒng)所用的軟件和系統(tǒng)建設過程中使用的相關技術。</p><p>　　(3) 第3章主要是在線相冊系統(tǒng)的需求分析。</p><p>　　(4) 第4章是系統(tǒng)的編碼實現，從三層框架的實現，數據庫的創(chuàng)建等方面介紹了系統(tǒng)的實現。</p><p>　　(5) 第5章主要是此系統(tǒng)的的總結。</p><p>　　第2章 選擇平臺與架構&

32、lt;/p><p><b>　　2.1 開發(fā)環(huán)境</b></p><p>　　Myeclipse集成開發(fā)環(huán)境+MySQL5.5+Windows。</p><p><b>　　2.2 架構</b></p><p>　　在J2EE應用中，基于JSP+Servlet+DAO模式在小型應用系統(tǒng)中式靈活并穩(wěn)定的架

33、構，是典型的基于MVC模式的架構。</p><p>　　以JSP+Servlet+Service+DAO模式實現，即以JSP+JSTL+EL技術實現前端駛入顯示層，以Servlet為頁面導向控制層、Service為業(yè)務邏輯層并以DAO為數據庫訪問層來構建系統(tǒng)。</p><p><b>　　2.3 運行環(huán)境</b></p><p>　　本系統(tǒng)采用

34、Tomcat5.5為服務器，以WindowsXP為在線相冊系統(tǒng)的服務器，以目前流行的MySQL為數據庫服務前。</p><p><b>　　2.4本章小結</b></p><p>　　在本章中主要介紹了軟件開發(fā)時所用的開發(fā)工具和相關的技術，重點介紹了Java、J2EE平臺和MVC結構等相關知識以。同時也詳細介紹了JSP的相關技術，運行環(huán)境及其開發(fā)工具。</p&g

35、t;<p>　　如果將該系統(tǒng)發(fā)布到流量比較大的網站中應用，則可以以Solaris為在線相冊系統(tǒng)的服務器、以JBOSS為Web服務器，以MySQL為數據庫服務器并安裝在Linux上實現雙機備份等穩(wěn)定性和安全性來實現。</p><p>　　第3章 電子像冊系統(tǒng)需求分析</p><p><b>　　3.1可行性分析</b></p><p&g

36、t;　　3.1.1系統(tǒng)總體目標</p><p>　　系統(tǒng)主要是為了給那些對照片管理感興趣的朋友提供一個交流的平臺，對有很多照片需要管理的朋友，你在這里可以進行注冊成為會員，添加相片分類，上傳自己的照片，也可以瀏覽別人的相冊，還可以修改個人資料。非注冊會員你可以瀏覽電子相冊里別人的相片，同時可以對相片進行評論。</p><p>　　3.1.2技術可行性分析</p><p&

37、gt;　　這個電子相冊是基于Web來開發(fā)的，主要運用JSP+Servlet+DAO模型在小型應用系統(tǒng)中靈活并穩(wěn)定的框架結構，是典型的基于MVC模式的框架，以MySQL為后臺數據庫，采用Myeclipse集成開發(fā)環(huán)境。通過它來構建一個在線相冊系統(tǒng)，實現在互聯網上使用的網絡相冊的絕大部分功能，所以對于本系統(tǒng)在技術上是可以達到的。</p><p><b>　　3.1.3功能需求</b></p

38、><p>　　本系統(tǒng)應該具有相片瀏覽、相片上傳、評論相片、編輯、刪除相片、用戶注冊、個人信息修改等功能。</p><p><b>　　3.1.4性能需求</b></p><p>　　設備需求：PC機，Windows98/2000/xp操作系統(tǒng)，tomcat服務器，采用Mysql數據庫管理。</p><p><b>

39、　　3.2系統(tǒng)總體結構</b></p><p>　　本系統(tǒng)所研究的是在線用戶發(fā)布相片、將相片歸類存放，并允許其他在線網友欣賞及評論相片。系統(tǒng)的總體結構如下：</p><p>　?。?）用戶管理：用戶已用戶名及密碼登陸注冊，可修改密碼。</p><p>　?。?）相片分類：添加分類，刪除分類，修改分類，并獲取列表和分頁（某個用戶個人分類）。</p&g

40、t;<p>　?。?）相片管理：用戶登錄后能發(fā)布并刪除、修改發(fā)布的相片。獲取相片的列表和分頁（某個用戶某個分類中的相片），以縮略圖及全圖兩種模式來顯示選擇的某張相片。</p><p>　?。?）相片的評論管理：在線網友（登陸或游客）能欣賞相片并評論，相片的所有者及評論人能刪除評論，獲取評論的列表和分頁。</p><p>　?。?）上傳及刪除相片文件：使用JspSmartUpl

41、oad組件來實現相片的上傳并保存至Web服務器中。刪除相片實現級聯刪除：即如果刪除某個用戶的某個相片分類，則把此分類下的所有相片全部刪除，以維護數據和文件系統(tǒng)的一致性。</p><p>　　3.2.1 系統(tǒng)總體結構</p><p>　　圖 3-1 總體架構</p><p><b>　　3.2.2用例圖</b></p><p&

42、gt;　　用例圖就是把網站各個用戶的動作分解一下，再用畫圖軟件把它畫出來。電子相冊系統(tǒng)的角色之一是注冊用戶</p><p>　　用例名稱：用戶登錄 執(zhí)行者：用戶</p><p>　　目的：完成注冊用戶登陸后的一系列操作的完整過程。</p><p>　?。?）用戶輸入登錄名，密碼，系統(tǒng)識別用戶信息的有效性；</p><p>　?。?）對用

43、戶信息進行識別；</p><p>　?。?）用戶完成相冊列表，新建相冊修改資料等一系列操作；</p><p><b>　　（4）退出系統(tǒng)。</b></p><p><b>　　圖 3-2 用例圖</b></p><p>　　3.3系統(tǒng)功能模塊結構</p><p>　　在線相冊

44、系統(tǒng)的目標是工在線用戶發(fā)布相片、將相片歸類存放，并允許其他在線網友欣賞及評論相片。在線相冊管理系統(tǒng)分為用戶管理、相冊管理模塊、相片管理模塊、評論管理模塊。注：注冊用戶擁有全部操作權限，而如果是未注冊用戶只能查看相冊中的內容，沒有權力進行相應的修改。</p><p>　　3.3.1相片管理模塊</p><p>　　(1) 業(yè)務描述：用戶登錄后能發(fā)布并刪除、修改發(fā)布的相片。</p>

45、<p>　　(2) 業(yè)務流程：用戶可以瀏覽相關的相冊的照片，獲取相片的列表和分頁（某個用戶某個分類中的相片），以縮略圖及全圖兩種模式來顯示選擇的某張相片，在該頁面中用戶可以根據自己的需要上傳相應的圖片，為圖片取名、分類，提交后返回相冊列表。</p><p>　　(3) 輸入數據：記錄編號是自增列不顯示在前臺頁面；圖片名稱、文件簡介分別以文本框的形式展示在前臺頁面中，由用戶輸入；圖片的上傳以一種數據流

46、的形式出現，出現在前臺的時候以一種需要用戶點擊選擇的形式出現。</p><p>　　(4) 角色說明：此功能主要由注冊用戶和非注冊用戶使用。</p><p>　　3.3.2相冊管理模塊</p><p>　　(1) 業(yè)務描述：新建相冊，刪除相冊，修改相冊，并獲取列表和分頁（某個用戶個人分類）。</p><p>　　(2) 業(yè)務流程：點擊相冊管理

47、，進入相冊管理的主界面根據提示輸入相關的信息后選擇提交，則可看到剛剛新添加的那個相冊，然后可以根據自己的需要選擇是的操作。 </p><p>　　(3) 錯誤處理：在填寫信息的過程中不允許有不被填寫的欄目，系統(tǒng)會給出相應的提示。</p><p>　　(4) 輸入數據：由用戶輸入相應的數據信息。</p><p>　　(5) 輸出結果：其輸出結果為在相冊列表中給予

48、相應的顯示。</p><p>　　(6) 角色說明：此功能主要注冊用戶使用。</p><p>　　3.3.3用戶管理模塊</p><p>　　(1) 業(yè)務描述：用戶以用戶名及密碼登陸 注冊，可修改密碼。對注冊用戶來講，將自己的資料從后臺數據庫中讀取出來然后根據用戶的需要進行相應的修改，根據用戶資料采集界面來采集相應的數據，根據這些數據來更新數據庫中該用戶的相應資料。

49、如果是未注冊的用戶可根據提示進行注冊。</p><p>　　(2) 業(yè)務流程：用戶登錄后進入我的主頁，可以瀏覽相冊和最新10條相片評論信息，選擇一相冊進入可以瀏覽相冊的整個相片，并查看選中相片的放大圖以及對其的評論信息。同時還可以查看每條評論的詳細信息。</p><p>　　(3) 錯誤處理：在填寫信息的過程中不允許有不被填寫的欄目，系統(tǒng)會給出相應的提示。</p><p

50、>　　(4) 輸入數據：由用戶輸入相應的數據信息。</p><p>　　(5) 輸出結果：無</p><p>　　(6) 角色說明：此功能主要注冊用戶使用。</p><p>　　3.3.4評論管理模塊</p><p>　　(1) 業(yè)務描述：在線網友（登陸或游客）能欣賞相片并評論，相片的所有者及評論人能刪除評論，獲取評論的列表和分頁。&l

51、t;/p><p>　　(2) 業(yè)務流程：進入評論管理界面，每頁顯示10條最新評論，包括評論人大名、所屬照片名、評論時間和評論內容，并可以刪除評論。點擊所屬照片名，查看詳細信息，同時還可以發(fā)表新評論。</p><p>　　(3) 錯誤處理：所有字段必須逐一給出相應的數據信息。</p><p>　　(4) 輸入數據：由用戶輸入相應的數據信息。</p><

52、p>　　(5) 輸出結果：評論信息。</p><p>　　(6) 角色說明：此功能主要注冊用戶使用。</p><p><b>　　3.4數據庫模塊</b></p><p>　　本系統(tǒng)中涉及的數據庫主要包括注冊用戶、相片分類、相片信息及評論信息。</p><p>　　注冊用戶信息表保存在線相冊系統(tǒng)的注冊用戶的基本信息

53、，包括用戶名、昵稱、密碼及注冊時間等，如表3-1所示。</p><p>　　表3-1 注冊用戶信息表（userInfo）</p><p>　　相片分類只有4個字段：即主鍵、分類名稱、描述信息及所屬的用戶id。如表3-2。</p><p>　　表3-2 相片分類信息（category）</p><p>　　相片信息表用于保存用戶相片及其相關信息

54、，包括相片標題、相片簡介、相片上傳時間、相片所屬分類、相片保存的地址，以及相片的文件名。其中，相片保存的地址及文件名是附加信息：相片文件名是用來記錄用戶上傳相片時原相片文件的名稱，用于用戶瀏覽或下載相片時讓Web瀏覽器顯示文件名，以供用戶使用；文件類型信息指的是相片文件的格式類型，在顯示相片時會用到。如表3-3。</p><p>　　表3-3 相冊信息表（photo）</p><p>　　

55、評論信息表則是網絡相冊的一大特征，用于保存網友對相片的評論信息。一張相片可能會有多條評價信息，因此應該保存平困的相片id、評論時間、評論人的名稱（或匿名）以評論的文字信息等。如表3-4。</p><p>　　表3-4 評論信息表（comment）</p><p><b>　　3.5 本章小結</b></p><p>　　本章詳細描述了系統(tǒng)的體系

56、結構，對系統(tǒng)進行了簡單的可行性分析，確定了各子系統(tǒng)要完成的功能，詳細介紹了系統(tǒng)的各個重要模塊的需求，同時給出了各子功能系統(tǒng)流程圖。，并初步得到了系統(tǒng)模型和功能模塊劃分，通過本章中描述的系統(tǒng)體系，接下來的任務是根據本章的敘述進行詳細具體的設計實現。</p><p><b>　　第4章 系統(tǒng)實現</b></p><p>　　系統(tǒng)階段的根本目標是確定應該怎樣具體的實現所要求

57、的系統(tǒng)，也就是說，經過這個階段的設計工作，應該得出對目標系統(tǒng)的精確描述，從而在編碼階段可以把這個描述直接翻譯成某種程序設計語言書寫的程序。本章主要實現了各個模塊的具體功能。</p><p>　　4.1 注冊用戶登陸設計</p><p>　　注冊用戶登陸的界面設計要簡潔明，登陸有一個主頁面，首先進行的是驗證，判斷登陸者的權限，注冊用戶登陸界面如圖4-1所示。</p><p

58、>　　圖 4-1 注冊用戶登陸</p><p>　　4.1.1 注冊用戶登陸界面的創(chuàng)建</p><p>　　在頁面表現上，采用CSS樣式表的方式，用記事本編寫一個css文件(style.css)，每個jsp頁面都引入這個文件，這樣當需要變更頁面圖片背景等靜態(tài)屬性時，就直接修改css文件，而無需對頁面本身進行任何改動，大大提高效率，除此之外，本系統(tǒng)平臺引入了現在網絡上較為流行Ajax的

59、驗證碼機，也就是說注冊用戶除了給出用戶名和密碼外還要另再填入給出的驗證碼(這里的驗證碼是查看用戶是否已存在)點擊登陸才能以用戶的身份進入在線相冊的主界面。</p><p>　　4.1.2 注冊用戶登陸界面</p><p>　　注冊用戶進入時，其登陸成功界面如下：(這里以2006112103為用戶名登陸舉例)</p><p>　　圖 4-2 注冊用戶登陸</p&

60、gt;<p><b>　　設計思想：</b></p><p>　　用戶登錄模塊，該模塊需要確認二部分信息，首先得確認系統(tǒng)用戶的身份，是否存在該用戶，其次，若該用戶存在則判斷用戶的密碼，兩部分信息都正確則登陸到系統(tǒng)主頁面。</p><p>　　登陸界面是Web應用項目中的大門，它能讓用戶訪問Web項目中的功能。</p><p>　　

61、4.1.3 實現過程</p><p>　　在注冊用戶登陸的login.jsp界面中：</p><p>　　<form onsubmit=”return checkFormBName(‘loginForm’);”method=”post” action=”LoginServlet” name=”loginForm”></p><p>　　LoginServ

62、lett.java</p><p>　　package jspbook.webalbum.servlet;</p><p>　　public class LoginServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {</p><p>　　static fin

63、al long serialVersionUID = 1L;</p><p>　　public LoginServlet() {</p><p><b>　　super();</b></p><p><b>　　} </b></p><p>　　protected void doGet(Htt

64、pServletRequest request, HttpServletResponse response) throws ServletException, IOException {</p><p>　　// TODO Auto-generated method stub</p><p>　　doPost(request,response);</p><p>&

65、lt;b>　　} </b></p><p>　　protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {</p><p>　　// TODO Auto-generated method st

66、ub</p><p>　　ServletEncoding.setEncoding(request, response);</p><p>　　UserInfo userInfo=new UserInfo();</p><p>　　userInfo.setUsername(request.getParameter("username"));<

67、/p><p>　　userInfo.setPassword(request.getParameter("password"));</p><p>　　userInfo=UserInfoDAO.Login(userInfo);</p><p>　　HttpSession session=request.getSession(); </p>

68、<p>　　RequestDispatcher requestDispatcher=null;</p><p>　　//response.getWriter().print(request.getQueryString());</p><p>　　if(userInfo==null){</p><p>　　//設置返回路徑和錯誤信息</p>

69、<p>　　request.setAttribute("returnUrl", "login.jsp");</p><p>　　request.setAttribute("errorMessage", "帳號或者密碼不正確！");</p><p>　　requestDispatcher=reques

70、t.getRequestDispatcher("error.jsp");</p><p>　　//ServletContext sc=this.getServletContext().setAttribute(", arg1)</p><p>　　response.getWriter().print(request.getRequestURI());</

71、p><p><b>　　}else{</b></p><p>　　session.setAttribute("userInfo", userInfo);</p><p>　　requestDispatcher=request.getRequestDispatcher("GetDefaultInfo?userId=&qu

72、ot;+userInfo.getUserid());</p><p><b>　　}</b></p><p>　　requestDispatcher.forward(request, response);</p><p>　　} </p><p><b>　　}</b></

73、p><p>　　從上面的代碼可以看出如果返回的是真值也就是說驗證正確的話會跳轉到LoginServlet。在LoginServlet的doPost（）中首先設置編碼格式為”GB2312”,然后去的login.jsp中username和password的輸入信息，并通過UserInfoDAO的Login（）方法來驗證登錄用戶是否已經注冊并核對密碼信息。如果返回的UserInfo對象不為空，這表示驗證成功。把頁面控制給u

74、rl為/GetDefaultInfo,并附上userid的request信息。</p><p>　　GetDefaultInfo目的是在想系統(tǒng)主頁面中顯示相片的用戶信息、所有相片的分類信息、每個相冊的相片數目以及最新評論信息等關鍵信息。因此在doPost（）方法中，首先從request中得到登錄相冊的當前用戶的userid，把查詢到的userInfo對象保存在request范圍中共JSP調用并通過userid查詢

75、該用戶的所有相冊集相冊數目。然后把查詢到的最新的10條評論信息保存到List中，并把這些信息保存到request中以供JSP頁面顯示。</p><p>　　通過其中粗體表示的div class可以知道該JSP主要實現顯示用戶信息、最新評論及用戶的相冊。其中使用JSTL中的<c:forEach>元素來迭代commentList及categoryList，并且使用EL語句來顯示各項內容。</p>

76、;<p>　　在本系統(tǒng)的web.xml文件中我們定義了各個Servlet的相關信息，包括Servlet的名稱、類路徑及url映射名。在JSP及訪問木椅Servlet是，均要使用此Servlet的url映射名。由映射名找到Servlet的類路徑，從而導向至Servlet。</p><p>　　在JSP頁面中，使用了一些公共的方法，這些方法定義在WebAlbum/WebRoot/js/adjax.js及

77、common.js中另外有關jsp的布局類定義在WebAlbun/WebRoot/css/style.css中。</p><p>　　4.2 未注冊用戶注冊設計</p><p>　　未注冊用戶登陸的界面設計要簡潔明，注冊有一個主頁面，首先進行的是填寫注冊信息，然后進行提交操作。</p><p>　　圖 4-3 未注冊用戶注冊</p><p>

78、　　驗證用戶JavaScript</p><p>　　function changeFieldToQueryString(formName,fieldName){</p><p>　　var args="";</p><p>　　var form=document.forms[formName];</p><p>　　ar

79、gs=form.elements[fieldName].name+"="+form.elements[fieldName].value;</p><p>　　return args;</p><p><b>　　}</b></p><p>　　//-------------------------將表單上某個字段的值發(fā)送到服

80、務器端，并返回結果</p><p>　　function sendFieldToServer(formName,fieldName,servletName){</p><p>　　sendMessageToServer(servletName,changeFieldToQueryString(formName,fieldName));</p><p><b&g

81、t;　　}</b></p><p>　　未注冊用戶注冊界面的創(chuàng)建</p><p>　　在頁面表現上，采用CSS樣式表的方式，用記事本編寫一個css文件(style.css)，每個jsp頁面都引入這個文件，這樣當需要變更頁面圖片背景等靜態(tài)屬性時，就直接修改css文件，而無需對頁面本身進行任何改動，大大提高效率。該模塊完成用戶注冊的過程，用戶注冊后才能完成圖書訂閱等功能。</

82、p><p>　　流程分析本模塊包含二個文件，addUser.jsp完成用戶注冊信息錄入；david.js完成檢查數據的可靠性，符合要求的數據寫入userinfo數據表。</p><p>　　在這個模塊里，用戶可以輸入“用戶名”，“昵稱”，“密碼”，“重復密碼”，然后單擊“注冊”按鈕提交注冊信息，如果注冊所用的用戶名已經存在于數據庫中，系統(tǒng)會報錯。如果用戶數據的“新密碼”和“新密碼確認”內容不一

83、致，系統(tǒng)也會報錯。用戶一旦通過注冊。就在數據庫中存儲了該用戶的注冊信息，該用戶就可以憑此信息進行登錄。</p><p><b>　　4.3 相冊列表</b></p><p>　　添加相冊的界面設計要簡潔明，添加相冊有一個主頁面，首先要進行相應的數據輸入，然后提交操作</p><p>　　相冊列表有兩種方式,一種是通過 defaultInfo.j

84、sp主頁面中的分類列表或“相冊管理”來竟如相應相冊的相片列表：另一種是直接竟如“相片管理”來列出所有的相片列表。下面好似幾個主要的Servlet使命。</p><p>　?。?）GetCategoriseServlet.java：去的登錄用戶的相冊，并把頁面導向至categoryList.jsp，即“相冊管理”頁面。</p><p>　?。?）GetPhotoServlet.java：取得

85、用戶的所有相冊并實現分頁功能，把頁面導向至photoList.jsp，即“相片管理”頁面。如圖4-4</p><p>　　圖 4-4 相冊下的所有相片列表</p><p>　?。?）GetPhotos.java：取得用戶指定的相冊下的所有相片列表并實現發(fā)布功能，把頁面導向至photoListToAll.jsp。如圖4-5</p><p>　　圖 4-5相冊下的相片列

86、表頁面</p><p>　　如代碼實現了查詢給用戶制定的相關相冊下的所有相片信息，并用List保存在request中。然后需要分頁顯示的一些相關數目，如當前頁，相片總頁數，總相片數及當前相片顯示書目等。photoList.jsp的代碼</p><p>　　<div id="main" class="main"></p>&l

87、t;p>　　<div class="mainAdmin"></p><p>　　<c:forEach var="category" items="${requestScope.categoryList}"></p><p>　　<table style="width: 750px&qu

88、ot;></p><p>　　<tr height="30"></p><p>　　<td rowspan="2"</p><p>　　style="width: 80px; height: 100px; text-align: center;"></p><

89、;p><b>　　<span><a</b></p><p>　　href="GetPhotos?categoryId=${category.categoryid }"><img</p><p>　　class="categoryPhoto" src="images\\category

90、.JPG" /> </a> </span></p><p><b>　　</td></b></p><p>　　<td style="width: 400px; text-align: left;"></p><p><b>　　<span>

91、;<a</b></p><p>　　href="GetPhotos?categoryId=${category.categoryid }">${category.name}【${category.photoNum</p><p>　　}張照片】</a> </span></p><p><b&g

92、t;　　</td></b></p><p>　　<td style="text-align: right; width: 121px"></p><p>　　${category.addTime }</p><p><b>　　</td></b></p><

93、p>　　<td style="width: 77px"></p><p>　　<a href="GotoAddCategory">新建相冊</a></p><p><b>　　</td></b></p><p><b>　　</tr&g

94、t;</b></p><p>　　<tr height="50" style="width: 524px"></p><p>　　<td style="width: 500px; text-align: left;" colspan="2"></p><p

95、>　　${category.memo}</p><p><b>　　</td></b></p><p>　　<td style="width: 77px"></p><p>　　<a onclick="return isDelete();"</p><

96、;p>　　href="javascript:sendMessageToServer('DeleteCategory','id=${category.categoryid }')">刪除相冊</a></p><p><b>　　<br /></b></p><p>　　<a h

97、ref="GotoUpdateCategory?categoryId=${category.categoryid }">修改相冊</a></p><p><b>　　</td></b></p><p><b>　　</tr></b></p><p><b&

98、gt;　　</table></b></p><p>　　</c:forEach></p><p>　　在photoList.jsp中首先對requestScope中的PhotoList使用<c:forEach>迭代photo信息并顯示相片的縮略圖，其后實現分頁。</p><p>　　GetPhotos與GetPhoto

99、sServlet.java相似，唯一不同之處在于前者是正對用戶的某一相冊下的所有相片的列表，后者是正對給用戶的所有相片列表。</p><p><b>　　4.4添加相片</b></p><p>　　給系統(tǒng)中的上傳相片時關鍵功能，是先方法是把上傳的相片文件以文件形式保存在Web應用程序下的WebRoot/photos目錄下。對每張相片，以用戶注冊的用戶名（usernam

100、e）及向南偏的所屬相冊的categoryid來新建二級目錄，然后再目錄下保存相片，相片文件的名稱仍使用上傳的文件名。例如，用戶名為“2006112101”的相冊id為2的相片文件應上傳保存在WebRoot/photos/2006112101/2/目錄下。</p><p>　　上傳相片功能的主要流程如下：</p><p>　?。?）取得用戶提交的數據，生成要保存的photo對象。</p

101、><p>　?。?）把photo相片文件上傳至Web服務器保存。</p><p>　?。?）保存（增加或修改）相片的信息至數據庫。</p><p>　　(4)根據上傳的相片及保存信息的結果設置不同的提示結果。</p><p>　　(5)跳轉至相片顯示或主頁面的Servlet。</p><p>　　上傳相片的頁面實現由add

102、Photo.jsp </p><p>　　在addPhoto.jsp頁面中，使用“file”型的瀏覽文件組件來供用戶選擇相片文件進行上傳，而所屬相冊則是當前用戶的所有相冊列表。</p><p>　　由于用戶在addPhoto.jsp提交的數據中包括了相片文件的信息，所以不能直接使用getParameter（）方法來獲得用戶提交的文件信息。因此需要使用第三方提供的一個組件來完成這個功能。在這

103、里選用的是JspSmartUpload組件，他是在前面章節(jié)中介紹過的專門用來處理文件上傳下載的組件。</p><p>　　使用這個包來上傳相片文件需要在生成JspSmartUpload對象并初始化一些參數。</p><p>　?。?）允許用戶上傳的文件類型及文件的最大值，即超出文件類型范圍或文件的最大值的相片文件不能上傳到服務器，這主要是基于安全和性能方面的考慮。</p>&

104、lt;p>　?。?）使用SmartUpload對象的getRequest（）方法來取得用戶提交的相片文件的請求信息，并通過com.jspsmart.upload.Request類的getParameter（String paraName）方法來解析請求信息。</p><p>　?。?）需要根據用戶名及相冊id在服務器端構造相片的保存目錄，并設置保存文件的文件。在本例中，我們要使用基于Web應用程序的相對路

105、徑方式來保存文件，故采用SAVE_VIRTUAL來保存文件。上傳圖片頁面如圖4-6示。</p><p>　　圖 4-6上傳相片頁面</p><p>　　首先使用JspSmartUpload上傳組件來上傳圖片至服務器，上傳成功后把相片信息保存至數據表photo中，這兩步成功后才返回成功添加相片的信息。</p><p>　　在頁面表現上，采用CSS樣式表的方式，用記事本

106、編寫一個css文件(style.css)，每個jsp頁面都引入這個文件，這樣當需要變更頁面圖片背景等靜態(tài)屬性時，就直接修改css文件，而無需對頁面本身進行任何改動，大大提高效率，在頁面步局和設計方面在此就不多加以介紹。下面的部分中主要介紹一下具體的實現過程。</p><p>　　AddPhotoServlet.java</p><p>　　package jspbook.webalbum.

107、servlet;</p><p>　　public class AddPhotoServlet extends HttpServlet implements</p><p>　　javax.servlet.Servlet {</p><p>　　static final long serialVersionUID = 1L;</p><p>

108、　　public AddPhotoServlet() {</p><p><b>　　super();</b></p><p><b>　　}</b></p><p>　　protected void doGet(HttpServletRequest req, HttpServletResponse resp)</p

109、><p>　　throws ServletException, IOException {</p><p>　　// TODO Auto-generated method stub</p><p>　　doPost(req, resp);</p><p><b>　　}</b></p><p>　　p

110、rotected void doPost(HttpServletRequest req, HttpServletResponse resp)</p><p>　　throws ServletException, IOException {</p><p>　　TODO Auto-generated method stub</p><p><b>　　//

111、改變編碼</b></p><p>　　ServletEncoding.setEncoding(req, resp);</p><p>　　HttpSession session = req.getSession();</p><p>　　PrintWriter out=resp.getWriter();</p><p>　　if

112、(session.getAttribute("userInfo") == null) {</p><p>　　// session中沒有保存用戶信息</p><p>　　RequestDispatcher requestDispatcher = req</p><p>　　.getRequestDispatcher("login.jsp

113、");</p><p>　　requestDispatcher.forward(req, resp);</p><p><b>　　} else {</b></p><p>　　doExecute(req, resp);</p><p><b>　　}</b></p><

114、;p><b>　　}</b></p><p>　　public void destroy() {</p><p>　　// TODO Auto-generated method stub</p><p><b>　　}</b></p><p>　　public void init() thro

115、ws ServletException {</p><p>　　// TODO Auto-generated method stub</p><p><b>　　}</b></p><p>　　public void doExecute(HttpServletRequest request,</p><p>　　Htt

116、pServletResponse response) throws IOException, ServletException {</p><p>　　// TODO Auto-generated method stub</p><p>　　ServletEncoding.setEncoding(request, response);</p><p>　　Hasht

117、able<String,Object> paraTable = PhotoUpload.uploadPhoto(request.getSession().getServletContext(),</p><p>　　request,response,destFilePath);</p><p>　　boolean upload = true;</p><p&

118、gt;　　String savePhotoPath = "";</p><p>　　String photoFileName="";</p><p>　　int categoryId = 0;</p><p>　　SmartUpload smartUpload = new SmartUpload();</p>&