• SpringBoot登入页面图片验证码

    1.依赖坐标 pom.xml文件

    

    cn.hutool
    hutool-all
    5.4.3

    2.启动类LoginCodeApplication 

    1. package com.logincode;
    2.  
    3. import org.springframework.boot.SpringApplication;
    4. import org.springframework.boot.autoconfigure.SpringBootApplication;
    5.  
    6. @SpringBootApplication
    7. public class LoginCodeApplication {
    8.  
    9.     public static void main(String[] args) {
    10.         SpringApplication.run(LoginCodeApplication .class, args);
    11.     }
    12.  
    13. }

    3.配置文件application.yml 

    # 应用服务 WEB 访问端口
server.port=8989

    4.web层代码：生成验证码

    1. package com.logincode.web;
    2.  
    3. import cn.hutool.captcha.CaptchaUtil;
    4. import cn.hutool.captcha.CircleCaptcha;
    5. import org.springframework.beans.factory.annotation.Autowired;
    6. import org.springframework.web.bind.annotation.GetMapping;
    7. import org.springframework.web.bind.annotation.RequestMapping;
    8. import org.springframework.web.bind.annotation.RestController;
    9.  
    10. import javax.servlet.http.HttpServletResponse;
    11. import javax.servlet.http.HttpSession;
    12. import java.io.IOException;
    13.  
    14.  
    15. @RestController
    16. @RequestMapping("/user")
    17. public class LoginCode {
    18.  
    19.     @Autowired
    20.     private HttpServletResponse response;
    21.  
    22.     @Autowired
    23.     private HttpSession session;
    24.  
    25.     /**
    26.      * 功能：生成验证码
    27.      *
    28.      */
    29.     @GetMapping("/code")
    30.     void getCode() throws IOException {
    31.         // 利用hutool工具，生成验证码图片资源
    32.         CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 5);
    33.         // 获得生成的验证码字符串
    34.         String code = captcha.getCode();
    35.         // 利用session来存储 验证码
    36.         session.setAttribute("code", code);
    37.         //将验证码图片的二进制数据响应体中response
    38.         captcha.write(response.getOutputStream());     
    39.     }
    40.  
    41. }

    5.前端页面inder.html 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>用户登入界面title>
    6. head>
    7. <body>
    8. 登入界面
    9. <form action="#" method="post">
    10.     用户username:<input type="text" name="username"><br/>
    11.     密码password:<input type="password" name="password"><br/>
    12.     验证码code:<input type="code" name="code"><br/>
    13.     <img src="/user/code" id="code" onclick="refresh()">
    14.     <br/>
    15.     <input type="submit" value="登入/注册">
    16.     <br/>
    17. form>
    18. <a href="/logout.do">退 出a>
    19. body>
    20. <script>
    21.     function refresh() {
    22.         document.getElementById("code").src = "/user/code?time" + new Date().getTime();
    23.     }
    24. script>
    25. html>

    6.展示界面---生成验证码成功

  • 相关阅读:
    Node.js【Express 中间件（中间件的概念、Express 中间件的初体验、中间件的分类、自定义中间件）】
    IP地址SSL证书的作用是什么？
    【Git】git多人共享协作添加成员并授权与git拉取或提交冲突解决
    如何在Linux系统中安装MySQL数据库
    工程命令行编译设置方法
    沁恒CH582触摸功耗测试 BleTouchKey
    Java—Set
    【数字IC/FPGA】热独码检测
    工具篇--分布式定时任务springBoot--elasticjob使用--工作流程（2）
    喜报 | AR 开启纺织产业新模式，ALVA Systems 再获殊荣！
  • 原文地址：https://blog.csdn.net/m0_61601521/article/details/126373558