springboot产生验证码发送个vue前端，并且vue做出倒计时效果，后端会在指定事件删除验证码

此功能主要用到了后端的多线程和Math中的产生随机数的方法

//用来放验证码数据，键值对为key:用户账号 value:验证码
static HashMap<String,String> yhcode=new HashMap<String,String>();
 @PostMapping("/returnYZM")//用于服务端向客户端发送的验证码
    public String returnCode(@RequestBody User user){
       String yzm=null;
       if(yhcode.get(user.getUsername())==null){//根据前端发送对象判断用户是否在2分钟内接收过验证码了
           int hqzm = hqzm();
           char a=((char)hqzm);//由系统随机产生验证码的首字母
           String szm=String.valueOf(a);//将char型转为String型
           int zj=(int)(Math.random()*900 + 10);
           String zjs=String.valueOf(zj);
           yzm=szm+zjs;
           String username = user.getUsername();//获取到的用户账户
           System.out.println("验证码存入集合中");
           yhcode.put(username,yzm);//将用户产生的验证码和账号和密码存入到验证码中
           delete delete = new delete(username);
           delete.start();//开启删除验证码的线程
       }else if(yhcode.get(user.getUsername())!=null){
           yzm="(你已经获取过验证码，请在规定时间重试)";
       }

        return yzm;//将得到的验证码返回给客户端
    }
//定义一个产生随机数的方法，以便于随时调用
public int hqzm(){
    int number;
    while(true){
        number = (int)(Math.random()*90 + 10);//产生两位整数
        if(number>=65 && number<=91){//使随机数的范围在65-91之间
            break;
        }
    }

//定义一个多线程的类
class delete extends Thread{
        private String Key;
        //创建带参构造方法，以便于删除哈希集合中的键值对
        public delete(String key) {
            this.Key=key;
        }
        @Override
        public void run() {
            try {
                Thread.sleep(120000);//线程休眠2分钟
                yhcode.remove(Key);
                System.out.println(Key+"验证码已删除");
            } catch (InterruptedException e) {
                throw new RuntimeException(e);
            }
        }
    }

在前端请求验证码以后，后端进行响应，就开启准备删除哈希集合中的数据，并且前端也会进行一个响应，对按钮进行一个倒计时效果

 <el-dialog title="修改资料" :visible.sync="settingzi"  width="30%"  :before-close="close">
          <el-form :model="modifyzl" status-icon :rules="rules" ref="ruleForm" label-width="100px"
            class="demo-ruleForm">
            <el-form-item label="用户账号">
              <el-input v-model="modifyzl.setuserNumber" autocomplete="off" readonly></el-input>
            </el-form-item>
            <el-form-item label="旧密码">
              <el-input type="password" v-model="modifyzl.setjPassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码">
              <el-input v-model="modifyzl.setuserPassowrd" @change="ssjt"></el-input>
            </el-form-item>
            <el-form-item label="支付密码">
              <el-input v-model="modifyzl.setpayPassword" @change="ssjt"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <div style="display: flex;">
                <el-input v-model="modifyzl.code" style="width: 30%;"></el-input>
                <el-button @click="hqcode" :disabled="andj" style="margin-left: 8px;">{{ codename }}</el-button>//显示字体绑定data数据
              </div>

            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm()">提交</el-button>
              <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
          </el-form>

        </el-dialog>

    codename: '发送验证码', //设置用户验证码按钮显示文字

  this.andj = true//设置按钮不可点击
          //按钮显示为倒计时
          this.codename = this.totime + 's后重新发送'
          this.timer = setInterval(() => {
            this.totime--//倒计时的递减
            this.codename = this.totime + 's后重新发送'
            if (this.totime < 0) {
              clearInterval(this.timer)
              this.codename = '重新发送验证码'
              this.totime = 120
              this.andj = false
            }
          }, 1000)

效果图：

多鱼网 和另外 6 个页面 - 个人 - Microsoft​ Edge 2023-04-27 17-58-39