SpringMVC +maven 实现动态验证码----KaptchaServlet---API

 第一步：进行pom.xml的依赖配置

<dependency>
      <groupId>com.github.penggle</groupId>
      <artifactId>kaptcha</artifactId>
      <version>2.3.2</version>
      <exclusions>
        <exclusion>
          <groupId>javax.servlet</groupId>
          <artifactId>javax.servlet-api</artifactId>
        </exclusion>
      </exclusions>
    </dependency>

第二步：首先在我们的web.xml里面进行配置依赖包
导入  KaptchaServlet 调用开源的验证码生成的API

  <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>
<!--      验证码的长度 设置wei4-->
      <param-name>kaptcha.textproducer.char.length</param-name>
      <param-value>4</param-value>
    </init-param>
    <init-param>
<!--      验证码的生成的图片的文本字符选择库-->
      <param-name>kaptcha.textproducer.char.string</param-name>
      <param-value>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</param-value>
    </init-param>
    <init-param>
<!--      红绿蓝三种颜色生成图片   代表三种颜色的数值 这里生成的位灰色的-->
      <param-name>kaptcha.background.clear.to</param-name>
      <param-value>211,229,237</param-value>
    </init-param>
    <init-param>
      <!-- session.setAttribute("captcha","验证码") -->
      <!--    这一步将验证码图片里的字母存储在了session中 这样后端可以取到数据  -->
      <param-name>kaptcha.session.key</param-name>
      <param-value>captcha</param-value>
    </init-param>
  </servlet>

  <servlet-mapping>
    <servlet-name>kaptcha</servlet-name>
    <url-pattern>/captcha</url-pattern>
  </servlet-mapping>

第三步：进行我们的页面的登录验证码的设置 input表单的内容

  <img id="cap" src="${pageContext.request.contextPath}/captcha" style="width:100px"onclick="refresh();" />
                   
 <script>
                 
  
function refresh(){
                       
 
var img=document.getElementById("cap");
                        
img.src="${pageContext.request.contextPath}/captcha?"+new Date().getTime();
                    

}
    
            
 </script>

                    
<div class="input">
                        
<span>验证码<label style="color:red;">*</label></span>
                        
<input type="text" name="captcha" placeholder="请输入验证码" required="required">
                   
 </div>

上述的src="${pageContext.request.contextPath}/captcha"是请求kaptchaServlet的验证码去

我们只需要点击图片就可以刷新验证码

<script>
function refresh(){
    var img=document.getElementById("cap");
    img.src="${pageContext.request.contextPath}/captcha?"+new Date().getTime();
}
</script>

上述刷新功能由此script实现即可。

第四步：usercontroller实现登录验证码的验证

<init-param>
  <!-- session.setAttribute("captcha","验证码") -->
  <!--    这一步将验证码图片里的字母存储在了session中 这样后端可以取到数据  -->
  <param-name>kaptcha.session.key</param-name>
  <param-value>captcha</param-value>
</init-param>

验证码的生成的图片的文本值key存储在这里面kaptcha.session.key

只需要我们在controller取出key做与用户输入的值是否相等匹配即可

 @Autowired
    private UserService userService;
    @RequestMapping("/login")
    public String login(User tempUser, HttpServletRequest request, HttpSession session)
    {
        //验证码的验证查看
        String captchasession = (String) session.getAttribute("captcha");
        String captchaform=request.getParameter("captcha");
        System.out.println("captchasession-------"+captchasession+"\n");
        System.out.println("captchaform----------"+captchaform+"\n");
        if(!captchasession.equalsIgnoreCase(captchaform))
        {
            request.setAttribute("failMsg","验证码不对，请点击图片刷新重新输入");
            return "user_login";
        }

        String path="";
        User user=userService.login(tempUser.getUname());
        if(user==null)
        {
            request.setAttribute("failMsg","用户不存在！");
            return "user_login";
        }

        if(tempUser.getUpwd().equals(user.getUpwd()))
        {
            session.setAttribute("user", user);
            System.out.println(user);
            request.setAttribute("msg","登录成功！");

            return "redirect:/index.action";
        }else{
            request.setAttribute("failMsg","密码错误！");
            return "user_login";
        }


    }

结束了，感谢支持。