vue3 验证码

<template>
  <div>
    <input v-model="captcha" placeholder="请输入验证码" />
    <img :src="captchaImage" @click="refreshCaptcha" alt="验证码图片" />
    <button @click="validateCaptcha">验证</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      captcha: '',
      captchaImage: ''
    };
  },
  methods: {
    // 获取新的验证码图片
    refreshCaptcha() {
      this.captchaImage = `/api/captcha?timestamp=${new Date().getTime()}`;
    },
    // 验证用户输入的验证码
    validateCaptcha() {
      axios.post('/api/validate-captcha', { captcha: this.captcha })
        .then(response => {
          if (response.data.success) {
            alert('验证码正确');
          } else {
            alert('验证码错误');
            this.refreshCaptcha();
          }
        })
        .catch(error => {
          console.error('验证失败:', error);
        });
    }
  },
  created() {
    // 页面加载时获取初始验证码图片
    this.refreshCaptcha();
  }
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>

解释说明

1. 模板部分 (<template>):

   • 使用了一个 input 输入框，绑定到 captcha 数据属性，用于用户输入验证码。
   • 使用了一个 img 标签显示验证码图片，并绑定了点击事件 @click="refreshCaptcha"，点击图片可以刷新验证码。
   • 使用了一个按钮，点击按钮触发 validateCaptcha 方法来验证用户输入的验证码。

2. 脚本部分 (<script>):

   • 引入了 axios 库用于发送 HTTP 请求。
   • 定义了两个数据属性：captcha（用户输入的验证码）和 captchaImage（验证码图片的 URL）。
   • refreshCaptcha 方法用于获取新的验证码图片，通过在 URL 中添加时间戳来防止浏览器缓存。
   • validateCaptcha 方法用于验证用户输入的验证码，发送 POST 请求到后端 API 进行验证，并根据返回结果提示用户。
   • 在组件创建时调用 refreshCaptcha 方法，确保页面加载时显示初始验证码图片。

3. 样式部分 (<style scoped>):

   • 可以根据需要添加自定义样式。