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

发布时间:2024-06-13 15:01

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

    

        

        

        

        

        

        

        

        

            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; }

        

    

    

        

            

                

                    

                

                

                    

                    获取验证码

                    {{count}}s后再试

                

                登录

                点击登录,即表示已阅读并同意《车友援服务协议》

                

        

    

    

后台代码

@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;
    }
}

相关推荐

业务系统兼容数据库Oracle/PostgreSQL(openGauss)/MySQL的琐事

汇编语言:基本指令详解

Redis是单线程还是多线程?为什么效率这么高?

STM32 学习笔记1-智能小车-基于PWM 调速 的电机设置

mysql spring 事务_spring事务及声明式事务的使用方法

spring配置不扫描service层的原因解答

java集成opencv人脸识别

RocketMQ 系列一:入门级使用演示

python中函数参数传递的三种方式_python中函数参数传递的几种方法

Vue3 $emit指南--包含选项API、组合API以及 setup 语法糖

(二)docker使用——2 DockerFile和docker-compose.yml区别

<论文阅读>LVI-SAM: Tightly-coupled Lidar-Visual-Inertial Odometry via Smoothing and Mapping

室友画圣诞树的时候,我卷了一把文件上传和下载

翻译:对测试自动化来说,为什么说Python是非常好的(选择)WHY PYTHON IS GREAT FOR TEST AUTOMATION...

python数据分析——numpy,pandas,matplotlib

数据库课设——企业员工人事管理系统

Typora 0.11.18免费版本安装使用教程(亲测可用)

基础、数据、开发、部署,AI 时代企业的全方位升级

米家、华为、飞利浦和智汀等智能家居技术有哪些示例,都有哪些优缺点

互联网中岗位代名词

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号