java后端生成验证码，前端调用

后端controller

package com.soft1851.music.admin.controller;

import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.soft1851.music.admin.common.ResponseResult;
import com.soft1851.music.admin.service.RedisService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;

import javax.annotation.Resource;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;

/**
 * @Description TODO 获取验证码
 * @Author 涛涛
 * @Date 2020/4/21 11:19
 * @Version 1.0
 **/
@RestController
@Slf4j
public class CaptchaController {
    //变量名 要为bean的 方法名
    @Resource
    private DefaultKaptcha defaultKaptcha;
    @Resource
    private RedisService redisService;
    @PostMapping("/captcha")
    public void defaultCaptcha(@RequestBody String userIp){
        log.info("**********************");
        log.info(userIp);
        //如果key存在，则修改key
            //生成验证码
            String text = defaultKaptcha.createText();
            log.info(text);
        //把验证码存放在Redis    有效时长10分钟
        if (redisService.get(userIp) != null) {
            redisService.set(userIp,text,10);
        }else {
            //如果key不存在，则保存key
            redisService.save(userIp,text,10);
        }
        log.info("**********************");
        ServletRequestAttributes sra = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
        assert sra != null;
        HttpServletResponse response = sra.getResponse();

//        sout只有在自己开发的机器上显示
//        log可以在服务器上显示
//        生成验证码图片，将text写入，并通过response输出到客户端浏览器
        BufferedImage image = defaultKaptcha.createImage(text);
        assert response != null;
        response.setContentType("image/jpeg");
        //设置失效时间            不失效
        response.setDateHeader("Expires",10);
        try {
            ImageIO.write(image, "jpg", response.getOutputStream());
        } catch (IOException e) {
            log.error("图片传输异常");
            e.printStackTrace();
        }

    }
}

验证码拦截器

package com.soft1851.music.admin.interceptor;

import com.soft1851.music.admin.common.ResultCode;
import com.soft1851.music.admin.exception.CustomException;
import com.soft1851.music.admin.service.RedisService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * @Description TODO
 * @Author 涛涛
 * @Date 2020/4/21 18:56
 * @Version 1.0
 **/
@Component
@Slf4j
public class LoginInterceptor implements HandlerInterceptor {
    @Resource
    private RedisService redisService;

    /**
     * 前置处理，拦截请求
     *
     * @param request
     * @param response
     * @param handler
     * @return
     * @throws Exception
     */
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
//        获取post方式请求参数：
        //获取验证码
        String key = request.getParameter("userIp"); //根据参数名称获取到参数值
        String checkCode = request.getParameter("checkCode"); //根据参数名称获取到参数值
        log.info("输入的验证码：" + checkCode);
        log.info("真实的验证码：" + redisService.get(key));
        //判断验证码的有效性和正确性
        //忽略大小写比对，成功则放行到controller调用登录接口
        if (checkCode.equalsIgnoreCase(redisService.get(key).trim())) {
            //验证码有效且正确      放行
            return true;
        } else {
            //验证码错误或失效
            throw new CustomException("验证码错误或失效", ResultCode.USER_VERIFY_CODE_ERROR);
        }
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {

    }
}

配置拦截器

package com.soft1851.music.admin.config;

import com.soft1851.music.admin.interceptor.JwtInterceptor;
import com.soft1851.music.admin.interceptor.LoginInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import javax.annotation.Resource;

/**
 * @Description TODO
 * @Author 涛涛
 * @Date 2020/4/15 17:09
 * @Version 1.0
 **/
@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Resource
    private JwtInterceptor jwtInterceptor;

    @Resource
    private LoginInterceptor loginInterceptor;
    /**
     * 添加拦截器配置
     * @param registry
     */
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        //拦截路径可自行配置多个  可用 , 分割开                                                                          放行特殊请求
        registry.addInterceptor(jwtInterceptor).addPathPatterns("/**").excludePathPatterns("/login","/captcha").excludePathPatterns("/static/**");

        //添加验证码的拦截器
        registry.addInterceptor(loginInterceptor).addPathPatterns("/login");
    }



}

前端调用

<img ref="verifyImg" />



    this.$axios({
          method: 'post',
          url: 'http://localhost:8080/captcha',
          data: {
            userIp: this.userIp
          },
          responseType: 'blob'
        }).then((res) => {
          let img = this.$refs.verifyImg
          let url = window.URL.createObjectURL(res.data)
          img.src = url
        })

效果图

成功了点个赞呗