验证码案例实现

最新推荐文章于 2022-05-17 11:06:20 发布

南淮北安

最新推荐文章于 2022-05-17 11:06:20 发布

阅读量689

点赞数 2

分类专栏： Cookie 和 Session 学习文章标签： js session

本文链接：https://blog.csdn.net/nanhuaibeian/article/details/105058322

版权

Cookie 和 Session 学习专栏收录该内容

9 篇文章 1 订阅

订阅专栏

文章目录

一、需求分析

（1）访问带有验证码的登录页面login.jsp
（2）用户输入用户名，密码以及验证码。
		* 如果用户名和密码输入有误，跳转登录页面，提示:用户名或密码错误
		* 如果验证码输入有误，跳转登录页面，提示：验证码错误
		* 如果全部输入正确，则跳转到主页success.jsp，显示：用户名,欢迎您

在这里插入图片描述

二、代码实现

1. login.jsp

<html>
<head>
    <title>Login</title>
    <script>
        onload = function () {
            document.getElementById("img").onclick = function () {
                this.src = "/checkCodeServlet?time=" + new Date().getTime();
            }
        }
    </script>
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>
<form action="/loginServlet" method="post">
    <table align="center">
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>验证码</td>
            <td><input type="text" name="checkCode"></td>
        </tr>
        <tr>
            <td colspan="2"><img id="img" src="/checkCodeServlet"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="登录"></td>
        </tr>
    </table>
</form>
<%--通过三目运算符输出返回的错误信息--%>
<div>
    <%=request.getAttribute("cc_error") == null ?"":request.getAttribute("cc_error")%>
</div>
<div>
    <%=request.getAttribute("login_error") == null ?"":request.getAttribute("login_error")%>
</div>
</body>
</html>

2. loginServlet.java

@WebServlet("/loginServlet")
public class loginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//        1. 设置 request 编码
        request.setCharacterEncoding("utf-8");
//        2. 获取参数使用Map获取所有的参数
        Map<String, String[]> map = request.getParameterMap();

//        3. 创建 User 对象
        User user = new User();
//        使用 BeanUtils 进行封装
        try {
            BeanUtils.populate(user,map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

//        4. 获取生成的验证码
        HttpSession session = request.getSession();
        String chechkCode_session = String.valueOf(session.getAttribute("checkCode_session"));
//        获取之后就删除本次的验证码，防止回退操作导致验证码不改变登录成功
        session.removeAttribute("checkCode_session");
//        5. 判断验证码的正确性，忽略大小写，依次判断用户名，密码是否一致
        if (chechkCode_session != null && chechkCode_session.equalsIgnoreCase(user.getCheckCode())){
            System.out.println("user :" + user);

//            调用 UserDao 的 login 方法判断用户名密码是否对应数据库中的值
            UserDao userDao = new UserDao();
            User login = userDao.login(user);
            if (login == null){
//                登录失败，存储提示信息到 request
                request.setAttribute("login_err","用户名或密码错误");
                request.getRequestDispatcher("/login.jsp").forward(request,response);
            }else {
                System.out.println("登录成功 ！！！");
//                登录成功，存储信息，重定向到 success.jsp
                session.setAttribute("user",login.getUsername());
//                重定向到 success.jsp
                response.sendRedirect(request.getContextPath() + "/success.jsp");
            }
        }else {
//            验证码不一致，存储信息到 request
            request.setAttribute("cc_error","验证码错误！！！");
//            转发到登录页面
            request.getRequestDispatcher("/login.jsp").forward(request,response);
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

3. CheckCodeServlet.java

@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        int width = 100;
        int height = 50;

        //1.创建一对象，在内存中图片(验证码图片对象)
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);


        //2.美化图片
        //2.1 填充背景色
        Graphics g = image.getGraphics();//画笔对象
        g.setColor(Color.PINK);//设置画笔颜色
        g.fillRect(0,0,width,height);

        //2.2画边框
        g.setColor(Color.BLUE);
        g.drawRect(0,0,width - 1,height - 1);

        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789";
        //生成随机角标
        Random ran = new Random();
        StringBuffer stringBuffer = new StringBuffer();//添加字符串
        for (int i = 1; i <= 4; i++) {
            int index = ran.nextInt(str.length());
            //获取字符
            char ch = str.charAt(index);//随机字符
            stringBuffer.append(ch);
            //2.3写验证码
            g.drawString(ch+"",width/5*i,height/2);
        }
//        将验证码写入 session
        String checkCode_session = stringBuffer.toString();
        request.getSession().setAttribute("checkCode_session",checkCode_session);

        //2.4画干扰线
        g.setColor(Color.GREEN);

        //随机生成坐标点

        for (int i = 0; i < 10; i++) {
            int x1 = ran.nextInt(width);
            int x2 = ran.nextInt(width);

            int y1 = ran.nextInt(height);
            int y2 = ran.nextInt(height);
            g.drawLine(x1,y1,x2,y2);
        }
        //3.将图片输出到页面展示
        ImageIO.write(image,"jpg",response.getOutputStream());
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}

4. 其他代码

success.jsp

<body>
<h1>
    <%=request.getSession().getAttribute("user")%>,欢迎访问！！！
</h1>
</body>

User/UserDao/JDBCUtils 参考

南淮北安

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
4
评论
验证码案例实现

文章目录一、需求分析一、需求分析（1）访问带有验证码的登录页面login.jsp（2）用户输入用户名，密码以及验证码。 * 如果用户名和密码输入有误，跳转登录页面，提示:用户名或密码错误 * 如果验证码输入有误，跳转登录页面，提示：验证码错误 * 如果全部输入正确，则跳转到主页success.jsp，显示：用户名,欢迎您...
复制链接

扫一扫