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

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

    <!-- -阿里云短信接口-->
    <dependency>
        <groupId>com.aliyun</groupId>
        <artifactId>aliyun-java-sdk-core</artifactId>
        <version>4.1.0</version>
    </dependency>
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.67</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <!--springboot 集成阿里云连接池-->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid-spring-boot-starter</artifactId>
        <version>1.1.17</version>
    </dependency>
    <!--MySQL依赖 -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.25</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-jdbc</artifactId>
    </dependency>

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

 <form action="registWithPhone" method="post">
 用户名：<input type="text"  id="fphoneNumber" name="phoneNumber" placeholder="请输入手机号" ><br/>
 密 码：<input type="password"  id="password" name="passWord" placeholder="请输入密码" ><br/>
 <input th:type="text" id="fverifyCode" placeholder="请输入验证码" name="verifyCode" >
 <button type="button" onclick="getVerifyCode()">获取</button><br/>
 <input type="submit" value="注册"/>
</form>

写好前端页面后，我们先获取验证码，我这里去到后台是用的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不用管，可以删除，还有那个输出是方便我自己测试用的，也可以直接删除了。