Servlet结合Html实现登录验证(包括验证码验证)功能

Servlet生成验证码并输出:

@WebServlet(name = "yzmServlet")
public class yzmServlet extends HttpServlet {
    private static final int WIDTH = 100;
    private static final int HEIGHT = 40;
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("utf-8");
        BufferedImage image=new BufferedImage(WIDTH,HEIGHT, BufferedImage.TYPE_INT_RGB);
        Graphics g=image.getGraphics();
        //设置背景色
        g.setColor(Color.CYAN);
        //填充背景色
        g.fillRect(0,0,WIDTH,HEIGHT);
        //设置前景色
        g.setColor(Color.BLACK);
        //设置字体
        Font font=new Font("仿宋",Font.BOLD,20);
        g.setFont(font);
        //获取验证码
        int len=4;
        String result="";
        for(int x=0;x<len;x++){
            char c=(char) RandomUtils.nextInt(65,91);
            result=result+c;
        }
        g.drawString(result,20,20);
        //设置干扰线条
        for(int i=0;i<10;i++){
            int x1= RandomUtils.nextInt(0,WIDTH);
            int x2= RandomUtils.nextInt(0,WIDTH);
            int y1= RandomUtils.nextInt(0,HEIGHT);
            int y2= RandomUtils.nextInt(0,HEIGHT);
            Color color=new Color(RandomUtils.nextInt(0,255),RandomUtils.nextInt(0,255),RandomUtils.nextInt(0,255));
            g.setColor(color);
            //设置线条
            g.drawLine(x1,y1,x2,y2);
        }
        //将获取到的验证码存储到Session中
        HttpSession session=request.getSession();
        session.setAttribute("identifyCode",result);
        //输出图片
        BufferedOutputStream bos=new BufferedOutputStream(response.getOutputStream());
        ImageIO.write(image,"jpg",bos);
        //ImageIO.write(image,"jpg",new File("e:\\b.jpg"));
        bos.flush();
        bos.close();
    }
}

Servlet对登录界面输入的昵称/密码/验证码进行验证:

@WebServlet(name = "identifyYzmServlet")
public class identifyYzmServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         doGet(request,response);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         response.setCharacterEncoding("utf-8");
         response.setContentType("text/html;charset=utf-8");
         request.setCharacterEncoding("utf-8");
         //获取输入的用户名
         String username=request.getParameter("username");
        //获取输入的密码
         String password=request.getParameter("password");
         //获取输入的验证码
         String yzm2=request.getParameter("yzm01");
         //获取Session对象中存取的数据
         HttpSession session1=request.getSession();
         String yzm1=(String)session1.getAttribute("identifyCode");
         if(!username.equals("")&&!password.equals("")&&!yzm2.equals("")){
             if(username.equals("Bighead")) {
                 if (password.equals("4214963")) {
                     if (yzm1.equals(yzm2)) {
                         response.getWriter().println("登录成功");
                         //登录成功后跳转到的页面
                         //request.getRequestDispatcher("form01.html").forward(request,response);
                     } else {
                         response.getWriter().println("验证码有误,请重新输入");
                     }
                 } else {
                     response.getWriter().println("密码有误,请重新输入");
                 }
             }else{
                 response.getWriter().println("昵称有误,请重新输入");
             }
        }else{
            response.getWriter().println("昵称或密码或验证码不能为空,请输入");
       }
    }
}

web-xml进行配置:

-<servlet>

<servlet-name>identifyYzmServlet</servlet-name>

<servlet-class>com.westos.identifyYzmServlet</servlet-class>

</servlet>

-<servlet-mapping>

<servlet-name>identifyYzmServlet</servlet-name>

<url-pattern>/ident</url-pattern>

</servlet-mapping>

-<servlet>

<servlet-name>yzmServlet</servlet-name>

<servlet-class>com.westos.untitle2.yzmServlet</servlet-class>

</servlet>

-<servlet-mapping>

<servlet-name>yzmServlet</servlet-name>

<url-pattern>/yzm01</url-pattern>

</servlet-mapping>

html实现登录界面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style type="text/css">
        #login{
            border: 1px solid deepskyblue;
            background-color: blanchedalmond;
            width:400px;
            height:250px;
            padding-left: 100px;
            padding-top: 50px;
        }

    </style>
    <script type="text/javascript">
        //用javaScript语言验证昵称和密码
        //function check(){
            //var name=document.getElementById("nicheng").value;
           // var password=document.getElementById("mima").value;
           // if(name=="Bighead"&&password=="4214963"){
               // alert("登陆成功");
               // window.document.login.action="form01.html";
               // window.document.login.submit();
           // }else{
              //  alert("密码或昵称错误,请重新输入");
           // }
       // }
       function identifyload() {
            document.getElementById('myyzm').src = 'yzm01';
       }
    </script>
</head>
<body>
<div id="top">
    <h1>登录</h1>
</div>
<div  id="login">
    <form action="./ident" method="Post" name="login">
        昵称:<input name="username" type="text" placeholder="请输入昵称" id="nicheng"/><br/><br/>
        密码:<input name="password" type="password" placeholder="请输入密码" id="mima"/><br/><br/>
        请输入验证码:<br/>
        <img src="./yzm01" height="32" id="myyzm">
        <button type="button" value="看不清楚,再来一张" onclick="identifyload()">看不清楚,再来一张</button>
        <input name="yzm01" type="text"/><br/>
        <button type="submit" value="登录" >登录</button>
        <button type="reset" value="重置">重置</button>
    </form>
</div>
</body>
</html>