使用vue实现发送短信验证码登录,并且验证码有120s间隔

最新推荐文章于 2023-09-05 18:14:23 发布

aaqia

最新推荐文章于 2023-09-05 18:14:23 发布

阅读量798

点赞数 1

文章标签： vue.js ssm redis

本文链接：https://blog.csdn.net/aaqia/article/details/120506898

版权

验证码还是一样发送到redis中

<!DOCTYPE html>

<html>

<head>

html { background: #efefef; }

p { position: relative;height: 1rem;width: 90%; margin: 0 auto;border-bottom: 1px solid lightgray; }

p input { outline: none;text-indent: 0.4rem;font-size: 0.3rem;height: 100%;width: 100%;background: rgba(0,0,0,0); }

p span { display: inline-block;font-size: 0.3rem;color: gray;position: absolute;top: 0.35rem;right: 0.3rem; }

.login { width: 80%;height: 1rem;line-height: 1rem;text-align: center;background: #D81E06;color: #fff;font-size: 0.3rem;margin: 0.5rem auto 0;border-radius: 0.1rem; }

i { width: 100%;text-align: center;display: inline-block;color: gray;margin-top: 0.4rem; }

i strong { color: blue; }

</style>

</head>

<body>

</p>

<p>

<span v-show="show" id="sendSms" @click="sendSms">获取验证码</span>

<span v-show="!show" class="count">{{count}}s后再试</span>

</p>

<i>点击登录，即表示已阅读并同意<strong>《车友援服务协议》</strong></i>

</form>

</div>

</body>

var vm = new Vue({

el:"#app",

data:{

phone:'',code:'',count:'',timer:null,show:true

methods:{

sendSms:function(){

const TIME_COUNT = 120;

if (!this.timer) {

this.count = TIME_COUNT;

this.show = false;

this.timer = setInterval(() => {

if (this.count > 0 && this.count <= TIME_COUNT) {

this.count--;

} else {

this.show = true;

clearInterval(this.timer);

this.timer = null;

}

}, 1000)

}

axios.get('http://localhost:8080/api/customer/sengCodeNum',{

params:{

phoneNum:this.phone

}

}).then((res) => {

if (res.data.code == 0) {

alert("验证码已发送到手机")

//这里写作业2

}else{

alert("发送失败")

}

})

axios.post('http://localhost:8080/api/customer/customerLoginAxios',{

phoneNum:this.phone,

codeNum:this.code

}).then((res) => {

console.log(res)

if (res.data.code == 0) {

alert("登录成功")

}else{

alert("验证码不对")

}

})

}

})

</script>

</html>

后台代码

@RestController
@CrossOrigin(origins = "*")//注意： *是来自于所有的域名请求
@RequestMapping("/api/customer")
public class CustomerController{
@Autowired(required = false)
private CustomerService customerService;

@Autowired
private JedisPool jedisPool;

//发送验证码
    @RequestMapping("/sengCodeNum")
    public Map sendCodeNum(String phoneNum) {
        Map map = new HashMap();
        //1.在发送验证码之前，随机撞见一个6位数的验证码
        int randomNum = new Random().nextInt(999999);//0-999999
        if (randomNum < 100000) {
            randomNum = randomNum + 100000;
        }
        //1.1在发送验证码之前 需要向redis中查询该手机 有没有验证码存在，如果存在，就直接从redis中读取，而不从阿里云发送，可以节省成本
        //查询pcode这个key在不在
        Boolean b = jedisPool.getResource().exists("phoneNum");
        if (b) {
            map.put("code", 0);
            map.put("msg", "验证啊已存在，情趣短信中查询");
            return map;
        } else {
            //2.接受到前端传过来的手机号：phoneNum  对其调用 阿里云的发送短信的工具类，去发送验证码
            ALSMSUtil.sendMsg(phoneNum, randomNum);
            //3.再送之后，将手机号当做redis key，验证码当做redis value 存入到redis数据库中
            String setex = jedisPool.getResource().setex(phoneNum, 120, String.valueOf(randomNum));
            System.out.println("setex = " + setex);
            jedisPool.getResource().persist(phoneNum);//注意：这里设置成-1 在线上环境测试要删除
            //4.将验证码发送给前端
            if ("OK".equals(setex)) {
                map.put("code", 0);
                map.put("msg", "发送成功");
                //map.put("data",randomNum);//线上不能把验证码发送前端，容易被人利用
                return map;
            } else {
                map.put("code", 500);
                map.put("msg", "发送失败");
                return map;
            }
        }
    }

    //校验手机号和验证码

@RequestMapping("/customerLoginAxios") //  /api/customer/customerLoginAxios
public Map customerLoginAxios(@RequestBody Map map){
    Map codemap = new HashMap();
    //1.根据前端传来的手机号和验证码来和redis中的数据做对比
    String redisCodeNum = jedisPool.getResource().get((String) map.get("phoneNum"));//redis中的验证码
    if(map.get("codeNum").equals(redisCodeNum)){
        codemap.put("code",0);
        codemap.put("msg","发送成功");
        return codemap;
    }else{
        codemap.put("code",500);
        codemap.put("msg","发送失败");
        return codemap;
    }
}

aaqia

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
使用vue实现发送短信验证码登录,并且验证码有120s间隔

验证码还是一样发送到redis中<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,ser-scalable=no">...
复制链接

扫一扫