SpringBoot+Vue3实现登录验证码功能教程

前言

登录页面，输入用户名和密码进行验证，这对各位开发者来说早已是家常便饭。但说到那个需要用户手动填写、甚至时不时需要“看不清？换一张”的图片验证码，不少朋友在实现时可能会犯嘀咕：这随机生成的图片，到底该怎么弄？

今天，我们就来重点拆解这个功能：如何在后端生成验证码图片，如何在前端展示并实现点击刷新的效果。目标就是实现下面这样的验证码：

一、导入生成验证码工具类

工欲善其事，必先利其器。首先，我们需要一个核心的工具类来负责生成验证码图片。下面的代码就是一个功能完整的验证码生成器，其中的宽度、高度、字体库、字符集、背景色等参数都已清晰注释，你可以根据自己项目的UI风格灵活调整，比如改变干扰线的数量或者背景颜色。

package com.medical.study.utils;

import ja vax.imageio.ImageIO;
import ja va.awt.*;
import ja va.awt.image.BufferedImage;
import ja va.io.FileNotFoundException;
import ja va.io.IOException;
import ja va.io.OutputStream;
import ja va.util.Random;

public class VerifyCode {
    //宽和高
    private int w = 85;
    private int h = 40;

    private Random r = new Random();
    // 定义有那些字体
    private String[] fontNames = { "宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312" };
    // 定义有那些验证码的随机字符
    private String codes = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ";
    // 生成背景色
    private Color bgColor = new Color(0, 255, 255);
    // 用于gettext 方法 获得生成的验证码文本
    private String text;

    // 生成随机颜色
    private Color randomColor() {
        int red = r.nextInt(255);
        int green = r.nextInt(255);
        int blue = r.nextInt(255);
        return new Color(red, green, blue);
    }

    // 生成随机字体
    private Font randomFont() {
        int index = r.nextInt(fontNames.length);
        String fontName = fontNames[index];
        int style = r.nextInt(4);
        int size = r.nextInt(5) + 24;

        return new Font(fontName, style, size);
    }

    // 画干扰线
    private void drawLine(BufferedImage image) {
        int num = 3;
        Graphics2D g2 = (Graphics2D) image.getGraphics();

        for (int i = 0; i < num; i++) {
            int x1 = r.nextInt(w);
            int y1 = r.nextInt(h);
            int x2 = r.nextInt(w);
            int y2 = r.nextInt(h);
            g2.setStroke(new BasicStroke(1.5F));// 不知道
            g2.setColor(Color.white);
            g2.drawLine(x1, y1, x2, y2);
        }
    }

    // 得到codes的长度内的随机数 并使用charAt 取得随机数位置上的codes中的字符
    private char randomChar() {
        int index = r.nextInt(codes.length());
        return codes.charAt(index);
    }

    // 创建一张验证码的图片
    public BufferedImage createImage() {
        BufferedImage image = new BufferedImage(w, h,
                BufferedImage.TYPE_INT_RGB);
        Graphics2D g2 = (Graphics2D) image.getGraphics();
        StringBuilder sb = new StringBuilder();
        // 向图中画四个字符
        for (int i = 0; i < 4; i++) {
            String s = randomChar() + "";
            sb.append(s);
            float x = i * 1.0F * w / 4;
            g2.setFont(randomFont());
            g2.setColor(randomColor());
            g2.drawString(s, x, h - 5);

        }
        this.text = sb.toString();
        drawLine(image);


        // 返回图片
        return image;

    }

    // 得到验证码的文本 后面是用来和用户输入的验证码 检测用
    public String getText() {
        return text;
    }

    // 定义输出的对象和输出的方向
    public static void output(BufferedImage bi, OutputStream fos)
            throws FileNotFoundException, IOException {
        ImageIO.write(bi, "JPEG", fos);
    }

}

二、编写Controller生成验证码的接口

工具类准备好了，接下来就需要一个接口把它“暴露”出去。这里我们定义一个简单的Controller。

1. 接口路径示例：localhost:8081/code/verify。

2. 生成验证码后，需要将验证码文本保存起来，以便后续登录时校验。这里选择存入Redis，并设置1分钟有效期。当然，你也可以根据项目情况选择存入Session或其他存储介质，核心是能在验证时取到值。

3. 注意代码中的@CrossOrigin注解，这是为了解决前端（假设运行在8080端口）访问后端（8081端口）时的跨域问题。

具体代码如下：

package com.medical.study.controller;

import com.medical.study.utils.VerifyCode;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import ja vax.imageio.ImageIO;
import ja vax.servlet.http.HttpServletRequest;
import ja vax.servlet.http.HttpServletResponse;
import ja va.awt.image.BufferedImage;
import ja va.io.IOException;
import ja va.util.concurrent.TimeUnit;

/**
 * 随机4位数的验证码
 */

@RestController
@CrossOrigin
@RequestMapping("/code")
public class VerifyController {

    @Autowired
    private RedisTemplate redisTemplate;

    @RequestMapping("/verify")
    public void Verify(HttpServletRequest request, HttpServletResponse response) throws IOException {
                VerifyCode code = new VerifyCode();
        BufferedImage image = code.createImage();

        //验证码
        System.err.println(code.getText());

        //保存验证码到Redis,一分钟有效期
        redisTemplate.opsForValue().set("verify:"+code.getText(),code.getText(),1L, TimeUnit.MINUTES);

        //验证码图片格式
        ImageIO.write(image,"jpg",response.getOutputStream());


    }


}

三、前端代码编写

3.1 img标签

后端接口就绪，前端的工作就清晰了。首先，在页面上放置一个img标签。

1. 绑定@click事件，实现点击图片更换验证码的功能。

2. 使用v-model（或:src）动态绑定图片的src属性，使其指向我们的后端接口。

3.2 vue代码

在Vue的脚本部分，我们需要做两件事：

1. 定义一个响应式变量verifySrc，其初始值就是后端验证码接口的地址。

2. 实现changeVerify方法，当用户点击图片时，触发这个方法。关键在于，每次调用都要让浏览器去请求新的图片，而不是读取缓存。

这里就引出一个常见问题：为什么要在请求地址后追加一个时间戳参数（如new Date().getTime()）？

原因在于浏览器的缓存机制。对于相同的URL，浏览器可能会直接返回缓存的图片，导致点击刷新后图片不变。通过在URL后添加一个时刻变化的时间戳参数，每次请求的URL就变得唯一，从而成功绕过缓存，强制浏览器向服务器发起新的请求，获取一张全新的验证码图片。

//验证码
	const verifySrc=ref("http://localhost:8081/code/verify");
	function changeVerify(){
		verifySrc.value="http://localhost:8081/code/verify?"+new Date().getTime()
		
	}

四、效果图

至此，一个具备点击刷新功能的验证码组件就完成了。点击图片即可更换验证码，具体动态效果这里就不演示了，大家动手尝试后便能直观感受到。静态效果如下图所示：

五、补充后端验证

生成和展示只是前半部分，验证环节同样重要。当用户提交登录表单时，需要将用户输入的验证码一同提交到后端。

1. 在登录接口（例如/login）中，首先从存储（这里是Redis）里取出之前生成的验证码文本。

2. 将其与用户提交的验证码进行比对：

• 如果不一致，直接返回“验证码输入错误”等提示信息，登录流程终止。
• 如果一致，则继续执行后续的账号密码验证逻辑，查询数据库核对用户身份。

这部分的代码逻辑和传统的登录验证无异，相信大家能够轻松完成，这里就不再赘述。

总结

从后端利用Ja va AWT生成随机验证码图片，到通过SpringBoot接口提供图片流，再到前端Vue3组件接收、展示并实现点击刷新，我们完整地走通了登录验证码功能的核心流程。希望这个清晰的步骤和代码示例，能为你实现类似功能提供一个可靠的参考。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。

• 使用SpringBoot + Vue + Redis实现验证码登录功能全过程
• SpringBoot中登录验证码的4种实现方案
• springboot security验证码的登录实例
• SpringBoot使用easy-captcha 实现验证码登录功能(解决思路)
• SpringBoot实现分布式验证码登录方案小结
• SpringBoot实现信息验证码登录功能(案例)
• SpringBoot-Mail工具实现邮箱验证码登录注册功能