介绍：

kaptcha是Google提供的一个图形验证码插件，有了它，你可以通过简单的配置生成各种样式的验证码。

1：SpringBoot引入kaptcha的依赖

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

2：编写kaptcha配置类

package simulationvirtual.VirtualExperiment.config;

import com.google.code.kaptcha.Producer;
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;

@Configuration
public class KaptchaConfig {
    /**
     * Kaptcha图形验证码工具配置类
     * @author: Xiongch
     * @param:
     * @return: com.google.code.kaptcha.Producer
     * @date: 2022/9/9 15:47
     */
    @Bean
    public Producer kaptchaProducer() {
        // 实例一个DefaultKaptcha
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        // 创建配置对象
        Properties properties = new Properties();
        // 设置边框
        properties.setProperty("kaptcha.border", "yes");
        // 设置颜色
        properties.setProperty("kaptcha.border.color", "105,179,90");
        // 设置字体颜色
        properties.setProperty("kaptcha.textproducer.font.color", "blue");
        // 设置宽度
        properties.setProperty("kaptcha.image.width", "125");
        // 高度
        properties.setProperty("kaptcha.image.height", "50");
        // 设置session.key
        properties.setProperty("kaptcha.session.key", "code");
        // 设置文本长度
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        // 设置字体
        properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
        // 将以上属性设置为实例一个DefaultKaptcha的属性
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        // 将defaultKaptcha返回
        return defaultKaptcha;
    }
}

2.1：Kaptcha详细配置

Kaptcha详细配置表

序号	属性名	描述	示例
1	kaptcha.width	验证码宽度	200
2	kaptcha.height	验证码高度	50
3	kaptcha.border.enabled	是否显示边框	false
4	kaptcha.border.color	边框颜色	black
5	kaptcha.border.thickness	边框厚度	2
6	kaptcha.content.length	验证码文本长度	5
7	kaptcha.content.source	文本源	abcde2345678gfynmnpwx
8	kaptcha.content.space	文本间隔	2
9	kaptcha.font.name	字体名称	Arial
10	kaptcha.font.size	字体大小	40
11	kaptcha.font.color	字体颜色	black
12	kaptcha.background-color.from	背景颜色（开始渐变色）	lightGray
13	kaptcha.background-color.to	背景颜色（结束渐变色	white

3：编写Controller，实现验证码请求接口

package simulationvirtual.VirtualExperiment.controller.tools;

import com.google.code.kaptcha.Producer;


import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.util.FastByteArrayOutputStream;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import simulationvirtual.VirtualExperiment.util.AjaxResult;
import simulationvirtual.VirtualExperiment.util.Base64;
import simulationvirtual.VirtualExperiment.util.UUIDutil;

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

import java.util.concurrent.TimeUnit;

@RestController
public class KaptchaController {
    @Autowired
    private RedisTemplate<String,Object> redisTemplate;
    @Autowired
    private Producer kaptchaProduer;
    /**
     * 生成图形验证码
     * @author: Xiongch
     * @param:null
     * @return:Ajax_Result（统一返回工具）
     * @date: 2022/9/9 15:47
     */
    @GetMapping("/kaptcha")
    public AjaxResult getKaptcha(HttpServletResponse response, HttpSession session){
        AjaxResult Ajax_Result = AjaxResult.success();
        String imagecode = kaptchaProduer.createText();
        // 生成图片
        BufferedImage image = kaptchaProduer.createImage(imagecode);
        // 将验证码存入Session
        session.setAttribute("kaptcha",imagecode);
        //将图片输出给浏览器
        String uuid = UUIDutil.getUUID();//uuid-->验证码唯一标识
        FastByteArrayOutputStream os = new FastByteArrayOutputStream();
        try {
            response.setContentType("image/png");

            ImageIO.write(image,"png",os);

            //验证码实现redis缓存，过期时间2分钟

            session.setAttribute("uuid",imagecode);
        
            redisTemplate.opsForValue().set(uuid,imagecode,2, TimeUnit.MINUTES);

        } catch (IOException e) {

            return AjaxResult.error(e.getMessage());
        }
        Ajax_Result.put("uuid",uuid);
        Ajax_Result.put("img", Base64.encode(os.toByteArray()));
        return Ajax_Result;
    }


}

4：vue前端展示代码

        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
        </div>

 4.1:点击刷新方法

 methods: {
    getCode() {
          this.$axios({
			       	  method:'GET',
			      	  url:"/kaptcha",
				        headers: {
                  "Content-Type": "application/json"
                }
            }).then(res=>{
              this.codeUrl = "data:image/gif;base64," + res.data.img;
            })
    },

5：效果如下