JavaEE----登陆界面验证码实现

主要使用后端验证，调用awt API ，会简单调用即可，绘图代码已封装到LoginVerifyUtils中。

界面展示：

LoginVerifyUtils全部代码

 import java.awt.Color;

 import java.awt.Font;

 import java.awt.Graphics2D;

 import java.awt.font.FontRenderContext;

 import java.awt.geom.Rectangle2D;

 import java.awt.image.BufferedImage;

 import java.io.ByteArrayOutputStream;

 import java.io.IOException;

 import java.util.Random;

 import javax.imageio.ImageIO;

 public class LoginVerifyUtils {

     private static LoginVerifyUtils loginVerifyUtils = new LoginVerifyUtils(); 

     private LoginVerifyUtils() {

     }

     public static LoginVerifyUtils getInstance() {

         return loginVerifyUtils;

     }

     /**

      * 绘画验证码

      * @param output

      * @return

      */

     public String drawImg(ByteArrayOutputStream output) {

         String code = "";

         // 随机产生4个字符

         for (int i = 0; i < 4; i++) {

             code += randomChar();

         }

         int width = 70;

         int height = 25;

         BufferedImage bi = new BufferedImage(width, height,

                 BufferedImage.TYPE_3BYTE_BGR);

         Font font = new Font("Times New Roman", Font.PLAIN, 20);

         // 调用Graphics2D绘画验证码

         Graphics2D g = bi.createGraphics();

         g.setFont(font);

         Color color = new Color(66, 2, 82);

         g.setColor(color);

         g.setBackground(new Color(226, 226, 240));

         g.clearRect(0, 0, width, height);

         FontRenderContext context = g.getFontRenderContext();

         Rectangle2D bounds = font.getStringBounds(code, context);

         double x = (width - bounds.getWidth()) / 2;

         double y = (height - bounds.getHeight()) / 2;

         double ascent = bounds.getY();

         double baseY = y - ascent;

         g.drawString(code, (int) x, (int) baseY);

         g.dispose();

         try {

             ImageIO.write(bi, "jpg", output);

         } catch (IOException e) {

             e.printStackTrace();

         }

         return code;

     }

     /**

      * 随机获取一个字符

      * @return

      */

     public char randomChar() {

         Random r = new Random();

         String s = "ABCDEFGHJKLMNPRSTUVWXYZ0123456789";

         return s.charAt(r.nextInt(s.length()));

     }

 }

login.jsp

<div  id="login">

    <div class="form-inline"  >

        <div class="input-group">

            <span class="input-group-addon">账号</span>

            <input type="text" class="form-control" name="id" id="adminId">

        </div><br/><br/>

        <div class="input-group">

            <span class="input-group-addon">密码</span>

            <input type="password" class="form-control" name="passwd" id="passwd">

        </div>

        <br/><br/>

         <div class="input-group">

             <span class="code_img"> <img

                        src="${APP_PATH}/admin/getVerifyCode"

                        width="110" height="40" id="verifyCodeImage">

                    </span><a id="changeVerifImageRegister"

                        onclick="javascript:changeImage();">换一张</a>

        </div> 

        <br/><br/>

         <div class="input-group">

            <span class="input-group-addon">验证码</span>

            <input type="text" class="form-control" name="verifyCode" style="width: 184px" id="verifyCode">

        </div><br/> 

        <p style="text-align: right;color: red;position: absolute" id="info"></p>

        <br/>

        <button id="loginButton"  class="btn btn-primary">登陆

        </button>

    </div>

依赖ui库

    <link rel="stylesheet" href="${APP_PATH }/static/css/bootstrap.min.css">

    <script src="${APP_PATH }/static/js/jquery-3.2.1.min.js"></script>

    <script src="${APP_PATH }/static/js/bootstrap.min.js"></script>

javascript

 $("#loginButton").click(function () {

            if($("#adminId").val()==''&&$("#passwd").val()==''){

                $("#info").text("提示:账号和密码不能为空");

            }

            else if ($("#adminId").val()==''){

                $("#info").text("提示:账号不能为空");

            }

            else if($("#passwd").val()==''){

                $("#info").text("提示:密码不能为空");

            }else if($("#verifyCode").val()==''){

                $("#info").text("提示:请输入验证码");

            }

            else {

                //验证码

                $.ajax({

                    type: "GET",

                    url: "${APP_PATH}/admin/verifyCode",

                    data: {

                        verifyCode:$("#verifyCode").val() ,

                    },

                    dataType: "json",

                    success: function(data) {

                        if(data.stateCode.trim() == "1003") {

                            $("#info").text("提示:服务器异常");

                            flag = false;

                        } else if(data.stateCode.trim() == "1002") {

                            $("#info").text("提示:验证码错误");

                        } else{

                            userLogin()

                        }

                    }

                });

            }

        })

        function userLogin(){

            $.ajax({

                type: "POST",

                url: "${APP_PATH}/admin/login",

                data: {

                    username:$("#adminId").val() ,

                    password: $("#passwd").val()

                },

                dataType: "json",

                success: function(data) {

                    if(data.stateCode.trim() == "1003") {

                        $("#info").text("提示:该用户不存在");

                    } else if(data.stateCode.trim() == "1002") {

                        $("#info").text("提示:密码错误");

                    } else if(data.stateCode.trim() == "1001"){

                        $("#info").text("提示:登陆成功，跳转中...");

                        window.location.href="${APP_PATH}/main";

                    }else{

                        $("#info").text("提示:服务器出错");

                    }

                }

            });

        }

loginController参考

/**

     * 获取验证码

     * @param response

     * @param session

     */

    @GetMapping("/getVerifyCode")

    public void generate(HttpServletResponse response, HttpSession session) {

        ByteArrayOutputStream output = new ByteArrayOutputStream();

        LoginVerifyUtils loginVerifyUtils = LoginVerifyUtils.getInstance();

        String verifyCodeValue =loginVerifyUtils.drawImg(output);

        session.setAttribute("verifyCodeValue", verifyCodeValue);

        try {

            ServletOutputStream out = response.getOutputStream();

            output.writeTo(out);

        } catch (IOException e) {

            e.printStackTrace();

        }

    }

    //验证

    @GetMapping("/verifyCode")

    public @ResponseBody AJAXResult verifyCode(@RequestParam("verifyCode") String verifyCode ,HttpSession session) {

        AJAXResult result = new AJAXResult();

        try {

            String verifyCodeValue = (String) session.getAttribute("verifyCodeValue");

            if(verifyCode.trim().toUpperCase().equals(verifyCodeValue)) {

                result.setStateCode("1001");

            }

        } catch (Exception e) {

            e.printStackTrace();

            result.setStateCode("1003");

        }

        return result;

    }

　　 @ResponseBody

    @PostMapping("/login")

    public Object login(Admin admin ,HttpServletRequest request) {

        AJAXResult result = new AJAXResult();

        try {

            Wrapper<Admin> wrapper = new EntityWrapper<Admin>();

            wrapper.eq("username", admin.getUsername());

            boolean isName = adminService.selectOne(wrapper) == null ? true: false;

            if(isName) {

                result.setStateCode("1003");//用户名不存在

            }else {

                Wrapper<Admin> wrapper2 = new EntityWrapper<Admin>();

                wrapper2.eq("username", admin.getUsername());

                wrapper2.eq("password", admin.getPassword());

                Admin loginAdmin = adminService.selectOne(wrapper2);

                if(loginAdmin != null ) {

                    request.getSession().setAttribute("loginAdmin", loginAdmin);

                    LoginLog loginLog = new LoginLog();

                    loginLog.setAdminId(loginAdmin.getId());

                    loginLog.setLoginDate(new Date() );

                    loginLog.setLoginIp(request.getRemoteAddr());

                    loginLogService.insert(loginLog );

                    result.setStateCode( "1001");//登陆成功

                }else {

                    result.setStateCode( "1002");//用户名或密码错误

                }

            }

        } catch (Exception e) {

            e.printStackTrace();

            result.setStateCode( "1004");//服务器出错

        }

        return result ;

    }

ps：主要逻辑就是把随机生成的验证码放到session域，当用户提交请求时，获取表单数据然后进行比对＜（＾－＾）＞

效果图

提供的代码尽量以参考为主，如有疑问，欢迎提出

巴特西

JavaEE----登陆界面验证码实现

界面展示：

LoginVerifyUtils全部代码

login.jsp

依赖ui库

javascript

loginController参考

效果图

最新文章

热门文章