【文章內(nèi)容簡介】 gory 表的categoryidurl varchar(100) 相片保存地址pubTime datetime 相片上傳或最新修改時(shí)間filename intr(8) 所屬用戶 id評論信息表則是網(wǎng)絡(luò)相冊的一大特征，用于保存網(wǎng)友對相片的評論信息。一張相片可能會有多條評價(jià)信息，因此應(yīng)該保存平困的相片 id、評論時(shí)間、評論人的名稱（或匿名）以評論的文字信息等。如表 34。表 34 評論信息表（ment）名稱 類型 含義 說明mentid Int(8) 主鍵photoid Int(8) 相片 id 關(guān)聯(lián)到 photo 表的photoidaddname varchar(100) 評論人姓名addTime datetime 評論時(shí)間ment Varchar(255) 評論內(nèi)容 本章小結(jié) 本章詳細(xì)描述了系統(tǒng)的體系結(jié)構(gòu)，對系統(tǒng)進(jìn)行了簡單的可行性分析，確定了各子系統(tǒng)要完成的功能，詳細(xì)介紹了系統(tǒng)的各個(gè)重要模塊的需求，同時(shí)給出了各子功能系統(tǒng)流程圖。 ，并初步得到了系統(tǒng)模型和功能模塊劃分，通過本章中描述的系統(tǒng)體系，接下來的任務(wù)是根據(jù)本章的敘述進(jìn)行詳細(xì)具體的設(shè)計(jì)實(shí)現(xiàn)。第 4 章 系統(tǒng)實(shí)現(xiàn)13第 4 章 系統(tǒng)實(shí)現(xiàn)系統(tǒng)階段的根本目標(biāo)是確定應(yīng)該怎樣具體的實(shí)現(xiàn)所要求的系統(tǒng)，也就是說，經(jīng)過這個(gè)階段的設(shè)計(jì)工作，應(yīng)該得出對目標(biāo)系統(tǒng)的精確描述，從而在編碼階段可以把這個(gè)描述直接翻譯成某種程序設(shè)計(jì)語言書寫的程序。本章主要實(shí)現(xiàn)了各個(gè)模塊的具體功能。 注冊用戶登陸設(shè)計(jì)注冊用戶登陸的界面設(shè)計(jì)要簡潔明，登陸有一個(gè)主頁面，首先進(jìn)行的是驗(yàn)證，判斷登陸者的權(quán)限，注冊用戶登陸界面如圖 41 所示。圖 41 注冊用戶登陸 注冊用戶登陸界面的創(chuàng)建在頁面表現(xiàn)上，采用 CSS 樣式表的方式，用記事本編寫一個(gè) css 文件()，每個(gè) jsp 頁面都引入這個(gè)文件，這樣當(dāng)需要變更頁面圖片背景等靜態(tài)屬性時(shí)，就直接修改 css 文件，而無需對頁面本身進(jìn)行任何改動，大大提高效率，除此之外，本系統(tǒng)平臺引入了現(xiàn)在網(wǎng)絡(luò)上較為流行 Ajax 的驗(yàn)證碼機(jī)，也就是說注冊用戶除了給出用戶名和密碼外還要另再填入給出的驗(yàn)證碼(這里的驗(yàn)證碼是查看用戶是否已存在)點(diǎn)擊登陸才能以用戶的身份進(jìn)入在線相冊的主界面。 注冊用戶登陸界面注冊用戶進(jìn)入時(shí)，其登陸成功界面如下：(這里以 2022112103 為用戶名登陸舉例)圖 42 注冊用戶登陸設(shè)計(jì)思想：用戶登錄模塊，該模塊需要確認(rèn)二部分信息，首先得確認(rèn)系統(tǒng)用戶的身份，是否存在該用戶，其次，若該用戶存在則判斷用戶的密碼，兩部分信息都正確則登陸到系統(tǒng)主頁面。登陸界面是 Web 應(yīng)用項(xiàng)目中的大門，它能讓用戶訪問 Web 項(xiàng)目中的功能。 實(shí)現(xiàn)過程在注冊用戶登陸的 界面中：form onsubmit=”return checkFormBName(‘loginForm’)。”method=”post” action=”LoginServlet” name=”loginForm”package 。第 4 章 系統(tǒng)實(shí)現(xiàn)15public class LoginServlet extends implements { static final long serialVersionUID = 1L。public LoginServlet() {super()。} protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Autogenerated method stubdoPost(request,response)。} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Autogenerated method stub(request, response)。UserInfo userInfo=new UserInfo()。((username))。((password))。userInfo=(userInfo)。HttpSession session=()。 RequestDispatcher requestDispatcher=null。//().print(())。if(userInfo==null){//設(shè)置返回路徑和錯(cuò)誤信息(returnUrl, )。(errorMessage, 帳號或者密碼不正確！)。requestDispatcher=()。//ServletContext sc=().setAttribute(, arg1)().print(())。}else{(userInfo, userInfo)。requestDispatcher=(GetDefaultInfo?userId=+u())。}(request, response)。} }從上面的代碼可以看出如果返回的是真值也就是說驗(yàn)證正確的話會跳轉(zhuǎn)到LoginServlet。在 LoginServlet 的 doPost（）中首先設(shè)置編碼格式為”GB2312”,然后去的 中 username 和 password 的輸入信息，并通過UserInfoDAO 的 Login（）方法來驗(yàn)證登錄用戶是否已經(jīng)注冊并核對密碼信息。如果返回的 UserInfo 對象不為空，這表示驗(yàn)證成功。把頁面控制給 url為/GetDefaultInfo,并附上 userid 的 request 信息。 GetDefaultInfo 目的是在想系統(tǒng)主頁面中顯示相片的用戶信息、所有相片的分類信息、每個(gè)相冊的相片數(shù)目以及最新評論信息等關(guān)鍵信息。因此在doPost（）方法中，首先從 request 中得到登錄相冊的當(dāng)前用戶的 userid，把查詢到的 userInfo 對象保存在 request 范圍中共 JSP 調(diào)用并通過 userid 查詢該用戶的所有相冊集相冊數(shù)目。然后把查詢到的最新的 10 條評論信息保存到List 中，并把這些信息保存到 request 中以供 JSP 頁面顯示。 通過其中粗體表示的 div class 可以知道該 JSP 主要實(shí)現(xiàn)顯示用戶信息、最新評論及用戶的相冊。其中使用 JSTL 中的c:forEach元素來迭代mentList 及 categoryList，并且使用 EL 語句來顯示各項(xiàng)內(nèi)容。在本系統(tǒng)的 文件中我們定義了各個(gè) Servlet 的相關(guān)信息，包括Servlet 的名稱、類路徑及 url 映射名。在 JSP 及訪問木椅 Servlet 是，均要使用此 Servlet 的 url 映射名。由映射名找到 Servlet 的類路徑，從而導(dǎo)向至Servlet。在 JSP 頁面中，使用了一些公共的方法，這些方法定義在第 4 章 系統(tǒng)實(shí)現(xiàn)17WebAlbum/WebRoot/js/ 及 中另外有關(guān) jsp 的布局類定義在WebAlbun/WebRoot/css/ 中。 未注冊用戶注冊設(shè)計(jì)未注冊用戶登陸的界面設(shè)計(jì)要簡潔明，注冊有一個(gè)主頁面，首先進(jìn)行的是填寫注冊信息，然后進(jìn)行提交操作。圖 43 未注冊用戶注冊驗(yàn)證用戶 JavaScriptfunction changeFieldToQueryString(formName,fieldName){var args=。var form=[formName]。args=[fieldName].name+=+[fieldName].value。return args。}//將表單上某個(gè)字段的值發(fā)送到服務(wù)器端，并返回結(jié)果function sendFieldToServer(formName,fieldName,servletName){sendMessageToServer(servletName,changeFieldToQueryString(formName,fieldName))。}未注冊用戶注冊界面的創(chuàng)建在頁面表現(xiàn)上，采用 CSS 樣式表的方式，用記事本編寫一個(gè) css 文件()，每個(gè) jsp 頁面都引入這個(gè)文件，這樣當(dāng)需要變更頁面圖片背景等靜態(tài)屬性時(shí)，就直接修改 css 文件，而無需對頁面本身進(jìn)行任何改動，大大提高效率。該模塊完成用戶注冊的過程，用戶注冊后才能完成圖書訂閱等功能。流程分析本模塊包含二個(gè)文件， 完成用戶注冊信息錄入； 完成檢查數(shù)據(jù)的可靠性，符合要求的數(shù)據(jù)寫入 userinfo 數(shù)據(jù)表。在這個(gè)模塊里，用戶可以輸入“用戶名” ， “昵稱”， “密碼”， “重復(fù)密碼”，然后單擊“注冊 ”按鈕提交注冊信息，如果注冊所用的用戶名已經(jīng)存在于數(shù)據(jù)庫中，系統(tǒng)會報(bào)錯(cuò)。如果用戶數(shù)據(jù)的“新密碼” 和“新密碼確認(rèn)”內(nèi)容不一致，系統(tǒng)也會報(bào)錯(cuò)。用戶一旦通過注冊。就在數(shù)據(jù)庫中存儲了該用戶的注冊信息，該用戶就可以憑此信息進(jìn)行登錄。 相冊列表添加相冊的界面設(shè)計(jì)要簡潔明，添加相冊有一個(gè)主頁面，首先要進(jìn)行相應(yīng)的數(shù)據(jù)輸入，然后提交操作相冊列表有兩種方式,一種是通過 主頁面中的分類列表或“相冊管理”來竟如相應(yīng)相冊的相片列表：另一種是直接竟如“相片管理”來列出所有的相片列表。下面好似幾個(gè)主要的 Servlet 使命。（1）：去的登錄用戶的相冊，并把頁面導(dǎo)向至，即“相冊管理 ”頁面。（2）：取得用戶的所有相冊并實(shí)現(xiàn)分頁功能，把頁面導(dǎo)向至 ，即“相片管理 ”頁面。如圖 44 第 4 章 系統(tǒng)實(shí)現(xiàn)19圖 44 相冊下的所有相片列表（3）：取得用戶指定的相冊下的所有相片列表并實(shí)現(xiàn)發(fā)布功能，把頁面導(dǎo)向至 。如圖 45圖 45 相冊下的相片列表頁面如代碼實(shí)現(xiàn)了查詢給用戶制定的相關(guān)相冊下的所有相片信息，并用 List保存在 request 中。然后需要分頁顯示的一些相關(guān)數(shù)目，如當(dāng)前頁，相片總頁數(shù)，總相片數(shù)及當(dāng)前相片顯示書目等。 的代碼div id=main class=maindiv class=mainAdminc:forEach var=category items=${}table style=width: 750pxtr height=30td rowspan=2style=width: 80px。 height: 100px。 textalign: center。spanahref=GetPhotos?categoryId=${ }imgclass=categoryPhoto src=images\\ / /a /span/tdtd style=width: 400px。 textalign: left。spanahref=GetPhotos?categoryId=${ }${}【${}張照片】/ a /span/tdtd style=textalign: right。 width: 121px${ }/tdtd style=width: 77pxa href=GotoAddCategory新建相冊/a /td/trtr height=50 style=width: 524pxtd style=width: 500px。 textalign: left。 colspan=2${}/td第 4 章 系統(tǒng)實(shí)現(xiàn)21td style=width: 77pxa onclick=return isDelete()。href=javascript:sendMessageToServer(39。DeleteCategory39。,39。id=${cat }39。)刪除相冊/a br /a href=GotoUpdateCategory?categoryId=${ }修改相冊/ a/td/tr/table/c:forEach在 中首先對 requestScope 中的 PhotoList 使用c:forEach迭代 photo 信息并顯示相片的縮略圖，其后實(shí)現(xiàn)分頁。GetPhotos 與 相似，唯一不同之處在于前者是正對用戶的某一相冊下的所有相片的列表，后者是正對給用戶的所有相片列表。 添加相片 給系統(tǒng)中的上傳相片時(shí)關(guān)鍵功能，是先方法是把上傳的相片文件以文件形式保存在 Web 應(yīng)用程序下的 WebRoot/photos 目錄下。對每張相片，以用戶注冊的用戶名（username ）及向南偏的所屬相冊的 categoryid 來新建二級目錄，然后再目錄下保存相片，相片文件的名稱仍使用上傳的文件名。例如，用戶名為“2022112101”的相冊 id 為 2 的相片文件應(yīng)上傳保存在WebRoot/photos/2022112101/2/目錄下。上傳相片功能的主要流程如下：（1）取得用戶提交的數(shù)據(jù)，生成要保存的 photo 對象。（2）把 photo 相片文件上傳至 Web 服務(wù)器保存。（3）保存（增加或修改）相片的信息至數(shù)據(jù)庫。(4)根據(jù)上傳的相片及保存信息的結(jié)果設(shè)置不同的提示結(jié)果。(5)跳轉(zhuǎn)至相片顯示或主頁面的 Servlet