springboot easyui 验证码

KaptchaController

import com.google.code.kaptcha.impl.DefaultKaptcha;
import jdk.internal.dynalink.beans.StaticClass;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;

@Controller
@RequestMapping(value = "/kaptcha")
public class KaptchaController {
    private static final Logger LOGGER=LoggerFactory.getLogger(KaptchaController.class);
    @Autowired
    private DefaultKaptcha captchaProducer;

    @RequestMapping("/defaultKaptcha")
    public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception{
        byte[] captchaChallengeAsJpeg = null;
        ByteArrayOutputStream jpegOutputStream = new ByteArrayOutputStream();
        try {
            //生产验证码字符串并保存到session中
            String createText = captchaProducer.createText();
            LOGGER.debug("verifyCode:"+createText);
            httpServletRequest.getSession().setAttribute("verifyCode", createText);
            //使用生产的验证码字符串返回一个BufferedImage对象并转为byte写入到byte数组中
            BufferedImage challenge = captchaProducer.createImage(createText);
            ImageIO.write(challenge, "jpg", jpegOutputStream);
        } catch (IllegalArgumentException e) {
            httpServletResponse.sendError(HttpServletResponse.SC_NOT_FOUND);
            return;
        }

        //定义response输出类型为image/jpeg类型，使用response输出流输出图片的byte数组
        captchaChallengeAsJpeg = jpegOutputStream.toByteArray();

        httpServletResponse.setHeader("Cache-Control", "no-store");
        httpServletResponse.setHeader("Pragma", "no-cache");
        httpServletResponse.setDateHeader("Expires", 0);
        httpServletResponse.setContentType("image/jpeg");
        ServletOutputStream responseOutputStream =
                httpServletResponse.getOutputStream();
        responseOutputStream.write(captchaChallengeAsJpeg);
        responseOutputStream.flush();
        responseOutputStream.close();
    }

}

启动类中注册

@Bean
    public DefaultKaptcha getDefaultKaptcha(){
        com.google.code.kaptcha.impl.DefaultKaptcha defaultKaptcha = new com.google.code.kaptcha.impl.DefaultKaptcha();
        Properties properties = new Properties();
        properties.setProperty("kaptcha.border", "yes");
        properties.setProperty("kaptcha.border.color", "105,179,90");
        properties.setProperty("kaptcha.textproducer.font.color", "blue");
        properties.setProperty("kaptcha.image.width", "110");
        properties.setProperty("kaptcha.image.height", "40");
        properties.setProperty("kaptcha.textproducer.font.size", "30");
        properties.setProperty("kaptcha.session.key", "code");
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }

前台代码login.html

<script>
    $(function () {
        $(".vrifyCodeImag").refreshCode({
            lazyUrl:"kaptcha/defaultKaptcha"
        })
    })
</script>
<form id="user_login_form" method="post">
    <div style="padding-left: 10%;padding-right: 10%;margin-top: 10px">
        <input class="easyui-textbox" name="name" data-options="iconCls:'icon-man',prompt:'用户名',required:true" style="width: 100%;height: 30px"/>
    </div>
    <div style="padding-left: 10%;padding-right: 10%;margin-top: 10px;margin-bottom: 20px">
        <input class="easyui-textbox" name="password" data-options="iconCls:'icon-lock',type:'password',required:true" style="width: 100%;height: 30px"/>
    </div>
    <div style="padding-left: 10%;padding-right: 10%;margin-top:-10px;margin-bottom: 20px;">
        <table style="width: 100%;height: 100%;border: 0;">
            <tbody>
            <tr >
                <td style="width: 50%;height: 100%" >
                    <img class="vrifyCodeImag" alt="图片验证码" />
                </td>
                <td style="width: 50%;height: 100%">
                    <input class="easyui-textbox" name="verifyCode"  data-options="prompt:'验证码',required:true" style="width: 70%;height: 30px"/>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</form>

login.jsp

<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>系统入口</title>
    <!--引入样式主题-->
    <link rel="stylesheet" href="/statics/easyui/themes/bootstrap/easyui.css">
    <!--引入图标样式-->
    <link rel="stylesheet" href="/statics/easyui/themes/icon.css">
    <!--引入jQuery EasyUI 插件 -->
    <script src="/statics/jquery.min.js"></script>
    <script src="/statics/easyui/jquery.easyui.min.js"></script>
    <script src="/statics/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="/statics/jquery.extd.js"></script>
    <script src="/statics/jquery.cookie.js"></script>
    <script>
        $(function () {
            //用户登陆页面
            $("#user_login_dialog").dialog({
                title:"用户登陆",
                iconCls:"icon-logo",
                top:120,
                width:300,
                modal:true,
                draggable:false,
                closable:false,
                closed:false,
                cache:false,
                href:"commons/login/loginForm.html",
                buttons:[{
                    text:"登陆",
                    iconCls:"icon-ok",
                    plain:true,
                    handler:function(){
                        $("#user_login_form").form("submit",{
                            url:"formUserManager/userLogin",
                            onSubmit: function(){
                                if(!$("#user_login_form").form("validate")){
                                    $.messager.alert("表单提示","请检查您的表单输入")
                                    return false
                                }
                                $.messager.progress();
                                //开始生成cookies inputVector
                                var vectors = $("#user_login_form").data("inputVector");
                                $.cookie("inputVector",vectors.join(","))
                                return true
                            },
                            success:function(data){
                                $.messager.progress('close');	// 如果提交成功则隐藏进度条
                                if(data){
                                    var error = eval('(' + data + ')');
                                    console.log(error)
                                    $.messager.alert("登陆出错！","错误信息："+error.erroCode+",提示:"+error.message)
                                }else{
                                    window.location.href="/"
                                }
                            }
                        })
                    }
                },{
                    text:'重置',
                    iconCls:"icon-redo",
                    plain:true,
                    handler:function(){
                        $("#user_login_form").form("reset")
                    }
                }],
                toolbar:[{
                    text:'用户注册',
                    plain:true,
                    handler:function(){
                        $("#user_login_dialog").dialog("close")
                        $("#user_register_dialog").dialog("open")
                    }
                }],
                onLoad:function () {
                    $("#user_login_form").actions({
                        vectorName:"inputVector"
                    })
                }
            })

            //用户注册页面
            $("#user_register_dialog").dialog({
                title:"用户注册",
                iconCls:"icon-logo",
                top:120,
                width:300,
                modal:true,
                draggable:false,
                closable:false,
                closed:true,
                cache:false,
                href:"commons/login/registerForm.html",
                buttons:[{
                    text:"注册",
                    iconCls:"icon-ok",
                    plain:true,
                    handler:function(){

                        $("#user_rigister_form").form("submit",{
                            url:"formUserManager/registerUser",
                            onSubmit: function(){
                                if(!$("#user_rigister_form").form("validate")){
                                    $.messager.alert("表单提示","请检查您的表单输入")
                                    return false
                                }
                                $.messager.progress();
                                return true
                            },
                            success:function(data){
                                $.messager.progress('close');	// 如果提交成功则隐藏进度条
                                if(data){
                                    var error = eval('(' + data + ')');
                                    console.log(error)
                                    $.messager.alert("注册出错！","错误信息："+error.erroCode+",提示:"+error.message)
                                }else{
                                    window.location.href="/"
                                }
                            }
                        })
                    }
                },{
                    text:'重置',
                    iconCls:"icon-redo",
                    plain:true,
                    handler:function(){
                        $("#user_rigister_form").form("reset")
                    }
                }],
                toolbar:[{
                    text:'用户登陆',
                    plain:true,
                    handler:function(){
                        $("#user_register_dialog").dialog("close")
                        $("#user_login_dialog").dialog("open")
                    }
                }]
            })

        })
    </script>
</head>
<body style="background-color: #3f3f3f">
<!--登陆Dialog-->
<div id="user_login_dialog">
</div>
<div id="user_register_dialog">
</div>
</body>