富瀏覽器程序設計實例 -頁面控制 - 登錄與驗證碼

Yangcl 11年前發布 | 13K 次閱讀 MongooseJS


這篇介紹是作為《富瀏覽器程序設計實例》前面博客的補充。
頁面效果如下：



登錄與驗證涉及8個文件，羅列如下：
login.js
checkCode.css
LoginAction.java
LoginService.java
LoginServiceImpl.java
LoginDao.java
LoginDaoImpl.java
User.java

        在登錄的模塊中首先應當驗證驗證碼的正確性，然后在查閱數據庫內容。如果僅僅是簡單的登錄驗證，實際上和Session并沒有關系，但是如果你要控制頁面，不讓他隨便跳轉，這就和Session有關了。舉例來說：登錄頁是login.jsp，登錄完成，借助struts你會跳轉到對應的頁面。但是如果你直接在地址欄輸入你要去的頁面，你可以直接進入。這在很多系統中是不允許的。為了達到這個目的，我們需要對頁面進行攔截和過濾，Servlet中提供了一個類是Filter類，專門做這件事。在這里先介紹登錄與驗證的實現方法，過濾的功能 將在《頁面Filter攔截與過濾》介紹，因為有些可寫的。這篇文章是對《SSH2+ExtJS4.2.1+MySql示例程序》系列博客的完善，在這篇博客中提供的源代碼也將更新，但源地址連接會保留。新的源代碼中將會增加對登錄、驗證和頁面攔截與過濾的功能。
       針對源代碼在CSDN中的積分設置仍然是20分，分成兩個壓縮包，每個10分。這樣設置的原因是：1.CSDN初始20分，如果你只是個伸手黨，沒有開源精神，不做貢獻，你的CSDN積分肯定不夠20分，那么資源不會分享給你；2.下載資源，評論下，系統會返還你的積分，也就是說對你并沒有損失；3.作者耗費精力從無到有，算是另一種收獲吧。


在login()方法中ajaxJson()方法是向服務器發送消息的

  1.     /** 
  2.      * trim()方法用于去除空格 
  3.      * 1. 判斷驗證碼正確性 
  4.      * 2. 判斷用戶名在數據庫中是否存在 
  5.      * 3. 判斷密碼是否正確 
  6.      */  
  7.     public void login()  
  8.     {  
  9.         String msg = "";  
  10.   
  11.         // 判斷驗證碼正確性  
  12.         String actionCheckCode = (String) ActionContext.getContext().getSession().get("getRandomNum");  
  13.         if ( !pageCheckCode.equals(actionCheckCode) )  
  14.         {  
  15.             msg = "{success:false,failMessage:'驗證碼有誤'}";  
  16.         }  
  17.         else  
  18.         {  
  19.             try  
  20.             {  
  21.                 // 判斷用戶名在數據庫中是否存在  
  22.                 user = loginService.get(User.class, "username", username.trim());  
  23.                 if (user != null)  
  24.                 {  
  25. //                    if ( passwordMd5.trim().equals(user.getPassword().trim()) )     // TODO 2013-11-18  
  26.                     if ( password.trim().equals(user.getPassword().trim()) )  
  27.                     {  
  28.                         msg = "{success:true}";  
  29.   
  30.                         this.userSession();  
  31.                     }  
  32.                     else{  
  33.                         msg = "{success:false,failMessage:'密碼不正確'}";  
  34.                     }  
  35.                 }  
  36.                 else {  
  37.                     msg = "{success:false,failMessage:'系統無此用戶'}";  
  38.                 }  
  39.             }  
  40.             catch (Exception e)  
  41.             {  
  42.                 msg = "{success:false, failMessage:'登錄失敗，請確認網絡或數據庫是否正常!'}";  
  43.             }  
  44.         }  
  45.         ajaxJson(msg);  
  46.     }  
         驗證碼生成方法，作為LoginAction.java中的一個獨立方法，當你在瀏覽器地址欄中輸入如下連接的時候，頁面中會出現一個圖片，圖片中包含驗證碼
http://localhost:8099/system/login!sendCheckCode.action
  1.     /** 
  2.      * 生 成隨機驗證碼 這是一個獨立的 Action 方法  
  3.      */  
  4.     public void sendCheckCode() throws IOException  
  5.     {  
  6.         //設置頁面不緩存  
  7.         HttpServletResponse response = getUTFResponse();     //ServletActionContext.getResponse();  
  8.         response.setHeader("Pragma", "No-cache");  
  9.         response.setHeader("Cache-Control", "no-cache");  
  10.         response.setHeader("Content-Type", "image/jpeg");  
  11.         response.setDateHeader("Expires", 0);  
  12.   
  13.         // 在內存中創建圖象  
  14.         int width = 60, height = 20;  
  15.         BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);  
  16.         // 獲取圖形上下文  
  17.         Graphics g = image.getGraphics();  
  18.         //生成隨機類  
  19.         Random random = new Random();  
  20.         // 設定背景色  
  21.         g.setColor(getRandColor(200, 250));  
  22.         g.fillRect(0, 0, width, height);  
  23.         //設定字體  
  24.         g.setFont(new Font("Times New Roman", Font.PLAIN, 18));  
  25.   
  26.         // 隨機產生155條干擾線，使圖象中的認證碼不易被其它程序探測到  
  27.         g.setColor(getRandColor(160, 200));  
  28.         for (int i = 0; i < 155; i++)  
  29.         {  
  30.             int x = random.nextInt(width);  
  31.             int y = random.nextInt(height);  
  32.             int xl = random.nextInt(12);  
  33.             int yl = random.nextInt(12);  
  34.             g.drawLine(x, y, x + xl, y + yl);  
  35.         }  
  36.   
  37.         // 取隨機產生的認證碼(4位數字)  
  38.         String randomNum = "";  
  39.         for (int i = 0; i < 4; i++)  
  40.         {  
  41.             String getRandomNum = String.valueOf(random.nextInt(10));  
  42.             randomNum += getRandomNum;  
  43.             // 將認證碼顯示到圖象中  
  44.             g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));  
  45.                     // 調用函數出來的顏色相同，可能是因為種子太接近，所以只能直接生成  
  46.   
  47.             g.drawString(getRandomNum, 13 * i + 6, 16);  
  48.         }  
  49.   
  50.         System.out.println("randomNum = " + randomNum);  
  51.   
  52.         // 將認證碼存入SESSION  
  53.         ActionContext.getContext().getSession().put("getRandomNum", randomNum);  
  54.         // 圖象生效  
  55.         g.dispose();  
  56.         OutputStream output = response.getOutputStream();  
  57.         try  
  58.         {  
  59.             // 輸出圖象到頁面  
  60.             ImageIO.write(image, "JPEG", output);  
  61.         }  
  62.         finally {  
  63.             output.flush();  
  64.             output.close();  
  65.         }  
  66.     }  
  67.   
  68.     //獲得隨機顏色 給定范圍獲得隨機顏色  
  69.     // java.awt.Color  
  70.     private Color getRandColor(int fc, int bc)  
  71.     {  
  72.         Random random = new Random();  
  73.         if (fc > 255)  
  74.             fc = 255;  
  75.   
  76.         if (bc > 255)  
  77.             bc = 255;  
  78.   
  79.         int r = fc + random.nextInt(bc - fc);  
  80.         int g = fc + random.nextInt(bc - fc);  
  81.         int b = fc + random.nextInt(bc - fc);  
  82.         return new Color(r, g, b);  
  83.     } 

         后臺查詢用戶調用的方法：
  1.     /** 
  2.      * 根據屬性名和屬性值獲取實體對象. 
  3.      * 
  4.      * @param clazz        實體對象類型 
  5.      * @param propertyName 屬性名稱 
  6.      * @param value        屬性值 
  7.      * @return 實體對象 
  8.      */  
  9.     @SuppressWarnings("unchecked")  
  10.     public <T> T get(Class<T> clazz, String propertyName, Object value)  
  11.     {  
  12.         Assert.hasText(propertyName, "propertyName must not be empty");  
  13.         Assert.notNull(value, "value is required");  
  14.   
  15.         String hql = "from " + clazz.getName() + " as model where model." + propertyName + " = ?";  
  16.   
  17.         return (T) getSession().createQuery(hql).setParameter(0, value).uniqueResult();  
  18.     }  
  19.   
  20. }

        對前臺腳本的處理
  1.         var loginForm = Ext.create('Ext.FormPanel',  
  2.         {  
  3.             height:100,  
  4.             width:300,  
  5.             frame:true,  
  6.             baseCls:'x-plain',  
  7.             items:  
  8.             [  
  9.                 {  
  10.                     xtype:'textfield',  
  11.   
  12.                     value:'a',  
  13.   
  14.                     name:'username',    // 要對應LoginAction里的username  
  15.                     fieldLabel:'用戶名',  
  16.                     labelWidth:60,  
  17.                     width:250,  
  18.                     padding:'5 20 5 20',  
  19.                     allowBlank:false,  
  20.                     blankText:'用戶名不能為空',  
  21.                     msgTarget:'side'  
  22.                 },  
  23.                 {  
  24.                     xtype:'textfield',  
  25.   
  26.                     value:'a',  
  27.   
  28.                     name:'password',  
  29.                     itemId:'password',  
  30.                     inputType:'password',  
  31.                     fieldLabel:'密   碼',  
  32.                     labelWidth:60,  
  33.                     width:250,  
  34.                     padding:'10 20 5 20',  
  35.                     allowBlank:false,  
  36.                     blankText:'密碼不能為空',  
  37.                     msgTarget:'side'  
  38.                 },  
  39.                 {  
  40.                     xtype:'textfield',         // 隱藏字段 用于將密碼銘文加密  
  41.                     itemId:'passwordMd5',  
  42.                     name:'passwordMd5',  
  43.                     width:0,  
  44.                     hidden:true  
  45.                 },  
  46.                 checkcode  
  47.             ]  
  48.         }); 

        關于Struts2的屬性映射原理，頁面中定義的屬性只要和對應要訪問的Action中的屬性相同即可，這里相同指大小寫也要一致。在ExtJS中 定義的name:'username',屬性，在Action中也要有對應的字段。從請求的頁面將要發送的值傳送到Action中是通過Struts2來做的，Struts2就像一個信息傳遞的使者。知道該這么用就好，沒必要深究太多。

          相關資源將會在12月2日之前更新，在《SSH2+ExtJS4.2.1+MySql示例程序》下面會給出新的資源鏈接。針對用戶登錄與頁面控制是一組完整的邏輯，這篇文章先介紹登錄與驗證，今天晚上在更新《頁面Filter攔截與過濾》的內容，如果對您有幫助，幫忙點個贊~ 

 本文由用戶 Yangcl 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！