一行代码简单解决项目中需要用到的验证码

简单解决项目中需要用到的验证码

在写一个表单提交的时候，项目后台还没有给到我验证码的接口，让我自己去网上找找处理验证码的方案，这里找到了一个验证码接口，分享如下http://183.237.67.218:3002/captcha这个网址刷新一次验证码就更新一次，如果两次的src一致，浏览器处于性能考虑，会直接使用缓存的值，图片也不会改变，为了以防验证码有重复情况，可选择在后面拼接随机数或者时间戳,随机数小概率情况下也可能重复，所以我拼接了时间戳，肯定不会重复，这样一个验证码功能就实现了

  //html结构
 <el-form-item label="Verification Code">
        <el-input v-model="menuform.Code" id="Code"></el-input>
      <!-- 图形验证码 -->
      <img :src="captchaSrc" class="captcha" alt="" @click="changeCaptcha">
 </el-form-item>

    //实现验证码点击一次,改变一次
    //以防重复,拼接时间戳
    //给验证码点击事件
    changeCaptcha(){
    
    
      this.captchaSrc=`http://183.237.67.218:3002/captcha?type=login&${
      
      Date.now()}`
    }