SpringIoc 基础练习 验证码
三层架构
1.表示层 和客服端(比如前端)的交互,参数的接收,数据的返回 Controller
2.业务逻辑层 对数据进行处理(业务方面) Service
3.数据层 数据的管理(存储,查询) Dao
高内聚,低耦合
验证码:
定义接口
1.返回验证码
2.校验验证码是否正确
代码如下:
controller→CaptchaController
model→CaptchaProperties
static→index.html success.html
templates→application.yml
CaptchaController
package com.bite.captchademo.controller;import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.ICaptcha;
import com.bite.captchademo.model.CaptchaProperties;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.IOException;@RequestMapping("/captcha")
@RestController
public class CaptchaController {@Autowiredprivate CaptchaProperties captchaProperties;private static long VALID_TIME = 60*1000;@RequestMapping("/get")public void getCaptcha(HttpSession session, HttpServletResponse response){ICaptcha captcha = CaptchaUtil.createLineCaptcha(captchaProperties.getWidth(), captchaProperties.getHeight());try {captcha.write(response.getOutputStream());//禁止缓存response.setHeader("Prama", "No-cache");//设置返回的格式response.setContentType("image/jpeg");//打印验证码System.out.println(captcha.getCode());//存储Sessionsession.setAttribute(captchaProperties.getSession().getCode(), captcha.getCode());session.setAttribute(captchaProperties.getSession().getDate(), System.currentTimeMillis());//Servlet的OutputStream记得自行关闭哦！response.getOutputStream().close();} catch (IOException e) {throw new RuntimeException(e);}}@RequestMapping("/check")public Boolean check(String captchaCode,HttpSession session){System.out.println("接收captchaCode:"+captchaCode);//参数校验//判断用户输入的验证码是否和session中存储的一致//是否在有效期内if (!StringUtils.hasLength(captchaCode)){return false;}String sessionCode = (String)session.getAttribute(captchaProperties.getSession().getCode());Long sessionDate = (Long)session.getAttribute(captchaProperties.getSession().getDate());if (captchaCode.equalsIgnoreCase(sessionCode)&& sessionDate!=null&& (System.currentTimeMillis() - sessionDate) < VALID_TIME){return true;}return false;}
}
CaptchaProperties
package com.bite.captchademo.model;import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Configuration;@Configuration
@ConfigurationProperties(prefix = "captcha")
@Data
public class CaptchaProperties {private Integer width;private Integer height;private Session session;@Datapublic static class Session {private String code;private String date;}}
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>验证码</title><style>#inputCaptcha {height: 30px;vertical-align: middle;}#verificationCodeImg{vertical-align: middle;}#checkCaptcha{height: 40px;width: 100px;}</style>
</head><body>
<h1>输入验证码</h1>
<div id="confirm"><input type="text" name="inputCaptcha" id="inputCaptcha"><img id="verificationCodeImg" src="/captcha/get" style="cursor: pointer;" title="看不清？换一张" /><input type="button" value="提交" id="checkCaptcha">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>//点击图片, 重新加载$("#verificationCodeImg").click(function(){$(this).hide().attr('src', '/captcha/get?dt=' + new Date().getTime()).fadeIn();});$("#checkCaptcha").click(function () {$.ajax({type: "post",url: "/captcha/check",data:{captchaCode: $("#inputCaptcha").val()},success:function(result){if(result){location.href = "success.html";}else{alert("验证码错误!!");}}});});</script>
</body></html>success.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>验证成功页</title>
</head>
<body>
<h1>验证成功</h1>
</body>
</html>application.yml
captcha:width: 100height: 40session:code: CAPTCHA_SESSION_CODEdate: CATPCHA_SESSION_DATE
运行结果:
