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

系列文章目录

Redis缓存穿透、击穿、雪崩问题及解决方法
Spring Cache的使用–快速上手篇
分页查询–Java项目实战篇
全局异常处理–Java实战项目篇

Java实现发送邮件（定时自动发送邮件）_java邮件通知_心态还需努力呀的博客-CSDN博客

该系列文章持续更新，更多的文章请点击我的主页查看哦！

---

目录

系列文章目录

前言

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

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

三、前端代码编写

3.1 img标签

3.2 vue代码

 四、效果图

五、补充后端验证

总结

---

前言

登录页面都会有输入用户名、密码和验证码而判断用户是否登录成功做出响应的操作。输入用户名和密码提交表单做登录验证这个相信看到这篇文章的小伙伴们都是小问题（熟练地不能在熟练了）。但这个验证码用户点击刷新验证码，用户填写后才能正常登录。随机生成图片验证码就会有些疑惑，不知道该怎么做。

这篇文章我们就来重点看如何生成验证码，前端如何展示，如何点击验证码后会换张图片（就是常见到的“看不清？换一张图”）这一功能。

做出下图的验证码：

---

 

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

下面就是生成验证码图片的工具类，里面的参数都有注释，大家可以按照自己喜欢的样式调节验证码的参数（随机生成的数量、背景颜色、干扰线等）。

package com.medical.study.utils;

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.OutputStream;
import java.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生成验证码的接口

1.这里我的接口是：localhost:8081/code/verify。

2.将生成的验证码保存，这里我保存到了redis中，你也可以保存到其他的地方（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 javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.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标签

1.绑定事件，点击后更换验证码图片

2.v-model绑定src属性

3.2 vue代码

1.常量verifySrc就和上面src的属性绑定。值是后端的接口。

2.方法是上面img标签绑定的事件，点击后需要重新发送请求。

这里为什么要加new Date().getTime()表示当前时间毫秒值呢？

      答：首先浏览器中存在缓存，请求时缓存是先看请求地址是不是一样，地址一样就取出缓存内容。所以不加的话就会直接取缓存的值，所以图片点击就会没有任何反映。

      加new Date().getTime()，每次请求地址就不一样。保证了不从缓存里面取。就会去重新调用接口返回不一样的验证码图片。

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

 四、效果图

点击图片也是可以更换验证码图片的。这里就不给大家演示了，感兴趣可以自己编写尝试尝试。

如下图所示：

五、补充后端验证

 1.在提交表单时发送post将数据和用户输入的验证码传给后端。

2.controller层login接口编写逻辑代码

首先判断存储的验证码和用户输入的是否一致。

2.1 如果不一致直接返回错误信息。如“验证码输入错误”。

2.2 如果一致的话执行登录的逻辑，查询数据库查看用户名、密码。

     这个就和以前的写法一样了。这里就不给大家展示代码了。相信大家能够独立完成。

---

 

总结

登录页面的验证码编写从后端生成验证码图片到前端将图片展示到页面的流程和代码都编写完了。如果大家有什么疑问可以在评论区或者私聊我。大家一起交流学习。