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 ...
随机推荐
- Dmidecode命令
Dmidecode简介 DMI (Desktop Management Interface, DMI)就是帮助收集电脑系统信息的管理系统,DMI信息的收集必须在严格遵照SMBIOS规范的前提下进行. ...
- koa中的路由
原生路由 网站一般都有多个页面.通过ctx.request.path可以获取用户请求的路径,由此实现简单的路由. const main = ctx => { if (ctx.request.pa ...
- 洛谷1439:最长公共子序列(nlogn做法)
洛谷1439:最长公共子序列(nlogn做法) 题目描述: 给定两个序列求最长公共子序列. 这两个序列一定是\(1\)~\(n\)的全排列. 数据范围: \(1\leq n\leq 10^5\) 思路 ...
- testcontainers 方便的db测试框架
testcontainers是一个强大,简单,基于容器的db测试解决方案 目前已经支持了主流的开发语言 参考资料 https://github.com/testcontainers/testconta ...
- Codeforces Global Round 2 D 差分 + 前缀和 + 二分
https://codeforces.com/contest/1119/problem/D 题意 有n个数组,每个数组大小为\(10^{18}+1\)且为等差数列,给出n个数组的\(s[i]\),q次 ...
- Linux性能优化实战学习笔记:第十八讲
一.内存的分配和回收 1.管理内存的过程中,也很容易发生各种各样的“事故”, 对应用程序来说,动态内存的分配和回收,是既核心又复杂的一的一个逻辑功能模块.管理内存的过程中,也很容易发生各种各样的“事故 ...
- centos6服务启动脚本及开机启动过程
centos6服务启动脚本 centos6的服务启动脚本都放在/etc/rc.d/init.d/下,/etc/init.d/是/etc/rc.d/init.d/的软链接: centos6的服务启动脚本 ...
- 关于ProxmoxVE
1) PVE简介 PVE是Proxmox Virtual Environment(Proxmox虚拟化环境,也通常简称为Proxmox VE)的简称,它是基于QEMU/KVM和LXC的开源服务器虚拟化 ...
- 国家虚拟仿真实验教学项目共享平台(实验空间)PHP SDK
使用XJWT标准,此标准基于JSON Web Token (JWT)开发.XJWT包含三个参数:header, payload, signature,因此生成token就要先获得这三个参数. clas ...
- 使用maven-resources-plugin插件分环境配置
一.项目目录结构 二.pom文件中引入maven-resources-plugin插件和相关的标签 <build> <plugins> <plugin> &l ...