SpringBoot项目返回图片验证码

springboot项目验证码返回

在 Spring Boot 中实现图片验证码用于登录功能可以通过以下步骤完成：

1. 生成验证码图片和验证码文本：

在请求验证码图片的时候，生成验证码图片并将验证码文本存储在会话中。你可以创建一个控制器来处理生成验证码图片的请求：

import com.google.code.kaptcha.Producer;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;

@Controller
public class CaptchaController {

    private final Producer captchaProducer;

    public CaptchaController(Producer captchaProducer) {
        this.captchaProducer = captchaProducer;
    }

    @GetMapping("/captcha")
    public void getCaptcha(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 生成验证码文本
        String captchaText = captchaProducer.createText();
        // 存储验证码文本到会话中，以便稍后验证
        request.getSession().setAttribute("captcha", captchaText);

        // 生成验证码图片
        BufferedImage captchaImage = captchaProducer.createImage(captchaText);

        // 将验证码图片输出到响应
        response.setContentType("image/png");
        ImageIO.write(captchaImage, "png", response.getOutputStream());
    }
}

2. 验证验证码：

在用户提交登录请求时，从会话中获取之前存储的验证码文本，并与用户输入的验证码进行比较。

import org.springframework.util.StringUtils;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

public class CaptchaValidator {

    public static boolean validateCaptcha(HttpServletRequest request, String userInputCaptcha) {
        // 获取会话中存储的验证码文本
        HttpSession session = request.getSession();
        String storedCaptcha = (String) session.getAttribute("captcha");

        // 进行验证码比较
        return StringUtils.hasText(userInputCaptcha) && StringUtils.hasText(storedCaptcha) &&
               userInputCaptcha.equals(storedCaptcha);
    }
}

3. 在登录控制器中使用验证码验证：

在你的登录控制器中使用 CaptchaValidator 类来验证用户输入的验证码：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

import javax.servlet.http.HttpServletRequest;

@Controller
public class LoginController {

    @GetMapping("/login")
    public String showLoginPage() {
        return "login"; // 返回登录页面模板
    }

    @PostMapping("/login")
    public String performLogin(HttpServletRequest request, 
                               @RequestParam String username, 
                               @RequestParam String password,
                               @RequestParam String captcha) {
        // 验证验证码
        boolean captchaValid = CaptchaValidator.validateCaptcha(request, captcha);
        if (!captchaValid) {
            // 验证码不匹配
            // 可以在此处返回错误信息或者重定向到登录页面
        }

        // 执行登录逻辑
        // ...

        return "redirect:/home"; // 登录成功后跳转到主页
    }
}

在调用api获取图片的时候一定要加http:// 不然就无法加载出来

刷新验证码

当使用 Vue 来实现刷新验证码功能时，您可以按照以下步骤进行操作：

1. 在 Vue 组件中设置一个变量来存储验证码图片的 URL。
2. 在点击事件中更新该变量的值，从而更新验证码图片的 URL，实现刷新效果。

下面是一个使用 Vue 的示例代码：

<template>
  <div>
    <h1>验证码示例</h1>
    <p>请点击验证码图片刷新</p>
    <img :src="captchaImageUrl" alt="Captcha Image" @click="refreshCaptcha">
    <input type="text" v-model="userInputCaptcha" placeholder="请输入验证码">
    <button @click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      captchaImageUrl: "/captcha", // 初始验证码图片 URL
      userInputCaptcha: ""
    };
  },
  methods: {
    refreshCaptcha() {
      // 更新验证码图片 URL，添加时间戳以刷新图片
      this.captchaImageUrl = "/captcha?" + new Date().getTime();
      this.userInputCaptcha = ""; // 清空验证码输入框
    },
    submitForm() {
      // 使用 this.userInputCaptcha 来获取用户输入的验证码
      // 执行后续提交逻辑
      // ...
    }
  }
};
</script>

在这个 Vue 组件中，点击验证码图片会触发 refreshCaptcha 方法，该方法会更新 captchaImageUrl 变量的值，从而实现验证码图片的刷新。同时，它还会清空用户输入的验证码。

请根据您的项目结构和需求进行适当的调整。这个示例演示了在 Vue 中刷新验证码的基本方法，您可以根据实际情况进行进一步的优化和定制。