SpringBoot+vue实现登录图片验证码功能

<dependency>
    <groupId>nl.captcha</groupId>
    <artifactId>simplecaptcha</artifactId>
    <version>1.2.2</version>
</dependency>

import nl.captcha.Captcha;
import nl.captcha.backgrounds.FlatColorBackgroundProducer;
import nl.captcha.gimpy.DropShadowGimpyRenderer;
import nl.captcha.text.producer.DefaultTextProducer;
import nl.captcha.text.renderer.DefaultWordRenderer;
import org.springframework.stereotype.Component;
import javax.imageio.ImageIO;
import java.awt.*;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
@Component
public class CaptchaGenerator {
    public byte[] generateCaptchaImage(String captchaText) {
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
        // 创建验证码图片对象
        Captcha captcha = new Captcha.Builder(200, 50)
                .addText(new DefaultTextProducer(), new DefaultWordRenderer())
                .gimp(new DropShadowGimpyRenderer())
                .addBackground(new FlatColorBackgroundProducer(Color.WHITE))
                .build();
        try {
            // 将验证码图片写入输出流
            ImageIO.write(captcha.getImage(), "png", outputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return outputStream.toByteArray();
    }
}

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@RestController
@RequestMapping("/api/captcha")
public class CaptchaController {
    private final CaptchaGenerator captchaGenerator;
    @Autowired
    public CaptchaController(CaptchaGenerator captchaGenerator) {
        this.captchaGenerator = captchaGenerator;
    }
    @GetMapping
    public void generateCaptcha(HttpServletResponse response) throws IOException {
        // 生成验证码图片的方法
        byte[] captchaImage = captchaGenerator.generateCaptchaImage("1234");
        // 设置响应的内容类型为图片
        response.setContentType("image/png");
        // 将验证码图片写入响应输出流
        response.getOutputStream().write(captchaImage);
    }
}

<template>
  <div>
    <!-- 显示验证码图片，点击图片刷新验证码 -->
    <img :src="captchaImage" alt="Captcha" @click="refreshCaptcha" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      captchaImage: "" // 验证码图片的URL
    };
  },
  mounted() {
    this.refreshCaptcha(); // 组件挂载时刷新验证码
  },
  methods: {
    refreshCaptcha() {
      this.captchaImage = `/api/captcha?t=${Date.now()}`; // 刷新验证码图片的URL，添加时间戳以避免缓存
    }
  }
};
</script>
<style scoped>
img {
  cursor: pointer; // 设置鼠标指针样式为手型
}
</style>

<template>
  <div>
    <h1>Login Page</h1>
    <form @submit="submitForm">
      <input type="text" v-model="username" placeholder="Username" />
      <input type="password" v-model="password" placeholder="Password" />
      <!-- 显示验证码图片，并添加点击事件刷新验证码 -->
      <input type="text" v-model="captcha" placeholder="Captcha" />
      <captcha></captcha>
      <button type="submit">Login</button>
    </form>
  </div>
</template>
<script>
import Captcha from "@/components/Captcha.vue";
export default {
  data() {
    return {
      username: "",
      password: "",
      captcha: ""
    };
  },
  methods: {
    submitForm() {
      // 在此处进行登录验证和验证码验证的逻辑
      console.log("Username:", this.username);
      console.log("Password:", this.password);
      console.log("Captcha:", this.captcha);
    }
  },
  components: {
    Captcha
  }
};
</script>