vue+springboot的登录图片验证码（前端对接报错）

tip:这个只是一个效果实际要运用，还是需要改改滴！

后台Java自带的 

本来我是打算用第三方库的，没有整出来，就跟沈某人说不会来着，他说最好用Java自带的，

不然换个系统第三方的就不能用了，大概就是什么写在系统里面的，具体我也不太清楚，

不过后期有时间，我也会在研究一下这个第三方库，试一下写个笔记

CodeUtils

package com.example.utils;
 
import java.awt.*;
import java.awt.image.BufferedImage;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;
 
public class CodeUtils {
    public static Map generateRandomCode() {
        int width = 120;
        int height = 40;
 
        // 创建一个宽度为120，高度为40的RGB类型的BufferedImage对象
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics g = image.getGraphics();
 
        Random random = new Random();
 
        // 设置背景色，使用随机颜色
        g.setColor(new Color(random.nextFloat(), random.nextFloat(), random.nextFloat()));
        g.fillRect(0, 0, width, height);
 
        // 绘制黑色边框
        g.setColor(Color.BLACK);
        g.drawRect(0, 0, width - 1, height - 1);
 
        // 设置字体样式
        Font font = new Font("Times New Roman", Font.BOLD, 20);
        g.setFont(font);
 
        StringBuilder captchaText = new StringBuilder();
        String chars = "0123456789";
        for (int i = 0; i < 4; i++) {
            int index = random.nextInt(chars.length());
            char randomChar = chars.charAt(index);
            captchaText.append(randomChar);
            // 使用随机颜色绘制验证码文本
            g.setColor(new Color(random.nextFloat(), random.nextFloat(), random.nextFloat()));
            g.drawString(String.valueOf(randomChar), 20 * i + 10, 25);
        }
        Map result = new HashMap<>();
        result.put("image", image);
        result.put("text", captchaText.toString());
 
        g.dispose(); // 释放绘图资源
 
        return result; // 返回生成的验证码图片
    }
}

CaptureController

package com.example.controller;
 
import com.example.utils.CodeUtils;
import lombok.SneakyThrows;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.util.Map;
 
@RestController
@RequestMapping("/")
public class CaptureController {
 
 
    @SneakyThrows
    @GetMapping("/captcha")
    public String getCaptcha(HttpServletResponse response) {
        Map map = CodeUtils.generateRandomCode();
        response.setContentType("image/png");
        ImageIO.write((BufferedImage)map.get("image"), "png", response.getOutputStream());
        return String.valueOf(map.get("text"));
    }
}

前端vue

前端问题1

只有  localhost:9090/captcha   这个路径显示

 我在前端的路径不显示

 现在想办法将后台路径改成170.0.0.1

---

如何将后端Java传来的接口转换为HTTP请求，以便在前端显示。

后端接口：http://localhost:9090/captcha

前端接口：http://127.0.0.1:5174/captcha

我是一个大憨批，那个    /     代表的  http://127.0.0.1:5174

粗心得不得了，在下面的图片路径前增加了一个    /    所以导致验证码图片一直加载不出来

我感觉这应该是一个跨域请求之类的，用get、post... ...

 

 前端代码

// 定义响应式数据
const form = ref({
  captcha: ''
});
 
// 获取验证码图片的URL，假设后端接口为 /captcha
const captchaUrl = ref('');
 
// 点击验证码图片刷新验证码
const refreshCaptcha = () => {
  // 从后端获取新的验证码图片URL
  fetchCaptchaImage();
};
 
// 从后端获取验证码图片的方法
const fetchCaptchaImage = () => {
  fetch('http://localhost:9090/captcha')
      .then(response => response.blob())
      .then(blob => {
        captchaUrl.value = URL.createObjectURL(blob);
      })
      .catch(error => {
        console.error('Error fetching captcha image', error);
      });
};
 
fetchCaptchaImage(); // 页面加载后获取验证码图片

---

 这只是大概实现了表面的功能，

应该还需要写一个逻辑使输入的验证码和图片的验证码相匹配，

且登录逻辑里面需要加一个验证码的判断。