目录
实现逻辑
1、后端功能：随机生成验证码图片，并把交给前端、接收用户输入，验证用户输入的验证码是否正确、
2、前端功能：显示验证码，提供输入框供用户输入他们看到的验证码，把用户输入的数据交给后端，接收后端返回的验证结果
前后端交互接口
后端需要完成的两个工作：1、生成验证码，2、校验验证码的正确性
接口定义：
1、生成验证码
请求url：/captcha/getCaptcha
响应：返回验证码的图片
2、校验验证码的正确性
请求url：/captcha/check
请求参数:用户输入的验证码captcha
响应：验证码正确返回true，错误返回false
前端代码
index.html
展示效果：
用户点击图片之后，可以更新验证码图片
代码如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>验证码</title><style>body{font-family:'Arial', sans-serif;background-color: #f7f7f7;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;}#container{text-align: center;background: white;padding: 50px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}h1{color: #333;font-size: 2em;margin-bottom: 20px;}#inputCaptcha{height: 40px;margin-right: 10px;vertical-align: middle;border: 1px solid #ddd;border-radius: 4px;padding: 0 10px;}#verificationCodeImg{vertical-align: middle;border: 1px solid #ddd;cursor: pointer;transition: transform 0.2s;}#verificationCodeImg:hover{transform:scale(1.05);}#checkCaptcha{height: 40px;width: 120px;background-color: #5cb85c;color: white;border: none;border-radius: 4px;cursor: pointer;transition: background-color 0.2s;}#checkCaptcha:hover{background-color: #4cae4c;}</style></head><body><divid="container"><h1>输入验证码</h1><divid="confirm"><inputtype="text"name="inputCaptcha"id="inputCaptcha"><imgid="verificationCodeImg"src="http://127.0.0.1:8080/captcha/getCaptcha"style="cursor: pointer;"title="看不清？换一张"/><inputtype="button"value="提交"id="checkCaptcha"></div></div><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>$("#verificationCodeImg").click(function(){$(this).hide().attr('src','http://127.0.0.1:8080/captcha/getCaptcha?dt='+newDate().getTime()).fadeIn();});$("#checkCaptcha").click(function(){
$.ajax({
type:"post",
url:"captcha/check",
data:{
captcha:$("#inputCaptcha").val()},success:function(result){if(result){
location.href ="success.html"}else{alert("验证码错误")}}});});</script></body></html>
success.html，当用户验证码输入正确时展示的内容
展示效果：
代码如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>验证成功页</title><style>body{font-family:'Arial', sans-serif;background-color: #f7f7f7;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;}.container{text-align: center;background: white;padding: 50px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}h1{color: green;font-size: 2.5em;margin: 0;}p{color: blue;font-size: 1.2em;margin-top: 20px;}</style></head><body><divclass="container"><h1>验证成功</h1></div></body></html>
后端代码
结构如下：
在pom.xml中添加依赖：
<dependency><groupId>cn.hutool</groupId><artifactId>hutool-captcha</artifactId><version>5.8.26</version></dependency>
CaptchaController类：
@RestController@RequestMapping("/captcha")publicclassCaptchaController{//注入@AutowiredprivateCaptchaProperties captchaProperties;@Value("${captcha.session.key}")privateString key;@Value("${captcha.session.datetime}")privateString datetime;@RequestMapping("/getCaptcha")publicvoidgetCaptcha(HttpServletResponse response,HttpSession session)throwsIOException{//定义图形验证码的长和宽LineCaptcha lineCaptcha =CaptchaUtil.createLineCaptcha(captchaProperties.getWidth(), captchaProperties.getHeight());String code = lineCaptcha.getCode();//设置session,把验证码信息存储到session中
session.setAttribute(key, code);
session.setAttribute(datetime,newDate());//验证码写入浏览器
lineCaptcha.write(response.getOutputStream());//设置ContentType
response.setContentType("image/jpeg");//设置编码
response.setCharacterEncoding("utf8");//防止浏览器缓存验证码图片
response.setHeader("Pragma","No-cache");}@RequestMapping("/check")publicbooleancheck(String captcha,HttpSession session){String code =(String) session.getAttribute(key);if(!StringUtils.hasLength(captcha)){returnfalse;}//从session中获取时间Date date =(Date) session.getAttribute(datetime);if(date ==null||System.currentTimeMillis()- date.getTime()>60*1000){//session为null,或者session过期(超过一分钟就算过期)//System.currentTimeMillis() - date.getTime(): 当前时间-请求时间returnfalse;}//不区分大小写return captcha.equalsIgnoreCase(code);}}
CaptchaProperties类：
@ConfigurationProperties(prefix ="captcha")@Configuration@DatapublicclassCaptchaProperties{privateInteger height;privateInteger width;}
MySession类：
@DatapublicclassMySession{privateString key;privateString datetime;}
配置文件 application.yml：
captcha:height:50width:150session:key: CaptchaCode
datetime: CaptchaDate
本文转载自: https://blog.csdn.net/QUIXOTIC_/article/details/143448607
版权归原作者 vampire-wpre 所有， 如有侵权，请联系我们删除。
版权归原作者 vampire-wpre 所有， 如有侵权，请联系我们删除。