溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue怎么實(shí)現(xiàn)簡(jiǎn)易注冊(cè)頁(yè)面和發(fā)送驗(yàn)證碼功能

發(fā)布時(shí)間：2021-12-18 16:08:29 來(lái)源：億速云 閱讀：524 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容介紹了“Vue怎么實(shí)現(xiàn)簡(jiǎn)易注冊(cè)頁(yè)面和發(fā)送驗(yàn)證碼功能”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1. 效果展示

Vue怎么實(shí)現(xiàn)簡(jiǎn)易注冊(cè)頁(yè)面和發(fā)送驗(yàn)證碼功能

Vue怎么實(shí)現(xiàn)簡(jiǎn)易注冊(cè)頁(yè)面和發(fā)送驗(yàn)證碼功能

2. 增強(qiáng)版驗(yàn)證碼及郵件推送管理（見(jiàn)以后的博客）

Vue怎么實(shí)現(xiàn)簡(jiǎn)易注冊(cè)頁(yè)面和發(fā)送驗(yàn)證碼功能

Vue怎么實(shí)現(xiàn)簡(jiǎn)易注冊(cè)頁(yè)面和發(fā)送驗(yàn)證碼功能

3. 大致思路

用戶角度分析一下注冊(cè)時(shí)候的步驟：

  • 填寫自己的郵箱號(hào)

  • 點(diǎn)擊“發(fā)送驗(yàn)證碼”按鈕

  • 郵箱中收到驗(yàn)證碼

  • 填寫其余注冊(cè)信息并填寫驗(yàn)證碼

  • 注冊(cè)成功！

系統(tǒng)設(shè)計(jì)者角度分析一下步驟：

  • 系統(tǒng)隨機(jī)生成六位數(shù)

  • 根據(jù)用戶提供的郵箱號(hào)將驗(yàn)證碼發(fā)送到其郵箱

  • 根據(jù)用戶提供的信息，進(jìn)行驗(yàn)證碼的校驗(yàn)

  • 如果校驗(yàn)成功，將數(shù)據(jù)進(jìn)行錄入，回顯用戶注冊(cè)成功！

4. 前期準(zhǔn)備

qq郵箱中開啟POP3/SMTP服務(wù)

5. 前端代碼

<template>
  <div class="rg_layout">
    <div class="rg_left">
      <p>新用戶注冊(cè)</p>
      <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
      <div class="rg_form">
        <div ></div>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="Email" prop="Email">
            <el-col :span="15">
              <el-input placeholder="請(qǐng)輸入郵箱號(hào)" v-model="form.Email"></el-input>
            </el-col>
            <el-col :span="9">
              <el-button type="success" plain @click="sendEmail">發(fā)送郵件驗(yàn)證</el-button>
            </el-col>
          </el-form-item>
          <el-form-item label="用戶名">
            <el-col :span="20">
              <el-input placeholder="請(qǐng)輸入用戶名" v-model="form.username"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="密碼">
            <el-input placeholder="請(qǐng)輸入密碼" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="性別">
            <el-col :span="5">
              <el-radio v-model="form.radio" label="1">男</el-radio>
            </el-col>
            <el-col :span="3">
              <el-radio v-model="form.radio" label="2">女</el-radio>
            </el-col>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-col :span="15">
              <el-date-picker type="date" placeholder="選擇日期" v-model="form.date" ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="驗(yàn)證碼">
            <el-col :span="15">
              <el-input
                  type="text"
                  placeholder="驗(yàn)證碼將會(huì)發(fā)送到您的郵箱"
                  v-model="form.text"
                  oninput="value=value.replace(/\D/g,'')"
                  maxlength="6"
                  show-word-limit
              >
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :span="20">
              <el-button type="primary" @click="onSubmit">立即注冊(cè)</el-button>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="rg_right">
      <p>已有賬號(hào)?
        <el-link icon="el-icon-user-solid" type="primary" @click="login_asd">立刻登陸</el-link>
      </p>
    </div>

  </div>

</template>

<script>
import axios from "axios";
export default {
  mounted() {
    this.$store.state.yesOrNo = false
  },
  name: "signUp",
  data: function () {
    return {
      form: {
        Email: '',
        username: "",
        password: "",
        radio: '1',
        date: '',
        text: ''
      },
      rules: {
        Email: [{required: true, message: '請(qǐng)輸入郵箱', trigger: 'blur'}]
      },
      msg: ''
    }
  },
  methods: {
    login_asd(){
      this.$router.replace({path: '/login'});
    },
    open1() {
      this.$message({
        showClose: true,
        message: this.msg,
        type: 'warning'
      });
    },
    open2() {
      this.$message({
        showClose: true,
        message: this.msg,
        type: 'success'
      });
    },
    open3() {
      this.$message({
        showClose: true,
        message: this.msg,
        type: 'error'
      });
    },
    sendEmail() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let _this = this
          axios.post(this.$store.state.url+':8412/user/sendSignUpCode?email='+_this.form.Email,
              ).catch(function (error) {
                _this.msg = "郵箱格式不正確！"
                _this.open1()
          }).then(function (response) {
            if (response.data.code === 200) {
              _this.msg = response.data.msg
              _this.open2()
            } else {
              _this.msg = response.data.msg
              _this.open3()
            }
          })
        }
      })
    },
    onSubmit(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          let _this = this;
          let tmp;
          if(this.form.radio === "1"){
            tmp = '男'
          }else{
            tmp = '女'
          }
          axios.post(this.$store.state.url+':8412/user/userSignUp?code='+_this.form.text,
              {
                email: this.form.Email,
                username: this.form.username,
                password: this.form.password,
                sex: tmp,
                birthday: this.form.date
              }
          ).catch(function (error) {
            _this.msg = "郵箱格式有問(wèn)題！"
            _this.open1()
          }).then(function (response) {
            if (response.data.code === 200) {
              _this.msg = response.data.msg
              _this.open2()
              _this.$router.replace({path: '/login'});
            } else {
              _this.msg = response.data.msg
              _this.open3()
            }
          })
        }
      })
    }
  }
}
</script>


<style>
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-image: url(https://img-blog.csdnimg.cn/76110abf7fb84ee28c50bfbfa7fa8e11.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0px -50px;
}

.rg_layout {
  width: 900px;
  height: 500px;
  border: 5px solid #EEEEEE;
  background-color: white;
  opacity: 0.8;
  /*讓div水平居中*/
  margin: auto;
  margin-top: 100px;
}

.rg_left {
  float: left;
  margin: 15px;
  width: 20%;
}

.rg_left > p:first-child {
  color: #FFD026;
  font-size: 20px;
}

.rg_left > p:last-child {
  color: #A6A6A6;
}

.rg_center {
  /*border: 1px solid red;*/
  float: left;
  width: 450px;
  /*margin: 15px;*/
}

.rg_right {
  float: right;
  margin: 15px;
}

.rg_right > p:first-child {
  font-size: 15px;
}

.rg_right p a {
  color: pink;
}

</style>

6. 后端

使用的框架是springboot

① 主要的依賴

<!-- redis -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
            <version>2.5.2</version>
        </dependency>
        <!-- mail -->
        <dependency>
            <groupId>javax.mail</groupId>
            <artifactId>mail</artifactId>
            <version>1.4.7</version>
        </dependency>

② 正則校驗(yàn)郵箱工具類

package com.example.han.util;

import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class CheckMail {
    public static boolean checkMail(String mail){
        Pattern pattern=Pattern.compile("\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*");
        //\w+@(\w+.)+[a-z]{2,3}
        Matcher matcher=pattern.matcher(mail);
        return matcher.matches();
    }
}

③ Redis的set和get工具類

package com.example.han.util;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.stereotype.Component;
import java.util.concurrent.TimeUnit;

@Component
public class RedisUtil {
    @Autowired
    private StringRedisTemplate stringRedisTemplate;

    public void setRedisKey(String key, String value, long num) {
        System.out.println("set redis start!");
        stringRedisTemplate.opsForValue().set(key,value,num,TimeUnit.SECONDS);
        System.out.println(stringRedisTemplate.opsForValue().get(key));
    }

    public String getRedisValue(String key){
        if(!stringRedisTemplate.hasKey(key)){
            return "None";
        }
        return stringRedisTemplate.opsForValue().get(key);
    }

}

④ 核心service層代碼

/**
     * 驗(yàn)證郵箱是否重復(fù)
     * @param email 郵箱號(hào)
     */
    @Override
    public ResultReturn checkEmailRepeat(String email) throws MyException {
        if (!CheckMail.checkMail(email)) {
            throw new MyException(400, "郵件格式錯(cuò)誤");
        }
        if (userRepository.checkEmaillRepeated(email)) {
            return ResultReturnUtil.fail(USER_EMAIL_REPEATED);
        }
        return ResultReturnUtil.success(USER_EMAIL_NOT_REPEATED, email);
    }

    /**
     * 發(fā)送注冊(cè)驗(yàn)證碼
     * @param toEamil 收件人郵箱
     * @return
     */
    @Override
    public ResultReturn sendSignUpCode(String toEamil) {
        //asdasd
        SimpleMailMessage simpleMailMessage = new SimpleMailMessage();
        simpleMailMessage.setTo(toEamil);
        simpleMailMessage.setFrom(fromEmail);
        simpleMailMessage.setSubject("您的注冊(cè)驗(yàn)證碼來(lái)了");
        Random r = new Random();
        int rate = r.nextInt(899999) + 100000;
        redisUtil.setRedisKey(toEamil + "YanZheng", rate + "", 60 * 5);    //先存入redis,key為發(fā)送的郵箱號(hào)
        String content =
                "你好，\n" + "\t您的驗(yàn)證碼是：\n" + rate;
        simpleMailMessage.setText(content);
        try {
            javaMailSender.send(simpleMailMessage);
        } catch (Exception e) {
            return ResultReturnUtil.fail("發(fā)送失敗！");
        }
        return ResultReturnUtil.success("發(fā)送成功！", toEamil);
    }
    
    /**
     * 用戶注冊(cè)
     * @param userSignUpVO 注冊(cè)所需要的用戶基本信息
     * @param code  注冊(cè)發(fā)到郵箱的驗(yàn)證碼
     */
    @Override
    public ResultReturn UserSignUp(UserSignUpVO userSignUpVO, int code) throws MyException {
        if (!CheckMail.checkMail(userSignUpVO.getEmail())) {    //這種是郵箱格式錯(cuò)誤的時(shí)候
            throw new MyException(400, "郵件格式錯(cuò)誤");
        }
        if (userRepository.checkEmaillRepeated(userSignUpVO.getEmail())) {  //郵箱重復(fù)注冊(cè)的時(shí)候
            return ResultReturnUtil.fail(USER_EMAIL_REPEATED);
        }
        String redisCode = redisUtil.getRedisValue(userSignUpVO.getEmail() + "YanZheng");   //將code與redis的進(jìn)行比對(duì)
        if (!redisCode.equals("" + code)) {
            return ResultReturnUtil.fail(WRONG_VERIFICATION_CODE);
        }
        UserDO user = new UserDO();
        user.setEmail(userSignUpVO.getEmail());
        user.setUsername(userSignUpVO.getUsername());
        user.setPassword(userSignUpVO.getPassword());
        user.setSex(userSignUpVO.getSex());
        user.setBirthday(userSignUpVO.getBirthday());
        if (userRepository.insertUser(user)) {
            return ResultReturnUtil.success(USER_SIGNUP_SUCCESS, user.getEmail());
        }
        return ResultReturnUtil.fail(USER_SIGNUP_FAILED);
    }

“Vue怎么實(shí)現(xiàn)簡(jiǎn)易注冊(cè)頁(yè)面和發(fā)送驗(yàn)證碼功能”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手