1.后端
基于springboot开发。
包结构
1.导入依赖
<!--kaptcha验证码生成器--><dependency><groupId>com.github.axet</groupId><artifactId>kaptcha</artifactId><version>0.0.9</version></dependency>2.配置类
@Configuration
public class CaptchaConfig {@Beanpublic DefaultKaptcha defaultKaptcha(){// 验证码生成器DefaultKaptcha captcha = new DefaultKaptcha();// 配置Properties properties = new Properties();//是否有边框properties.setProperty("kaptcha.border", "yes");//设置边框颜色properties.setProperty("kaptcha.border.color", "105,179,90");//边框粗细度，默认为1// properties.setProperty("kaptcha.border.thickness","1");//验证码properties.setProperty("kaptcha.session.key","code");//验证码文本字符颜色 默认为黑色properties.setProperty("kaptcha.textproducer.font.color", "blue");//设置字体样式properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");//字体大小，默认40properties.setProperty("kaptcha.textproducer.font.size", "30");//验证码文本字符内容范围 默认为abced2345678gfynmnpwx// properties.setProperty("kaptcha.textproducer.char.string", "");//字符长度，默认为5properties.setProperty("kaptcha.textproducer.char.length", "4");//字符间距 默认为2properties.setProperty("kaptcha.textproducer.char.space", "4");//验证码图片宽度 默认为200properties.setProperty("kaptcha.image.width", "100");//验证码图片高度 默认为40properties.setProperty("kaptcha.image.height", "40");Config config = new Config(properties);captcha.setConfig(config);return captcha;}
}3.controller
@RestController
public class CaptchaController {@Autowiredprivate DefaultKaptcha defaultKaptcha;@GetMapping(value = "/captcha",produces = "image/jpeg")public void getCaptcha(HttpServletRequest request, HttpServletResponse response){// 定义response输出类型为image/jpeg类型response.setDateHeader("Expires", 0);// Set standard HTTP/1.1 no-cache headers.response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");// Set IE extended HTTP/1.1 no-cache headers (use addHeader).response.addHeader("Cache-Control", "post-check=0, pre-check=0");// Set standard HTTP/1.0 no-cache header.response.setHeader("Pragma", "no-cache");// return a jpegresponse.setContentType("image/jpeg");//-------------------生成验证码 begin --------------------------//获取验证码文本内容String text = defaultKaptcha.createText();//将验证码文本内容放入sessionrequest.getSession().setAttribute("captcha",text);// 创建验证码图像BufferedImage image = defaultKaptcha.createImage(text);ServletOutputStream outputStream = null;try {outputStream = response.getOutputStream();//输出流输出图片，格式为jpgImageIO.write(image,"jpg",outputStream);outputStream.flush();} catch (IOException e) {e.printStackTrace();}finally {if (null!=outputStream){try {outputStream.close();} catch (IOException e) {e.printStackTrace();}}}}}
2.前端
基于 vue 和 axios,这里只展示请求部分，如何拿到后端验证码图片的src路径。
axios请求api
// 获取验证码
export function getCaptcha(){return request({method:"get",url: "/captcha",responseType:"blob" // 指定响应类型为二进制数据})
}根据请求api发起请求拿数据
import {getCaptcha} from "@/api/login.js"// 获取验证码getCaptcha(){getCaptcha().then((resp)=>{const imgData = resp.data; // 拿到图片的二进制数据const imgSrc = URL.createObjectURL(new Blob([imgData],{type:'image/png'})) // 将二进制转换成url路径this.captcha = imgSrc; })},
