码迷,mamicode.com
首页 > 其他好文 > 详细

vue 从后端拿到验证码并点击刷新

时间:2020-03-22 11:11:08      阅读:351      评论:0      收藏:0      [点我收藏+]

标签:点击   temp   click   ret   apt   生成   trigger   input   get   

验证码登录的实现思路
1.前端从后端拿到验证码图片
2.输入验证码进行登录
3.后端拿到验证码进行比对,正确登录成功。

前端请求验证码直接写在img标签中即可,不必单独发送axios请求

           // template
           <a-input
              style="width:60%"
              size="large"
              type="text"
              placeholder="验证码: "
              v-decorator="[
                ‘verification‘,
                {rules: [{ required: true, message: ‘请输入验证码‘ }], validateTrigger: ‘change‘}
              ]"
            >
              <a-icon slot="picture" type="user" :style="{ color: ‘rgba(0,0,0,.25)‘ }"/>
            </a-input>
            <img style="float:right;height:40px" @click="replace" :src="imgCode" >

            //js
            data () {
               retrun {
                 imgCode: ‘http://192.168.1.119:8000/cms/getCaptcha‘
               }
            }
            replace () {
              const num = Math.ceil(Math.random() * 10) // 生成一个随机数(防止缓存)
              this.imgCode = ‘http://192.168.1.119:8000/cms/getCaptcha?‘ + num
            }

 

vue 从后端拿到验证码并点击刷新

标签:点击   temp   click   ret   apt   生成   trigger   input   get   

原文地址:https://www.cnblogs.com/yanl55555/p/12544267.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!