当前位置:文档之家› 北邮信息网络应用基础第2次实验_2015

北邮信息网络应用基础第2次实验_2015

《信息网络应用基础》第2次实验:动态页面制作作业提交说明:1、第2次实验提交截止日期定为12月20日,过期补交的没有第二次实验成绩;2、严格按实验要求制作动态页面,并在“实现功能介绍”标题下,按实验要求描述完成情况,尽可能体现个性;3、雷同代码or 网上代码没有实验成绩;4、在“源代码及显示效果”标题下,按不同文件名粘贴源代码及显示效果(浏览器效果截图),页面和显示效果对应,如范例所示(贴页面内容时请删去范例);5、仅提交本文档;6、文件命名格式严格按照模板提供的方式补齐,邮件标题和文件名一致。

1实验要求:1.主题:设计网上商店或个人网站的主页(任选一);2.使用基本JSP元素和内置对象设计动态页面;3.主页面命名使用mypage.jsp/html,以便检查;4.使用request、response对象完成登录处理功能:能提取表单信息、登录有误能实现重定向,选作:页面刷新功能;5.使用session对象完成在多个页面中的数据转发功能;6.尽量完成使用Cookie实现访客计数或显示上次浏览时间的功能;7.选作:使用include指令标识/动作元素、使用<jsp:forward>动作元素8.如果遇到问题记录到文档中(包括解决方法)。

2实现功能介绍2.1功能描述全部功能完成,包括选作功能。

陈述所用语句及功能如下。

1)使用了page指令的text/html;charset=GB2312的方法实现了可以显示标准汉语的功能。

2)使用了page指令的language的属性实现了Java语句的编译。

3)使用了page指令的import属性用java.util.*实现了时间的显示。

4)使用了page指令的contentType属性实现页面响应字符编码可以显示标准汉语的功能。

5)使用了page指令的session属性设置使用内置session对象。

6)使用了<jsp.include>的动作元素实现了在当前页面显示其他页面内容。

7)使用了<jsp.forward>的动作元素实现了跳转到当前页的顶部及页面间的跳转。

8)使用了内置对象request的getParameter()方法获取登录表单的用户名和密码。

9)使用了内置对象application的setAttribute(String,Object obj)方法将用户名设为全局变量便于其他页面获取。

10)使用了内置对象response的sendRedirect(“”)方法实现了重定向和登录成功的跳转。

11)使用了内置对象session的getAttribute("name")方法实现了页面之间的数据传输。

12)使用了内置对象response的setHeader(“refresh”,”1”);的方法实现了页面刷新。

13)使用了内置对象out的print()的方法实现了时间的输出。

14)使用了内置对象request的getParameterValues()方法得到了勾选内容的表单值。

15)使用了内置对象out的println()方法实现了内容的换行输出。

16)使用了内置对象Cookie实现了访客量和上次登录时间的记录。

17)使用了内置对象request的getCookies方法获取客户端本身已有Cookie。

18)使用了内置对象response的addCookies方法创建新的Cookie。

2.2操作流程1)登录界面,这是主页也就是mypage.jsp页通过右方的User和Code进行登录(使用Submit按键将User和Code信息送往Cheakname.jsp页面.2)Cheakname.jsp页面通过request.getParameter()获取来自mypage.jsp的User和Code判断如果登录密码错误,会跳转(使用response.sendRedirect("resign.jsp"))到resign.jsp页面首先会报错(使用了alert("error password"))。

3)然后点击确定会跳转到重登录界面,这是另外的界面只是页面内容相同(resign.jsp)4)输入正确密码又跳转到Cheakname页面判断若正确,即可进入到登录成功界面(使用了response.sendRedirect("successful.jsp"))。

标题处的Welcome后既是你的用户名通过application.setAttribute("user",user)得到全局变量。

此页面有三个按钮一个是check time 用来查看现在时间(使用<%response.setHeader("refresh","1")),一个是log off用来注销登录(使用jsp.forward完成操作),页面最下方有个选择购买勾选框。

右侧你的上次登陆时间是通过jsp.include从另一网页包含进来且使用Cookie来记录上次登录时间。

5)点击Check time进入如下时间查看界面,时间可以实时跳转。

(通过页面刷新完成)Dear后面为你的用户名使用session从登录成功界面传送过来。

此页的Back to Last Page和Log Off均采用jsp.forward完成。

6)点击完log off跳转回登录界面,注意地址栏可知此为jsp.forward转换的。

7)最后一页,接收来自上一页的勾选信息显示在第一行(通过request.getParameterValues得到)。

第二行用户名同样通过session传输过来,第三行和第四行通过Cookie记录上次购买时间和购买次数通过out.println显示。

此页同样有logoff和back to last page选项。

8)下图为自制关系图,方便老师分清页面关系。

^_^3源代码及显示效果mypage.jsp:<%@page language="java"contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%>此处可更改为GB2312即可显示标准汉语<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=ISO-8859-1"><meta charset="utf-8"><title>mypage</title></head><body bgcolor = "black"style="color:#DAB280"><h1align = "center"><div style="position: absolute; left: 467px; top: 7px;"><p><font size="9"color="#DAB280">Kobe Shose Store</font></p><p><font size="9"color="#DAB280"><font size="9"color="#DAB280"><strong> <form name="mail"action="mailto:**************"method="get"><inputtype="Submit"value="Contact Us"/>修改了上次的发邮件可直接打开网易闪电邮</strong></font></font></p></form></div></h1><div style="position: absolute; left: 941px; top: 62px; width: 168px; height: 34px;"><form name="name"action="Cheakname.jsp"method="get">User:<input name = "user"type="text"size="10"/></div></br><div style="position: absolute; left: 937px; top: 89px; height: 58px; width: 235px;"><p>Code:<input name="password"type="password"size="11"/><strong><input type="Submit"value="Submit"/>将User和Code传给Cheakname.jsp</strong></p><p>&nbsp;</p><p>&nbsp;</p></form></div></br></br></br></br></br></br><hr/><center><img src="src\1.jpg"width="300"height="250"alt=""/></center> <center><p>Kobe I</p></center><center><img src="src\2.jpg"width="300"height="250"alt=""/></center> <center><p>Kobe II</p></center><center><img src="src\3.jpg"width="300"height="250"alt=""/></center> <center><p>Kobe III</p></center><center><img src="src\4.jpg"width="300"height="250"alt=""/></center> <center><p>Kobe IV</p></center><center><img src="src\5.jpg"width="300"height="250"alt=""/></center> <center><p>Kobe V</p></center><center><img src="src\6.jpg"width="300"height="250"alt=""/></center> <center><p>Kobe VI</p></center><center><img src="src\7.jpg"width="300"height="250"alt=""/></center> <center><p>Kobe VII</p></center><center><img src="src\8.jpg"width="300"height="250"alt=""/></center> <center><p>Kobe VIII</p></center><center><img src="src\9.jpg"width="300"height="250"alt=""/></center> <center><p>Kobe IX</p></center><center><img src="src\10.jpg"width="300"height="250"alt=""/></center> <center><p>Kobe X</p></center><br/><br/></body></html>Cheakname.jsp:<%@page contentType="text/html;charset=gb2312"language="java"import="java.util.Date"%>显示时间和标准汉语<%String user=request.getParameter("user");获得来自mypage.jsp的Ueser和Code String code=request.getParameter("password");try{if((user.equals("2013211049")&&code.equals("123"))||(user.equals("yinheng" )&&code.equals("250"))||(user.equals("weiqiang")&&code.equals("250"))||(use r.equals("chentingan")&&code.equals("250"))判断用户名和密码是否正确){application.setAttribute("user",user);设置用户名为全局变量,便于以后使用response.sendRedirect("successful.jsp");}实现登录成功的重定位else{response.sendRedirect("resign.jsp");实现了登录错误的重定位}}catch(Exception e){e.printStackTrace();}%><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=gb2312"/><title>Cheakname</title></head><body></html>此页面只用来完成判断和重定位无显示效果resign.jsp:<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=ISO-8859-1"><script Language="JavaScript">alert("error password");登录密码错误显示</script><meta charset="utf-8"><title>resign</title></head><body bgcolor = "black"style="color:#DAB280"><h1align = "center"><div style="position: absolute; left: 467px; top: 7px;"><p><font size="9"color="#DAB280">Kobe Shose Store</font></p><p><font size="9"color="#DAB280"><font size="9"color="#DAB280"><strong> <form name="mail"action="mailto:**************"method="get"><inputtype="Submit"value="Contact Us"/></strong></font></font></p></form></div></h1><div style="position: absolute; left: 941px; top: 62px; width: 168px; height: 34px;"><form name="name"action="Cheakname.jsp"method="get">User:<input name = "user"type="text"size="10"/></div></br><div style="position: absolute; left: 937px; top: 89px; height: 58px; width: 235px;"><p>Code:<input name="password"type="password"size="11"/><strong><input type="Submit"value="Submit"/>又向Cheakname.jsp送User和Code</strong></p><p>&nbsp;</p><p>&nbsp;</p></form></div></br></br></br></br></br></br><hr/><center><img src="src\1.jpg"width="300"height="250"alt=""/></center><center><p>Kobe I</p></center><center><img src="src\2.jpg"width="300"height="250"alt=""/></center><center><p>Kobe II</p></center><center><img src="src\3.jpg"width="300"height="250"alt=""/></center><center><p>Kobe III</p></center><center><img src="src\4.jpg"width="300"height="250"alt=""/></center><center><p>Kobe IV</p></center><center><img src="src\5.jpg"width="300"height="250"alt=""/></center><center><p>Kobe V</p></center><center><img src="src\6.jpg"width="300"height="250"alt=""/></center><center><p>Kobe VI</p></center><center><img src="src\7.jpg"width="300"height="250"alt=""/></center><center><p>Kobe VII</p></center><center><img src="src\8.jpg"width="300"height="250"alt=""/></center><center><p>Kobe VIII</p></center><center><img src="src\9.jpg"width="300"height="250"alt=""/></center> <center><p>Kobe IX</p></center><center><img src="src\10.jpg"width="300"height="250"alt=""/></center> <center><p>Kobe X</p></center><br/><br/></body></html>successful.jsp:<%@page language="java"contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%><%String u=(String)application.getAttribute("user");%><!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=ISO-8859-1"> <meta charset="utf-8"><title>successful</title></head><body bgcolor = "black"style="color:#DAB280"><h1align = "center"><div style="position: absolute; left: 469px; top: -23px;"><p><font size="9"color="#DAB280">Welcome <%=u%></font></p>利用application得到的全局变量传输用户名<form id="form3"name="form3"method="post"action="logoff.jsp"><input type="submit"name="Log Off"value="Log Off"/>跳转到logoff.jsp</form></div><div style="position: absolute; left: 49px; top: 43px; width: 139px;"><form name="ct"action="ct.jsp"method="get"><input type="Submit"value="Cheak time"/>跳转ct.jsp</form></div><div style="position: absolute; left: 927px; top: 167px; width: 284px; height: 167px;"><font size="0.5"color="#DAB280"><jsp:include page="loadtime.jsp" flush="true"/></font></div>将loadtime.jsp的内容通过jsp.include显示过来</h1></br></br></br></br></br><hr/><center><img src="src\1.jpg"width="300"height="250"alt=""/></center><center><p>Kobe I</p></center><center><img src="src\2.jpg"width="300"height="250"alt=""/></center><center><p>Kobe II</p></center><center><img src="src\3.jpg"width="300"height="250"alt=""/></center><center><p>Kobe III</p></center><center><img src="src\4.jpg"width="300"height="250"alt=""/></center><center><p>Kobe IV</p></center><center><img src="src\5.jpg"width="300"height="250"alt=""/></center><center><p>Kobe V</p></center><center><img src="src\6.jpg"width="300"height="250"alt=""/></center><center><p>Kobe VI</p></center><center><img src="src\7.jpg"width="300"height="250"alt=""/></center><center><p>Kobe VII</p></center><center><img src="src\8.jpg"width="300"height="250"alt=""/></center><center><p>Kobe VIII</p></center><center><img src="src\9.jpg"width="300"height="250"alt=""/></center><center><p>Kobe IX</p></center><center><img src="src\10.jpg"width="300"height="250"alt=""/></center><center><p>Kobe X</p></center><br/><center><form id="form2"name="form2"method="post"action="backtotop.jsp"><input type="submit"name="Back to top"value="Back to top"/>跳转到backtotop.jsp页面此页面通过jsp.forward跳转回来实现返回顶部(用的强行^^)</form></center><br/><div style="position: absolute"></div><form id="form1"name="form1"method="post"action="cart.jsp">勾选框并且将所选数据传输到cart.jsp<center>Please select your shose:<p></center><center><input type="checkbox"name="checkbox"value="Kobe I"/>Kobe I<input type="checkbox"name="checkbox"value="Kobe II"/>Kobe II<input type="checkbox"name="checkbox"value="Kobe III"/>Kobe III<input type="checkbox"name="checkbox"value="Kobe IV"/>Kobe IV<input type="checkbox"name="checkbox"value="Kobe V"/>Kobe V<input type="checkbox"name="checkbox"value="Kobe VI"/>Kobe VI<input type="checkbox"name="checkbox"value="Kobe VII"/>Kobe VII<input type="checkbox"name="checkbox"value="Kobe VIII"/>Kobe VIII<input type="checkbox"name="checkbox"value="Kobe IX"/>Kobe IX<input type="checkbox"name="checkbox"value="Kobe X"/>Kobe X<p></center> <center><input type="submit"name="Buy"value="Buy"/></center></form><%session.setAttribute("name",u); %>使用session将用户名传递到下一网页</body></html>ct.jsp:<%@page language="java"contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"language="java"import="java.util.Date" language="java"import="java.util.*"%>显示时间的相关语句<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=ISO-8859-1"><title>ct</title></head><body bgcolor = "black"style="color:#DAB280"></br></br></br><center><font size="9"><strong>Now is:<%response.setHeader("refresh","1");每秒刷新来实现时间的跳转out.print(new Date().toLocaleString()+" ");%>输出时间</strong></font></center><%String n =(String)session.getAttribute("name"); %>通过session获取用户名</br><center><font size="9"><strong> Dear <%=n%></strong></font></center></br></br><center><form id="form"name="form"method="post"action="backtotop.jsp"><input type="submit"name="Back to Last Page"value="Back to Last Page"/>使用jsp.forward来实现页面跳转</form></center><br/><center><form id="form1"name="form1"method="post"action="logoff.jsp"><input type="submit"name="Log Off"value="Log Off"/>使用jsp.forward来实现页面跳转</form></center></body></html>backtotop.jsp:<%@page language="java"contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%><!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=ISO-8859-1"><title>backtotop</title></head><body><%int i=0;if(i==0){%><jsp:forward page = "successful.jsp"></jsp:forward>}<%}假装通过判断但是一定会执行jsp.forwar的语句,实际上就是跳转页面的功能完成页else {i=i+1;}%></body></html>此页面只用来完成跳转无显示效果loadtime.jsp:用来强行使用jsp.include的页面在successful.jsp页面中显示此页内容,其中使用了Cookie 来记录上次登陆时间。

相关主题