1.后端

基于springboot开发。

包结构 

1.导入依赖

com.github.axetkaptcha0.0.9

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;   })},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！