当前位置：首页 > wzjs >正文

哈尔滨手机网站制作网络策划与营销

wzjs 2025/9/22 10:13:00

哈尔滨手机网站制作,网络策划与营销,做的很酷炫的网站,内网门户网站建设方案今天来带大家写一个小练习，我们使用Spring写一下验证码的小程序： 还是我们熟悉的步骤，需求分析很定义接口文档，前端还是直接模版王，哈哈，一会直接给大家，但是ajax还是需要我们自己写的&#xf…

今天来带大家写一个小练习，我们使用Spring写一下验证码的小程序：

还是我们熟悉的步骤，需求分析很定义接口文档，前端还是直接模版王，哈哈，一会直接给大家，但是ajax还是需要我们自己写的；

1，需求分析

我们后端需要提供1的服务有两个

1，生成验证码返回给前端

2，对于前端发来的验证码进行校验

2，接口文档

生成验证码的：

1，请求

/Captcha/get

2，参数

无，需要设置Session

3，响应

返回/image/ipeg

校验验证码的：

1，请求

/Captcha/check

2，参数

String captcha

3，响应

boolean 类型

3，代码实现

我们先来准备工作，我们这次实现验证码要使用一个工具Hutool，我们进去官网，直接搜验证码，就有实现的功能了，我们直接拿来用，我们先导入lombok和hutool的依赖，

        </dependency><!-- https://mvnrepository.com/artifact/org.projectlombok/lombok --><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.30</version></dependency><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.38</version></dependency>

放pom文件中

把前端代码放到这里，

<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="/admin/captcha" 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', '/admin/captcha?dt=' + new Date().getTime()).fadeIn();});$("#checkCaptcha").click(function () {alert("验证码校验");});</script>
</body></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>

先来model层的；

@ConfigurationProperties(prefix = "captcha")
@Configuration
@Data
public class CaptchaProperties {private Integer width;private Integer height;private Session session;@Datapublic static class Session{private String key;private String data;}
}

我们把验证码的参数都写成配置文件了，这样顺便也能带上Session，而且在配置文件中修改的好处不必多说了吧，还记得这些注解吗，@data是lombok的那些重写的方法都帮我们写了，@configuration就是把这个类交给Spring管理，@configurationProperties（prefox="captcha"）就是根据这个配置文件由Spring来创建这个对象；为啥Session要使用静态的呢因为要使用Session呀，这个类都没有交个Spring管理，我们拿不到它但是静态的话就能拿到了；

来上yml配置文件：

captcha:width: 150height: 50session:key: capkeydata: capdata

来第一个接口，生成验证码：

@RequestMapping("/Captcha")
@RestController
public class CaptchaController {//为了打印日志public static final Logger logger = LoggerFactory.getLogger(CaptchaController.class);@Autowiredprivate CaptchaProperties captchaProperties;@RequestMapping("/get")public void get(HttpSession session, HttpServletResponse response) throws IOException {//设置验证码生成的时间Long start = System.currentTimeMillis();//设置响应报文的正文类型是图片response.setContentType("image/jpeg");//目的是为了让浏览器禁止缓存，让每次获取到的都是新的验证码response.setHeader("pragma","No-cache");//生成验证码，圆形验证码，从我们注入的对象中拿配置文件，后两个参数是验证码字符数和干扰数CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(captchaProperties.getWidth(),captchaProperties.getHeight(), 4, 20);//获取验证码的数字用来放到Session中，来check时候检验发来的和我们服务器发过去的验证码是否是一样的；String code = captcha.getCode();//设置我们发给客户端的验证码是啥session.setAttribute(captchaProperties.getSession().getKey(),code);//设置发送的时间，来实现验证码有效时间session.setAttribute(captchaProperties.getSession().getData(),new Date());//把验证码输入到浏览器上captcha.write(response.getOutputStream());//设置验证码结束生成的时间，其实也没必要但是我们可以看看我们这个验证码用了多长时间：Long end = System.currentTimeMillis();logger.info("验证码生成时间"+(end-start)+"ms");}
}

我把每一步都详细解释了；

要把这个img标签下的和$this下面的/路径改成我们后端得到验证码方法的路径；

这样就ok了，可以试试，接下来我们来实现验证码的校验功能：
来Check接口：

    @RequestMapping("/check")public boolean check(String captcha,HttpSession session){if(captcha==null) return false;//获取我们之前给用户发的验证码，我们已经存储到Session中了，我们只需要再和用户输入的进行比对就行了String code = (String) session.getAttribute(captchaProperties.getSession().getKey());//用来限制验证码的输入时间Date date = (Date) session.getAttribute(captchaProperties.getSession().getData());if(date!=null && captcha.equalsIgnoreCase(code) && System.currentTimeMillis()-date.getTime()<VALID_TIME){return true;}return false;}

接下来完善前端的ajax，

 $("#checkCaptcha").click(function () {$.ajax({type: "post",url: "Captcha/check",data: {captcha: $("#inputCaptcha").val()},success: function (result) {if(result==true){location.href="success.html"}else {alert("验证码无效")}}})});

来测试：注意ajax要使用Post