脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → Java图片验证码功能

Java实现图片验证码功能

 更新时间：2022年09月02日 10:33:40   作者：HSBhuang  
这篇文章主要为大家详细介绍了Java实现图片验证码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

简介

在实现登录功能时，一般为了安全都会设置验证码登录，为了防止某个用户用特定的程序暴力破解方式进行不断的尝试登录。常见验证码分为图片验证码和短信验证码，还有滑动窗口模块和选中指定物体验证方式。下面通过Java来实现图片验证码实例。

效果展示

如上图所示，图片验证码由4个数字和一些彩色的干扰线段组成，点击图片可以更新验证码，只有输入的验证码与图片中的数字一致才能通过登录，否则将会重新刷新验证码，重新输入正确的验证码。

示例代码

1、controller

@RestController
public class ValidateCodeController {
    @GetMapping("/getCodeImg")
    public void getCodeImage(HttpServletRequest request, HttpServletResponse response, HttpSession httpSession) throws IOException, InterruptedException {
        BufferedImage image=new BufferedImage(80, 32, BufferedImage.TYPE_3BYTE_BGR);
        //编辑图像
        //获取绘图对象
        Graphics g=image.getGraphics();
        g.setColor(new Color(239, 239, 239));
        g.fillRect(0,0,80,32);
        //设置字体颜色
        g.setColor(new Color(49, 49, 49));
        //设置字体
        g.setFont(new Font("SimSong",Font.ITALIC,20));
        //绘制字符串；
        String text="";
        for(int i=0;i<4;i++) {
            text +=(int) (Math.random()*10);
        }
        //字符串输出内容，水平起始坐标，垂直起始坐标。
        g.drawString(text, 17, 24);
        //画线条
        for (int i = 0; i < 10; i++) {
            g.setColor(new Color((int) (Math.random()*255), (int) (Math.random()*255), (int) (Math.random()*255)));
            g.drawLine((int) (Math.random()*50),(int) (Math.random()*30),(int) (Math.random()*80),(int) (Math.random()*80));
        }
        //设置session
        httpSession.setAttribute("code",text);
        //输出图像
        //ImageIO.write(image, "png", new FileOutputStream("C:/Users/H/Desktop/"+tet+".png"));
        ImageIO.write(image, "png",response.getOutputStream());
        g.dispose();
    }

    //获取保存在session中的验证码
    @GetMapping("/getCode")
    public String getCode(HttpSession httpSession){
        return (String) httpSession.getAttribute("code");
    }
}

2、登录页面

<body>
<div class="layui-container" id="container">
    <!--登录-->
    <div class="login" id="login">
        <h3 class="header">登　陆</h3>
        <span style="color: red;font-weight: 800">{{msg}}</span>
        <form class="layui-form loginForm" th:action="@{/}" method="get" @submit.prevent="check()" ref="export">
            <div class="layui-form-item">
                <label class="layui-form-label">登录名</label>
                <div class="layui-input-block" style="width: 330px">
                    <input type="text" name="username" required  lay-verify="required" placeholder="请输入登录名" autocomplete="off" class="layui-input" v-model="userName" @blur="loseFocus()" @focus="getFocus()">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密　码</label>
                <div class="layui-input-block" style="width: 330px">
                    <input type="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" v-model="userPwd" name="password" @focus="getFocus()">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-block" style="width: 200px">
                    <input type="text" required  lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input" v-model="code" name="code" @blur="validateCode()" @focus="getFocus()">
                </div>
                <img class="code" src="/getCodeImg" @click="changeCode()" id="codeImg">
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin: 0 auto">
                    <button type="submit" class="layui-btn " lay-submit lay-filter="formDemo">登录</button>
                    <button type="button" class="layui-btn layui-btn-normal" id="reg">注册</button>
                </div>
            </div>
        </form>
    </div>

<!--    注册-->
    <div class="register" id="register">
        <h3 class="header">注　册</h3>
        <span style="color: red;font-weight: 800">{{msg2}}</span>
        <form class="layui-form loginForm" th:action="@{/login}" method="post" @submit.prevent="check()" ref="export">
            <div class="layui-form-item">
                <label class="layui-form-label">登录名</label>
                <div class="layui-input-block" style="width: 330px">
                    <input type="text" name="username" required  lay-verify="required" placeholder="请输入登录名" autocomplete="off" class="layui-input" v-model="userName" @blur="loseFocus()" @focus="getFocus()">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密　码</label>
                <div class="layui-input-block" style="width: 330px">
                    <input type="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" v-model="userPwd" name="password" @focus="getFocus()">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block" style="width: 330px">
                    <input type="password" required  lay-verify="required" placeholder="请再次输入密码" autocomplete="off" class="layui-input" v-model="rePassword"  name="rePassword" @focus="getFocus()">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮　箱</label>
                <div class="layui-input-block" style="width: 330px">
                    <input type="email" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input" v-model="userEmail" name="userEmail" @blur="validateCode()" @focus="getFocus()">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin: 0 auto">
                    <button type="button" class="layui-btn " lay-submit lay-filter="formDemo" @click="addUser()">注册</button>
                    <button type="reset" class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>

3、JavaScript

var vm = new Vue({
        el:'#container',
        data:{
            userName:'',
            userPwd:'',
            userEmail: '',
            rePassword:'',
            msg:'',
            msg2:'',
            code:'',
            text:''
        },
        methods:{
            changeCode:function(){
                // 如果src里的图片链接不变的话，会直接用缓存的图片，加上Math.random()是为了让src的图片链接改变重新去渲染图片
                document.getElementById("codeImg").src="/getCodeImg?"+Math.random();
            },
            validateCode:function () {
                vm.$http.get('/getCode').then((response)=>{
                    this.text=response.data
                })
            },
            addUser:function (){
                if (vm.userPwd !== vm.rePassword){
                    vm.msg2="确认密码不正确！"
                }else {
                    vm.$http.post('/user/add/'+vm.userName+'/'+vm.userPwd+'/'+vm.userEmail).then((response)=>{
                        window.location.href='/'
                    })
                }
            },
            loseFocus:function () {
                vm.$http.get('/user/queryUserByName/'+vm.userName).then((response)=>{
                    if (response.data.userName!==vm.userName){
                        vm.msg="该用户名不存在！"
                    }
                })
            },
            getFocus:function(){
                vm.msg=""
            },
            check:function () {
                if (vm.userName===""){
                    vm.msg="用户名为空！"
                    return
                }
                if (vm.userPwd===""){
                    vm.msg="密码为空！"
                    return
                }
                if (vm.code===""){
                    vm.msg="验证码为空！"
                    return
                }
                vm.$http.post('/user/query/'+vm.userName+'/'+vm.userPwd).then((response)=>{
                    if (response.data.userName!==vm.userName){
                        vm.msg="密码错误！"
                    }else if (vm.code!=vm.text){
                        vm.msg="验证码错误！"
                        document.getElementById("codeImg").src="/getCodeImg?"+Math.random();
                    } else {
                        vm.$refs.export.submit()
                    }
                })
            }
        }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaWeb中Tomcat底层机制和Servlet运行原理详解

    JavaWeb中Tomcat底层机制和Servlet运行原理详解

    这篇文章主要介绍了JavaWeb中Tomcat底层机制和Servlet运行原理详解,Tomcat是一个开源的Java Web服务器,它是基于Java Servlet和JavaServer Pages(JSP)技术的,下面是关于Tomcat底层机制和Servlet运行原理的简要说明,需要的朋友可以参考下
    2023-10-10
  • 避免Java中的内存泄漏的三种方法

    避免Java中的内存泄漏的三种方法

    在Java开发中,内存泄漏（Memory Leak）是一个常见但令人头疼的问题,本文将深入探讨什么是内存泄漏、常见的泄漏原因、如何识别和避免内存泄漏,以及通过代码示例展示如何优化Java程序以减少内存泄漏的发生,需要的朋友可以参考下
    2024-07-07
  • Springboot利于第三方服务进行ip定位获取省份城市

    Springboot利于第三方服务进行ip定位获取省份城市

    本文主要介绍了Springboot利于第三方服务进行ip定位获取省份城市，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • java 中@Deprecated 注解的实例详解

    java 中@Deprecated 注解的实例详解

    这篇文章主要介绍了java 中@Deprecated 注解的实例详解的相关资料,这里对@Deprecated注解进行了详细介绍，希望能帮助到大家，需要的朋友可以参考下
    2017-08-08
  • Java类加载器层次结构原理解析

    Java类加载器层次结构原理解析

    这篇文章主要介绍了Java类加载器层次结构原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • Tomcat安装配置及Eclipse配置详解

    Tomcat安装配置及Eclipse配置详解

    给大家介绍一下Tomcat安装配置及Eclipse配置的全部图文过程，如果你对这个还有不明白，一起跟着小编学习下。
    2017-11-11
  • Java8中List转Map(Collectors.toMap) 的技巧分享

    Java8中List转Map(Collectors.toMap) 的技巧分享

    在最近的工作开发之中,慢慢习惯了很多Java8中的Stream的用法,很方便而且也可以并行的去执行这个流,这篇文章主要给大家介绍了关于Java8中List转Map(Collectors.toMap) 的相关资料,需要的朋友可以参考下
    2021-07-07
  • java中RabbitMQ高级应用

    java中RabbitMQ高级应用

    本文主要介绍了java中RabbitMQ高级应用，中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • SpringBoot+MybatisPlus实现sharding-jdbc分库分表的示例代码

    SpringBoot+MybatisPlus实现sharding-jdbc分库分表的示例代码

    本文主要介绍了SpringBoot+MybatisPlus实现sharding-jdbc分库分表的示例代码,以分库,分表,分库分表三种方式来实现,具有一定的参考价值,感兴趣的可以了解一下
    2024-03-03
  • java连接Mysql数据库的工具类

    java连接Mysql数据库的工具类

    这篇文章主要介绍了java连接Mysql数据库的工具类,非常的实用，推荐给大家，需要的朋友可以参考下
    2015-03-03

最新评论