1.準(zhǔn)備工作
先從官網(wǎng)下載源代碼：點擊打開鏈接，
下載完成后看如下目錄項：locale myself 和src都是些組件的js，easy ui把這些js都封裝好了，所以我們不需要考慮這些。
接著我們需要搭建項目環(huán)境，我的項目用到了maven，關(guān)于maven環(huán)境搭建大家可以在網(wǎng)上找點資料看下，在此就不多加贅述了。貼下pom.xml配置具體如圖：
[java] view plain copy PRint?<dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> <scope>provided</scope> </dependency> <!– 加入MySQL驅(qū)動依賴包 –> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.27</version> </dependency> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>taglibs</groupId> <artifactId>standard</artifactId> <version>1.1.2</version> </dependency> <!–引入json包 –> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-lang3</artifactId> <version>3.1</version> </dependency> <dependency> <groupId>commons-beanutils</groupId> <artifactId>commons-beanutils</artifactId> <version>1.8.3</version> </dependency> <dependency> <groupId>commons-logging</groupId> <artifactId>commons-logging</artifactId> <version>1.1.1</version> </dependency> <dependency> <groupId>commons-collections</groupId> <artifactId>commons-collections</artifactId> <version>3.2.1</version> </dependency> <dependency> <groupId>net.sf.ezmorph</groupId> <artifactId>ezmorph</artifactId> <version>1.0.6</version> </dependency> <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.4</version> </dependency>
<dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> <scope>provided</scope> </dependency> <!-- 加入mysql驅(qū)動依賴包 --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.27</version> </dependency> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>taglibs</groupId> <artifactId>standard</artifactId> <version>1.1.2</version> </dependency> <!--引入json包 --> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-lang3</artifactId> <version>3.1</version> </dependency> <dependency> <groupId>commons-beanutils</groupId> <artifactId>commons-beanutils</artifactId> <version>1.8.3</version> </dependency> <dependency> <groupId>commons-logging</groupId> <artifactId>commons-logging</artifactId> <version>1.1.1</version> </dependency> <dependency> <groupId>commons-collections</groupId> <artifactId>commons-collections</artifactId> <version>3.2.1</version> </dependency> <dependency> <groupId>net.sf.ezmorph</groupId> <artifactId>ezmorph</artifactId> <version>1.0.6</version> </dependency> <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.4</version> </dependency>[java] view plain copy print?<build> <plugins> <plugin> <artifactId>maven-compiler-plugin</artifactId> <version>2.3.2</version> <configuration> <source>1.6</source> <target>1.6</target> </configuration> </plugin> <plugin> <artifactId>maven-war-plugin</artifactId> <version>2.2</version> <configuration> <version>3.0</version> <failOnMissingWebXml>false</failOnMissingWebXml> </configuration> </plugin> <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomcat7-maven-plugin</artifactId> <version>2.1</version> <configuration> <server>tomcat7</server> <port>8000</port> <url>http://localhost:8000/manager/text</url><!–端口號 –> <uriEncoding>UTF-8</uriEncoding> <path>/zycweb</path> <username>admin</username> <passWord>admin</password> </configuration> </plugin> </plugins> </build><build> <plugins> <plugin> <artifactId>maven-compiler-plugin</artifactId> <version>2.3.2</version> <configuration> <source>1.6</source> <target>1.6</target> </configuration> </plugin> <plugin> <artifactId>maven-war-plugin</artifactId> <version>2.2</version> <configuration> <version>3.0</version> <failOnMissingWebXml>false</failOnMissingWebXml> </configuration> </plugin> <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomcat7-maven-plugin</artifactId> <version>2.1</version> <configuration> <server>tomcat7</server> <port>8000</port> <url>http://localhost:8000/manager/text</url><!--端口號 --> <uriEncoding>UTF-8</uriEncoding> <path>/zycweb</path> <username>admin</username> <password>admin</password> </configuration> </plugin> </plugins> </build>一切都準(zhǔn)備好后，首先考慮我們 權(quán)限管理框架的邏輯，用戶登錄以后先查詢該用戶擁有的角色，再查詢該角色下?lián)碛械牟藛文K。同時管理員可以分配角色擁有哪些模塊，以及所謂的增刪查改。這個是我們考慮需要做的，數(shù)據(jù)庫采用的是mysql。表結(jié)構(gòu)如下，由于只是簡單的權(quán)限控制模塊，沒有考慮增刪查改這些權(quán)限控制操作（以后如果有時間再加上吧），如果數(shù)據(jù)庫只用到了五張表。如圖。
今天有時間，我用erstudio建模工具講表的大致結(jié)構(gòu)規(guī)劃出來了，現(xiàn)在大家可以看看表結(jié)構(gòu)。
2.登錄獲取權(quán)限菜單
用戶名登錄獲取哪些菜單呢？首先獲得用戶角色下?lián)碛械牟藛涡畔ⅰasy ui 返回給客戶端響應(yīng)的都是json格式數(shù)據(jù)，所以我們登錄成功進(jìn)入到主頁面要是json格式，這樣才能給我們想要的結(jié)果。那登錄后的界面是啥樣呢？首先從下載好的easyui demo 文件夾里找到layout布局文件夾這個組件中，找到一個demo,你會看到它們是怎么引入js和CSS的。所以嘛，照搬,從full.html引入它的js css
如圖把該引入的css js都引入到本項目中。我是把項目中所有用到的js css都引入到一個公共頁面中了taglib.jsp中。好了應(yīng)該效果圖也出來了。layout組件分上下左右中五塊區(qū)域，首先我們就要考慮west區(qū)域，因為這塊區(qū)域是樹菜單。這塊剛開始是犯難了，到底是一下子全部加載出來樹呢，還是點擊一下加載出來呢（也就是異步加載，這樣應(yīng)該很容易理解吧，哈哈），考慮到有的項目可能很多模塊，響應(yīng)時間不能過長，還是選擇異步加載。異步加載需要考慮先加載一級菜單和二級菜單，然后二級菜單下有沒有三級菜單，需要做個判斷，如果有返回的json格式必須有個狀態(tài)state:closed.具體服務(wù)器端關(guān)鍵代碼如下：（由于剛開始寫沒有用json第三方包都是手寫拼的所以是這樣的）
[java] view plain copy print?<span style=“font-size:12px;”> if (newModelList != null && newModelList.size() > 0) {// 用戶權(quán)限是否擁有菜單 for (int i = 0; i < newModelList.size(); i++) { long roleModelId = newModelList.get(i).getModelId(); for (int j = 0; j < listModelByParentId.size(); j++) {// 查詢菜單是否擁有此角色菜單，作比較 TModel tModel = listModelByParentId.get(j); if (tModel.getId() == roleModelId) { List<TModel> listSecond = modelDao.getRoleModelByParentId(tModel.getId()); jsonStr.append(”{/”id/”:” + tModel.getId() + “,/”text/”:/”“ + tModel.getName() + “/”,”); if (listSecond != null && listSecond.size() > 0) { jsonStr.append(”/”state/”:/”closed/”“); } else { jsonStr.append(”/”state/”:/”open/”“); } if (tModel.getUrl() != null && !“”.equals(tModel.getUrl())) { jsonStr.append(”,/”url/”:/”“ + tModel.getUrl() + “/”“); } else { // jsonStr.append(“/”url/”:/”servlet/LoginServlet/”“); } jsonStr.append(”},”); } } } } if (jsonStr.toString().endsWith(“,”)) { String newJson = jsonStr.toString().substring(0, jsonStr.toString().length() - 1); jsonStr.replace(0, jsonStr.toString().length(), newJson); } if (parentId != null && parentId.equals(“0”)) { jsonStr.append(”]}]”); } else { jsonStr.append(”]”); }</span><span style="font-size:12px;"> if (newModelList != null && newModelList.size() > 0) {// 用戶權(quán)限是否擁有菜單 for (int i = 0; i < newModelList.size(); i++) { long roleModelId = newModelList.get(i).getModelId(); for (int j = 0; j < listModelByParentId.size(); j++) {// 查詢菜單是否擁有此角色菜單，作比較 TModel tModel = listModelByParentId.get(j); if (tModel.getId() == roleModelId) { List<TModel> listSecond = modelDao.getRoleModelByParentId(tModel.getId()); jsonStr.append("{/"id/":" + tModel.getId() + ",/"text/":/"" + tModel.getName() + "/","); if (listSecond != null && listSecond.size() > 0) { jsonStr.append("/"state/":/"closed/""); } else { jsonStr.append("/"state/":/"open/""); } if (tModel.getUrl() != null && !"".equals(tModel.getUrl())) { jsonStr.append(",/"url/":/"" + tModel.getUrl() + "/""); } else { // jsonStr.append("/"url/":/"servlet/LoginServlet/""); } jsonStr.append("},"); } } } } if (jsonStr.toString().endsWith(",")) { String newJson = jsonStr.toString().substring(0, jsonStr.toString().length() - 1); jsonStr.replace(0, jsonStr.toString().length(), newJson); } if (parentId != null && parentId.equals("0")) { jsonStr.append("]}]"); } else { jsonStr.append("]"); }</span>整取返回的菜單格式應(yīng)該如下圖服務(wù)器已經(jīng)給客戶端發(fā)送json格式數(shù)據(jù)了，那么前端該怎么樣實現(xiàn)異步加載呢？具體代碼如下：
[java] view plain copy print?<span style=“font-size:12px;”> (</span><span class="string">'#tree'</span><span>).tree({ </span></span></li><li class=""><span> url:<span class="string">'${zyc}/servlet/TreeServlet?parentId=0'</span><span> , </span></span></li><li class="alt"><span> animate:<span class="keyword">true</span><span>, </span></span></li><li class=""><span> checkbox:<span class="keyword">false</span><span>, </span></span></li><li class="alt"><span> lines:<span class="keyword">true</span><span>, </span></span></li><li class=""><span> onClick: function(node){ </span></li><li class="alt"><span> <span class="keyword">if</span><span>(node.url!=</span><span class="string">""</span><span> && typeof(node.url)!=</span><span class="string">'undefined'</span><span>){ </span></span></li><li class=""><span> addtab(node.text,<span class="string">"${zyc}/"</span><span>+node.url); </span></span></li><li class="alt"><span> } </span></li><li class=""><span> }, </span></li><li class="alt"><span> onBeforeExpand:function(node,param){ </span></li><li class=""><span> $(<span class="string">'#tree'</span><span>).tree(</span><span class="string">'options'</span><span>).url = </span><span class="string">"../servlet/TreeServlet?parentId="</span><span> + node.id; </span><span class="comment">//動態(tài)獲取節(jié)點 </span><span> </span></span></li><li class="alt"><span> } </span></li><li class=""><span> });</span> </span></li></ol><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascr('#tree').tree({ url:'${zyc}/servlet/TreeServlet?parentId=0' , animate:true, checkbox:false, lines:true, onClick: function(node){ if(node.url!="" && typeof(node.url)!='undefined'){ addtab(node.text,"${zyc}/"+node.url); } }, onBeforeExpand:function(node,param){ $('#tree').tree('options').url = "../servlet/TreeServlet?parentId=" + node.id; //動態(tài)獲取節(jié)點 } });</span>
新聞熱點
疑難解答
