SSM+Redis+Layui前端框架实现验证码的发送

第一步：在注册页面建立框架

获取验证码的前端框架不会加：可以试试Layui框架的，如图：

 

地址：https://www.layui.com/doc/element/form.html

 

代码如下：

<div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
  </div>

把div换成Button就可以了

第二步：在script标签中需要做的事

通过获取验证码的标签Id属性可以作一个click点击事件

    　　1 .首先获取手机号码的name属性phone

　　　2.想加小拦截的可以在if判断语句中+phone<11

　       3.通过ajax获取到input标签中的手机号码name属性

在使用页面跳转的时候尽量使用window.location.href="/reg.html"这样的异步跳转形式

第三步：回到后端Controller

@PostMapping("/sendSms")
    public String sendSms(String phone){
        System.out.println("执行发送短信"+phone);
        String js = SendSms.sendSms(phone);
        Jedis jedis=new Jedis("localhost",6379);
        jedis.setex(phone,60,js);
        return JSON.toJSONString(js);
    }

第四步：需要借助自己申请的短信接口，等编程语言的文件（sendSms）

实际发送：如果没有申请接口的可以在阿里云等其他发送短信的网站获取接口，生成模板

模拟发送（不产生费用）：只需要输出打印在后台得到验证码进行注册登录

 

public class SendSms {
    public static void main(String[] args) {
        sendSms("11位手机号码");
    }

    public static String verifyCode(){
        return String.valueOf((int)(Math.random()*900000 + 100000));
    }

    public static String sendSms(String phone){

        String codes = verifyCode();
        System.out.println("验证码为"+codes);
        return codes;
    }
}
    

 

 刚理解的，有任何不足请您指出！谢谢热爱编程的伙伴们！

 --------------------------------------------------------------------------------------------------------------感谢到访！期待您的下次光临！