vue 通过接口实现前端登录页验证码功能

咔布哩

已于 2022-02-22 12:19:58 修改

阅读量1.1k

点赞数 1

文章标签：前端 vue.js javascript

于 2022-02-22 12:16:55 首次发布

本文链接：https://blog.csdn.net/royya_buli/article/details/123065178

版权

记录个人学习使用

页面样式：

接口返回数据：

此处的base64不需要转，可直接赋值使用，详情如methods内的方法显示

html部分：

 <el-form-item label="" prop="checkCode">
     <el-input v-model="formLogin.checkCode"  prefix-icon="lj-icon-yanzhengma"
           autocomplete="off"
           autocapitalize="off"
           spellcheck="false"
           @keyup.enter.native="submit"
           style="float:left;width:240px;" placeholder="请填写验证码"></el-input>
     <div style="width:110px;float:right;height:40px;">
          <img :src="this.img" alt="" @click="acquireVerification">
     </div>
</el-form-item>

data-return内容

img:'',
formLogin: {
  username: "",
  password: "",
  code: "",
  checkCode:"",
  uuid:""
},

methods内容

 // 登录验证码
acquireVerification () {
     req.post("/accountLogin/sendCaptcha",{responseType: 'blob'}).then((res) => {
         console.log("res",res)
         // this.img = window.URL.createObjectURL(res.t)
         this.img =res.t.img;
         this.formLogin.uuid = res.t.uuid;
     });
}