点击图片（验证码）重新加载

情景

我在设计一个功能，点击验证码，就切换一下

演示

思路

• 首先这个请求验证码图片的链接是固定的
• 很重要的一点：浏览器会把 src、href 等不变的链接缓存起来，下次请求服务器的时候会检查要请求的链接是否在缓存中，如果存在则不向服务器发送请求了。（最常见的比如图形验证码）
• 根据这个特点，我们可以再链接后面设法加一个随机数，让这个链接每次都是唯一的，这样子浏览器即使缓存了上一个链接，也没办法从缓存中找到一样的链接，所以每次点击更换验证码都会想服务器发起新的请求，从而实现刷新。
  浏览器读取页面，css背景图和img图片都会下载到本地缓存文件夹，css背景图和img图片在网页中都可以重复使用。

附加

• 后台不会保存很多验证码的，只有一个是有效的，也就是说原先的是覆盖掉了的（当然这只是设计模式，也可以改嘛，看业务的需求，我当时天真的以为后台的验证码是有时效性的，以为几分钟会后台自动失效）

代码

我用的是 mpvue

<template>
	<img
       :src="codeImgUrl"
       alt="加载失败"
       @click="changeCodeImgUrl"
   />
</template>
export default {
    data() {
        return {
            codeImgUrl:`https://xxxxx.com?${Math.random()*1000}`
        };
    },
    methods: {
        // 点击二维码，重新加载
        // 主要还是本地缓存，在连接后面加上个随机数
        changeCodeImgUrl(){
            this.codeImgUrl = `https://xxxxx.com?${Math.random()*1000}`
        },
    },
    onLoad() {},
};