Java使用SSM框架实现登录页面的验证码功能

最终效果展示：

代码展示：

1、前端登录页面代码展示

 

<div class="form-group">
     <div class="input-icon">
         <i class="fa fa-picture-o"></i>
         <input class="form-control" style="width:180px;" type="text" id="verifyCode" name="verifyCode" placeholder="验证码" maxlength="4">
         <img style="position: absolute;right: 0;top: 0;"  src="${pageContext.request.contextPath }/user/getVerifyCode" width="110" height="34" id="verifyCodeImage" onclick="javascript:changeImage();">
     </div>
</div>

/*点击图片更换验证码事件*/
 function changeImage() {
      $('#verifyCodeImage').attr('src', '${pageContext.request.contextPath }/user/getVerifyCode);
 }

 

 2、点击登录之后进行controller代码展示

    //验证码验证思路，其实就是后台生成一个随机数保存到session中并且显示到页面，用户输入的验证码与session中保存的随机数进行忽略大小写的比较，如果相同就验证成功，否则失败。

　　 /* 获取校验码 */
    @RequestMapping("/getVerifyCode")
    public void generate(HttpServletResponse response, HttpSession session) {
        ByteArrayOutputStream output = new ByteArrayOutputStream();
        String verifyCodeValue = drawImg(output);
        // 将校验码保存到session中
        session.setAttribute("verifyCodeValue", verifyCodeValue);

        try {
            ServletOutputStream out = response.getOutputStream();
            output.writeTo(out);
        } catch (IOException e) {
            logger.info("<--验证码前端写出.出现异常-->");
            e.printStackTrace();

        }
    }

    /* 绘制验证码 */
    private String drawImg(ByteArrayOutputStream output) {
        String code = "";
        // 随机产生4个字符
        for (int i = 0; i < 4; i++) {
            code += randomChar();
        }
        int width = 70;
        int height = 25;
        BufferedImage bi = new BufferedImage(width, height,
                BufferedImage.TYPE_3BYTE_BGR);
        Font font = new Font("Times New Roman", Font.PLAIN, 20);
        // 调用Graphics2D绘画验证码
        Graphics2D g = bi.createGraphics();
        g.setFont(font);
        Color color = new Color(66, 2, 82);
        g.setColor(color);
        g.setBackground(new Color(226, 226, 240));
        g.clearRect(0, 0, width, height);
        FontRenderContext context = g.getFontRenderContext();
        Rectangle2D bounds = font.getStringBounds(code, context);
        double x = (width - bounds.getWidth()) / 2;
        double y = (height - bounds.getHeight()) / 2;
        double ascent = bounds.getY();
        double baseY = y - ascent;
        g.drawString(code, (int) x, (int) baseY);
        g.dispose();
        try {
            ImageIO.write(bi, "jpg", output);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return code;
    }

    /* 获取随机参数 */
    private char randomChar() {
        Random r = new Random();
        String s = "ABCDEFGHJKLMNPRSTUVWXYZ0123456789";
        return s.charAt(r.nextInt(s.length()));
    }

//这段代码放到你的登录请求中，获取用户输入的校验码并进行比较
String verifyCode = request.getParameter("verifyCode");
String sessionVerifyCode = (String) session.getAttribute("verifyCodeValue");
if (!verifyCode.equalsIgnoreCase(sessionVerifyCode)) {
      logger.info("<--登录失败,验证码输入有误！-->");
      redirectAttributes.addFlashAttribute("message", "验证码输入有误!");
      return "redirect:/user/login";
}