怎么增加动态验证码？一看就会！还不快学一手？

た入场券 2024-03-22 12:49 68阅读 0赞

## 一、导入依赖 ##

<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**中

<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>
          <param-name>kaptcha.background.clear.to</param-name>
          <param-value>211,229,237</param-value>
        </init-param>
        <init-param>
          
    
          <param-name>kaptcha.session.key</param-name>
          <param-value>captcha</param-value>
        </init-param>
      </servlet>
      <servlet-mapping>
        <servlet-name>cap</servlet-name>
        <url-pattern>/captcha</url-pattern>
      </servlet-mapping>

## 三、前端页面增加属性 ##

<img src="${pageContext.request.contextPath}/captcha" style="width:85px" id="cap"/>
    <script>
        $(function(){
            $("#cap").click(function(){
                //刷新验证码
                path = $(this).attr("src")+"?"+new Date().getTime();
                $(this).attr("src",path);
            });
        });
    </script>

以下是一个及其草率的示例

![f5549c3a340949f6b5e0ea91d8ba5e0a.png][]

## 四、后端接收并比较 ##

## ![c7d78c761825405e9b3a79d9dfb8e3e7.png][] ##

完事，就这么简单，还不快快动手试试？

[f5549c3a340949f6b5e0ea91d8ba5e0a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/2ab29959a55e435ca3414dc1c9b9e5cf.png
[c7d78c761825405e9b3a79d9dfb8e3e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/39d7cf87bfdb4d04a62851a031b583d0.png