<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();
        // 創(chuàng)建驗(yàn)證碼圖片對象
        Captcha captcha = new Captcha.Builder(200, 50)
                .addText(new DefaultTextProducer(), new DefaultWordRenderer())
                .gimp(new DropShadowGimpyRenderer())
                .addBackground(new FlatColorBackgroundProducer(Color.WHITE))
                .build();
        try {
            // 將驗(yàn)證碼圖片寫入輸出流
            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 {
        // 生成驗(yàn)證碼圖片的方法
        byte[] captchaImage = captchaGenerator.generateCaptchaImage("1234");
        // 設(shè)置響應(yīng)的內(nèi)容類型為圖片
        response.setContentType("image/png");
        // 將驗(yàn)證碼圖片寫入響應(yīng)輸出流
        response.getOutputStream().write(captchaImage);
    }
}

<template>
  <div>
    <!-- 顯示驗(yàn)證碼圖片，點(diǎn)擊圖片刷新驗(yàn)證碼 -->
    <img :src="captchaImage" alt="Captcha" @click="refreshCaptcha" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      captchaImage: "" // 驗(yàn)證碼圖片的URL
    };
  },
  mounted() {
    this.refreshCaptcha(); // 組件掛載時刷新驗(yàn)證碼
  },
  methods: {
    refreshCaptcha() {
      this.captchaImage = `/api/captcha?t=${Date.now()}`; // 刷新驗(yàn)證碼圖片的URL，添加時間戳以避免緩存
    }
  }
};
</script>
<style scoped>
img {
  cursor: pointer; // 設(shè)置鼠標(biāo)指針樣式為手型
}
</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" />
      <!-- 顯示驗(yàn)證碼圖片，并添加點(diǎn)擊事件刷新驗(yàn)證碼 -->
      <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() {
      // 在此處進(jìn)行登錄驗(yàn)證和驗(yàn)證碼驗(yàn)證的邏輯
      console.log("Username:", this.username);
      console.log("Password:", this.password);
      console.log("Captcha:", this.captcha);
    }
  },
  components: {
    Captcha
  }
};
</script>