【SDU项目实训2019级】前端和后端实现手机短信验证码登录和注册功能

我会带着你远行 2023-09-28 08:33 5阅读 0赞

**目录**

1.前端登录页面手机号验证码登录页面：

2.前端获取验证码的函数：

3.后端获取验证码代码

4.前端登录的函数：

5.后端登录的实现

6.注册功能前后端的实现

--------------------

#### 1.前端登录页面手机号验证码登录页面： ####

![543cd85feec84cc4aecf6a0d7041601a.png][]

首先是标签展示：按钮样式都是自己写的class，按钮实际上是用的div+a标签来实现的，然后添加了动态的样式，例如hover等，第一个“切换为账号密码登录”的css样式代码有在前文附上

<div class="form-group" v-if="loginValue == true">
                          <label for="userNumber" class="form-label">手机号码</label>
                          <input type="text" class="form-control" id="userNumber" placeholder="请输入你的手机号" v-model="user_phoneNum">
                          <label class="form-label"><a href="/Register">没有账号？点击立即注册</a></label>
                        </div>
                        <div class="form-group" v-if="loginValue == true">
                          <label for="userYzm" class="form-label">验证码</label>
                          <input type="text" class="form-control" id="userYzm" placeholder="请输入验证码" v-model="user_yzm">
                          <div class="search-btn1" style="width: 120px">
                            <a @click="getValidCode()"  :disabled="disabled" :btnTitle="btnTitled">{
       {btnTitled}}</a>
                          </div>
                        </div>
                        <div class="contact-btn pb-0" v-if="loginValue == true">
                          <a class="btn-1 causes-btn" @click="toLogin2()">立即登录</a>
                        </div>

![0f1e90abfba64a15a9b1d049ee6c6c95.png][]![c9f96180993b4e7bb787f430a57f87e9.png][]

上图便是鼠标覆盖hover所展现的样式，还是很好看的哈哈哈。

#### 2.前端获取验证码的函数： ####

getValidCode(){//点击获取验证码的时候判断手机号是否正确
          var _this = this;
          console.log(11111111111)
          if(_this.user_phoneNum == '') {
            _this.$message({
              message:"手机号不能为空",
              type:'warning'
            })
          }else if(!/^1[345678]\d{9}$/.test(this.user_phoneNum)) {
            _this.$message({
              message:"请输入正确的手机号",
              type:'warning'
            })
          }else{
            this.clockD();
            //获取验证码
            let url = '/SendCode/sendLoginCode';
            let params = {
              phoneNum:_this.user_phoneNum
            }
            this.$http.get(url,{params}).then(function (response){
              if(response.data.code == 1){
                _this.$message({
                  message:"短信发送失败，请重新发送",
                  type:'warning'
                })
                return
              }
              if(response.data.code == 0){
                _this.$message({
                  message:"短信已发送，请填写验证码",
                  type:'success'
                })
              }
              let time = 60;
              let timer = setInterval(()=>{
                if(time == 0){
                  clearInterval(timer);
                  _this.disabled = false;  //将按钮设置为可点
                  _this.btnTitled = "获取验证码";
                }else{
                  _this.btnTitled = time + 's后重试';
                  _this.disabled = true;
                  time--;
                }
              },1000)
            })
            return true
          }
        },
        clockD(){
          var _this = this;
          let time = 3;
          let timer = setInterval(()=>{
            if(time == 0){
              clearInterval(timer);
              _this.disabled = false;  //将按钮设置为可点
              _this.btnTitled = "获取验证码";
            }else{
              _this.btnTitled = time + 's后重试';
              _this.disabled = true;
              time--;
            }
          },1000)
          return;
        }

首先先进行手机号的判空处理，为空则提示用户不能为空，再使用正则表达式对手机号码进行限制，看是否为正确的手机号码，然后发送请求，clockD()主要是想由于前后端响应延迟防止用户进行多次点击而设置的，点击了之后便不能再点得过3s，当后端成功向前端发送完数据，假如用户没有收到验证码，还会有个倒计时来提示用户过一分钟再获取验证码，收到了则填写验证码然后进行登录处理。

#### 3.后端获取验证码代码 ####

首先先安装pom.xml依赖，因为需要短信发送平台的支持，可以选择阿里云/腾讯等，但是都需要时间去申请，于是选择的是榛子云，先在pom.xml文件中添加相关依赖：

<dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.70</version>
            </dependency>
            
            <dependency>
                <groupId>com.zhenzikj</groupId>
                <artifactId>zhenzisms</artifactId>
                <version>2.0.2</version>
            </dependency>

SendCodeController代码：

@GetMapping("/sendLoginCode")
        public Result sendLoginCode(@RequestParam String phoneNum) throws Exception {
            System.out.println("用户手机号码：" + phoneNum);
            //短信发送需要的参数是json类型
            JSONObject json = null;
            //随机生成六位数
            String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000);
            //榛子云接口 发送短信
            System.out.println(verifyCode);
            //参数的类型
            Map<String,Object> params = new HashMap<String,Object>();
            params.put("number",phoneNum);//要发送的手机号
            params.put("templateId",9475);//短信模板id
            String[] templateParams = new String[2];
            //第一个参数，验证码
            templateParams[0] = verifyCode;
            //第二个参数，时间 x分钟
            templateParams[1] = "5";
            params.put("templateParams",templateParams);
            //发送短信
            String result = client.send(params);
            System.out.println(result);
            json = JSONObject.parseObject(result);
            if(json.getIntValue("code") != 0){
                return Result.error(1,"发送短信失败，重新发送");
            }
            boolean res = validateService.setLoginCode(phoneNum,verifyCode);
            if(res){
                return Result.success();
            }
            return Result.error(3,"33333333333333");
        }

![8e0289de4bb646b1b581ba481763bf5f.png][]

从平台上获取相关参数，填入。然后调用它们平台提供的发送短信验证码的接口函数，查看是否发送成功，发送成功则将该phoneNum-verifyCode用键值对的形式存到redis数据库，有效时间为5分钟，5分钟之后自动过期，提示用户需要在5分钟之内填写完毕并登录。

ValidateService层实现：

![20fa0706a7424935b83433552b28ab6d.png][]

ValidateDao层实现：SpringBoot下直接利用redisTemplate，将手机号-验证码的信息存入redis数据库，设置过期时间为5分钟，setLoginCode()方法为存入redis，getLoginCode()方法为用于取该手机号的验证码，方便登录的时候使用。具体代码如下：

//获取登录验证码
        public ValidateCode getLoginCode(String phoneNum){
            String key = phoneNum + "_login";
            String code = (String) redisTemplate.opsForValue().get(key);
            if( code != null){
                ValidateCode res = new ValidateCode();
                res.setPhoneNum(phoneNum);
                res.setCodeNum(code);
                return res;
            }
            return null;
        }
        //设置登录验证码，时效为5分钟
        public boolean setLoginCode(String phoneNum,String validateCode){
            String key = phoneNum + "_login";
            redisTemplate.opsForValue().set(key,validateCode,5, TimeUnit.MINUTES);
            if(getLoginCode(phoneNum).getCodeNum().equals(validateCode)) {
                System.out.println("设置登录验证码成功");
                return true;
            }
            return false;
        }

#### 4.前端登录的函数： ####

![09ce5875a620456e87e8afeea06f715a.png][]

①判空处理②如果手机号和验证不为空，则向后端发送get请求，根据后端返回的数据code和msg进行判断是否登陆成功~

#### 5.后端登录的实现 ####

![a14f9815d6a8477793f2e0a1dd8842c1.png][]

![7c09f312d844459d83a88588b344ae34.png][]

接收前端传送的数据，首先先通过手机号查找数据库看是否存在该用户，若不存在，返回用户不存在的信息，再查看redis数据库通过查找key（我设置的key为用户名+“\_token”）来查看用户状态信息，**看用户是否已经登录或者在其他地方登录**，如果未登录，则查找redis数据库下该号码对应的验证码，然后对比前端传送的验证码，看是否一致，一致则将登录状态信息存储到redis以及返回给前端登陆成功。（存储用户状态信息的代码在另一篇博客，token的实现）

**以上便是登录的前端+后端实现。**

#### 6.注册功能前后端的实现 ####

注册功能也类似，多几个判空条件（如名字、密码不能为空，用户是否存在，手机号是否已被注册，用户名是否已被注册），实现的流程相似，先通过手机获取验证码，将发送成功的验证码存到redis数据库，有效时间为5分钟，然后用户填写验证码，前端向后端发送请求，后端验证是否正确，正确则返回注册成功。

部分截图：

![5258d0a68ef74babaeddfe33fd0274a9.png][]

点击获取验证码的Controller：

![34f35411def242bcb689ac0acb66373b.png][]

点击注册后端验证的Controller：

![abc8f82552254f10bf71b6f1fcd0c63f.png][]

实现过程与登录基本一致，多了几个判断条件~可以自己去实现一下噢

**以上便是我的项目我写的前端+后端实现短信验证码登陆注册的功能。**

[543cd85feec84cc4aecf6a0d7041601a.png]: https://img-blog.csdnimg.cn/543cd85feec84cc4aecf6a0d7041601a.png
[0f1e90abfba64a15a9b1d049ee6c6c95.png]: https://img-blog.csdnimg.cn/0f1e90abfba64a15a9b1d049ee6c6c95.png
[c9f96180993b4e7bb787f430a57f87e9.png]: https://img-blog.csdnimg.cn/c9f96180993b4e7bb787f430a57f87e9.png
[8e0289de4bb646b1b581ba481763bf5f.png]: https://img-blog.csdnimg.cn/8e0289de4bb646b1b581ba481763bf5f.png
[20fa0706a7424935b83433552b28ab6d.png]: https://img-blog.csdnimg.cn/20fa0706a7424935b83433552b28ab6d.png
[09ce5875a620456e87e8afeea06f715a.png]: https://img-blog.csdnimg.cn/09ce5875a620456e87e8afeea06f715a.png
[a14f9815d6a8477793f2e0a1dd8842c1.png]: https://img-blog.csdnimg.cn/a14f9815d6a8477793f2e0a1dd8842c1.png
[7c09f312d844459d83a88588b344ae34.png]: https://img-blog.csdnimg.cn/7c09f312d844459d83a88588b344ae34.png
[5258d0a68ef74babaeddfe33fd0274a9.png]: https://img-blog.csdnimg.cn/5258d0a68ef74babaeddfe33fd0274a9.png
[34f35411def242bcb689ac0acb66373b.png]: https://img-blog.csdnimg.cn/34f35411def242bcb689ac0acb66373b.png
[abc8f82552254f10bf71b6f1fcd0c63f.png]: https://img-blog.csdnimg.cn/abc8f82552254f10bf71b6f1fcd0c63f.png