700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue 通过接口实现前端登录页验证码功能

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

时间:2019-01-08 11:31:54

相关推荐

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

记录个人学习使用

页面样式:

接口返回数据:

此处的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;});}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。