javaweb登录界面验证码自动生成,点击重新生成验证码,验证码与输入框的校验

当进入登录界面时,验证码图片自动生成,验证码图片颜色随机,字母颜色随机,该代码只是随机生成小写英文字母,没有设置大写字母和数字

 点击验证码图片重新生成验证码

验证码输入错误时,提示出来

 验证码输入正确后才进行登录账号和密码的验证

中大型项目中用到的,现把关键代码展示如下

login.jsp界面(注意此时已经导入过jquery包了)

<img src="CheckCodeServlet" width="100%" height="30" id="checkCodeImg"/>
                                            <script type="text/javascript">
                                                $("#checkCodeImg").click(function () {
                                                    //重新设置属性的值,当点击该图片时
                                                    $("#checkCodeImg").attr("src","CheckCodeServlet?m="+Math.random());

                                                });
                                            </script>

CheckCodeServlet类

package com.it.servlets;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//通过java中awt中提供的类绘制验证码图片
//        1.创建一张图片
        int height=90;//验证码高度
        int width=300;//验证码宽度
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);//实例化一个图片对象
//        2.绘制图片对象,从图片对象中获取绘制图片的笔
        Graphics2D pen = image.createGraphics();
        //a.绘制背景
        pen.setColor(getRandomColor());
        pen.fillRect(0,0,width,height);//绘制实心矩形

        //b.绘制验证码字符串
        int letterNum=4;//验证码图片上的字符的个数
        int space=20;//验证码图片上两个字母之间的空隙
        int letterWidth=(width-(letterNum+1)*space)/letterNum;//计算每个字母占据的宽度

//        for循环每循环一次,绘制一个字母(小写字母的ascii码:97-122)
        Random random = new Random();
        String code ="";
        for (int i=0;i<letterNum;i++){
//            随机生成一个小写字母
            int ascii = random.nextInt(26) + 97;//97-122
            byte[] bytes={(byte) ascii};
            String letter=new String(bytes);
            code = code + letter;//为了保存验证码字符到session
//            绘制字母
            pen.setColor(getRandomColor());
            pen.setFont(new Font("Gulim",Font.BOLD,70));
            pen.drawString(letter,space+(letterWidth+space)*i,height-space);//把该字母写在画布上

        }
        HttpSession session = req.getSession();
        session.setAttribute("code",code);
        //添加图片干扰,防止机器自动识别

//            图片绘制完成后,将图片通过response输出流响应到客户端
        ImageIO.write(image,"png",resp.getOutputStream());
    }

    private Color getRandomColor() {
        Random random = new Random();
        int r=random.nextInt(256);
        int g = random.nextInt(256);
        int b = random.nextInt(256);
        Color color = new Color(r, g, b);
        return color;
    }
}

ManagerLoginServlet类

String checkCode = req.getParameter("checkCode");

        //先校验验证码,只有验证码正确时,才校验登录的账号和密码
        //首先获取session,再获取session中的code属性的值,与输入框的值进行比较
        if (req.getSession().getAttribute("code").equals(checkCode)){
//验证码正确时,执行登录名和登录密码的验证
 }else {
            //验证码错误
            req.setAttribute("tips","<label style='color:red'>登录失败,验证码错误!</label>");
            req.getRequestDispatcher("login.jsp").forward(req,resp);
        }

下面是完整类中的代码

login.jsp界面(注意此时已经导入过jquery包了)

<%--
  Created by IntelliJ IDEA.
  User: lijianglin
  Date: 2022/5/19
  Time: 17:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="assets/css/ace.min.css" />
    <link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="css/style.css"/>
    <script src="assets/js/ace-extra.min.js"></script>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="assets/layer/layer.js" type="text/javascript"></script>
    <title>登录</title>
</head>

<body class="login-layout Reg_log_style" style="background: url(images/login_bg.png);">
<div class="logintop">
    <span>欢迎后台管理界面平台</span>
    <ul>
        <li><a href="#">返回首页</a></li>
        <li><a href="#">帮助</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</div>
<div class="loginbody">
    <div class="login-container">
        <div class="center"></div>
        <div class="space-6"></div>

        <div class="position-relative">
            <div id="login-box" class="login-box widget-box no-border visible" style="margin-top: 50px;">
                <div class="widget-body" >
                    <div class="widget-main" >
                        <h4 class="header blue lighter bigger">
                            <i class="icon-coffee green"></i>
                            管理员登录
                        </h4>

                        <div class="login_icon"><img src="images/login.png" /></div>

                        <form class="" id="form1" action="ManagerLoginServlet" method="post">
                            <fieldset>
                                <ul>
                                    <li class="frame_style form_error">
                                        <label class="user_icon"></label>
                                        <input name="loginName" title="登录名" type="text"  id="username"/><i>用户名</i>
                                    </li>
                                    <li class="frame_style form_error">
                                        <label class="password_icon"></label>
                                        <input name="loginPwd" title="登录密码" type="password" id="userpwd"/><i>密码</i>
                                    </li>
                                    <li class="frame_style form_error">
                                        <label class="Codes_icon"></label>
                                        <input name="checkCode" title="验证码" type="text" id="Codes_text"/><i>验证码</i>
                                        <div class="Codes_region">
                                            <img src="CheckCodeServlet" width="100%" height="30" id="checkCodeImg"/>
                                            <script type="text/javascript">
                                                $("#checkCodeImg").click(function () {
                                                    //重新设置属性的值,当点击该图片时
                                                    $("#checkCodeImg").attr("src","CheckCodeServlet?m="+Math.random());

                                                });
                                            </script>
                                        </div>
                                    </li>
                                </ul>
                                <div class="space"></div>

                                <div class="clearfix">
                                    <label class="inline">
                                        <input type="checkbox" class="ace">
                                        <span class="lbl">保存密码</span>
                                    </label>

                                    <button type="submit" class="width-35 pull-right btn btn-sm btn-primary" id="login_btn">
                                        <i class="icon-key"></i>
                                        登录
                                    </button>
                                </div>

                                <div class="space-4"></div>
                            </fieldset>
                        </form>

                        <div class="social-or-login center">
                            <span class="bigger-110">通知</span>
                        </div>

                        <div class="social-login center">
<%--    从ManagerLoginServlet类中获取过来提示信息,取属性的value--%>
                            提示 ${tips}
                        </div>
                    </div><!-- /widget-main -->

                    <div class="toolbar clearfix"></div>
                </div><!-- /widget-body -->
            </div><!-- /login-box -->
        </div><!-- /position-relative -->
    </div>
</div>
<div class="loginbm">版权所有 2021</div><strong></strong>
</body>
</html>
<script>
    $('#form1').on('submit', function(){
        var num=0;
        var str="";
        $("input[type$='text'],input[type$='password']").each(function(n){
            if($(this).val()=="")
            {

                layer.alert(str+=""+$(this).attr("title")+"不能为空!\r\n",{
                    title: '提示框',
                    icon:0,
                });
                num++;
                return false;
            }
        });
        if(num>0){  return false;}
        else{
        //    管理员已经输入了密码,登录名,验证码
            return true;
        }

    });
    $(document).ready(function(){
        $("input[type='text'],input[type='password']").blur(function(){
            var $el = $(this);
            var $parent = $el.parent();
            $parent.attr('class','frame_style').removeClass(' form_error');
            if($el.val()==''){
                $parent.attr('class','frame_style').addClass(' form_error');
            }
        });
        $("input[type='text'],input[type='password']").focus(function(){
            var $el = $(this);
            var $parent = $el.parent();
            $parent.attr('class','frame_style').removeClass(' form_errors');
            if($el.val()==''){
                $parent.attr('class','frame_style').addClass(' form_errors');
            } else{
                $parent.attr('class','frame_style').removeClass(' form_errors');
            }
        });
    })

</script>

CheckCodeServlet类

package com.it.servlets;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//通过java中awt中提供的类绘制验证码图片
//        1.创建一张图片
        int height=90;//验证码高度
        int width=300;//验证码宽度
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);//实例化一个图片对象
//        2.绘制图片对象,从图片对象中获取绘制图片的笔
        Graphics2D pen = image.createGraphics();
        //a.绘制背景
        pen.setColor(getRandomColor());
        pen.fillRect(0,0,width,height);//绘制实心矩形

        //b.绘制验证码字符串
        int letterNum=4;//验证码图片上的字符的个数
        int space=20;//验证码图片上两个字母之间的空隙
        int letterWidth=(width-(letterNum+1)*space)/letterNum;//计算每个字母占据的宽度

//        for循环每循环一次,绘制一个字母(小写字母的ascii码:97-122)
        Random random = new Random();
        String code ="";
        for (int i=0;i<letterNum;i++){
//            随机生成一个小写字母
            int ascii = random.nextInt(26) + 97;//97-122
            byte[] bytes={(byte) ascii};
            String letter=new String(bytes);
            code = code + letter;//为了保存验证码字符到session
//            绘制字母
            pen.setColor(getRandomColor());
            pen.setFont(new Font("Gulim",Font.BOLD,70));
            pen.drawString(letter,space+(letterWidth+space)*i,height-space);//把该字母写在画布上

        }
        HttpSession session = req.getSession();
        session.setAttribute("code",code);
        //添加图片干扰,防止机器自动识别

//            图片绘制完成后,将图片通过response输出流响应到客户端
        ImageIO.write(image,"png",resp.getOutputStream());
    }

    private Color getRandomColor() {
        Random random = new Random();
        int r=random.nextInt(256);
        int g = random.nextInt(256);
        int b = random.nextInt(256);
        Color color = new Color(r, g, b);
        return color;
    }
}

ManagerLoginServlet类

package com.it.servlets;

import com.it.entity.Manager;
import com.it.service.ManagerService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;

//用于管理员登录验证的servlet
@WebServlet("/ManagerLoginServlet")
public class ManagerLoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// doGet中写了doPost方法,可以所有方法都在doPost方法,这样不管传过来是get还是post都可以成功调用方法
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//      1.接收账号、密码、验证码
        req.setCharacterEncoding("utf-8");
//        从输入框中获取输入的内容,参数是输入框的名字。
        String loginName = req.getParameter("loginName");
        String loginPwd = req.getParameter("loginPwd");
        String checkCode = req.getParameter("checkCode");

        //先校验验证码,只有验证码正确时,才校验登录的账号和密码
        //首先获取session,再获取session中的code属性的值,与输入框的值进行比较
        if (req.getSession().getAttribute("code").equals(checkCode)){
//验证码正确时,执行登录名和登录密码的验证
//      2.调用ManagerService进行校验
            ManagerService managerService = new ManagerService();
            try {
                Manager manager = managerService.checkManagerLogin(loginName, loginPwd);
//            3.判断验证结果
                if (manager==null){
//                登录失败,跳转到登录界面并进行错误提示
                    req.setAttribute("tips","<label style='color:red'>登录失败,密码或账号错误!</label>");
                    req.getRequestDispatcher("login.jsp").forward(req,resp);
                }else {
//                登录成功,跳转到index.jsp界面
                    resp.sendRedirect("index.jsp");
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }else {
            //验证码错误
            req.setAttribute("tips","<label style='color:red'>登录失败,验证码错误!</label>");
            req.getRequestDispatcher("login.jsp").forward(req,resp);
        }


    }
}

  • 3
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

做一道光

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值