vue+element 获取验证码
2024-09-06 12:17:22
我们在做一个项目,登录注册页面是少不了的,为了人机校验,验证码也是必须的
我的这个项目获取验证码,前端发送一个随机四位数给后端,后端返回一张图片,前端渲染就可以
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
);
}
最新文章
- Java Web ——http协议响应报文
- SQL Server数据库性能优化之SQL语句篇【转】
- Xcode LLDB Debug教程
- emmet中文文档 (转载)
- MySQL:创建、修改和删除表
- Linux操作系统下软件的安装方法大全
- HW5.21
- GOTO (Transact-SQL)
- linux 分区
- (转)解决JSP路径问题的方法(jsp文件开头path, basePath作用)
- JAVA FILE or I/O学习 - I/O流操作:FileInputStream、FileOutputStream、ObjectInputStream、ObjectOutputStream、InputStreamReader、OutputStreamWriter等
- HDU 4081-Parsing URL(水)
- eQTL
- Java读取ini配置
- pip包导出
- Eclipse格式化整个项目
- (转载)WinRAR离购买许可只剩x天
- linux用户键拷贝文件
- 4-16 css
- JavaScript 系列博客(三)