Vue3Router+Pinia前后端实现随机验证码方案

@GetMapping("/verifyCode")
public void getVerifyCode(HttpServletResponse response) throws Exception {
    response.setContentType("image/png");
    response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate, max-age=0");
    response.setHeader("Pragma", "no-cache");
    response.setDateHeader("Expires", 0);

    try (OutputStream os = response.getOutputStream()) {
        String verifyCode = CheckCodeUtil.outputVerifyImage(200, 80, os, 4);
    }
}

前端（Vue 3 + Vue Router + Pinia）
使用 <img> 标签
在 Vue 组件中使用 <img> 标签来显示验证码图片，并添加点击事件以刷新验证码。

<template>
  <div>
    <img :src="verifyCodeUrl" alt="验证码" @click="refreshVerifyCode" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const verifyCodeUrl = ref('/api/user/verifyCode?' + new Date().getTime());

function refreshVerifyCode() {
  verifyCodeUrl.value = '/api/user/verifyCode?' + new Date().getTime();
}
</script>

使用Axios请求
如果你需要更灵活地处理验证码（例如动态更新），可以使用 Axios 请求获取验证码图片，并将其设置为 <img> 标签的 src 属性

<template>
  <div>
    <img :src="verifyCodeUrl" alt="验证码" @click="refreshVerifyCode" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const verifyCodeUrl = ref('/user/verifyCode?' + new Date().getTime());

async function refreshVerifyCode() {
  const timestamp = new Date().getTime();
  const response = await axios.get(`/user/verifyCode?timestamp=${timestamp}`, {
    responseType: 'blob'
  });
  const url = URL.createObjectURL(response.data);
  verifyCodeUrl.value = url;
}
</script>

<template>
  <div>
    <img :src="verifyCodeUrl" alt="验证码" @click="refreshVerifyCode" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const verifyCodeUrl = ref('/api/user/verifyCode?' + new Date().getTime());

function refreshVerifyCode() {
  verifyCodeUrl.value = '/api/user/verifyCode?' + new Date().getTime();
}
</script>

在 MyBatis 中，resultMap 和 resultType 是用于映射查询结果的两种不同方式。它们有各自的特点和使用场景：
resultMap
作为属性：
可以在 <select>、<insert>、<update> 和 <delete> 标签中作为属性使用，指定自定义的结果映射。
作为标签：
可以直接定义为一个独立的标签，用于创建复杂的结果映射规则。通过这种方式可以更灵活地处理复杂的字段映射、关联查询等。

resultType
只能作为属性：
resultType 只能作为 <select> 标签的属性使用，用于指定查询结果映射到的 Java 类型或基本类型。它不能作为一个独立的标签来定义。