1.1 pom文件中导入hutool-captcha依赖
💬 新建springboot项目，并在其pom.xml中导入hutool-captcha依赖：
- <dependency>
- <groupId>cn.hutool</groupId>
- <artifactId>hutool-all</artifactId>
- <version>5.8.1</version>
- </dependency>
1.2 创建前端页面与跳转页面
前端页面index.html
- <h2>Hutool-captcha验证码验证</h2>
- <form action="/loginc" method="post">
- <input type="text" name="verifyCode" placeholder="请输入验证码" required="true">
- <img alt="单击图片刷新!" class="pointer" src="/common/verify"
- onclick="this.src='/common/verify?d='+new Date()*1">
- </br>
- <button type="submit" value="submit">登陆</button>
- </form>
跳转页面success.html
- <!DOCTYPE html>
- <html lang="en" xmlns:th="http://www.thymeleaf.org">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <h2>success</h2>
- </body>
- </html>
1.3 实现后端代码
1.3.1 创建后端控制类生成验证码
💬 创建控制类CommonController类,一方面通过流的方式将随机生成的验证码图片信息发送到前端浏览器；另一方面将验证码中的验证信息写入session中，以方便后续的验证
- @RestController
- public class HutoolController {
-
- @GetMapping("/common/verify")
- public void Verify(HttpServletRequest request,HttpServletResponse response) throws IOException {
- //定义图形验证码的长、宽、验证码字符数、干扰线宽度
- ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(150, 40, 5, 4);
- //图形验证码写出，可以写出到文件，也可以写出到流
- captcha.write(response.getOutputStream());
- //获取验证码中的文字内容
- String verifyCode = captcha.getCode();
- request.getSession().setAttribute("verifyCode",verifyCode);
- }
1.3.3 实现验证码的验证与页面跳转
💬 对前端输入的数据并发送到服务器的验证信息进行校验，当输入信息与验证码信息一致则跳转至success.html页面，否则跳转至false.html页面
- @Controller
- public class AdminController {
- @PostMapping("/loginc")
- public String loginByHutool(@RequestParam("verifyCode") String verifyCode,
- HttpSession session){
- String captchaCode = session.getAttribute("verifyCode") + "";
- if(verifyCode.equals(captchaCode)){
- return "success";
- }
- return "false";
- }
- }
Spring使用验证码:Kaptcha - 简书