vue3+springboot 怎么实现验证码功能

实现验证码功能可以分为前端和后端两部分。

前端部分：

在 Vue3 中，可以使用第三方库如 vue-ant-design、vue-element-admin 等提供的验证码组件，或者使用原生 HTML5 canvas 绘制验证码。以下是一个使用 canvas 绘制验证码的示例：

1. 在 template 中添加 canvas 标签：

<canvas ref="canvas" @click="drawCode"></canvas>

2. 在 script 中定义绘制验证码的方法：

export default {
  name: 'VerificationCode',
  data() {
    return {
      code: ''
    }
  },
  methods: {
    drawCode() {
      let canvas = this.$refs.canvas
      let ctx = canvas.getContext('2d')
      let width = canvas.width
      let height = canvas.height

      // 绘制背景色
      ctx.fillStyle = '#eee'
      ctx.fillRect(0, 0, width, height)

      // 绘制验证码
      let code = ''
      let charArr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'.split('')
      for (let i = 0; i < 4; i++) {
        let char = charArr[Math.floor(Math.random() * charArr.length)]
        code += char
        ctx.font = 'bold 20px Arial'
        ctx.fillStyle = '#333'
        ctx.fillText(char, 20 + i * 20, 25)
      }

      this.code = code
    }
  }
}

3. 调用 drawCode 方法生成验证码。

后端部分：

在 Spring Boot 中，可以使用第三方库 kaptcha 来生成验证码。以下是一个使用 kaptcha 生成验证码的示例：

1. 添加依赖：

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

2. 在 Controller 中添加生成验证码的方法：

@GetMapping("/captcha")
public void captcha(HttpServletResponse response, HttpSession session) throws Exception {
    // 创建 kaptcha 对象
    DefaultKaptcha kaptcha = new DefaultKaptcha();
    // 设置配置
    Properties props = new Properties();
    props.put("kaptcha.border", "no");
    props.put("kaptcha.textproducer.font.color", "black");
    props.put("kaptcha.image.width", "100");
    props.put("kaptcha.image.height", "40");
    props.put("kaptcha.textproducer.font.size", "30");
    kaptcha.setConfig(new Config(props));
    // 生成验证码
    String text = kaptcha.createText();
    session.setAttribute("captcha", text);
    // 输出图片
    BufferedImage image = kaptcha.createImage(text);
    OutputStream out = response.getOutputStream();
    ImageIO.write(image, "jpg", out);
    out.close();
}

3. 在前端页面中使用 img 标签获取验证码图片：

<img src="/captcha" alt="验证码" @click="refreshCode">

4. 在提交表单时把用户输入的验证码和 session 中的验证码进行比较，判断是否正确。