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

8 篇文章 0 订阅
7 篇文章 0 订阅

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<String, Object> 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<String, Object> 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<String, Object> 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(); // 页面加载后获取验证码图片

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

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

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

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现VueSpring Boot验证码登录,需要以下步骤: 1. 在Vue中创建一个登录页面,包括用户名、密码和验证码输入框,以及一个登录按钮。 2. 在Vue中使用axios或其他HTTP库向后端发送登录请求,包括用户名、密码和验证码。 3. 在Spring Boot中创建一个控制器,用于处理登录请求。在控制器中,可以使用Spring Security提供的AuthenticationManager来验证用户名和密码是否正确,并使用自定义的验证码验证器来验证验证码是否正确。 4. 如果用户名、密码和验证码都正确,则在后端生成一个JWT令牌,并将令牌返回给前端。 5. 在Vue中,如果收到登录成功的响应,则将JWT令牌保存在本地存储中,并将用户重定向到主页。 以下是一个简单的示例: Vue代码: ``` <template> <div> <h1>登录</h1> <form> <label>用户名</label> <input type="text" v-model="username"><br> <label>密码</label> <input type="password" v-model="password"><br> <label>验证码</label> <input type="text" v-model="captcha"><br> <img :src="captchaUrl" @click="refreshCaptcha"><br> <button type="button" @click="login">登录</button> </form> </div> </template> <script> import axios from 'axios'; export default { data() { return { username: '', password: '', captcha: '', captchaUrl: '', }; }, methods: { login() { axios.post('/api/login', { username: this.username, password: this.password, captcha: this.captcha, }).then(response => { localStorage.setItem('token', response.data.token); this.$router.push('/home'); }).catch(error => { alert(error.response.data.message); }); }, refreshCaptcha() { this.captchaUrl = '/api/captcha?' + Math.random(); }, }, mounted() { this.refreshCaptcha(); }, }; </script> ``` Spring Boot代码: ``` @RestController @RequestMapping("/api") public class LoginController { @Autowired private AuthenticationManager authenticationManager; @Autowired private JwtTokenUtil jwtTokenUtil; @Autowired private CaptchaValidator captchaValidator; @PostMapping("/login") public ResponseEntity<?> login(@RequestBody LoginRequest request) { try { // 验证验证码 captchaValidator.validate(request.getCaptcha()); // 验证用户名和密码 UsernamePasswordAuthenticationToken token = new UsernamePasswordAuthenticationToken( request.getUsername(), request.getPassword()); Authentication authentication = authenticationManager.authenticate(token); // 生成JWT令牌 String jwtToken = jwtTokenUtil.generateToken(authentication); return ResponseEntity.ok(new LoginResponse(jwtToken)); } catch (AuthenticationException | CaptchaException e) { return ResponseEntity.badRequest().body(new ErrorResponse(e.getMessage())); } } @GetMapping("/captcha") public void getCaptcha(HttpServletRequest request, HttpServletResponse response) throws IOException { // 生成验证码图片并返回 Captcha captcha = captchaValidator.generateCaptcha(); String captchaId = captcha.getId(); BufferedImage image = captcha.getImage(); response.setHeader("Cache-Control", "no-cache, no-store"); response.setContentType("image/jpeg"); ImageIO.write(image, "jpeg", response.getOutputStream()); // 将验证码ID保存在Session中 HttpSession session = request.getSession(true); session.setAttribute("captchaId", captchaId); } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值