SSM——验证码（Hutool-captcha）

---

前言

Hutool：https://hutool.cn/docs/#/
本文章是基于ssm项目+Layui

一、Hutool是什么？

Hutool是一个小而全的Java工具类库，通过静态方法封装，降低相关API的学习成本，提高工作效率，使Java拥有函数式语言般的优雅，让Java语言也可以“甜甜的”。
在Hutool下有 图形形验证码（Hutool-captcha）

二、使用步骤

1.引入Hutool Maven库

<dependency>
      <groupId>cn.hutool</groupId>
      <artifactId>hutool-all</artifactId>
      <version>5.2.3</version>
    </dependency>

2.Hutool-captcha介绍

验证码功能位于cn.hutool.captcha包中，核心接口为ICaptcha，此接口定义了以下方法：

• createCode 创建验证码，实现类需同时生成随机验证码字符串和验证码图片
• getCode 获取验证码的文字内容
• verify 验证验证码是否正确，建议忽略大小写
• write 将验证码写出到目标流中

其中write方法只有一个OutputStream，ICaptcha实现类可以根据这个方法封装写出到文件等方法。

3.如何使用Hutool-captcha

这只是一个例子，具体还有很多种类型，我们需要把这些封装到一个方法中尽量在service层中，减少controller的压力（个人建议）

         //定义图形验证码的长和宽
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(116, 36);
        //把验证码信息存到sesion
        request.getSession().setAttribute("code",lineCaptcha.getCode());
        //输出code
        Console.log(lineCaptcha.getCode());
        //图形验证码写出，可以写出到文件，也可以写出到流
        lineCaptcha.write(response.getOutputStream());

• 以上我们就设置成功了一个验证码

• 之后我们就可以获取前端用户传过来的验证码和Session中的验证码比较

        //获取前端用户的code
        String code=user.getCode();
        //获取session中的code
        String code1 =request.getSession().getAttribute("code").toString();
        String msg="";
        Integer status_code=0;
    //比对验证码
        if (code1.equals(code)){
        List<User> list = userDao.login(user);
            if (list.size()>0){
                msg="登录成功";

            }else {
                msg="登录失败";

            }
            status_code=list.size();
        }else {
            msg="验证码失败";
            status_code=-1;

        }
        //使用完验证码失效
        request.getSession().setAttribute("code","");

• 这里有一个需要注意的点，当用户用过一次我们就要把该次的验证码失效，也就是把后台的code设置成空，当验证码失效后，我们需要给用户更新验证码，（注意之前一直在后台想办法更新验证吗，这样其实复杂了，我们可以在前端js中设置）

• 这里也是个小细节，仅限于初学者的我们，如何点击验证码更新 src也是一种请求，所以可以请求到后端controller 没当我们点击οnclick="this.src=this.src+’?'就在请求后面追加？这样可以是请求每次都不一样。例如：
  

   <label for="code">验证码</label>
   <input type="text" placeholder="请输入验证码" autocomplete="off" name="code" id="code" class="layui-input" lay-verify="required">
        <img id="udcode" src="/user/getcode" onclick="this.src=this.src+'?'">
/*这里也是个小细节，仅限于初学者的我们，如何点击验证码更新 src也是一种请求
所以可以请求到后端controller 没当我们点击οnclick="this.src=this.src+'?'就在请求后面追加？这样可以是请求每次都不一样。*/


            success:function(data){
                console.info(data)
                if (data.code!=-1){
                    if (data.code>0){
                        layer.msg(data.msg,function (){
                            window.location.href="/index.jsp"
                        })
                    }else {
                        layer.msg(data.msg);
                        _this.text("登录").attr("disabled",false).addClass("layui-disabled");
                        $("#udcode").click(); //这里就是让验证码自动更新的操作
                    }

                }else {
                    layer.msg(data.msg);
                    _this.text("登录").attr("disabled",false).addClass("layui-disabled");
                   $("#udcode").click();//这里就是让验证码自动更新的操作
                }

            }