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域，當用戶提交請求時，獲取表單數據然后進行比對＜（＾－＾）＞

效果圖

 

 提供的代碼盡量以參考為主，如有疑問，歡迎提出