登录功能之添加验证码（包含切换验证码）

主要功能，在登录页面上添加验证码，然后如果用户看不清，可以点击“换一张”，切换验证码，如果验证码输入错误，会提示验证码输入错误并无法登录

首先是LoginServlet

package cn.itcast.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class LoginServlet
 */
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        /**
         * 校验验证码
         * 1.从session中获取正确的验证码
         * 2.从表单中用户填写的验证码
         * 3.进行比较
         * 4.如果相同，向下运行，否则保存错误信息到request域，转发到login.jsp
         */
        String sessionCode =(String) request.getSession().getAttribute("session_vcode");
        String paramCode = request.getParameter("verifyCode");
        
        if(!paramCode.equalsIgnoreCase(sessionCode)){
            request.setAttribute("msg", "验证码错误");
            request.getRequestDispatcher("/day11_4/login.jsp").forward(request,response);
            return;
        }
        
        /**
         * 1.获取表单数据
         */
        //处理中文问题
        request.setCharacterEncoding("utf-8");
        //获取
        String username=request.getParameter("username");
        String password = request.getParameter("password");
        //2.校验用户名和密码是否正确
        if(!"itcast".equalsIgnoreCase(username)){//登录成功
            /**
             * 附加项：把用户名保存到cookie中，发送给客户端浏览器
             * 当再次打开login.jsp时，login.jsp中会读取request中的cookie，把它显示到用户名文本框中
             */
            
        }    
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

下面是VerifyCodeServlet（验证码的关键一步）

package cn.itcast.servlet;

import java.awt.image.BufferedImage;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.itcast.image.VerifyCode;

@WebServlet("/VerifyCodeServlet")
public class VerifyCodeServlet extends HttpServlet {
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    /**
     * 1.生成图片
     * 2.保存图片上的本文到session域中
     * 3.把图片响应给客户端
     */
    VerifyCode vc = new VerifyCode();
    BufferedImage image = vc.getImage();
    request.getSession().setAttribute("session_vcode", vc.getText());//保存图片上的文本到session域
    
    VerifyCode.output(image,response.getOutputStream());
    
    }
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        doGet(request,response);
    }

}

再下面是login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My JSP 'login.jsp' starting page</title>

<meta http-equiv="param" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">

<link rel="stylesheet" type="text/css" href="style.css">
 
 <script type="text/javascript"></script>
 <script>
 function _change(){
     /**
     1.得到img元素
     2.修改其src为/day11_4/VerifyCodeServlet
     */
     var imgEle = document.getElementById("img");
     imgEle.src="/day11_4/VerifyCodeServlet?a="+ new Date().getTime();
 }
 
 </script>
</head>
<body>

<%--本页面提供登录表单，还要显示错误信息 --%>
<h1>登录</h1>
<%
/**
读取名为uname的Cookie
如果为空显示：""
如果不为空显示：Cookie的值
*/
String uname = " ";
Cookie[] cs = request.getCookies();//获取请求中所有的cookie
if(cs!=null){//如果存在cookie
    for(Cookie c:cs){//循环遍历所有的cookie
        if("uname".equals(c.getName())){//查找名为uname的cookie
            uname = c.getValue();//获取这个cookie的值，给uname这个变量
        }
    }
}

%>
<%
    String message=" ";
    String msg = (String)request.getAttribute("msg");//获取request域中的名为msg的属性
    if(msg!=null){
        message=msg;
    }
%>
<font color="red"><b><%=message%></b></font>
<form action="/day11_4/LoginServlet" method="post">
用户名：<input type="text" name="username" value="<%=uname %>" /><br/><%-- --%>
密码：<input type="password" name="password"/><br/>
验证码：<input type="text" name="verifyCode" /><br/>
    <img id="img" src=" /day11_4/VerifyCodeServlet"/>
    <a href="javascript:_change()">换一张</a>
    <br/>
    <input type="submit" value="登录"/>

</form>

</body>
</html>

登录功能之添加验证码（包含切换验证码）

猜你喜欢