验证码—细节处理登录案例

## 案例 ：验证码

 1. 案例需求 ：

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

    (2. 用户输入用户名，密码及验证码。

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

      b. 如果验证码输入有误，跳转 登录页面，提示 ： 验证码有误

      c. 如果全部输入正确，则跳转到主页sucess.jsp, 显示 ： 用户名 ，欢饮您

 2. 分析 ：

LoginServlet ：

package com.zhulin.servlet;

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 javax.servlet.http.HttpSession;
import java.io.IOException;

/**
 * @author Janson
 * @version 1.0
 * @date 2019/10/17 20:12
 */
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.设置编码
        request.setCharacterEncoding("utf-8");

        //2.获取参数
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String checkCode = request.getParameter("checkCode");

        //3.先获取生成的验证码
        HttpSession session = request.getSession();
        //强制从Object转换成String类型，后边可以通过调用equalsIgnoreCase()方法，忽略大小写进行比较
        String checkCode_session = (String) session.getAttribute("checkCode_session");
//        String checkCode = request.getParameter("checkCode");
        //3.先判断验证码是否正确
        if (checkCode_session.equalsIgnoreCase(checkCode)){
            //忽略大小写，比较字符串
            //判断用户名和密码是否一致
            if ("zhangsan".equals(username) || "123".equals(password)){
                //需要查询数据库
                //登录成功
                //存储信息，用户信息
                session.setAttribute("user",username);
                //重定向到success.jsp
                response.sendRedirect(request.getContextPath()+"/success.jsp");

            }else {
                //登录失败
                //存储信息到登录页面
                request.setAttribute("login_error","用户名或密码错误");

                //转发到登录页面
                request.getRequestDispatcher("/login.jsp").forward(request,response);

            }

        }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);
    }
}

CheckCodeServlet ：

package com.zhulin.servlet;

import javax.imageio.ImageIO;
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 javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

/**
 * @author Janson
 * @version 1.0
 * @date 2019/10/13 17:55
 */
@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 bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

        // 2. 美化图片
        //2.1 填充背景色
        Graphics graphics = bufferedImage.getGraphics(); //画笔对象
        graphics.setColor(Color.pink);
        graphics.fillRect(0, 0, width, height);

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

        String str = "ABCDEFGHIGKLMNOPQRSTUVWXYZzbcdefghigklmnopqrstuvwxyz1234567890";
        //生成随机角标
        Random random = new Random();
        //获取字符


        //2.3写验证码
        StringBuilder stringBuilder = new StringBuilder();;
        for (int i = 1; i <= 4; i++) {
            int index = random.nextInt(str.length());

            char charAt = str.charAt(index);

            //将获取的随机字符存到字符串中
            stringBuilder.append(charAt);
            graphics.drawString(charAt + "", width / 5 * i, height / 2); //注意，必须写上字符串哦
        }
            //转换为字符串
         String checkCode_session = stringBuilder.toString();

        //存到session中
        HttpSession session = request.getSession();
        //设置共享数据
        session.setAttribute("checkCode_session",checkCode_session);

        //2.4 画干扰线
        graphics.setColor(Color.green);
        // graphics.drawLine(1,1,30,30);
        //随机生成坐标点
        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);
        }

        //3.将图片输出到页面展示
        ImageIO.write(bufferedImage, "jpg", response.getOutputStream());

    }

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

login.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>login</title>
    <script>
        window.onload = function () {
            var elementById = document.getElementById("img");
            elementById.onclick = function () {

                var date = new Date().getTime();
                elementById.src="/day16/checkCodeServlet?time=" +date;
            }
            document.getElementById("change").onclick = function () {
                this.src = "/day16/checkCodeServlet?time=" + new Date().getTime();
            }
        }

    </script>

    <style>
        div{
            color: #365bff;
        }
    </style>

</head>
<body>

    <form action="/day16/loginServlet" method="post">
        <table align="center" width="100%" >
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username" placeholder="请输入用户名"></td>
            </tr>

            <tr>
                <td>密码</td>
                <td><input type="password" name="password" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td>验证码</td>
                <td><input type="text" name="checkCode" placeholder="请输入验证码"></td>
            </tr>

            <tr>
                <td colspan="2"><img id="img"  src="/day16/checkCodeServlet"></td>
            </tr>
            <tr>
                <td colspan="2" ><a id="change" href="" >看不清楚，换一张</a></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>

success.jsp 

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



</body>
</html>