jsp網(wǎng)頁設(shè)計實例網(wǎng)絡(luò)交友(提高篇).doc

9.1 系統(tǒng)模塊構(gòu)成19.2 數(shù)據(jù)庫設(shè)計19.3 系統(tǒng)管理29.4 會員注冊59.5 會員登錄109.6 上傳照片159.7 瀏覽會員信21第9章網(wǎng)絡(luò)交友(提高篇) 第9章是提高篇，其目的是掌握一般Web應(yīng)用中常用的基本模塊的開發(fā)方法。JSP引擎為Tomcat 6.0；系統(tǒng)采用MVC模式實現(xiàn)各個模塊；數(shù)據(jù)庫連接操作使用加載純Java驅(qū)動程序方式，系統(tǒng)采用的是SQL Server 2000數(shù)據(jù)庫。9.1 系統(tǒng)模塊構(gòu)成 1.會員注冊：新會員填寫表單，包括會員名、E-mail地址等信息。如果輸入的會員名已經(jīng)被其他用戶注冊使用，系統(tǒng)將提示新用戶更改自己的會員名。 2.會員登錄：輸入會員名、密碼。如果用戶輸入的會員名或密碼有錯誤，系統(tǒng)將顯示錯誤信息。 3.上傳照片：如果登錄成功，用戶可以使用該模塊上傳自己的照片。 4.瀏覽會員信息：成功登錄的會員可以分頁瀏覽其他會員的信息，比如其他會員的簡歷、照片等。如果用戶直接進入該頁面或沒有成功登錄就進入該頁面，將被鏈接到“會員登錄”頁面。 5.修改密碼：成功登錄的會員可以在該頁面修改自己的登錄密碼，如果用戶直接進入該頁面或沒有成功登錄就進入該頁面，將被鏈接到會員登錄頁面。 6.修改注冊信息：成功登錄的會員可以在該頁面修改自己的注冊信息，比如聯(lián)系電話、通信地址等，如果用戶直接進入該頁面或沒有成功登錄就進入該頁面，將被鏈接到“會員登錄”頁面。 7.退出登錄：成功登錄的用戶可以使用該模塊退出登錄。9.2 數(shù)據(jù)庫設(shè)計 系統(tǒng)采用加載純Java數(shù)據(jù)庫驅(qū)動程序方式訪問數(shù)據(jù)庫。使用SQL Server 2000建_上一個數(shù)據(jù)庫MakeFriend，該庫有一個表：member表。會員的注冊信息存入member表中，member表的主鍵是logname，各個字段值的說明如下。 logname：存儲會員登錄名字。 password：存儲會員登錄密碼。 phone：存儲會員的電話。 email存儲會員的email地址。 message：存儲會員的簡歷。 pic：存儲會員照片文件的名字。 member表的詳細結(jié)構(gòu)設(shè)計如圖9-1所示。9.3 系統(tǒng)管理圖9-1 member表的結(jié)構(gòu) 本系統(tǒng)使用的Web服務(wù)目錄是mkfriend，是在Tomcat安裝目錄的webapps目錄下建立的Web服務(wù)目錄。 現(xiàn)在需要在當前web服務(wù)目錄下建立如下的目錄結(jié)構(gòu)： 然后根據(jù)servlet的包名，在classes下再建立相應(yīng)的子目錄，比如Servlet類的包名為myservlet.control，那么在classes下建立子目錄myservletcontrol；如果JavaBean類的包名為mybean data，那么在classes下建立子目錄hnybeandata。為了讓Tomcat服務(wù)器啟用上述目錄，必須重新啟動Tomcat服務(wù)器。1.頁面管理 本系統(tǒng)用的JSP頁面全部保存在Web服務(wù)目錄mkfriend中。 所有的頁面將包括一個導航條，該導航條由注冊、登錄、上傳照片、瀏覽會員、修改密碼、修改個人信息組成。為了便于維護，其他頁面通過使用JSP的標記將導航條文件head.txt嵌入自己的頁面，head.txt保存在Web服務(wù)目錄mkfriend中。head.txt的內(nèi)容如下：head.txt網(wǎng)絡(luò)交友 會員注冊 font s1,厶匕一/.石zx貝m登錄 卜傳照片 汶0覽會員 修改注冊信息 修改密碼 退fJ登錄 返I旦J豐頁 主頁indexjsp由導航條、一個歡迎語和一幅圖片welcomeJpg組成，welcome.jpg保存在mk銜end中。 用戶町以通過在瀏覽器的地址欄中輸入“htq)：/月艮務(wù)器lP：8080/indexjsp”或“htq)：/服務(wù)器IP：8080/”訪問該主頁，主頁運行效果如圖9.2所示。圖92 主頁indexjspindex.jsp 歡迎您來這里結(jié)交朋友 2.JavaBean與Servlet管理本系統(tǒng)的JavaBean類的包名均為mybean.data；Servlet類的包名均為myselet control。由于Servlet類中要使用JavaBean，所以為了能順利地編譯Servlet類，首先將JavaBean類和Servlet類分別保存到：和D：myservletcontrolmybeandataD：myservletcontrol目錄中，分別進入上述目錄，編譯JavaBean類和Servlet類。然后將編譯通過的JavaBean類和Servlet類的字節(jié)碼件分別復制到：和mkfriendWEBINFclassesmybeandatamkfriendWEBINFclassesmyservletcontrol目錄中。3.配置文件 本系統(tǒng)的Servlet類的包名均為myservlet.control，需要配置Web服務(wù)目錄的web.xml文件，根據(jù)本書使用的Tomcat安裝目錄及使用的Web服務(wù)目錄，需將下面的web.xml文件保存到：D：apachetomcat一5.5.20webappsmkfriendWEBINF目錄中。web.xmi register myservlet.contr01.HandleRegister register /helpRegister login myservlet.contr01.HandleLogin login /helpL0gin upload myserVlet.c。ntr01.HandleUpload upload /helpUpload 100kRecord myservlet.contr01.HandleDatabase 100kRecord /helpShowMember modifvPassword myserVlet.contr01.HandlePassword modifvPassword /helpModifyPassword modifyOldMess myserVlet.c。ntr01.HandleM0difyMess modifvOldMess /helpM0difyMess exit myserVlet.contr01.HandleExit exit /helpExitL0gin 9.4 會員注冊 當新會員注冊時，該模塊要求用戶必須輸入會員名、密碼信息，否則不允許注冊。用戶的注冊信息被存入數(shù)據(jù)庫的meNber表中。 該模塊的模型JavaBean描述用戶的注冊信息；該模塊的視圖部分由兩個JSP頁面構(gòu)成，一個JsP頁面負責提交用戶的注冊信息到控制器，另一個JsP頁面負責顯示注冊是否成功的信息；該模塊的控制器servlet負責將視圖提交的信息寫入數(shù)據(jù)庫的member表中，并負責更新視圖。1.模型(JavaBean)下列JavaBean用來描述用戶注冊信息。RegisteLj ava 輸入您的信息，會員名字必須由字母和數(shù)字組成，帶+號項必須填寫。 會員名稱：木 設(shè)置密碼：木 電子郵件： 聯(lián)系電話： 輸入您的陶歷和交友標準： 2.視圖(JSP頁面)本模塊視圖有兩個JsP頁面：Register.jsp和shOWRegisterMessJsp。Register.jsp頁面負責提供輸入注冊信息界面(效果如圖93所示)；showRegistefMessjsp負責顯示注冊反饋信息(效果如圖94所示)，比如注冊是否成功等。圖9.3填寫注冊信息圖94顯示注冊結(jié)果RegisteLjsp輸入您的信息，會員名字必須由字母和數(shù)字組成，帶+號項必須填寫。會員名稱：工nput type=設(shè)置密碼：Input type電r郵件：工nput type聯(lián)系電話：Input typetext name：”logname”木=password name=”password”豐text name=email”text name=”phone”輸入您的簡歷和交友標準： showRegisterMess.jsp 注冊的會員名稱： 注冊的電子郵件： 注冊的聯(lián)系電話： 您的簡歷和交友標準： 3.控制器(Servlet)控制器ser、，let對象的名字是register(見register負責連接數(shù)據(jù)庫，將用戶提交的信shOWRegisterMessJsp頁面查看注冊反饋信息。HandleRegister.j aVapackage myservlet.control；import mybeaR.data.。；i。mport java.sql.。ji。mport java.i0.。；import javax.servlet.。；9-3節(jié)給出的web.xml配置文件)。控制器息寫入到metuber表，并將用戶轉(zhuǎn)發(fā)到 import jaVax.serVlet.http.木jpublic class HandleRegister extends HttpServlet public Void init(SerVletC。nfig c。nfig) throws ServletExcepti。n super.init(config)； try class.forName(com.microsoft.sqlserVer.jdbc.sQLserverDriver”)； catch(Exception e)public String handleString(String s)try byte bb=s.getBytes(”is088591)j s=new String(bb)j catch(Exception ee)return s：public V。id d。P。st(HttpSerVletRequest request，HttpServletResp。nserespOnse) throws SerVletException，工OException f C0nnection con； Statement sql j Register reg=new Register()； request.setAttribute(”register”，reg)j String 10gname=request.getParameter(logname”).trim()， password=request.getParameter(”password。).trim()， email=request.getParameter(email”).trim()， phone=request.getParameter(”phone).trim()， message=request.getParameter(”message”)j string uri=”jdbc：sqlserVer：/127.O.O.1：1433；DatabaseName： MakeFriend”； if(10gname=null) 10gname=； if(password=null) password=”j b00lean isLD=true； for(int i=Oj i10gname.1ength()j i+) f char c=10gname.charAt(i)； if(!(c=a)l l(c=A)l 1(c=0) isLD=false； b。lean bOo=10gname.1ength()0passw。rd.1ength()0&isLD； String backNews=”； trylOgname=handleString(10gname)；password=handleString(password)phone=handleString(phone)jemail=handleString(email)；message=handleString(message)jString pic=”public.jpg”；String insertRecord=ll，IIl- ，C0nStri+10gname+”+message十”DriVerManagerng insertC0nd”+DaSS”+Dic.aetC01t10n=”+insertRecord：sql=con.createStatementif(b00)1n七mif(m!word+”，+phone+”，”+email+”)”jnnection(uri，”sa”，”sa”)j”INSERT 工NTO member VALUES=sql.executeUpdate(insertC0ndition)j backNews=”注冊成功”； reg.setBackNews(backNews)； reg.setLogname(10gname)j reg.setPassword(password)； reg.setPhone(phone)； reg.setEmail(email)； reg.setMessage(message)； ) else backNews=”信息填寫不完整或名字中有非法字符”； reg.setBackNews(backNews)j ) con.close()j )catch(SQLException exp) backNews=該會員名已被使用，請您更換名字+expj reg.setBackNews(backNews)j )RequestDispatcher dispatcher=request.getRequestDispatcher(”sh。wRegisterMess.j sp”)j/轉(zhuǎn)發(fā)dispatcher.forward(request， response)jI ， ， - 9.5 會員登錄public void doGet(HttpServletRequest request，HttpServletResponseresponse) throws ServletException，IOException doPost(request，response)；用戶可在該模塊輸入自己的會員名和密碼，系統(tǒng)將對會員名和密碼進行驗證，如果輸入的用戶名或密碼有錯誤，將提示用戶輸入的用戶名或密碼不正確。該模塊的模型JavaBean描述用戶登錄的信息；該模塊視圖部分由兩個JSP頁面構(gòu)成，一個JSP頁面負責提交用戶的登錄信息到控制器，另一個JSP頁面負責顯示登錄是否成功的信息；該模塊的控制器servlet負責驗證會員名和密碼是否正確，并負責更新視圖。1.模型(JavaBean)下列JavaBean的實例用來描述用戶登錄信息。Login.javapackage mybean.data jpublic class Login String logname， pas sword， backNews=”： boolean success=false； public void setLogname(String name) logname：name j ) public String getLogname() return logname； ) public void setPassword(String pw) pas sword=pw； ) Iublic String getPassword() return passwordjpublic String getBackNews()return backNews：public void setBackNews(String s)backNews=s：public void setSuccess(boolean b)success=o；p姐blic b00lean getSuccess()reurn success；2.視圖(JSP頁面) 本模塊視圖有兩個JSP頁面：loginjsp和showLoginMess.jsp。10ginjsp頁面負責供輸入登錄信息界面(效果如圖9.5所示)；showLoginMess.jsp頁面負責顯示登錄反信息(效果如圖9-6所示)，比如登錄是否成功等。login.jsp圖95輸入登錄信息 岡96顯示登錄結(jié)果請您登錄登錄名稱：提饋 工nD輸入密碼：ut type=submit name=”g”value=提交”showLoginMess.jsp 乏BR 登錄會員名稱： 琶錄會員名稱： 登錄會員密碼： 。 3.控制器(Servlet) 該Ser、，let對象的名字是login負責連接數(shù)據(jù)庫，查詢member表，(見9.3節(jié)給出的web.xml配置文件)?？刂破鱨ogin驗證用戶輸入的會員名和密碼是否在member表中，并將用戶轉(zhuǎn)發(fā)到showRegisterMessjsp頁面查看登錄反饋信息。HandleLogin.j aVapackage myserVlet.control jimport mybean.data.木； import jaVa.sql.木jimport jaVa.i0.木；import j aVax.serVlet.木；import jaVax.serVlet.http.木；public class HandleL0gin extends HttpSerVletpublic void init(ServletC0nfig config) throws SerVletException super.init(config)； try class.forName(”com.microsoft.sqlserVer.jdbc.sQLserVerDriVer”)； ) catch(Exception e)public String handleString(String s) try byte bb=s.getBytes(”iso一8859一l”)； s=new String(bb)； catch(Exception ee) return s；public void d0P0st(HttpSerVletRequest request，HttpSerVletResponseresponse) throws ServletException，工0Exception C0nnection con； Statement sql； L0gin loginBean=null j String backNews=”； HttpSession sessiOn=request.getSession(true)j try 10ginBean=(LOgin)session.getAttribute(”10gin”)； if(10ginBean=null) 10ginBean=new L0gin()； session.setAttribute(”10gin”，loginBean)； ) ) catch(Exception ee) 10ginBean=new L0gin()j session.setAttribute(”10gin”，10ginBean)j ) String 10gname=request.getParameter(”10gname”).trim()， password=request.getParameter(”password”).trim()j boolean 0k=loginBean.getSucces s()；logname：handleString(10gname)；password=handleString(password)；if(0k=truelogname.equals(10ginBean.getLogname() backNews=logname+”已經(jīng)登錄了”； loginBean.setBackNews(backNews)；)else String url。=”jdbc：sqlserver：/127.O.O.1：1433；DatabaseName MakeFriend”； boolean boo=(10gname.1ength()0)(password.1ength()O)j try con=DriverManager.getConnection(url。，”sa”，”sa”)； String conditi。on= ”select幸from member where logname= ”+ logname+” and password=”+password+”： sql=con.createStatement()；if(boo)ResultSet rs=sql.executeQuery(condition)；boolean m=rs.next()jif(m=true) backNews=”登錄成功”j loginBean.setBackNews(backNews)； loginBean.setSuccess(true)j 10ginBean.setLogname(10gname)jelse bac】(News=”您輸入的用戶名不存在，或密碼不般配”； 10ginBean.setBackNews(backNews)j loginBean.setSuccess(false)j loginBean.setLogname(10gname)； loginBean.setPassword(password)j )else backNews=”您輸入的用戶名不存在，或密碼不般配”j loginBean.setBackNews(backNews)； loginBean.setSuccess(false)； loginBean.setLogname(10gname)； loginBean.setPassword(password)； ) con.close()j ) catch(SQLException exp) backNews=”+exp； loginBean.setBackNews(backNews)j loginBean.setSuccess(false)j ) ) RequestDispatcherdispatcher=request.getRequestDispatcher (”showLoginMess.j sp)；。籮曼蛐脅w。d嘲印。唧。卜public void doGet(HttpServletRequest request，HttpServletResponseresponse) throws ServletException，IOException doPost(request，response)；9.6 上傳照片用戶可在該模塊上傳自己的照片。如果member中已經(jīng)存有一幅照片，新上傳的照片將替換原有的照片。用戶在注冊時，注冊模塊給會員的照片是默認的一幅圖像：publicjpg。該模塊的模型JavaBean描述用戶上傳的照片圖像文件的有關(guān)信息；該模塊視圖部分由兩個JSP頁面構(gòu)成，一個JSP頁面負責提交圖像文件到控制器，另一個JSP頁面負責顯示上傳操作是否成功的信息；該模塊的控制器負責將圖像文件上傳到服務(wù)器，并將圖像文件的名字寫入數(shù)據(jù)庫的member表中，必要時還需刪除用戶曾上傳的圖像文件；該servlet還負責更新視圖，使用戶能看到上傳操作的結(jié)果。另外，控制器能阻止未登錄用戶上傳照片。1.模型(JavaBean)下列JavaBean的實例用來描述上傳文件的有關(guān)信息。UploadFile.jaVa package mybean.data；public class UploadFile( String fileName，savedFileName， backNews=”； public void setFileName(String name) ( fi leName=name： public String getFileName() ( return fi leName； ) public void setSavedFileName(String name) savedP士j薈雨吾鬲e=name； ) public String getSavedFileName() return savedFileName； ) public String getBackNews() return backNews； ) public void setBackNews(String s) backNews=s； )2.視圖(JSP頁面) 本模塊視圖有兩個JsP頁面：upload.jsp和showUploadMOSS.jsp。upload.jsp頁面負責提供上傳文件的表單(效果如圖97所示)；showUploadMess.jsp頁面負責顯示上傳文件的反饋信息(效果如圖98所示)。圖9-7選擇上傳的文件圖9-8顯示上傳文件反饋信息 upload.jsp文件將被上傳到web服務(wù)目錄mkfrend的子目錄imag