SpringBoot登入页面图片验证码

1.依赖坐标 pom.xml文件

<!--hutool 工具包-->
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.4.3</version>
</dependency>

2.启动类LoginCodeApplication 

package com.logincode;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class LoginCodeApplication {

    public static void main(String[] args) {
        SpringApplication.run(LoginCodeApplication .class, args);
    }

}

3.配置文件application.yml 

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

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

package com.logincode.web;

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.CircleCaptcha;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;


@RestController
@RequestMapping("/user")
public class LoginCode {

    @Autowired
    private HttpServletResponse response;

    @Autowired
    private HttpSession session;

    /**
     * 功能:生成验证码
     *
     */
    @GetMapping("/code")
    void getCode() throws IOException {
        // 利用hutool工具,生成验证码图片资源
        CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 5);
        // 获得生成的验证码字符串
        String code = captcha.getCode();
        // 利用session来存储 验证码
        session.setAttribute("code", code);
        //将验证码图片的二进制数据响应体中response
        captcha.write(response.getOutputStream());     
    }

}

5.前端页面inder.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登入界面</title>
</head>
<body>
登入界面
<form action="#" method="post">
    用户username:<input type="text" name="username"><br/>
    密码password:<input type="password" name="password"><br/>
    验证码code:<input type="code" name="code"><br/>
    <img src="/user/code" id="code" onclick="refresh()">
    <br/>
    <input type="submit" value="登入/注册">
    <br/>
</form>
<a href="/logout.do">退 出</a>
</body>
<script>
    function refresh() {
        document.getElementById("code").src = "/user/code?time" + new Date().getTime();
    }
</script>
</html>

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


版权声明:本文为m0_61601521原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。