实验三 设计教师与学生不同登陆界面
一、实验目的
1、掌握代码片段中的注释的应用；
2、掌握JSP脚本标示—Java代码片段的应用。
二、实验内容
1、设计教师与学生不同登陆界面,如下图；
2、验证码随机生成；
3、提交后分别转向教师页面和学生页面进行判断用户名和密码正确性；
4、如果正确，3秒后，转向成功页面，否则跳回验证页面；
三、实验方法
1、在同一页面上设计两个单选按钮：教师、学生，当点击提交按钮后，进入相应的JSP页面。当用户名及密码均正确时，进入欢迎界面；如果两者其一不正确就要提醒需要重新输入。在这些操作中，注意request内置对象的正确使用方法；
2、类似于1,使用request和out对象；
3、学习使用重定向方法解决实验内容3。
四、实验学时：2学时(第5周)
五、实验代码
代码目录结构：
效果展示
源码
Login.jsp
<html><head><script type="text/javascript">function reImg() {var img = document.getElementById("Img");img.src = "image.jsp?code=" + Math.random();}</script></head><body><div align="center" style="padding-top: 2em"><span style="font-size: 3em">用户登录/LOGIN</span> <br>——————————————————————<form action="login_check.jsp" method="post"><table style="padding-left: 1em;"><tr><td>用户名：</td><td><input type=text name=name /></td></tr><tr><td>密 码：</td><td><input type="password" name="password" /></td></tr><tr><td>验证码：</td><td><input type="text" name="yanzhengma" /><img border=0id="Img" src="image.jsp" alt="验证码"><a href="#"onclick="reImg();">看不清，请点击刷新</a></td></tr></table><table style="padding-left: 0.6em"><tr><td><input type=radio name=type value=partment>部门 <input type=radio name=type value=teacher>教师 <input type=radioname=type value=student checked>学生 <input type=radioname=type value=guest>访客</td></tr><tr><td><input type="submit" value="登录" /> <input type="reset"value="重置" /></td></tr></table></form></div></body></html>
login_check.jsp
<%@ page contentType="text/html; charset=gb2312"%><%//获取Login.html提交来的信息String name = request.getParameter("name");String password = request.getParameter("password");String type = request.getParameter("type");//检查用户登录是否成功,这里假设用户名密码均为为admin就表示登录成功， if (name.equals("admin") && password.equals("admin")) {//验证码验证String input = request.getParameter("yanzhengma");String code = (String) session.getAttribute("code");if (input.equals(code)) {out.print("<script>alert('验证成功！');</script>");///验证通过后，将用户信息写入session对象，session.setAttribute("name", name);session.setAttribute("password", password);session.setAttribute("type", type);///根据用户选择的权限类型跳转页面，if (type.equals("partment"))response.sendRedirect("partment.jsp");else if (type.equals("teacher"))response.sendRedirect("teacher.jsp");else if (type.equals("student"))response.sendRedirect("student.jsp");else if (type.equals("guest"))response.sendRedirect("guest.jsp");else {out.print("<script language='JavaScript' type='text/JavaScript'>alert('异常！请重新登录！');</script>");response.sendRedirect("Login.jsp");}} else {out.print("<script>alert('验证失败！');window.location.href='Login.jsp';</script>");}} else//登录失败，回到Login.jsp页面。{out.print("<script>alert('请正确填写信息！');window.location.href='Login.jsp'</script>");}%>
image.jsp(验证码图片生成)
<%@ page contentType="image/JPEG" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" pageEncoding="GBK"%> <%!Color getRandColor(int fc, int bc) {//给定范围获得随机颜色 Random random = new Random(); if (fc > 255) fc = 255; if (bc > 255) bc = 255; int r = fc + random.nextInt(bc - fc); int g = fc + random.nextInt(bc - fc); int b = fc + random.nextInt(bc - fc); return new Color(r, g, b); }%> <% //设置页面不缓存 response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); // 在内存中创建图象 int width = 60, height = 20; BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); // 获取图形上下文 Graphics g = image.getGraphics(); //生成随机类 Random random = new Random(); // 设定背景色 g.setColor(getRandColor(200, 250)); g.fillRect(0, 0, width, height); //设定字体 g.setFont(new Font("Times New Roman", Font.PLAIN, 18)); //画边框 //g.setColor(new Color()); //g.drawRect(0,0,width-1,height-1); // 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到 g.setColor(getRandColor(160, 200)); for (int i = 0; i < 100; i++) { int x = random.nextInt(width); int y = random.nextInt(height); int xl = random.nextInt(12); int yl = random.nextInt(12); g.drawLine(x, y, x + xl, y + yl); } // 取随机产生的认证码(4位数字) String sRand = ""; for (int i = 0; i < 4; i++) { String rand = String.valueOf(random.nextInt(10)); sRand += rand; // 将认证码显示到图象中 g.setColor(new Color(20 + random.nextInt(110), 20 + random .nextInt(110), 20 + random.nextInt(110)));//调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成 g.drawString(rand, 13 * i + 6, 16); } // 将认证码存入SESSION session.setAttribute("code", sRand); // 图象生效 g.dispose(); // 输出图象到页面 ImageIO.write(image, "JPEG", response.getOutputStream()); %>
partment.jsp(部门跳转显示JSP)
<%@ page contentType="text/html; charset=gb2312"%><%//由于password是跳转的依据，因此借助session中是否有password信息来判断用户是否有登录，if (session.getAttribute("password") == null) {out.print("<script>alert('请管理员先登录！');window.location.href='Login.html'</script>");}//由于管理员与用户登录后session中都会有信息且相同，会有以user权限登录后向该管理页面跳转的可能，所以要进行权限判断，if (session.getAttribute("type") == null|| !session.getAttribute("type").equals("partment")) {out.print("<script>alert('你不是部门人员，请重新登录！');window.location.href='Login.html'</script>");}%><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>部门登录</title></head><body>欢迎部门人员登录！</body></html>
teacher.jsp(教师跳转显示JSP)
<%@ page contentType="text/html; charset=gb2312"%><%//由于password是跳转的依据，因此借助session中是否有password信息来判断用户是否有登录，if (session.getValue("password") == null)out.print("<script>alert('请教师先登录！');window.location.href='Login.html'</script>");%><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>教师登录</title></head><body>欢迎教师登录！</body></html>
student.jsp(学生跳转显示JSP)
<%@ page contentType="text/html; charset=gb2312"%><%//由于password是跳转的依据，因此借助session中是否有password信息来判断用户是否有登录，if (session.getValue("password") == null)out.print("<script>alert('请学生先登录！');window.location.href='Login.html'</script>");%><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>学生登录</title></head><body>欢迎学生登录！</body></html>
guest.jsp(客人跳转显示JSP)
<%@ page contentType="text/html; charset=gb2312"%><%//由于password是跳转的依据，因此借助session中是否有password信息来判断用户是否有登录，if (session.getValue("password") == null)out.print("<script>alert('请访客先登录！');window.location.href='Login.html'</script>");%><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>访客登录</title></head><body>欢迎访客登录！</body></html>
