第一步
<!-- 图片验证码的Maven依赖 验证码 --> <dependency> <groupId>cn.dsna</groupId> <artifactId>ValidateCode</artifactId> <version>1.0.0</version> </dependency>
2.创建控制层
/**
* @date :Created in 2022/11/2 17:35
* @description:图片验证码控制层
* @modified By:
* @version:1.0
*/
@RestController
@RequestMapping("/code")
@Slf4j
public class ValidateCodeController {
//设置要返回前端的编码
private static String CODE_AREA=null;
@GetMapping("/getValidateCode")
public void getValidateCode(HttpServletResponse response, HttpSession session) throws IOException {
//参数分别为验证码图片长、高,字符数、干扰线数
ValidateCode validateCode = new ValidateCode(200, 40, 4, 50);
validateCode.write(response.getOutputStream());
//获取生成的验证码
String validateCodeCode = validateCode.getCode();
log.info("the validate code is:" + validateCodeCode);
CODE_AREA=validateCodeCode;
session.setAttribute("validateCode", validateCodeCode);
}
@GetMapping("/outcode")
public Result outValidateCode(){
return new Result(200,"输出验证码成功",CODE_AREA);
}
}
3.前端接受和处理
1.先引入jquery文件
jquery-3.4.1.js
2.控件设置
<a href="javascript:fn1()"><img style="margin-top: 17px;" id="img1" src="/code/getValidateCode"/></a>
3.实现看不清,点击更换
<script> function fn1() { //定义时间戳 var a = new Date(); //每次给请求 虚拟传参,避免html不刷新同一名字控件内容的bug document.getElementById("img1").src = "/code/getValidateCode?t=" + a.getTime(); } </script>
实现: