SpringBoot + Vue3邮件验证码功能的实现-前端

• Vue3
• Element-Plus
• WebStorm
• JavaScript

编写表单

这个项目本来是没有注册验证码这个需求的，为了更好的演示效果，简单修改了以下原来的表单，修改后的页面如下：

页面有了，接下来就是请求后端的接口，实现点击 获取验证码 按钮发送邮件验证码,为了实现点击之后进入倒计时禁用，这里采用v-if组件来实现,下面是核心代码:

---

倒计时处理

其中的JavaScript部分如下:

const sms = reactive({
  disabled: false, // 按钮禁用状态
  total: 10, // 倒计时间隔：秒
  count: 0
})
// 邮件验证码,这段你可以忽略，根据自己得项目情况来，这个就是调用后端获取验证码的请求
const sendEmail = async () =>{
  console.log("函数被调用...")
  timerHandler()
  let result =  await sendEmailCodeService(registerData.value.email);
  console.log("邮箱:"+registerData.value.email)
  ElMessage.success("验证码已发送，请注意查收!");
}

// 倒计时实现
const timerHandler = () => {
  sms.count = sms.total
  sms.disabled = true

  let timer = setInterval(() => {
    if (sms.count > 1 && sms.count <= sms.total) {
      sms.count--
    } else {
      sms.disabled = false
      clearInterval(timer)
    }
  }, 1000)
}

差不多就是这样了，当我们点击【获取验证码】之后，该按钮会进入禁用状态并且倒计时提示，效果如下: