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

Posted 2021-03-04 yanl55555

验证码登录的实现思路
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
            }