vue+element 獲取驗證碼

我們在做一個項目，登錄注冊頁面是少不了的，為了人機校驗，驗證碼也是必須的

我的這個項目獲取驗證碼，前端發送一個隨機四位數給后端，后端返回一張圖片，前端渲染就可以

template代碼：

<el-form-item label="" prop="captcha_code">
 <el-input
  v-model="loginForm.captcha_code"
  placeholder="驗證碼"
  prefix-icon="lj-icon-yanzhengma"
  autocomplete="off"
  autocapitalize="off"
  spellcheck="false"
  maxlength="4"
  @keyup.enter.native="handleLogin"
  style="float: left; width: 122px;"
  ></el-input>
   <div class="captcha_code">
    <img src="" ref="code" @click="changeCode">
   </div>
 </el-form-item>
 <el-button
  :loading="loading"
  type="primary"
  style="width: 100%;"
  @click="handleLogin"
>登錄</el-button>

data數據聲明：

data() {
    return {
      loginForm: {
        username: "",
        password: "",
        captcha_key: "",
        captcha_code: ""
      },
    }
}

mounted數據加載完執行方法：

 mounted() { 2 // 得到驗證碼圖片 3 this.changeCode(); 4 }, 

methods方法：

getCaptchaKey() {
      let captchaKey = Math.random()
        .toString(36)
        .substring(2);
      return captchaKey;
    },
changeCode() {
      let captcha_key = this.getCaptchaKey();
      this.loginForm.captcha_key = captcha_key;
      this.$refs.code.setAttribute(
        "src",
        process.env.VUE_APP_API_URL +
          "auth/get_captcha?captcha_key=" +
          captcha_key
      );
    }