JQuery EasyUI+Java實現web管理系統 -开发者知识库

JQuery EasyUI+Java實現web管理系統 -开发者知识库,第1张

各行各業需要各種各樣的web管理系統,優點肯定是顯而易見的(比人工記錄管理在在紙上、在excel和word表上方便多了),其基本功能無非就是增刪改查。

當然了,我的web管理系統就做的很簡單也很粗糙了,該系統是管理計算機設備的。該系統主要管理關於設備自身固有屬性(SN號、型號)與設備關聯屬性(所在位置、所處狀態、擁有者)。

系統前端使用模板樣式 JQuery EasyUI組件,使用JSON交換數據,后端語言使用Java,服務器使用Tomcat,與MySQL數據庫交互采用DbUtils

自定義樣式

這個主要包括注冊、登錄、管理頁面的整體格調、色彩搭配、頁面樣式、布局等等。要想真的前端搞好,要狠下功夫!然而我並不懂設計,也沒有太多經驗。為了敏捷開發(先把東西做出來  是最重要的,改進優化以r后再說!),直接搜各種網站素材模板(主要是圖片資源和靜態的html代碼),借用它的皮囊。

JQuery EasyUI 組件

 tabs(選項卡)組件在項目中主要用於 切換不同的tabs窗口,注意不同的tabs其實處在同一個頁面上,切換tab其實只是將該顯示的show出來,不該顯示的hide掉。

因此如果不做特殊選擇,操作多個相同類型的tabs會操作所有該類型的tabs(因為選擇器一樣),如果有這樣的需求,請使用iframe。

dialog(對話框)組件主要負責呈現提交form組件,dialog中可包括各種類型的validatebox,對validatebox的驗證可以使用自定義驗證器。

<p style="margin:10px">
   輸入新密碼:<input class="easyui-validatebox textbox"name="password"id="pwd"type="password"placeholder="******"data-options="required:true"validType="lengthTo[5,10]"style="margin-left:10px"/> 
</p>
<p style="margin:10px">
   確認輸入:    <input class="easyui-validatebox textbox"type="password"placeholder="******"data-options="required:true"validType="equalTo['pwd']"style="margin-left:10px"/>
</p>
$.extend($.fn.validatebox.defaults.rules,{    
     lengthTo:{
        validator:function(value,param){
             return value.length>=param[0] &&value.length<=param[1];
        },
        message:'密碼應該為5到10位'
     },
     equalTo:{
        validator:function(value,param){
          if ($("#" param[0]).val()!=""&&value!=""){  
                return $("#"   param[0]).val() ===value;  
              }else{  
             return true;  
           } 
        },
        message:'兩次輸入的密碼不一致'
     },    
   }); 

對form的整體驗證可以使用提供的方法,但注意jquery提供的serializeArray()封裝的json數據為name:''value:''格式,可能與期望json格式不符,因此可以在前端對其進行轉換,將其轉換為{'屬性名':'屬性值'}類型json。

var isValid=$('#update_form').form('enableValidation').form('validate'); 
function formToJson(form) {  
    var result = {};  
    var fieldArray = $(form).serializeArray();  
    for (var i = 0; i < fieldArray.length; i  ) {  
        var field = fieldArray[i];  
        if (field.name in result) {  
            result[field.name]  = ','   field.value;  
        } else {  
            result[field.name]=field.value;  
        }  
    }  
   return JSON.stringify(result);  
 } 

messager(消息窗口)組件主要負責顯示操作輔助信息,如在ajax請求前( 顯示操作進度條)、響應接收后回調函數(顯示操作成功或者操作失敗提示框 )  

combobox(組合框)組件主要負責構建下拉列表框,以方便於模糊匹配設備sn碼等特征信息,可以為combobox綁定一個回車監聽事件(實現繼承自combo組件的keyHandler方法比較麻煩,可以不使用)

$(input_combo).combobox('textbox').keydown(function(event){
				if(event.keyCode=='13'){  //回車鍵
	                ...
				 }
	 });   

datagrid(數據表格)組件主要呈現設備信息,遠程請求url設置為servlet,在servlet中調用service方法獲取數據庫中的數據,將其轉換為json后,使用輸出流寫出來。

treegrid(樹形表格)組件以樹形式呈現數據  它所請求的json也比較特殊,必須要傳一個id,注意id必須保持其唯一性,兩個id相同的根節點或者子節點或者一個根節點與一個子節點,其中一個都是不能夠正常使用的。

treegrid加載初始化完成之后,有子節點的根節點可以正常的展開與關閉,對於沒有子節點的根節點來說,展開該根節點時,EasyUI會默認把此節點id的值作為http請求參數並命名為'id',發送到之前設定好的url服務器端。如果此url和之前treegrid初始化url相同時(事實上確實就是相同的),程序再次響應,會輸出含有所有數據的json(與之前初始化的相同),進而導致treegrid卡死。為防止此類現象產生,兩種做法,一種在后端進行判斷,如果含有id參數,直接返回空,另一種是前端進行判斷,為treegrid添加onBeforeExpand事件,如果該根節點沒有子節點,該事件直接return false,禁止展開該根節點,從而禁止請求服務器。

onBeforeExpand:function(row){  
    if(row.children.length==0){
      return false;
    }
},

JSON

EasyUI 控件獲取、提交都支持JSON格式,因此使用JSON傳輸數據將會變得非常方便。

但是ajax提交之前需要注意控件方法獲取到的值為JSON對象,應將其使用JSON.stringify()解析為JSON字符串提交,要不然獲取到的只是生硬的[Object object],其原因在於jquery提供的ajax方法會將請求數據自動轉換為String格式。

在服務器端使用json-lib.jar包,將請求傳來的json數組轉換成對應的javaBean 對象並進行進一步的操作,將從數據庫中獲取的、需要響應的javaBean對象轉換成json數組,實現了與前端的數據通信。

//解析json數據 並封裝為equipmentBean對象
  JSONObject jsonObject = JSONObject.fromObject(request.getParameter("formdata"));
  equipmentBean eb=(equipmentBean)JSONObject.toBean(jsonObject,equipmentBean.class);

DbUtils

當使用了jdbc寫了那么多條sql冗長而且容易出錯語句之后,你就會發現使用DbUtils會多么簡化你的代碼,它實現了對jdbc最簡單的封裝。

具體使用方法就是  引入c3p0.jar包與commons-dbutils.jar包,從c3p0構建的數據庫連接池里獲取連接,寫sql執行,就這么簡單。

public class c3p0Support {
		private static ComboPooledDataSource cpsd=new ComboPooledDataSource();  //從c3p0池中獲取連接
		public static DataSource getDataSource(){
			return cpsd;
		}
}
 public ArrayList<tb_user> queryUser(String username,String password){            //查詢給定用戶與密碼的結果集
		  ArrayList<tb_user> result=new ArrayList<tb_user>();
		  QueryRunner runner= new QueryRunner(c3p0Support.getDataSource()); 
		  String sql="select * from user where username=? and password=?";
		  Object[]params=new Object[]{username,password};
		  try {
			  result=(ArrayList<tb_user>)runner.query(sql,new BeanListHandler<tb_user>(tb_user.class),params);
			} catch (SQLException e){
				System.out.println("出現錯誤" e.getErrorCode() e.getMessage());
				e.printStackTrace();
			}
			return result;
	  }


MySQL數據庫

關於數據庫的設計,只設計了兩種類型的表,基礎屬性表與關聯表,基礎屬性表就主要是 自增主鍵id 設備自身屬性 操作信息(操作人 時間)。
由於數據庫的現有數據是從文檔中整體導入,不全面也有些錯誤,為避免麻煩,關聯表並沒有設計成外鍵形式,而是以  自增主鍵id 關聯事物主鍵id 被關聯事物主鍵id 操作信息(操作人 時間)。

通過聯表查詢 獲取並修改數據。

創建數據庫表的時候一定要設置好表的字符集和核對校驗規則,我采用的是utf8編碼格式與utf8_general_ci校驗規則,不同類型的核對校驗規則會有一定的差別,一個數據庫中的所有表一般都要保持一致,不然的話,聯表查詢會出現錯誤,只能重新建表。

測試

開發者永遠是根據開發者的思維和邏輯在構建系統和編寫代碼,如果他自己測試,肯定測試的不全面。

讓別人測試 可以找到很多意想不到的BUG。

我越來越意識到在軟件發布之前進行完整的測試是多么重要!很關鍵!

總結

紙上得來終覺淺,絕知此事要躬行。雖然很簡單,但是我通過自己的實踐獲取到了一定的知識,分享出來,歡迎指正,歡迎交流。

其實客觀的評價這個系統,只是能用而已,它存在着很多很多的問題。

比如說 交互性問題(生硬到極致的人機交互)、可維護性(換個人能不能接着開發?)、安全性問題(用戶行為真的很規矩嗎?系統真的很安全嗎?)、可用性(只能在內網Linux服務器上跑?能不能在全市跑?能不能在全國跑?)、容災性(tomcat崩了怎么辦?數據庫崩了怎么辦?) 

一個真正成熟的上千萬人用的大型網站架構系統,和一個人用的系統、二三十個人用的系統、上千個人用的系統是從需求分析、設計、編碼、測試、部署是有着天壤之別的,我意識到了,但是現在並沒有能力來改進,哎,路漫漫其修遠兮,吾將上下而求索......

順便趁着這篇博文,感謝一下帶我進入編程世界張龍、李彥輝老師,素未謀面,神交已久。他們的聲音帶給我智慧、思考與力量!非常感謝!

最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复