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() { // 得到验证码图片 this.changeCode(); },

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

       );

     }