vue动态图片验证码

1、效果展示
在这里插入图片描述
2、图片验证是一种常见的登录验证，可以前端自己写，也可以后端给接口，一般来说都是后端会提供接口，我这里写的也是后端提供接口写的，具体往下看，首先图片验证码肯定需要放在image标签里面（我这用的element UI）
verifyUrl：这个是图片验证码展示的地址(后端会给你提供)
sendImageCode：这个方法是每次点击图片的时候进行切换

<el-image class="send-code" @click="sendImageCode" :src="verifyUrl"></el-image>

3、script里面的内容

import {
    
     verifyImageCode } from '@/api/auth'
//  所用到的参数
data() {
    
    
    return {
    
    
    	// 登录表单
        ruleForm: {
    
    
          password: '',  // 密码
          accountNumber: '',  // 账号
          sessionId: '',  // 图片验证码生成规则
          verifyCode: '',  // 用户输入的图片验证码
        },
		// 图片验证码地址
      	verifyUrl: '',
	}
}
created(){
    
    
    this.randomVerifyCode() // 首次进入页面调用这个方法，生成图片
},
methods: {
    
    
    // 随机生成图片验证码
    randomVerifyCode(){
    
    
        let dateVal = new Date().getTime() // 生成规则，后端会告诉你
        this.ruleForm.sessionId = dateVal  //  赋值给表单，登录时要用到
        this.verifyUrl = verifyImageCode + `?sessionId=${
      
      dateVal}`  // verifyImageCode 这个就是地址https://xxxx.com，后面参数就是生成规则
    },
    //  点击图片切换验证码
    sendImageCode(){
    
    
		this.randomVerifyCode()  //  重新调用这个方法就行
	}
 }

4、图片地址怕有些人没搞懂，其实就是后端提供接口，我这边给你们看看
process.env.VUE_APP_LOGIN_URL ：这个就是域名
API_URL.VERIFY_IMAGE_CODE：这个是路径

// 图片验证码
export const verifyImageCode = process.env.VUE_APP_LOGIN_URL + API_URL.VERIFY_IMAGE_CODE

vue动态图片验证码

猜你喜欢