vue+element 获取验证码
我们在做一个项目,登录注册页面是少不了的,为了人机校验,验证码也是必须的
我的这个项目获取验证码,前端发送一个随机四位数给后端,后端返回一张图片,前端渲染就可以

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
);
}
vue+element 获取验证码的更多相关文章
- Vue 获取验证码倒计时组件
子组件 <template> <a class="getvalidate":class="{gray: (!stop)}"@click='cl ...
- Vue. 之 Element获取table中选中的行
Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...
- 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...
- 23、vue实现获取短信验证码
1.html页面: <el-form-item prop="phoneCode" class="pr"> <el-input placehol ...
- vue 项目,获取手机验证码和图形验证码(iviewUI框架)
1.编辑获取验证码模块 <Form ref="phoneFormItem" :model="phoneFormItem" :label-width=&qu ...
- 前端学习——ionic/AngularJs——获取验证码倒计时按钮
按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p= ...
- Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...
- 前端小菜鸡使用Vue+Element笔记(一)
关于使用Vue+Element的项目简介~ 最近因为项目组缺前端人员,所以自己现学现做页面,先把前后台功能调通 觉得前端可真的是不容易呀哎呀~ 首先记录一下相关的Vue入门的教程: vue环境搭建示例 ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
随机推荐
- Android Adapter中获得LayoutInflater
LayoutInflater li =(LayoutInflater)MyContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
- 03-cmake语法-变量,字符串
CMake的基本数据类型是字符串(不区分大小写),一组字符串在一起称为列表(list). 条件判断中的取值情况如下表: 真 1, ON, YES, TRUE, Y, 非0的数 假 0, OFF, N ...
- Lambda 表达式应用 权限管理_用户的角色修改
Lambda 表达式应用 权限管理_用户的角色修改 需求 前台发送用户新的角色列表,后台查询出用户原有的角色列表. 1.获取出需增加的角色列表 => 在新角色列表中,但是不在原角色列表中的角色 ...
- NLP之预训练
内容是结合:https://zhuanlan.zhihu.com/p/49271699 可以直接看原文 预训练一般要从图像处理领域说起:可以先用某个训练集合比如训练集合A或者训练集合B对这个网络进行预 ...
- 8.19 NOIP模拟测试26(B) 嚎叫响彻在贪婪的厂房+主仆见证了 Hobo 的离别+征途堆积出友情的永恒
T1 嚎叫响彻在贪婪的厂房 以前做过一个等比数列的题「序列」,这个类似 是等差数列且公差不为1的条件就是各项差的绝对值的$gcd!=1$,每次拿出序列前两个数,求出差值,插入到set里,每次向后扩展, ...
- mysql 字段修改汇总
-- 增加 ALTER TABLE `gdm_nursing_patient` ADD COLUMN `due_date` date DEFAULT NULL COMMENT '名称' AFTER ...
- intellij idea安装教程
1. 双击ideaIU-12.1.1.exe,点击下一步,安装目录改为d:\Program Files\JetBrains\IntelliJ IDEA,其他项都默认即可(此处更改目录方便重做系统,不用 ...
- java-int数据的溢出
数据的溢出: 当整数的数据大小超出了可以表示的范围,而程序中又没有做数值范围的检查时, 这个整型变量所输出的值将发生紊乱,且不是预期的运行结果. 01 // 整数值如果超出了自己所可以表示范围的最大 ...
- git取消【删除】已经提交的文件(夹)跟踪
git rm -r --cached <fold> 不删除本地文件 git rm -r --f <fold> 删除本地文件 git rm --cached <file&g ...
- 2 datax mysql 和 mysql之间相互导入
插件文档: https://github.com/alibaba/DataX/blob/master/hdfswriter/doc/hdfswriter.md 1,参照第1篇日记,安装好datax ...