登录操作中验证码的实现

引入工具类 CreateValidateCode.java

在bean层创建

package com.bean;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.util.Random;

public class CreateValidateCode {
    private BufferedImage image;// 图像
    private String str;// 验证码
    private static char code[] = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789".toCharArray();

    public static final String SESSION_CODE_NAME = "code";

    public CreateValidateCode() {
        init();// 初始化属性
    }

    /*
     * 取得RandomNumUtil实例
     */
    public static CreateValidateCode Instance() {
        return new CreateValidateCode();
    }

    /*
     * 取得验证码图片
     */
    public BufferedImage getImage() {
        return this.image;
    }

    /*
     * 取得图片的验证码
     */
    public String getString() {
        return str.toLowerCase();
    }

    private void init() {
        // 在内存中创建图象
        int width = 60, height = 20;
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        // 获取图形上下文
        Graphics g = image.getGraphics();
        // 生成随机类
        Random random = new Random();
        // 设定背景色
        g.setColor(getRandColor(200, 250));
        g.fillRect(0, 0, width, height);
        // 设定字体
        g.setFont(new Font("Times New Roman", Font.PLAIN, 18));
        // 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
        g.setColor(getRandColor(160, 200));
        for (int i = 0; i < 155; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int xl = random.nextInt(12);
            int yl = random.nextInt(12);
            g.drawLine(x, y, x + xl, y + yl);
        }
        // 取随机产生的认证码(4位数字)
        String sRand = "";
        for (int i = 0; i < 4; i++) {
            String rand = String.valueOf(code[random.nextInt(code.length)]);
            sRand += rand;
            // 将认证码显示到图象中
            g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
            // 调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
            g.drawString(rand, 13 * i + 6, 16);
        }
        // 赋值验证码

        this.str = sRand;


        // 图象生效
        g.dispose();

        /* 赋值图像 */
        this.image = image;
    }

    /**
     * @param fc
     * @param bc
     * @return 给定范围获得随机颜色
     */
    private Color getRandColor(int fc, int bc) {
        Random random = new Random();
        if (fc > 255) {
            fc = 255;
        }
        if (bc > 255) {
            bc = 255;
        }
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r, g, b);
    }
}

编写Controller

//验证码
    @RequestMapping("getCode.do")
    public void getValidateCode(HttpServletResponse response, HttpServletRequest request) throws IOException {

        //创建输出流
        OutputStream outputStream = response.getOutputStream();
        //获取session
        HttpSession session = request.getSession();
        //获取验证码
        CreateValidateCode createValidateCode = new CreateValidateCode();
        String generateVerifyCode = createValidateCode.getString();
        //将验证码存入session，做登录验证
        session.setAttribute("code",generateVerifyCode);
        System.out.println("验证码1"+generateVerifyCode);
        //获取验证码图片
        BufferedImage image = createValidateCode.getImage();
        ImageIO.write(image, "png", outputStream);
        //关流
        outputStream.flush();
        outputStream.close();
    }

前台代码

<img id="captchaImage" style="height: 45px;width: 105px" class="captchaImage" onclick="changeImage()" src="${pageContext.request.contextPath}/UserInfo/getCode.do">
<script>
 			function changeImage() {
                $("#captchaImage").attr({"src":"${pageContext.request.contextPath }/UserInfo/getCode.do?w="+Math.random()})
            }
</script>

以上代码均参考下面的网址。
参考来源：https://blog.csdn.net/zhang33565417/article/details/99454099

自己的内容

然后接下来对于我自己的，因为它将code存入了session，但是前台无法获取到，所以我一开始想通过前台对比验证码是否正确没能成功。那就将数据传入后台，然后将信息传入前端。
前端js（ 点击登录按钮后的ajax操作）：

				$.ajax({
                           type:'POST',
                           url:'/UserInfo/doLogin.do',
                           data:{verCode:$("#ver-code").val(),//传入用户输入的验证码内容
                               userId:$("#login-username").val(),
                               userPassword:$("#login-password").val()},
                           dataType:'json',
                           async:true,
                           success:function(result){
                               console.log(result);
                               if(result.flag){
                                   console.log(result);
                                   //alert(result.message);
                                   sessionStorage.setItem("userId",result.userInfo.userId);
                                   sessionStorage.setItem("userName",result.userInfo.userName);
                                   sessionStorage.setItem("department",result.userInfo.department);
                                   sessionStorage.setItem("position",result.userInfo.userPosition);
                                   window.location="main.jsp";
                                   //$("#login-message").text(result.message);
                               }else{
                                   //alert(result.message);
                                   $("#login-message").text(result.message)
                               }
                           },
                           error:function(xhr){
                               alert("错误提示： " + xhr.status + " " + xhr.statusText);
                           }
                       });

后台controller层接收：

@RequestMapping("doLogin.do")
   @ResponseBody
   public LoginMessge doLogin(String verCode,String userId,String userPassword, HttpServletRequest request){
       UserInfo userInfo = userService.doLogin(userId);
       System.out.println("验证码2："+request.getSession().getAttribute("code"));
       //对比输入的验证码是否相同
       if(verCode.equals(request.getSession().getAttribute("code"))){
           if(userInfo!=null){
               if(userInfo.getUserPassword().equals(userPassword)){
                   request.getSession().setAttribute("user",userInfo);
                   return new LoginMessge(true,"登录成功",userInfo);
               }else
                   return new LoginMessge(false,"密码错误",null);
           }else{
               return new LoginMessge(false,"用户不存在",null);
           }
       }else{
           return new LoginMessge(false,"验证码错误",null);
       }
   }

其中，loginMessage是一个工具类：

package com.bean;

public class LoginMessge {
   private boolean flag;
   private String message;

   public UserInfo getUserInfo() {
       return userInfo;
   }

   public void setUserInfo(UserInfo userInfo) {
       this.userInfo = userInfo;
   }

   private UserInfo userInfo;

   public boolean isFlag() {
       return flag;
   }

   public void setFlag(boolean flag) {
       this.flag = flag;
   }

   public String getMessage() {
       return message;
   }

   public void setMessage(String message) {
       this.message = message;
   }

   public LoginMessge(boolean flag, String message,UserInfo userInfo) {
       this.flag = flag;
       this.message = message;
       this.userInfo = userInfo;
   }
   public LoginMessge(){

   }
}