SpringBoot+MyBatis+MySql从头到尾完成一个电商项目（五、用户注册、登录）

1、码云新建一个分支user-register

2、用户获取短信验证码otp的接口编写：

首先在UserController中注入HttpServletRequest这样我们可以拿到Session

然后写接口如下：

然后启动程序进行测试结果如下：

再看一下我们的控制台打印出来了电话和验证码，这里只是测试，正规的企业开发不能暴漏用户的验证码！！

3、下面我们通过前后端分离的方式把前端的注册界面做出来：

这里我们整合前后端使用的是thymeleaf，先去application,properties中添加如下设置：

然后开始前端页面的书写：

在static包下新建一个getotp.html的网页如下图：

这里是界面的编写，可以看一下效果如下：

然后下面是js代码的书写，这里我们使用jquery采用ajax进行前后端的传值！

<script>
    // 所有的jquery的动态绑定元素需要页面渲染完成以后才可以操作
    jQuery(document).ready(function () {

        //绑定otp的点击事件，用于向后端发送获取验证码的实现
        $("#getotp").on("click",function () {

            var telphone=$("#telphone").val();
            if(telphone==null || telphone==""){
                alert("手机号不能为空");
                //我们使用的是ajax传值，所以要捕获点击事件，不让它冒泡排序到上一层
                return false;
            }
            $.ajax({
                //头
                type:"POST",
                contentType:"application/x-www-form-urlencoded",
                url:"http://localhost:8090/user/getotp",

                //传参
                data:{
                    //获取用户输入的telphone
                    "telphone":$("#telphone").val(),
                },
                //成功的回调函数
                //data是后端输出的json数据
                //与后端的@CrossOrigin(allowCredentials = "true",allowedHeaders = "*")相互呼应
                xhrFields:{withCredentials:true},
                success:function (data) {
                    if(data.status==="success"){
                        alert("otp已经发送到你的手机上，请注意查收");
                        window.location.href="file:///H:/fondend/miaosha/src/main/resources/static/register.html";
                    }else {
                        alert("otp发送失败，原因为"+data.data.errMsg);
                    }

                },
                //失败的回调函数
                error:function (data) {
                    alert("otp发送失败，原因为"+data.responseText);
                }
            });
            return false;
        });

    });

</script>

在这里跟大家解释一下逻辑顺序：

首先当用户输入手机号然后点击确定后会出发jquery的点击事件的方法，然后可以使用$("#telphone").val()获取用户输入的手机号进行判断手机号是否为空。如果手机号不为空，使用ajax进行前后端的传值，ajax传值包括4个部分，一个是 头 部分如下图：

这里type是指传值的方式，包括GET  PUT  POST等形式，

contentType是传值的格式，

url是指传值的接口，这里写的是我们在上面写好的获取otp的接口，注意在url里面不要写参数，只写url。

一个是传参部分，这里前端传给后端的值是用户输入的手机号，用来于接口url进行组合获取信息；如下图：

第三个部分是前后端传值成功的函数：