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

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

//用来放验证码数据，键值对为key:用户账号 value:验证码
static HashMap yhcode=new HashMap();@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;}@Overridepublic void run() {try {Thread.sleep(120000);//线程休眠2分钟yhcode.remove(Key);System.out.println(Key+"验证码已删除");} catch (InterruptedException e) {throw new RuntimeException(e);}}}

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

 {{ codename }}//显示字体绑定data数据提交重置

    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 = 120this.andj = false}}, 1000)

效果图：

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！