【login.html】图形验证码优化

pom.xml

@@ -147,13 +147,6 @@
             <version>${oshi.version}</version>
         </dependency>
 
-        <!-- EasyCaptcha图形验证码 -->
-        <dependency>
-            <groupId>com.github.whvcse</groupId>
-            <artifactId>easy-captcha</artifactId>
-            <version>1.6.2</version>
-        </dependency>
-
     </dependencies>
 
     <build>

src/main/java/cn/stylefeng/guns/modular/kaptcha/KaptchaController.java

@@ -1,56 +0,0 @@
-package cn.stylefeng.guns.modular.kaptcha;
-
-import cn.hutool.captcha.CaptchaUtil;
-import cn.hutool.captcha.CircleCaptcha;
-import cn.hutool.captcha.LineCaptcha;
-import cn.hutool.captcha.ShearCaptcha;
-import cn.stylefeng.guns.core.consts.ProjectConstants;
-import cn.stylefeng.roses.kernel.auth.api.constants.AuthConstants;
-import cn.stylefeng.roses.kernel.resource.api.annotation.ApiResource;
-import cn.stylefeng.roses.kernel.resource.api.annotation.GetResource;
-import cn.stylefeng.roses.kernel.rule.util.HttpServletUtil;
-import lombok.extern.slf4j.Slf4j;
-import org.springframework.stereotype.Controller;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RequestMethod;
-import org.springframework.web.bind.annotation.ResponseBody;
-
-import javax.servlet.ServletOutputStream;
-import javax.servlet.http.HttpServletRequest;
-import javax.servlet.http.HttpServletResponse;
-import javax.servlet.http.HttpSession;
-import java.io.IOException;
-
-/**
- * 生成验证码控制器
- *
- * @author chenjinlong
- * @date 2021/1/14 19:58
- */
-@Controller
-@Slf4j
-@ApiResource(name = "生成验证码")
-public class KaptchaController {
-
-    /**
-     * 获取验证码
-     *
-     * @author chenjinlong
-     * @date 2021/1/14 20:10
-     */
-    @GetResource(name = "获取验证码", path = "/kaptcha", requiredPermission = false, requiredLogin = false)
-    public void getCode(HttpServletResponse response, HttpSession session) {
-        //定义图形验证码的长、宽、验证码字符数、干扰元素个数
-        CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 20);
-        //将验证码放入session
-        session.setAttribute(AuthConstants.KAPTCHA_SESSION_KEY, captcha.getCode());
-        try {
-            ServletOutputStream outputStream = response.getOutputStream();
-            captcha.write(outputStream);
-            outputStream.close();
-        } catch (IOException e) {
-            e.printStackTrace();
-        }
-    }
-
-}

src/main/webapp/pages/login.html

@@ -174,9 +174,11 @@
         @if(constants.getCaptchaOpen()){
         <div class="layui-form-item layui-input-icon-group login-captcha-group">
             <i class="layui-icon layui-icon-auz"></i>
-            <input class="layui-input" id="kaptcha" name="kaptcha" placeholder="请输入验证码" autocomplete="off" lay-verType="tips" maxlength="4" lay-verify="required" required/>
-            <img class="login-captcha" alt="" src="${ctxPath}/kaptcha"/>
+            <input id="verKey" name="verKey" type="hidden"/>
+            <input class="layui-input" id="verCode" name="verCode" placeholder="请输入验证码" autocomplete="off" lay-verType="tips" maxlength="5" lay-verify="required" required/>
+            <img class="login-captcha" alt=""/>
         </div>
+
         @}
         <div class="layui-form-item">
             <input type="checkbox" id="rememberMe" name="rememberMe" title="记住密码" lay-skin="primary" checked>
@@ -217,10 +219,7 @@
         var admin = layui.admin;
         var notice = layui.notice;
 
-        // 点击刷新验证码
-        $('img.login-captcha').click(function () {
-            this.src = this.src + '?t=' + (new Date).getTime();
-        });
+
 
         $('.login-wrapper').removeClass('layui-hide');
 
@@ -229,8 +228,23 @@
             layer.msg(errorMsg, {icon: 5, anim: 6});
         }
 
+        // 获取验证码
+        function getKaptcha(){
+            var request = new HttpRequest(Feng.ctxPath + '/kaptcha'+ '?t=' + (new Date).getTime(), 'get');
+            var result = request.start();
+            $("#verKey").val(result.data.verKey)
+            $('img.login-captcha').attr('src', result.data.verImage);
+        }
 
+        // 点击刷新验证码
+        $('img.login-captcha').click(function () {
+            getKaptcha();
+        });
 
+        // 开启验证码
+        @if(constants.getCaptchaOpen()){
+            getKaptcha();
+        @}
         // 登录操作
         form.on('submit(loginSubmit)', function (data){
             admin.btnLoading('#loginSubmit',"登录中");
@@ -241,8 +255,10 @@
                 window.location.href = Feng.ctxPath + "/";
             }, function (data) {
                 @if(constants.getCaptchaOpen()){
+                    //清空输入框
+                    $("#verCode").val('');
                     //刷新验证码
-                    $('img.login-captcha').attr("src", Feng.ctxPath+'/kaptcha?t=' + (new Date).getTime());
+                    getKaptcha();
                 @}
                 //停止loading
                 admin.btnLoading('#loginSubmit', false);
@@ -251,6 +267,7 @@
             data.field.rememberMe=$("#rememberMe").prop("checked");
             request.set(data.field);
             request.start(true);
+            return false;
         });
     });
 </script>