2021-10-28 SpringBoot+thymeleaf+ajax+阿里云短信接口做发送手机验证码验证

2021-10-28 SpringBoot+ajax+mysql8做发送手机验证码
要实现以上功能时，首先我们得思考我们需要什么，分好之后我们再细分，验证码—①发送验证码的功能 ②随机6位数字验证码(几位由你自己喜欢)。
好了，功能细分完毕了，接下来就开始实操了。
首先引入需要的依赖，我就不一点一点说明了，附上几个重要的。。

    
    
        com.aliyun
        aliyun-java-sdk-core
        4.1.0
    
    
        com.alibaba
        fastjson
        1.2.67
    
    
        org.springframework.boot
        spring-boot-starter-thymeleaf
    
    
    
        com.alibaba
        druid-spring-boot-starter
        1.1.17
    
    
    
        mysql
        mysql-connector-java
        8.0.25
    
    
        org.springframework.boot
        spring-boot-starter-jdbc
    

引入依赖以后，我们开始写前端页面，就写个简单的玩一下，困难的好看的我也不会，哈哈。

 

 用户名：

 密 码：

 
 获取

 

写好前端页面后，我们先获取验证码，我这里去到后台是用的ajax，没有用RequestMapping映射。毕竟用Mapping映射带参过去代码有点多，毕竟可能还得写两个form分开（这是我自己的思路哈，可能比较低级）。用ajax获取前端页面填写的验证码之后（先判断是否为空，也没判断是否符合电话号码的规则），就开始带参传送过去啦。这里url是RequestMapping映射奥

    function getVerifyCode() {
        var phoneNumber = $("#fphoneNumber");
        if($.trim(phoneNumber.val())==""){
            alert("电话不能为空");
            fphoneNumber.val("");
            fphoneNumber.focus();
        }else{
            $.ajax({
                url: "testY",
                type: "POST",
                dataType: "json",
                data: {"phoneNumber":phoneNumber.val()},
                success: function (data) {
                    if(data == 'fail'){
                        alert("发送验证码失败");
                        return ;
                    }else{
                        alert("验证码发送成功")
                    }
                }
            });
        }
    }
    后台自己写个6位数的随机数字方法
     public static String getCode2(){
	StringBuilder ss = new StringBuilder();
	for(int i=0;ss.length()<6;i++){
		int num = new Random().nextInt(10);
		ss.append(num);
	}
	return ss.toString();
	 	
}

实现好阿里云接口，这里可以去阿里云的短信平台跟着他们流程看一下，很简单的，点击AccessKey获取你的accessKeyId和accessKeySecret，这个是调用短信接口重要凭证就注册一下短信签名和短信模板，有个调试平台的然后一键生成就好了。
然后在控制层接收前端请求调用那个生成模板(改成自己的方法，并在里面把发送的验证码用自己刚刚写的方法)就好了。

那个方法里面的Model model不用管，可以删除，还有那个输出是方便我自己测试用的，也可以直接删除了。