实验时间 | 2024年4月 25 日17时至 22 时 | 学时数 | 4 | |
1.实验名称实验2:JSP应用开发(2学时) | ||||
2.实验目的(1)学会编写和运行简单的JSP页面,理解其运行原理; (2)学会使用JSP的声明、表达式、脚本和注释; (3)理解JSP页面(page)指令和动作的语法格式,并熟练使用; (4)理解JSP中常用的内置对象,并熟练使用。 | ||||
3.实验内容(1)编程实现在JSP页面中输出由星号“*”组成的菱形; (2)编程实现一个实现页面计数的计数器,要求当刷新页面时不增加计数; (3)[贯穿项目]用户登录验证(无数据库实现)。 | ||||
4.实验原理或流程图JSP有三个指令元素:page、include和taglib。这些指令元素是针对JSP引擎的,并不会产生任何看得见的输出。它们都包含在<%@和%>标签内。本实验主要学习page指令。 <%@ page %>指令作用于整个JSP页面,包括静态包含的页面,但不包括动态包含的页面。可以在一个页面中包含多个<%@ page %>指令,但其属性除import外只能在整个页面中出现一次。 <%@ page %>指令可以放在页面的任何位置,但为了JSP程序的可读性,一般将<%@ page %>指令放在页面的前面。 包含指令:静态包含:<@ include file=””> 动态包含:<jsp:include page=””/>无参数传递 <jsp:include page=””> <jsp:param: name=”” value=””> </jsp:include/> 跳转指令:<jsp:forward page=””> <jsp:param: name=”” value=””> </jsp:forward/> 内置对象的使用 | ||||
5.实验过程或源代码(一)编程实现在JSP页面中输出由星号“*”组成的菱形;
(二)输入并执行下面JSP页面(文件名为counter.jsp),然后回答有关问题。(1)简单计数器实现
【问题1】该JSP页面包含哪些JSP语法元素。在浏览器中访问该页面,输出结果如何?多次刷新页面,结果如何? 【问题2】打开counter.jsp转换后的源文件counter_jsp.java,对应的类文件在哪里?文件名是什么? 【问题3】查看count变量是在哪里声明的? 【问题4】将上面JSP页面中的<%! int count = 0; %>一行改为<% int count = 0; %>,页面能否正常执行,它与上面页面有什么区别? 答: 【问题1】该JSP页面包含的JSP语法元素及其作用如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>:这是页面指令,用于指定页面的一些属性,如使用的脚本语言是Java,页面的内容类型以及字符编码。 <!DOCTYPE html>:这是文档类型声明,用于告诉浏览器页面是HTML5文档。 <html>、<head>、<meta charset="UTF-8">、<title>、</title>、</head>、<body>、</body>、</html>:这些是HTML标签,用于定义页面的结构。 <%! int count = 0; %>:这是JSP的声明元素,用于声明一个全局变量或方法,这里的count变量会在JSP页面的生命周期内保持其值。 <% count++; %>:这是JSP的脚本元素,用于执行Java代码,这里用于递增count变量的值。 <%= count %>:这是JSP的表达式元素,用于输出变量的值到页面上。 在浏览器中访问该页面,输出结果为:“Welcome! You are visitor number [count的当前值]”。由于count是一个全局变量,当页面第一次被访问时,count的值会从0开始,所以输出将是“Welcome! You are visitor number 1”。多次刷新页面,count的值会依次增加,因此每次刷新后,输出的数字都会比前一次多1。 【问题2】JSP页面在服务器上运行时会被转换成一个Java源文件,然后编译成Java类文件。转换后的源文件counter_jsp.java通常位于Web应用的work目录下,具体路径可能因服务器的实现和配置而异。对应的类文件会在编译后生成在work目录下的某个子目录中,文件名通常是_<%=变量名%>,但具体的文件名和路径依赖于服务器的实现。笔者的类文件名放在了C:\Users\LP\AppData\Local\JetBrains\IntelliJIdea2023.2\tomcat\98aa258a-8f8d-410e-90c5-649853011e67 \work\Catalina\localhost\javaweb2_Web_exploded\org\apache\jsp目录下,文件名index_java.java 笔者在这里介绍一个简单的方法,下载Everything,在搜索框输入【文件名】_jsp.class就可以找到,这里笔者继承(一)文件名不再创新jsp文件示例: 【问题3】在提供的代码中,count变量是在JSP的声明元素<%! int count = 0; %>中声明的。这个声明在JSP页面转换后的Java源文件中,会成为类的一个成员变量。 【问题4】如果将<%! int count = 0; %>改为<% int count = 0; %>,那么count变量将不再是一个全局变量,而是一个局部变量,它在每次页面请求时都会被重新初始化为0。这意味着每次页面被访问或刷新时,count的值都会重置为0,而不是递增。因此,页面将始终显示“Welcome! You are visitor number 1”,而不会随着刷新次数增加。这样的修改将导致页面无法正确计数访问者的数量。 (2)使用session实现的计数器
(3)使用application实现的计数器
(三)编程实现用户的登录(无数据库实现)。(1)新建项目。项目名称采用如下命名格式:proj_****www_exp2(注:用自己的学号后4位代替****,用自己姓名的汉语全拼代替其中的www)。 (2)为项目配置构建路径,添加Apache Tomcat Server(例如:Apache Tomcat 7.0或8.5)。 (3)确认项目根目录下的子目录WEB-INF中包含web.xml(如果没有该文件,可从Tomcat安装目录中复制)。 (4)编写如下页面,以实现用户登录及退出登录功能。其中用到的知识点包括:包含指令;跳转指令;request、response、session对象;cookie。 login.jsp: 用户登录表单页面 login_check.jsp:用户登录验证页面,输入规定的ID和密码则登录成功,否则失败,要求记住用户的登录状态,下次登录时等自动填写登录ID信息。至少提供三组登录成功的ID和密码。如(changyh,123),(shiqj,456),(wangzhe,789) login_success.jsp: 登录成功页面 login_failure.jsp: 登录失败页面 logout.jsp: 退出登录页面 header.jsp:头部文件,被包含到login.jsp页面中,自己定义效果(该案例为“登录操作”)。 function1、function2、function3自己定义。 实现效果如图3.1~图3.5所示。 (5)实现“记住我”功能和保存登录状态功能。 1.Login.jsp<%-- Created by IntelliJ IDEA. User: LP Date: 2024/5/9 Time: 21:14 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>登录程序之表单页面</title> </head> <body> <% String userId = ""; String password = ""; Cookie[] cookies = request.getCookies(); if(cookies != null){ for(int i=0; i<cookies.length; i++){ if (cookies[i].getName().equals("Cookie2019")) { //如果cookie对象的名称为Cookie2019 userId = cookies[i].getValue().split("#")[0]; //获取用户名 password = cookies[i].getValue().split("#")[1]; //获取登录时间 } } } %> <center> <h1>登录操作</h1> <hr> <form action="login_check.jsp" method="post"> <table border="1"> <tr> <td colspan="2">用户登录</td> </tr> <tr> <td>登录ID:</td> <td><input type="text" name="id" value="<%=userId %>"></td> </tr> <tr> <td>登录密码:</td> <td><input type="password" name="password" value="<%=password %>"></td> </tr> <tr> <td colspan="2"> <input type="submit" value="登录"> <input type="reset" value="重置"> <input type="checkbox" name="remenber" checked>记住我 </td> </tr> </table> </form> </center> </body> <html> 2.login_check.jsp<%-- Created by IntelliJ IDEA. User: LP Date: 2024/5/9 Time: 21:14 To change this template use File | Settings | File Templates. --%> <%@page contentType="text/html;charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>登录程序之验证页面</title> </head> <body> <%! public static String[] userids={"liping","xqiang","xming"}; public static String[] usernames={"李萍","小强","小明"}; public static String[] userpws={"123","456","789"}; String check(String userid, String userpw){ int i; for(i=0;i<userids.length; i++){ if(userids[i].equals(userid)){ break; } } if(i<userids.length){ if(userpws[i].equals(userpw)){ return usernames[i]; }else{ return ""; } }else{ return ""; } } %> <% request.setCharacterEncoding("UTF-8"); String id = request.getParameter("id"); String password = request.getParameter("password"); String remenber = request.getParameter("remenber"); String name; Cookie[] cookies; if((!(name=check(id,password)).equals(""))){ cookies = request.getCookies(); int i; boolean cookies_flag = false; //表示是否创建Cookie if(cookies != null){ for(i=0; i<cookies.length; i++){ if("Cookie2019".equals(cookies[i].getName())){ break; } } if(i<cookies.length){ cookies_flag = false; }else{ cookies_flag = true; } }else{ cookies_flag = true; } Cookie cookie; if(remenber != null){ if(cookies_flag){ cookie = new Cookie("Cookie2019", id+"#"+password); cookie.setMaxAge(45); response.addCookie(cookie); } }else{ if(!cookies_flag){ cookie = new Cookie("Cookie2019", id+"#"+password); cookie.setMaxAge(0); response.addCookie(cookie); } } session.setAttribute("username", name); session.setMaxInactiveInterval(60); response.sendRedirect("login_success.jsp"); }else{ //登录失败,跳转到失败页 response.sendRedirect("login_failure.jsp"); } %> </body> 3.login_success.jsp<%-- Created by IntelliJ IDEA. User: LP Date: 2024/5/9 Time: 21:14 To change this template use File | Settings | File Templates. --%> <% if(session.getAttribute("username") == null) { response.sendRedirect("login.jsp"); } %> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <center> <h2>欢迎[<%=session.getAttribute("username")%>]</h2> <br> <body> <table> <tr> <th>新闻管理系统</th> </tr> <tr> <td> </td> </tr> <tr> <td align="center"><a href="function1.jsp">功能1</a></td> </tr> <tr> <td align="center"><a href="function2.jsp">功能2</a></td> </tr> <tr> <td align="center"><a href="function3.jsp">功能3</a></td> </tr> </table> <hr> <table width="200"> <tr> <td align="left"> </td> <td align="right"><a href="logout.jsp">登出</a></td> </tr> </table> </center> </body> </html> 4.login_failure.jsp<%-- Created by IntelliJ IDEA. User: LP Date: 2024/5/9 Time: 21:15 To change this template use File | Settings | File Templates. --%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <center>用户名或密码错误,请重新<a href=login.jsp>登录</a></center> </body> </html> 5.logout.jsp<%-- Created by IntelliJ IDEA. User: LP Date: 2024/5/9 Time: 21:15 To change this template use File | Settings | File Templates. --%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <%session.invalidate(); %> <jsp:forward page="login.jsp"/> </body> </html> 6.header.jsp<%-- Created by IntelliJ IDEA. User: LP Date: 2024/5/9 Time: 21:15 To change this template use File | Settings | File Templates. --%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <center><h1>登录操作</h1></center></body> <hr> </html> 6.实验结论及心得对JSP运行有了新的了解 |