1. 程式人生 > >Servlet結合Html實現登錄驗證(包括驗證碼驗證)功能

Servlet結合Html實現登錄驗證(包括驗證碼驗證)功能

next Coding stat tin std 圖片 htm height -c

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>

Servlet結合Html實現登錄驗證(包括驗證碼驗證)功能