JSP 设计教师与学生不同登陆界面(带验证码)

Posted gamedev˚

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JSP 设计教师与学生不同登陆界面(带验证码)相关的知识,希望对你有一定的参考价值。

实验三 设计教师与学生不同登陆界面
一、实验目的
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>密&nbsp;&nbsp;&nbsp;码:</td>
                    <td><input type="password" name="password" />
                    </td>
                </tr>
                <tr>
                    <td>验证码:</td>
                    <td><input type="text" name="yanzhengma" /><img border=0
                        id="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=radio
                        name=type value=student checked>学生 <input type=radio
                        name=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>

以上是关于JSP 设计教师与学生不同登陆界面(带验证码)的主要内容,如果未能解决你的问题,请参考以下文章

如何为学生、教师、超级管理员等用户身份验证设计数据库

Java设计开发一个简单的学生管理系统!

结对编程:带ui设计的学生答题系统

java中做一个连接数据库的学生教师登陆的界面,学生教师的 用户名、密码都是通过数据库来访问,

蜗牛上天

课程进展