vue+element 获取验证码

我们在做一个项目，登录注册页面是少不了的，为了人机校验，验证码也是必须的

我的这个项目获取验证码，前端发送一个随机四位数给后端，后端返回一张图片，前端渲染就可以

template代码：

 1 <el-form-item label="" prop="captcha_code">
 2  <el-input
 3   v-model="loginForm.captcha_code"
 4   placeholder="验证码"
 5   prefix-icon="lj-icon-yanzhengma"
 6   autocomplete="off"
 7   autocapitalize="off"
 8   spellcheck="false"
 9   maxlength="4"
10   @keyup.enter.native="handleLogin"
11   style="float: left; width: 122px;"
12   ></el-input>
13    <div class="captcha_code">
14     <img src="" ref="code" @click="changeCode">
15    </div>
16  </el-form-item>
17  <el-button
18   :loading="loading"
19   type="primary"
20   style="width: 100%;"
21   @click="handleLogin"
22 >登录</el-button>

data数据声明：

 1 data() {
 2     return {
 3       loginForm: {
 4         username: "",
 5         password: "",
 6         captcha_key: "",
 7         captcha_code: ""
 8       },
 9     }
10 }

mounted数据加载完执行方法：

 1 mounted() { 2 // 得到验证码图片 3 this.changeCode(); 4 }, 

methods方法：

 1 getCaptchaKey() {
 2       let captchaKey = Math.random()
 3         .toString(36)
 4         .substring(2);
 5       return captchaKey;
 6     },
 7 changeCode() {
 8       let captcha_key = this.getCaptchaKey();
 9       this.loginForm.captcha_key = captcha_key;
10       this.$refs.code.setAttribute(
11         "src",
12         process.env.VUE_APP_API_URL +
13           "auth/get_captcha?captcha_key=" +
14           captcha_key
15       );
16     }

 

转载于:https://www.cnblogs.com/jun-qi/p/11090636.html