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

最新推荐文章于 2023-11-15 17:37:39 发布

原创

最新推荐文章于 2023-11-15 17:37:39 发布 · 622 阅读

0 ·

CC 4.0 BY-SA版权

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

当进入页面时就应该显示图片验证码，当点击验证码图片时，验证码图片会局部刷新，这里图片的 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: function() {
      // 将uuid值生成后 拼接到图片的src属性部分
      this.image_code_uuid = this.generate_uuid();
      this.image_

最低0.47元/天解锁文章