按列_验证码_需求&分析和按列_验证码_代码实现

案例需求

　　访问带有验证码的登录页面login.jsp。

　　用户输入用户名，密码以及验证码。

如果用户名和密码输入有误，跳转登录页面,提示:用户名或密码错误

如果验证码输人有误，跳转登录页面，提示:验证码错误

如果全部输入正确，则跳转到主页success.jsp，显示:用户名,欢迎您

@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int width = 100;
        int height = 50;
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

        Graphics graphics = image.getGraphics();
        graphics.setColor(Color.PINK);
        graphics.fillRect(0,0,width,height);

        graphics.setColor(Color.BLUE);
        graphics.drawRect(0,0,width-1,height-1);


        String str = "ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        Random random = new Random();

        StringBuilder sb = new StringBuilder();

        for (int i = 1; i <=4; i++) {
            int i1 = random.nextInt(str.length());
            char c = str.charAt(i1);
            sb.append(c);
            graphics.drawString(c+"",width/5*i,height/2);
        }

        String checkCode_session = sb.toString();
        req.getSession().setAttribute("checkCode_session",checkCode_session);
//        graphics.drawString("A",20,25);
//        graphics.drawString("B",40,25);
//        graphics.drawString("C",60,25);
//        graphics.drawString("D",80,25);


        graphics.setColor(Color.green);

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

            int y1 = random.nextInt(height);
            int y2 = random.nextInt(height);
            graphics.drawLine(x1,y1,x2,y2);
        }

        ImageIO.write(image,"jpg",resp.getOutputStream());
    }
}

@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String checkCode = request.getParameter("checkCode");

        HttpSession session = request.getSession();
        String checkCode_session = (String) session.getAttribute("checkCode_session");
        if (checkCode_session.equalsIgnoreCase(checkCode)){
            if ("zhangsan".equals(username) && "123".equals(password)){
                session.setAttribute("user",username);
                response.sendRedirect(request.getContextPath()+"/success.jsp");
            }else {
                request.setAttribute("login_error","用户名密码错误");
                request.getRequestDispatcher("/login.jsp").forward(request,response);
            }
        }else {
            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);
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <h1><%=request.getSession().getAttribute("user")%>欢迎您</h1>
</body>
</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script>
        window.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>
            <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")%></div>
    <div><%=request.getAttribute("login_error")%></div>
</body>
</html>

验证码细节：：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script>
        window.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>
            <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>

posted on 2022-08-15 14:21 淤泥不染阅读(36) 评论(0) 收藏举报