功能描述

在開發過程中遇到關於驗證碼校驗的需求，為了以後的高效開發，利用簡單的例子抽取程式碼如下：

開發框架

vue + ssm + redis + dubbo + mysql + sms

html頁面

<script>
  var id = getUrlParam("id");
</script>
...

<div class="input-row">
    <label>手機號</label>
    <input v-model="orderInfo.telephone" type="text" class="input-clear" placeholder="請輸入手機號">
    <input style="font-size: x-small;" id="validateCodeButton" @click="sendValidateCode()" type="button" value="傳送驗證碼">
</div>
<div class="input-row">
    <label>驗證碼</label>
    <input v-model="orderInfo.validateCode" type="text" class="input-clear" placeholder="請輸入驗證碼">
</div>
 

js檔案

     var clock = '';//定時器物件，用於頁面30秒倒計時效果
     var nums = 30;  // 30 秒倒計時，可自行修改
     var validateCodeButton;
      //基於定時器實現30秒倒計時效果
      function doLoop() {
          validateCodeButton.disabled = true;//將按鈕置為不可點選
          nums--;
          if (nums > 0) {
              validateCodeButton.value = nums + '秒後重新獲取';
          } else {
              clearInterval(clock); //清除js定時器
              validateCodeButton.disabled = false;
              validateCodeButton.value = '重新獲取驗證碼';
              nums = 30; //重置時間
          }
      }
 

VUE程式碼

 //傳送驗證碼
sendValidateCode(){
    // 校驗手機號格式
    // 獲取手機號
    var telephone = this.orderInfo.telephone;
    // 呼叫js檔案中的方法
    if (!checkTelephone(telephone)) {
        this.$message.error("請輸入正確的手機號");
        return false;
    }
    // 設定倒計時
    // 獲取傳送校驗碼按鈕
    validateCodeButton = document.getElementById("validateCodeButton");
    clock = window.setInterval(doLoop,1000);
    // 傳送ajax請求
    axios.get("/validateCode/send4Order.do?telephone=" + telephone).then((res)=>{
        if (!res.data.flag) {
            // 驗證碼傳送失敗
            this.$message.error(res.data.message);
        }
    })
},
 

後端程式碼抽取

傳送驗證碼

我在這裡自定義了一個驗證碼工具類用於生成驗證碼ValidateCodeUtils

public Result send4Order(String telephone){
        // 生成驗證碼
        Integer code = ValidateCodeUtils.generateValidateCode(4);

        try {
            //傳送簡訊
//            SMSUtils.sendShortMessage(telephone,code.toString());
            System.out.println("傳送的手機驗證碼為：" + code);

        } catch (Exception e) {
            e.printStackTrace();
            //驗證碼傳送失敗
            return new Result(false, MessageConstant.SEND_VALIDATECODE_FAIL);
        }
        //將生成的驗證碼快取到redis
        jedisPool.getResource().setex(
                telephone + RedisMessageConstant.SENDTYPE_ORDER,5 * 60,code.toString());
        //驗證碼傳送成功
        return new Result(true,MessageConstant.SEND_VALIDATECODE_SUCCESS);
    }

校驗驗證碼

public Result submit(@RequestBody Map map){
	// ① 校驗手機驗證碼
        // 獲取手機號
        String telephone = (String) map.get("telephone");
        // 獲取 Redis 中的驗證碼
        String codeInRedis = jedisPool.getResource().get(telephone + RedisMessageConstant.SENDTYPE_ORDER);
        // 獲取使用者輸入的驗證碼
        String validateCode = (String) map.get("validateCode");

        // 校驗驗證碼
        if (codeInRedis == null ||!codeInRedis.equalsIgnoreCase(validateCode)) {
            return new Result(false, MessageConstant.VALIDATECODE_ERROR);
        }
    
}