springMVC-11-验证码

Posted 2021-06-07 Coder-Wang

springMVC-11-验证码

导入依赖

<!--Kaptcha 验证码依赖 前面已导过servlet-api需排除-->
<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>
</dependencies>

在web.xml中为com.google.code.kaptcha.servlet.KaptchaServlet注册

<servlet>
    <servlet-name>dispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring-mvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>dispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>

<servlet>
    <servlet-name>cap</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.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>
        <!--验证码底色, 用RGB数值指定-->
        <param-name>kaptcha.background.clear.to</param-name>
        <param-value>211,229,237</param-value>
    </init-param>
    <init-param>
        <!--把验证码的码值存放在session中, 相当于 session.setAttribute("captcha","验证码")-->
        <param-name>kaptcha.session.key</param-name>
        <param-value>captcha</param-value>
    </init-param>
</servlet>
<!--这个验证码配置就不需要全部的url都配置了-->
<servlet-mapping>
    <servlet-name>cap</servlet-name>
    <url-pattern>/captcha</url-pattern>
</servlet-mapping>

有了这个配置之后

我们下一步就是把这个验证码请求放到正常jsp界面中

jsp界面

<form action="${pageContext.request.contextPath}/kaptcha">
    <img id="captchaImg" src="${pageContext.request.contextPath}/captcha" style="width: 100px" onclick="refresh()">
    <input type="text" name="captcha"><br>
    <input type="submit" value="提交">
</form>
<script type="text/javascript">
    function refresh() {
        var i = document.getElementById("captchaImg");
        /**
         * 有时候发送请求，浏览器会直接读取缓存数据，不会去请求后台数据，比如http://localhost:8080/test/login/index,
         * 请求一次之后，再次发送请求的时候，由于url请求没有发生变化，浏览器会自动读取缓存。这一点会给开发带来一些麻烦。
         * 添加时间戳参数使得每次请求地址都不一样, 防止浏览器缓存
         */
        //虽然此处还传入了一个时间戳，但是在control中可以不对这个参数进行获取,control不需要任何改变
        i.src = "${pageContext.request.contextPath}/captcha?"+new Date().getTime();
        //注意这里没有return false，说明这个点击一方面更改了url，一方面又进行了访问
    }
</script>

control中：(通过 realCap.equalsIgnoreCase(captcha) 可以设置不检验大小写)

@RequestMapping(value = "/kaptcha",produces = "text/html;charset=UTF-8")
public String getKaptcha(String captcha,HttpSession session){
    //比对
    String realCaptcha = (String)session.getAttribute("captcha");
    if (captcha.equals(realCaptcha)){
        return "验证码通过";
    }
    return "验证码未通过";
}

结果：出现这个界面