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

各行各業需要各種各樣的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崩了怎么辦？數據庫崩了怎么辦？） 

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

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

最佳答案：