关于获取验证码 vue+element

男娘i 2023-05-22 05:59 7阅读 0赞

先看效果图吧~  
![验证码获取][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEyODU3NQ_size_16_color_FFFFFF_t_70]

一步一步解析吧。

1、样式以及dom （校验我就不写了但是我会给加校验的方式）

<el-form-item label="验证码" prop="check">
                <el-input type="text"
                          clearable
                          style=" width: 55%;"
                          v-model="loginForm.check"
                          placeholder="请输入验证码">
                </el-input>
                <div style="width:100px;height:42px;float: right;margin-right: 30px" @click="refreshCode">
                  <img :src="getVerfyCode" style="width:100px;height:35px;cursor: pointer">
                </div>
              </el-form-item>

这里img显示的图片是后台给的blob格式

首先，在created中 先存一下验证码的规则。时间戳加随机数 根据需求修改

export default { 
        name: 'Login',
        data () { 
          return { 
            loginForm: { },
            getVerfyCode: '',
            key: '',
            //校验方式
            loginRules: { 
              username: [
                {  required: true, trigger: 'blur', validator: validateUsername }],
              password: [
                {  required: true, trigger: 'blur', validator: validatePassword }],
              check: [
                {  required: true, message: '请输入4位验证码！', trigger: 'blur', },
                {  min: 4, max: 4, message: '长度为4个字符！', trigger: 'blur' }]
            },
            uuidKey:''
          }
        },
        created () { 
          this.$cookieStore.setCookie('checkKey', this.generateUUID())//生成uuid存储一下
          this.getCode() //获取验证码
          this.$cookieStore.delCookie('token') // 清除cookie
          this.$cookieStore.delCookie('workType')
          this.$cookieStore.delCookie('username')
    
        },
        methods: { 
          handleLogin () { 
          //登陆校验
            this.$refs.loginForm.validate(valid => { 
              if (valid) { 
                this.$store.dispatch("Login", this.loginForm)
                  .then(r => { 
                    if (r.success) { 
                      this.$router.push("/edu/home");
                    } else { 
                      this.$message({ 
                        message: r.message,
                        type: 'warning'
                      });
                    }
                  })
                  .catch(r => { 
                    console.log(r)
                  });
              } else { 
                return false
              }
            })
          },
          //注册
          registerUser () { 
            this.$router.push({  path: '/register' })
          },
          generateUUID () { 
            let d = new Date().getTime()
            let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { 
              let r = (d + Math.random() * 16) % 16 | 0
              d = Math.floor(d / 16)
              return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16)
            })
            return uuid
          },
          getCode () { 
            this.key = this.$cookieStore.getCookie('checkKey')
            this.loginForm.key = this.key
            console.log(this.key);
            //在这里调用接口获取后台给的url 调用接口的时候 需要自己加参数 当然，传参不只这一种方式（调用接口方法每个人估计不一样 一定要换）
            this.$axios({ 
              method: 'get',
              url: '/auth/getCode?key=' + this.key + '&' + new Date().getTime(),
              responseType: 'blob'
            }).then(res => { 
              const content = res.data
              const blob = new Blob([content])
              let url = window.URL.createObjectURL(blob)
              //赋值给我们要渲染的地方
              this.getVerfyCode = url
            })
              .catch(function (error) { 
                console.log(error)
              })
          },
          //点击图片的时候更换验证码
          refreshCode () { 
            this.getCode()
          },
        }
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEyODU3NQ_size_16_color_FFFFFF_t_70]: /images/20230521/900c4f126a0741aaa0fd83043c59b340.png