如何在ssm框架中添加验证码

第一步:在pom.xml中添加依赖

 <!--验证码-->
        <!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
        <dependency>
            <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId>
            <version>2.3.2</version>
        </dependency>

第二步:在web.xml中编写servlet,这个servlet负责生成验证码的样式

<!--servlet-mapping  相应kaptcha请求-->
<servlet-mapping>
    <servlet-name>Kaptcha</servlet-name>  
    <url-pattern>/Kaptcha</url-pattern>
  </servlet-mapping>
  <!--生成验证码-->
  <servlet>
    <servlet-name>Kaptcha</servlet-name>
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
    <!--是否有边框-->
    <init-param>
      <param-name>kaptcha.border</param-name>
      <param-value>no</param-value>
    </init-param>
    <!--字体颜色-->
    <init-param>
      <param-name>kaptcha.textproducer.font.color</param-name>
      <param-value>red</param-value>
    </init-param>
    <!--图片宽度-->
    <init-param>
      <param-name>kaptcha.image.width</param-name>
      <param-value>135</param-value>
    </init-param>
    <!--使用那些字符生成验证码-->
    <init-param>
      <param-name>kaptcha.textproducer.char.string</param-name>
      <param-value>ACDEFHKPRSTWX345679</param-value>
    </init-param>
    <!--图片高度-->
    <init-param>
      <param-name>kaptcha.image.height</param-name>
      <param-value>50</param-value>
    </init-param>
    <!--字体大小-->
    <init-param>
      <param-name>kaptcha.textproducer.font.size</param-name>
      <param-value>43</param-value>
    </init-param>
    <!--干扰线的颜色-->
    <init-param>
      <param-name>kaptcha.noise.color</param-name>
      <param-value>black</param-value>
    </init-param>
    <!--验证码的字符个数-->
    <init-param>
      <param-name>kaptcha.textproducer.char.length</param-name>
      <param-value>4</param-value>
    </init-param>
    <!--字体-->
    <init-param>
      <param-name>kaptcha.textproducer.font.names</param-name>
      <param-value>Arial</param-value>
    </init-param>
  </servlet>
<servlet>
  <servlet-name>spring-dispatcher</servlet-name>
  <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  <init-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:spring/spring-*.xml</param-value>
  </init-param>
</servlet>

第三步:在相关页面添加验证码控件

   <!--验证码 kaptcha-->
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">验证码</div>
                                <input type="text" id="j_captcha" placeholder="验证码">
                                <div class="item-input">
                                    <img id="captcha_img" alt="点击更换" title="点击更换"
                                         onclick="changeVerifyCode(this)" src="../Kaptcha">
                                </div>
                            </div>
                        </div>
                    </li>

在第三步中,onclick="changeVerifyCode(this)",是点击按钮,执行更换验证码的操作,需要需要编写js实现。

如何在ssm框架中添加验证码

src="../Kaptcha" 引入servlet资源,Kaptcha是指定资源名称:

如何在ssm框架中添加验证码

第四步:在页面点击提交部分,接受验证码,并传入到后台

如何在ssm框架中添加验证码

第五步:在页面中点击添加js文件

如何在ssm框架中添加验证码

第六步:在最后提交的时候,无论提交成功与否,都得更换验证码

如何在ssm框架中添加验证码

在后端,可以通过编写工具类进行判断前端传过来的验证码是否正确

/*
* 判断验证码是否正确
* */
public class CodeUtil {
    public static boolean checkVerifyCode(HttpServletRequest request){
        String verifyCodeExpected=(String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
        String verifyCodeActual=HttpServletUtil.getString(request,"verifyCodeActual");
        if (verifyCodeActual ==null || !verifyCodeActual.equals(verifyCodeExpected)){
            return false;
        }
        return true;
    }
}

String verifyCodeExpected=(String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY); -》 指的是图片中的验证码

String verifyCodeActual=HttpServletUtil.getString(request,"verifyCodeActual"); -》 输入的验证码

第六步:在Controller中,调用Util方法,进行判断

如何在ssm框架中添加验证码

上一篇:7.整数反转


下一篇:flv文件解析工具