国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP，暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
SSH+EXT2打造簡單的應(yīng)用(二)

第二步：

 

上一篇博文我們已經(jīng)把POJO類建立好了，現(xiàn)在我們可以發(fā)揮我們一貫的懶人作風(fēng)，呵呵，繼續(xù)用IDE生成我們的DAO類（實(shí)際開發(fā)中不推薦這樣做，當(dāng)然我們生成之后還是要修改的）

好了，為了節(jié)約空間，這里就不貼代碼了，現(xiàn)在的程序架構(gòu)如下：

 

 

好了，現(xiàn)在基本準(zhǔn)備工作已經(jīng)完畢，因?yàn)槲覀兪褂肊XT作為視圖層，現(xiàn)在我們可以開始設(shè)計(jì)視圖層了。

 

EXT的基本知識(shí)我這里也不再復(fù)述了，直接貼代碼吧，我們首先需要一個(gè)實(shí)現(xiàn)一個(gè)登錄窗體，頁面代碼如下：

 

login.jsp:(我們現(xiàn)在把這個(gè)頁面放到/WEB-INF/views/目錄下面，這里用到的資源文件我會(huì)在下面提供下載，randomImgCode.do 是一個(gè)生成驗(yàn)證碼的action，我會(huì)直接在下面的源碼中提供，具體實(shí)現(xiàn)大家可以看看我的源碼。)

 

Html代碼
 
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.         <title>簡易便簽系統(tǒng) - 用戶登錄</title>  
  7.         <link rel="stylesheet" href="css/skin.css" type="text/css" />  
  8.         <script type="text/javascript" src="js/prototype.js"></script>  
  9.     </head>  
  10.     <body>  
  11.         <!--loading加載 -->  
  12.         <div id="loadingTab">  
  13.             <div class="loading-indicator">  
  14.                 <img src="js/ext/resources/images/default/shared/large-loading.gif"  
  15.                     width="32" height="32"  
  16.                     style="margin-right: 8px; float: left; vertical-align: top;" />  
  17.                     簡易便簽系統(tǒng)-   
  18.                 <span id="loading-yfo"><a href="mailto:huangking124@163.com"  
  19.                     target="_blank">開發(fā)：黃磊</a> </span>  
  20.                 <br />  
  21.                 <span id="loading-msg">加載樣式表和圖片...</span>  
  22.             </div>  
  23.         </div>  
  24.         <link rel="stylesheet" type="text/css"  
  25.             href="js/ext/resources/css/ext-all.css" />  
  26.         <link rel="stylesheet" type="text/css"  
  27.             href="js/ext/resources/css/xtheme-gray.css" />  
  28.         <script type="text/javascript">$('loading-msg').innerHTML = '正在加載JSUI組建...';</script>  
  29.   
  30.         <!--加載EXT核心文件-->  
  31.         <script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>  
  32.         <script type="text/javascript" src="js/ext/ext-all.js"></script>  
  33.         <script type="text/javascript" src="js/ext/locale/ext-lang-zh_CN.js"  
  34.             charset="utf-8"></script>  
  35.   
  36.         <script type="text/javascript">$('loading-msg').innerHTML = '正在初始化...';</script>  
  37.   
  38.         <!--加載自定義組件-->  
  39.         <script type="text/javascript" src="js/Login.js"></script>  
  40.         <script type="text/javascript">  
  41.             $('loading-msg').innerHTML = '初始化完畢！！';   
  42.             Ext.get('loadingTab').fadeOut({remove: true});//讓加載標(biāo)簽消失   
  43.         </script>  
  44.         <div class="x-hide-display" id="imagecode">  
  45.             <img src="randomImgCode.do" title="看不清楚,刷新驗(yàn)證碼" id="checkimg"  
  46.                 onclick="javascript:this.src='randomImgCode.do?t='+Math.random();"  
  47.                 style="border-width: 0px; cursor: hand;" />  
  48.         </div>  
  49.     </body>  
  50. </html>  

 

 login.js:（這里面的幾個(gè)提交地址是暫時(shí)寫上的，以后會(huì)用到）

Js代碼
 
  1. /**  
  2.  * 登錄界面  
  3.  * 作者：黃磊  
  4.  */  
  5. Ext.namespace('MyNote');   
  6. Ext.QuickTips.init();   
  7. Ext.BLANK_IMAGE_URL = "js/ext/resources/images/default/s.gif";   
  8. MyNote.Login = function() {   
  9.     this.init();   
  10. };   
  11.   
  12. Ext.extend(MyNote.Login, Ext.util.Observable, {   
  13.     init : function() {        
  14.         var loginwindow = new Ext.Window({  //登錄窗體   
  15.             iconCls : 'key',   
  16.             title : '用戶登錄',   
  17.             height : 220,   
  18.             width : 290,   
  19.             closable : false,              
  20.             resizable : false,   
  21.             border : false,   
  22.             modal : true,   
  23.             items : [new Ext.FormPanel({   
  24.                 id : 'loginform',   
  25.                 bodyStyle : 'padding-top:6px',   
  26.                 labelWidth : 55,   
  27.                 frame : true,   
  28.                 labelAlign : 'right',   
  29.                 items : [new Ext.form.FieldSet({   
  30.                     autoHeight : true,   
  31.                     autoWidth : true,   
  32.                     bodyStyle : 'padding:5px',   
  33.                     title : '用戶登錄',   
  34.                     style : 'margin:5px',   
  35.                     items : [new Ext.form.TextField({   
  36.                         allowBlank : false,   
  37.                         itemCls : 'user',   
  38.                         blankText : '賬號(hào)不能為空',   
  39.                         name : 'username',   
  40.                         fieldLabel : '賬 號(hào)'  
  41.                     }), new Ext.form.TextField({   
  42.                         allowBlank : false,   
  43.                         itemCls : 'key',   
  44.                         blankText : '密碼不能為空',   
  45.                         inputType : 'password',   
  46.                         name : 'userpwd',   
  47.                         fieldLabel : '密 碼'  
  48.                     }), new Ext.Panel({   
  49.                         layout : 'column',   
  50.                         items : [new Ext.Panel({   
  51.                             bodyStyle : 'align:left;',   
  52.                             width : 130,   
  53.                             layout : 'form',   
  54.                             items : [new Ext.form.TextField({   
  55.                                 allowBlank : false,   
  56.                                 itemCls : 'key2',   
  57.                                 blankText : '驗(yàn)證碼不能為空',   
  58.                                 width : 60,   
  59.                                 name : 'checkcode',   
  60.                                 fieldLabel : '驗(yàn)證碼'  
  61.                             })]   
  62.                         }), new Ext.Panel({   
  63.                             bodyStyle : 'align:right;',   
  64.                             contentEl : 'imagecode'  
  65.                         })]   
  66.                     })]   
  67.                 })],   
  68.                 buttons : [new Ext.Button({   
  69.                     text : '登 錄 系 統(tǒng)',   
  70.                     type : 'submit',   
  71.                     listeners : {   
  72.                         click : function() {   
  73.                             var login = Ext.getCmp('loginform');                           
  74.                             if (login.form.isValid()) {   
  75.                                 login.form.submit({   
  76.                                     waitMsg : '正在登錄......',   
  77.                                     url : 'main.do?cmd=login',   
  78.                                     success : function(form, action) {   
  79.                                         form.reset();   
  80.                                         functions.waitBar('請(qǐng)稍后','正在加載系統(tǒng)...');   
  81.                                         window.location.href = 'page.do?cmd=main';   
  82.                                     },   
  83.                                     failure : function(form, action) {   
  84.                                         form.reset();   
  85.                                         Ext.MessageBox.show({   
  86.                                             title : '錯(cuò) 誤',   
  87.                                             msg : action.result.msg,   
  88.                                             buttons : Ext.Msg.OK,   
  89.                                             icon : Ext.MessageBox.ERROR   
  90.                                         });   
  91.                                         Ext.getDom("checkimg").src = "randomImgCode.do?t="  
  92.                                                 + Math.random();   
  93.                                     }   
  94.                                 });   
  95.                             } else {   
  96.                                 Ext.MessageBox.show({   
  97.                                     title : '警 告',   
  98.                                     msg : '您的輸入有問題,請(qǐng)檢查后提交!',   
  99.                                     buttons : Ext.Msg.OK,   
  100.                                     icon : Ext.MessageBox.WARNING   
  101.                                 });   
  102.                             }   
  103.                         }   
  104.                     }   
  105.                 }), new Ext.Button({   
  106.                     text : '重 置 輸 入',   
  107.                     type : 'reset',   
  108.                     listeners : {   
  109.                         click : function() {   
  110.                             Ext.getCmp("loginform").form.reset();   
  111.                         }   
  112.                     }   
  113.                 })]   
  114.             })]   
  115.         });   
  116.         loginwindow.show();   
  117.     }   
  118. });   
  119. Ext.onReady(function() {   
  120.     login = new MyNote.Login();   
  121. });  

 

 

好了，JSP文件里面的EXT路徑大家可以修改成你們自己的，剛才我們是把login.jsp文件放在了/WEB-INF/views/目錄下面，那我們?cè)撛趺慈ピL問呢？

 

現(xiàn)在我們就開始切入下一步。

 

第三步：

 

首先我們?cè)诎黮onlysky.iteye.com.mynote下建立一個(gè)類BaseAction，用于客戶端請(qǐng)求處理的基類

大家可能要問，問什么要建立一個(gè)這樣的ACTION呢？其實(shí)大家有沒有想過，當(dāng)我對(duì)客戶端的一些公共的處理方法，比如獲取會(huì)話中的用戶信息，判斷用戶是否登錄等等的在所有ACTION都要做的事情都放到這個(gè)基類來實(shí)現(xiàn)，然后其他ACTION都繼承此類，那么不是可以減少很多的代碼嗎？而且做了SSH整合之后，STRUTS1的ACTION也實(shí)現(xiàn)了非單例運(yùn)行模式（基于線程安全），這樣做就會(huì)有很多的好處了，在這個(gè)教程后面我們可以明顯的感受到，當(dāng)然這只是我個(gè)人的一個(gè)想法，大家如果有更好的意見或者建議歡迎拍磚。

 

Java代碼
 
  1. /**  
  2.  * 客戶端處理基類  
  3.  *   
  4.  * @author 黃磊  
  5.  *   
  6.  */  
  7. public class BaseAction extends DispatchActionSupport {   
  8.        
  9. }  

 

那么下面我們需要做的就是如何才能訪問到我們剛才寫的登錄界面，我個(gè)人的想法是單獨(dú)寫一個(gè)ACTION來用作頁面的跳轉(zhuǎn)

 

那么，我們就在包lonlysky.iteye.com.mynote.action下建立一個(gè)，PageAction，我們需要的是繼承自我們剛才寫好的BaseAction

 

Java代碼
 
  1. /**  
  2.  * 本ACTION用于頁面跳轉(zhuǎn)  
  3.  *   
  4.  * @author 黃磊  
  5.  *  
  6.  */  
  7. public class PageAction extends BaseAction {   
  8.        
  9.     // 跳轉(zhuǎn)用戶登錄界面   
  10.     public ActionForward login(ActionMapping mapping, ActionForm form,   
  11.             HttpServletRequest request, HttpServletResponse response) throws Exception {   
  12.         return mapping.findForward("login");   
  13.     }   
  14. }  

 

既然寫了Action，那么我們現(xiàn)在要做的就是配置struts-config.xml文件，我們需要在全局跳轉(zhuǎn)處加入我們的login.jsp頁面，然后配置我們的PageAction

Xml代碼
 
  1. <global-forwards>  
  2.   <!-- 登錄跳轉(zhuǎn) -->  
  3.   <forward name="login" path="/WEB-INF/view/login.jsp" />  
  4.  </global-forwards>  
  5.  <action-mappings>  
  6.   <action path="/randomImgCode"  
  7.    type="lonlysky.iteye.com.mynote.action.RandomImgCodeAction" />  
  8.   <!-- 頁面跳轉(zhuǎn)Action -->  
  9.   <action path="/page"  
  10.    type="lonlysky.iteye.com.mynote.action.PageAction" parameter="cmd" />  
  11.  </action-mappings>  

 

好了，現(xiàn)在我們可以運(yùn)行調(diào)試我們的項(xiàng)目并預(yù)覽效果了

 

啟動(dòng)服務(wù)器后我們可以嘗試訪問

http://localhost:8080/mynotepro/page.do?cmd=login

 

如果一切正常我們就可以看到如下效果

 

 

（未完待續(xù)）

 

本小結(jié)項(xiàng)目源碼下載（因?yàn)榭臻g限制，所以我刪除了所有的JAR架包）

 

 

  • 大小: 20 KB
  • 大小: 10.9 KB
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
Extjs中采用ASP實(shí)現(xiàn)的登陸窗體
extjs導(dǎo)入要注意的（入門）
Ext.Window
個(gè)人疑問:Extjs 4.0 正式版中 Ext.Msg.show 中animEl 屬性
jsp引入js文件 -- 網(wǎng)頁出現(xiàn)中文亂碼-- bleach尸魂界的360圖書館
Go語言開發(fā)：在HTML模板中引入js及其他靜態(tài)文件
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服