jsp网页设计实例网络交友(提高篇).doc

9.1 系统模块构成19.2 数据库设计19.3 系统管理29.4 会员注册59.5 会员登录109.6 上传照片159.7 浏览会员信21第9章网络交友(提高篇) 第9章是提高篇，其目的是掌握一般Web应用中常用的基本模块的开发方法。JSP引擎为Tomcat 6.0；系统采用MVC模式实现各个模块；数据库连接操作使用加载纯Java驱动程序方式，系统采用的是SQL Server 2000数据库。9.1 系统模块构成 1.会员注册：新会员填写表单，包括会员名、E-mail地址等信息。如果输入的会员名已经被其他用户注册使用，系统将提示新用户更改自己的会员名。 2.会员登录：输入会员名、密码。如果用户输入的会员名或密码有错误，系统将显示错误信息。 3.上传照片：如果登录成功，用户可以使用该模块上传自己的照片。 4.浏览会员信息：成功登录的会员可以分页浏览其他会员的信息，比如其他会员的简历、照片等。如果用户直接进入该页面或没有成功登录就进入该页面，将被链接到“会员登录”页面。 5.修改密码：成功登录的会员可以在该页面修改自己的登录密码，如果用户直接进入该页面或没有成功登录就进入该页面，将被链接到会员登录页面。 6.修改注册信息：成功登录的会员可以在该页面修改自己的注册信息，比如联系电话、通信地址等，如果用户直接进入该页面或没有成功登录就进入该页面，将被链接到“会员登录”页面。 7.退出登录：成功登录的用户可以使用该模块退出登录。9.2 数据库设计 系统采用加载纯Java数据库驱动程序方式访问数据库。使用SQL Server 2000建_上一个数据库MakeFriend，该库有一个表：member表。会员的注册信息存入member表中，member表的主键是logname，各个字段值的说明如下。 logname：存储会员登录名字。 password：存储会员登录密码。 phone：存储会员的电话。 email存储会员的email地址。 message：存储会员的简历。 pic：存储会员照片文件的名字。 member表的详细结构设计如图9-1所示。9.3 系统管理图9-1 member表的结构 本系统使用的Web服务目录是mkfriend，是在Tomcat安装目录的webapps目录下建立的Web服务目录。 现在需要在当前web服务目录下建立如下的目录结构： 然后根据servlet的包名，在classes下再建立相应的子目录，比如Servlet类的包名为myservlet.control，那么在classes下建立子目录myservletcontrol；如果JavaBean类的包名为mybean data，那么在classes下建立子目录hnybeandata。为了让Tomcat服务器启用上述目录，必须重新启动Tomcat服务器。1.页面管理 本系统用的JSP页面全部保存在Web服务目录mkfriend中。 所有的页面将包括一个导航条，该导航条由注册、登录、上传照片、浏览会员、修改密码、修改个人信息组成。为了便于维护，其他页面通过使用JSP的标记将导航条文件head.txt嵌入自己的页面，head.txt保存在Web服务目录mkfriend中。head.txt的内容如下：head.txt网络交友 会员注册 font s1,厶匕一/.石zx贝m登录 卜传照片 汶0览会员 修改注册信息 修改密码 退fJ登录 返I旦J丰页 主页indexjsp由导航条、一个欢迎语和一幅图片welcomeJpg组成，welcome.jpg保存在mk衔end中。 用户町以通过在浏览器的地址栏中输入“htq)：/月艮务器lP：8080/indexjsp”或“htq)：/服务器IP：8080/”访问该主页，主页运行效果如图9.2所示。图92 主页indexjspindex.jsp 欢迎您来这里结交朋友 2.JavaBean与Servlet管理本系统的JavaBean类的包名均为mybean.data；Servlet类的包名均为myselet control。由于Servlet类中要使用JavaBean，所以为了能顺利地编译Servlet类，首先将JavaBean类和Servlet类分别保存到：和D：myservletcontrolmybeandataD：myservletcontrol目录中，分别进入上述目录，编译JavaBean类和Servlet类。然后将编译通过的JavaBean类和Servlet类的字节码件分别复制到：和mkfriendWEBINFclassesmybeandatamkfriendWEBINFclassesmyservletcontrol目录中。3.配置文件 本系统的Servlet类的包名均为myservlet.control，需要配置Web服务目录的web.xml文件，根据本书使用的Tomcat安装目录及使用的Web服务目录，需将下面的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 会员注册 当新会员注册时，该模块要求用户必须输入会员名、密码信息，否则不允许注册。用户的注册信息被存入数据库的meNber表中。 该模块的模型JavaBean描述用户的注册信息；该模块的视图部分由两个JSP页面构成，一个JsP页面负责提交用户的注册信息到控制器，另一个JsP页面负责显示注册是否成功的信息；该模块的控制器servlet负责将视图提交的信息写入数据库的member表中，并负责更新视图。1.模型(JavaBean)下列JavaBean用来描述用户注册信息。RegisteLj ava 输入您的信息，会员名字必须由字母和数字组成，带+号项必须填写。 会员名称：木 设置密码：木 电子邮件： 联系电话： 输入您的陶历和交友标准： 2.视图(JSP页面)本模块视图有两个JsP页面：Register.jsp和shOWRegisterMessJsp。Register.jsp页面负责提供输入注册信息界面(效果如图93所示)；showRegistefMessjsp负责显示注册反馈信息(效果如图94所示)，比如注册是否成功等。图9.3填写注册信息图94显示注册结果RegisteLjsp输入您的信息，会员名字必须由字母和数字组成，带+号项必须填写。会员名称：工nput type=设置密码：Input type电r邮件：工nput type联系电话：Input typetext name：”logname”木=password name=”password”丰text name=email”text name=”phone”输入您的简历和交友标准： showRegisterMess.jsp 注册的会员名称： 注册的电子邮件： 注册的联系电话： 您的简历和交友标准： 3.控制器(Servlet)控制器ser、，let对象的名字是register(见register负责连接数据库，将用户提交的信shOWRegisterMessJsp页面查看注册反馈信息。HandleRegister.j aVapackage myservlet.control；import mybeaR.data.。；i。mport java.sql.。ji。mport java.i0.。；import javax.servlet.。；9-3节给出的web.xml配置文件)。控制器息写入到metuber表，并将用户转发到 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/转发dispatcher.forward(request， response)jI ， ， - 9.5 会员登录public void doGet(HttpServletRequest request，HttpServletResponseresponse) throws ServletException，IOException doPost(request，response)；用户可在该模块输入自己的会员名和密码，系统将对会员名和密码进行验证，如果输入的用户名或密码有错误，将提示用户输入的用户名或密码不正确。该模块的模型JavaBean描述用户登录的信息；该模块视图部分由两个JSP页面构成，一个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显示登录结果请您登录登录名称：提馈 工nD输入密码：ut type=submit name=”g”value=提交”showLoginMess.jsp 乏BR 登录会员名称： 琶录会员名称： 登录会员密码： 。 3.控制器(Servlet) 该Ser、，let对象的名字是login负责连接数据库，查询member表，(见9.3节给出的web.xml配置文件)。控制器login验证用户输入的会员名和密码是否在member表中，并将用户转发到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+”已经登录了”； 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中已经存有一幅照片，新上传的照片将替换原有的照片。用户在注册时，注册模块给会员的照片是默认的一幅图像：publicjpg。该模块的模型JavaBean描述用户上传的照片图像文件的有关信息；该模块视图部分由两个JSP页面构成，一个JSP页面负责提交图像文件到控制器，另一个JSP页面负责显示上传操作是否成功的信息；该模块的控制器负责将图像文件上传到服务器，并将图像文件的名字写入数据库的member表中，必要时还需删除用户曾上传的图像文件；该servlet还负责更新视图，使用户能看到上传操作的结果。另外，控制器能阻止未登录用户上传照片。1.模型(JavaBean)下列JavaBean的实例用来描述上传文件的有关信息。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服务目录mkfrend的子目录imag