1. pom依赖

<properties>
    <kaptcha.version>0.0.9</kaptcha.version>
</properties>

<dependency>
    <groupId>com.github.axet</groupId>
    <artifactId>kaptcha</artifactId>
    <version>${kaptcha.version}</version>
</dependency>

2. 创建验证码的配置类

import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.Properties;

/**
 * Created by helen on 2018/3/6
 * 生成验证码配置
 */
@Configuration
public class KaptchaConfig {

    @Bean
    public DefaultKaptcha producer() {
        Properties properties = new Properties();
        properties.put("kaptcha.border", "no");
        properties.put("kaptcha.textproducer.font.color", "black");
        properties.put("kaptcha.textproducer.char.space", "5");
        Config config = new Config(properties);
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
}

3. 复制相关的工具类

ShiroUtils.java、RRException.java、RRExceptionHandler.java

4. 创建controller

import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.Producer;
import com.qfedu.dtboot.utils.ShiroUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;

/**
 * Created by helen on 2018/3/6
 * 登录相关
 */
public class SysLoginController {

    @Autowired
    private Producer producer;

    /**
     * 生成验证码
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    @RequestMapping("/captcha.jpg")
    public void captcha(HttpServletResponse response)throws ServletException, IOException {
        response.setHeader("Cache-Control", "no-store, no-cache");
        response.setContentType("image/jpeg");
        //生成文字验证码
        String text = producer.createText();
        //生成图片验证码
        BufferedImage image = producer.createImage(text);
        //保存到shiro session（注意：如果没有securityManager配置，则暂时无法工作，测试时先注释掉）
        ShiroUtils.setSessionAttribute(Constants.KAPTCHA_SESSION_KEY, text);

        ServletOutputStream out = response.getOutputStream();
        ImageIO.write(image, "jpg", out);
        out.flush();
    }
}

5. login.html中添加表单域和验证码

<div class="form-group has-feedback">
  <input type="text" class="form-control" v-model="captcha" @keyup.enter="login" placeholder="验证码">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
  <img alt="如果看不清楚，请单击图片刷新！" class="pointer" :src="src" @click="refreshCode">
  &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" @click="refreshCode">点击刷新</a>
</div>

6. index.html的js

var vm = new Vue({


   el:'#rrapp',
   data:{
      username: '',
      password: '',
      captcha: '',
      error: false,
      errorMsg: '',
      src: 'captcha.jpg'
   },
    beforeCreate: function(){
        if(self != top){
            top.location.href = self.location.href;
        }
    },
   methods: {
      refreshCode: function(){
            this.src = "captcha.jpg?t=" + $.now();
      },
      login: function (event) {
            window.location.href = "index.html";
            //TODO
      }
   }
});