java maven工程简单实现图形验证码的功能

勤奋上进的兔子

已于 2023-05-07 18:37:39 修改

阅读量409

点赞数 1

分类专栏： SSM 文章标签： java servlet 开发语言

于 2022-11-04 13:16:29 首次发布

本文链接：https://blog.csdn.net/qq_55648724/article/details/127686883

版权

SSM 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

第一步

<!-- 图片验证码的Maven依赖  验证码  -->
<dependency>
    <groupId>cn.dsna</groupId>
    <artifactId>ValidateCode</artifactId>
    <version>1.0.0</version>
</dependency>

2.创建控制层


/**

 * @date ：Created in 2022/11/2 17:35
 * @description：图片验证码控制层
 * @modified By：
 * @version:1.0
 */
@RestController
@RequestMapping("/code")
@Slf4j
public class ValidateCodeController {

    //设置要返回前端的编码
    private static String CODE_AREA=null;

    @GetMapping("/getValidateCode")
    public void getValidateCode(HttpServletResponse response, HttpSession session) throws IOException {
        //参数分别为验证码图片长、高，字符数、干扰线数
        ValidateCode validateCode = new ValidateCode(200, 40, 4, 50);
        validateCode.write(response.getOutputStream());
        //获取生成的验证码
        String validateCodeCode = validateCode.getCode();
        log.info("the validate code is:" + validateCodeCode);
        CODE_AREA=validateCodeCode;
        session.setAttribute("validateCode", validateCodeCode);
    }

    @GetMapping("/outcode")
    public Result outValidateCode(){

        return new Result(200,"输出验证码成功",CODE_AREA);
    }

}

3.前端接受和处理

1.先引入jquery文件

jquery-3.4.1.js

2.控件设置

<a href="javascript:fn1()"><img style="margin-top: 17px;" id="img1" src="/code/getValidateCode"/></a>

3.实现看不清，点击更换

<script>
    function fn1() {
        //定义时间戳
        var a = new Date();
        //每次给请求 虚拟传参，避免html不刷新同一名字控件内容的bug
        document.getElementById("img1").src = "/code/getValidateCode?t=" + a.getTime();
    }
</script>

实现：