一、新增依賴

<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

二、springmvc配置檔案

<bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
 

    <property name="config">
        <bean class="com.google.code.kaptcha.util.Config">
            <constructor-arg>
                <props>
                    <prop key="kaptcha.border">yes</prop>
                    <prop key="kaptcha.border.color">
 
105,179,90</prop>
                    <prop key="kaptcha.textproducer.font.color">blue</prop>
                    <prop key="kaptcha.image.width">125</prop>
                    <prop key="kaptcha.image.height">45</prop>
                    <prop key="kaptcha.textproducer.font.size"
 
>45</prop>
                    <prop key="kaptcha.session.key">code</prop>
                    <prop key="kaptcha.textproducer.char.length">4</prop>
                    <prop key="kaptcha.textproducer.font.names">宋體,楷體,微軟雅黑</prop>
                </props>
            </constructor-arg>
        </bean>
    </property>
</bean>

三、後端

Controller 類中新增：

@Autowired
private Producer captchaProducer;

@RequestMapping(value = "captcha")
public void getKaptchaImage(HttpServletRequest request, HttpServletResponse response) {
    HttpSession session = request.getSession();
    response.setDateHeader("Expires", 0);
    response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
    response.addHeader("Cache-Control", "post-check=0, pre-check=0");
    response.setHeader("Pragma", "no-cache");
    response.setContentType("image/jpeg");
    // 生成驗證碼
    String capText = captchaProducer.createText();
    System.out.println("code: " + capText);
    session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
    // 向客戶端寫出
    ServletOutputStream out = null;
    try {
        BufferedImage bi = captchaProducer.createImage(capText);
        out = response.getOutputStream();
        ImageIO.write(bi, "jpg", out);
        out.flush();
    } catch (IOException e) {
        e.printStackTrace();
    } finally {
        try {
            if (out != null){
                out.close();
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

四、前端

<form>
    <fieldset>
        <ul>
            <li class="frame-style form-error">
                <label class="user-icon" for="username"></label>
                <input name="username" type="text" id="username"/>
                <i>使用者名稱</i>
            </li>
            <li class="frame-style form-error">
                <label class="password-icon" for="password"></label>
                <input name="password" type="password" id="password"/>
                <i>密碼</i>
            </li>
            <li class="frame-style form-error">
                <label class="captcha-icon" for="captcha"></label>
                <input name="captcha" type="text" id="captcha" class="captcha"/>
                <i>驗證碼</i>
                <div class="captcha-region">
                    <img src="${ctxPath}/captcha" id="img-captcha">
                </div>
            </li>

        </ul>
        <div class="space"></div>

        <div class="clearfix">
            <label class="inline">
                <input type="checkbox" class="ace">
                <span class="lbl">記住密碼</span>
            </label>

            <button type="button" class="width-35 pull-right btn btn-sm btn-primary" onclick="login()">
                <i class="icon-key"></i>
                登入
            </button>
        </div>

        <div class="space-4"></div>
    </fieldset>
</form>
<script type="text/javascript">
    $(function () {
        $("#img-captcha").on('click', function () {
            $(this).attr('src', '${ctxPath}/captcha?' + Math.floor(Math.random() * 10000)).fadeIn();
        });
    })
</script>