使用session来实现验证码发送功能

一、什么是session？

Session由服务器创建，并为每一次会话分配一个Session对象。同一个浏览器发起的多次请求，同属于一次会话（Session）。首次使用到Session时，服务器会自动创建Session，并创建Cookie来存储Session ID发送回客户端。Session ID用于唯一标识一个会话，确保在同一个会话中请求被正确地处理。

一台服务器对应多个客户端，服务器如何知道谁是谁 ---》通过cookies和session进行匹配的

每个测览器访可同一个站点的不同方法的时候都会携带一个cookie，名字叫JSESSICNID给服务器，服务器将JSESSIONID的值作为sesion的id进行存诸，通过这两个进行匹配，找到对应的客户端

先看实现效果是如何滴？

输入验证码，前端发送请求到后端，后端接收，存入session，并且后端校验验证码是否正确，将结果返回前端，并设置了验证码的有效时间为1min，1分钟过后过期

话不多说，来实现这个功能！

二、代码

前端：cookie，后端：session

思路：

前端页面一加载调用验证码的生成（created），输入验证码，点击登录按钮，发送到后端进行处理和判断【首先从session取出来验证码，然后进行判断，返回前端】

验证码用session存，调用验证码的工具类，生成图片验证码，然后将验证码存入session，在设置有效的时间为60s

前端相关的代码：


<el-button @click="doLogin">登录</el-button>
//验证码，点击验证码可以改变
 <p style="margin-left: 100px">验证码：<input type="text" v-model="code">
      < class="changeCodeImg" :src="codeUrl" alt="" @click="changeCode">
 </p>

 data(){
        return{
            code:"",
            codeUrl:"http://localhost:9091/api/code/createCode",
        }
    },
  created(){
        this.changeCode()
    },
methods:{
    //点击图片改变
    changeCode(){
        //看你后端接口的路径哦，如果写完了想看路径对不对，可以通过直接访问路径得到验证码图片
        this.codeUrl="http://localhost:9091/api/code/createCode
    },
}

重头戏的是后端的啦，看看后端怎么实现🤔

后端相关代码：

点击登录按钮时判断验证码是否正确，返回结果给前端

//controller
//点击登录按钮判断验证码是否正确
@RequestMapping("/login")
    public ResponseDto login(@RequestBody LoginVo vo, HttpSession session){
        System.out.println(session.getAttribute("code"));
        //先判断验证码是否正确，正确在进行账号密码的判断
        if (vo.getCode().equals(session.getAttribute("code"))){
            //登录验证码如果成功要做的事情
            *****
        }else if (session.getAttribute("code") == null){
            //ResponseDto是我写的返回消息的工具类
            return new ResponseDto(-1,"验证码过期",null);
        }else {
            return new ResponseDto(2,"验证码错误",null);
        }
    }

import com.cykj.util.ImageCodeUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

@RestController
@RequestMapping("/code")
public class CodeController {
    @RequestMapping("/createCode")
    public void createCode(HttpServletResponse response, HttpSession session){
        //生成验证码图片的工具类
        ImageCodeUtils imageCodeUtils = new ImageCodeUtils();
        //将验证码存入session中
        session.setAttribute("code",imageCodeUtils.getCode());
        //设置有效时间，单位为秒
        session.setMaxInactiveInterval(60);
        try {
            //写回去
            imageCodeUtils.write(response.getOutputStream());
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }
}

接下来就是工具类

消息返回工具类

public class ResponseDto {
    private int code;
    private String msg;
    private Object data;

    public int getCode() {
        return this.code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMsg() {
        return this.msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getData() {
        return this.data;
    }

    public void setData(Object data) {
        this.data = data;
    }

    public ResponseDto(int code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }

    public String toString() {
        return "ResponseDto{code=" + this.code + ", msg='" + this.msg + '\'' + ", data=" + this.data + '}';
    }

}

生成验证码工具类

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

/**
 * @description TODO
 * @date 2023/12/21 0:38
 */
public class ImageCodeUtils {

    /**
     * 图片的宽度
     */
    private int width = 160;
    /**
     * 图片的高度
     */
    private int height = 40;
    /**
     * 验证码字符个数
     */
    private int codeCount = 4;
    /**
     * 验证码干扰线数
     */
    private int lineCount = 20;
    /**
     * 验证码
     */
    private String code = null;

    private BufferedImage buffImg = null;
    Random random = new Random();

    public ImageCodeUtils() {
        createImage();
    }

    public ImageCodeUtils(int width, int height) {
        this.width = width;
        this.height = height;
        createImage();
    }

    public ImageCodeUtils(int width, int height, int codeCount) {
        this.width = width;
        this.height = height;
        this.codeCount = codeCount;
        createImage();
    }

    public ImageCodeUtils(int width, int height, int codeCount, int lineCount) {
        this.width = width;
        this.height = height;
        this.codeCount = codeCount;
        this.lineCount = lineCount;
        createImage();
    }


    /**
     * 生成图片
     */
    private void createImage() {
        // 字体的宽度
        int fontWidth = width / codeCount;
        // 字体的高度
        int fontHeight = height - 5;
        int codeY = height - 8;

        // 图像buffer
        buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics g = buffImg.getGraphics();

        // 设置背景色
        g.setColor(getRandColor(200, 250));
        g.fillRect(0, 0, width, height);



        // 设置字体
        //Font font1 = getFont(fontHeight);
        Font font = new Font("Fixedsys", Font.BOLD, fontHeight);
        g.setFont(font);

        // 设置干扰线
        for (int i = 0; i < lineCount; i++) {
            int xs = random.nextInt(width);
            int ys = random.nextInt(height);
            int xe = xs + random.nextInt(width);
            int ye = ys + random.nextInt(height);
            g.setColor(getRandColor(1, 255));
            g.drawLine(xs, ys, xe, ye);
        }

        // 添加噪点
        float yawpRate = 0.01f;
        int area = (int) (yawpRate * width * height);
        for (int i = 0; i < area; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);

            buffImg.setRGB(x, y, random.nextInt(255));
        }

        // 得到随机字符
        String str1 = randomStr(codeCount);
        this.code = str1;
        for (int i = 0; i < codeCount; i++) {
            String strRand = str1.substring(i, i + 1);
            g.setColor(getRandColor(1, 255));

            // a为要画出来的东西，x和y表示要画的东西最左侧字符的基线位于此图形上下文坐标系的 (x, y) 位置处
            g.drawString(strRand, i*fontWidth+3, codeY);
        }
    }

    /**
     * 得到随机字符串
     * @param n
     * @return
     */
    private String randomStr(int n) {
        String str1 = "ABCDEFGHJKMNOPQRSTUVWXYZabcdefghjkmnopqrstuvwxyz1234567890";
        String str2 = "";
        int len = str1.length() - 1;
        double r;
        for (int i = 0; i < n; i++) {
            r = (Math.random()) * len;
            str2 = str2 + str1.charAt((int) r);
        }
        return str2;
    }

    /**
     * 得到随机颜色
     * @param fc
     * @param bc
     * @return
     */
    private Color getRandColor(int fc, int bc) {
        if (fc > 255){
            fc = 255;
        }
        if (bc > 255){
            bc = 255;
        }
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r, g, b);
    }

    /**
     * 产生随机字体
     */
    private Font getFont(int size) {
        Random random = new Random();
        Font[] font = new Font[5];
        font[0] = new Font("Ravie", Font.PLAIN, size);
        font[1] = new Font("Antique Olive Compact", Font.PLAIN, size);
        font[2] = new Font("Fixedsys", Font.PLAIN, size);
        font[3] = new Font("Wide Latin", Font.PLAIN, size);
        font[4] = new Font("Gill Sans Ultra Bold", Font.PLAIN, size);
        return font[random.nextInt(5)];
    }

    /**
     * 扭曲方法
     * @param g
     * @param w1
     * @param h1
     * @param color
     */
    private void shear(Graphics g, int w1, int h1, Color color) {
        shearX(g, w1, h1, color);
        shearY(g, w1, h1, color);
    }

    private void shearX(Graphics g, int w1, int h1, Color color) {

        int period = random.nextInt(2);

        boolean borderGap = true;
        int frames = 1;
        int phase = random.nextInt(2);

        for (int i = 0; i < h1; i++) {
            double d = (double) (period >> 1)
                    * Math.sin((double) i / (double) period
                    + (6.2831853071795862D * (double) phase)
                    / (double) frames);
            g.copyArea(0, i, w1, 1, (int) d, 0);
            if (borderGap) {
                g.setColor(color);
                g.drawLine((int) d, i, 0, i);
                g.drawLine((int) d + w1, i, w1, i);
            }
        }

    }

    private void shearY(Graphics g, int w1, int h1, Color color) {

        int period = random.nextInt(40) + 10;

        boolean borderGap = true;
        int frames = 20;
        int phase = 7;
        for (int i = 0; i < w1; i++) {
            double d = (double) (period >> 1)
                    * Math.sin((double) i / (double) period
                    + (6.2831853071795862D * (double) phase)
                    / (double) frames);
            g.copyArea(i, 0, 1, h1, 0, (int) d);
            if (borderGap) {
                g.setColor(color);
                g.drawLine(i, (int) d, i, 0);
                g.drawLine(i, (int) d + h1, i, h1);
            }

        }

    }

    public void write(OutputStream sos) throws IOException {
        ImageIO.write(buffImg, "png", sos);
        sos.close();
    }

    public BufferedImage getBuffImg() {
        return buffImg;
    }

    public String getCode() {
        return code.toLowerCase();
    }
}