vue 美多商城图片验证码生成

本文介绍了在Vue中如何实现美多商城图片验证码的显示与点击刷新功能。利用v-bind绑定图片src属性,结合UUID作为唯一key存入memcache缓存。进入页面时,钩子函数生成UUID并更新图片路径。点击验证码时,通过调用生成UUID的函数实现图片局部刷新。后台设置生成验证码的函数,并提供接口,接收UUID参数,根据UUID返回新的验证码图片,达到前端实时更新验证码的效果。
摘要由CSDN通过智能技术生成

当进入页面时就应该显示图片验证码,当点击验证码图片时,验证码图片会局部刷新,这里图片的 src属性是个后台接口
首先 v-bind 绑定一个图片 scr属性

# src 走的是 get 请求
<img :src="image_code_url" @click="generate_image_code" alt="图形验证码" class="pic_code">

在这里插入图片描述
涉及到每次点击验证码图片会更新,验证码图片存memcache缓存需要唯一的key,这里用一个fun生成了uuid通过路由传参作为key验证码作value入缓存
在这里插入图片描述
进来页面先执行钩子函数,钩子函数里直接调用了生成uuid函数将uuid变量和 图片验证码scr 路径重新赋值

 mounted() {
    // 钩子函数
    this.generate_image_code();
  },

在这里插入图片描述
图片验证码点击方法

generate_image_code: func
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值