jquery easy ui最新版本簡單的許可權分配

阿新 • • 發佈：2019-02-09

jquery easy 1.5 Maven+servlet+jsp+jdbc實現許可權管理分配

1.準備工作

下載完成後看如下目錄項：locale myself 和src都是些元件的js，easy ui把這些js都封裝好了，所以我們不需要考慮這些。

接著我們需要搭建專案環境，我的專案用到了maven，關於maven環境搭建大家可以在網上找點資料看下，在此就不多加贅述了。貼下pom.xml配置具體如圖：

<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<!– 加入mysql驅動依賴包 –>
<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驅動依賴包 -->
        <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>

一切都準備好後，首先考慮我們許可權管理框架的邏輯，使用者登入以後先查詢該使用者擁有的角色，再查詢該角色下擁有的選單模組。同時管理員可以分配角色擁有哪些模組，以及所謂的增刪查改。這個是我們考慮需要做的，資料庫採用的是mysql。表結構如下，由於只是簡單的許可權控制模組，沒有考慮增刪查改這些許可權控制操作（以後如果有時間再加上吧），如果資料庫只用到了五張表。如圖。

今天有時間，我用erstudio建模工具講表的大致結構規劃出來了，現在大家可以看看錶結構。

2.登入獲取許可權選單

使用者名稱登入獲取哪些選單呢？首先獲得使用者角色下擁有的選單資訊。easy ui 返回給客戶端響應的都是json格式資料，所以我們登入成功進入到主頁面要是json格式，這樣才能給我們想要的結果。那登入後的介面是啥樣呢？首先從下載好的easyui demo 資料夾裡找到layout佈局資料夾這個元件中，找到一個demo,你會看到它們是怎麼引入js和css的。所以嘛，照搬,從full.html引入它的js css

如圖把該引入的css js都引入到本專案中。我是把專案中所有用到的js css都引入到一個公共頁面中了taglib.jsp中。好了應該效果圖也出來了。layout元件分上下左右中五塊區域，首先我們就要考慮west區域，因為這塊區域是樹選單。這塊剛開始是犯難了，到底是一下子全部加載出來樹呢，還是點選一下加載出來呢（也就是非同步載入，這樣應該很容易理解吧，哈哈），考慮到有的專案可能很多模組，響應時間不能過長，還是選擇非同步載入。非同步載入需要考慮先載入一級選單和二級選單，然後二級選單下有沒有三級選單，需要做個判斷，如果有返回的json格式必須有個狀態state:closed.具體伺服器端關鍵程式碼如下：（由於剛開始寫沒有用json第三方包都是手寫拼的所以是這樣的）

[java] view plain copy print?

if (newModelList != null && newModelList.size() > 0) {// 使用者許可權是否擁有選單
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 style="font-size:12px;"> if (newModelList != null && newModelList.size() > 0) {// 使用者許可權是否擁有選單
                        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>

整取返回的選單格式應該如下圖

伺服器已經給客戶端傳送json格式資料了，那麼前端該怎麼樣實現非同步載入呢？具體程式碼如下：

[java] view plain copy print?

('#tree').tree({  </li><li class="">              url:'${zyc}/servlet/TreeServlet?parentId=0' ,  </li><li class="alt">              animate:true,  </li><li class="">              checkbox:false,  </li><li class="alt">              lines:true,  </li><li class="">              onClick: function(node){  </li><li class="alt">                       if(node.url!="" && typeof(node.url)!='undefined'){  </li><li class="">                           addtab(node.text,"${zyc}/"+node.url);     </li><li class="alt">                       }  </li><li class="">                 },  </li><li class="alt">              onBeforeExpand:function(node,param){      </li><li class="">                     $('#tree').tree('options').url = "../servlet/TreeServlet?parentId=" + node.id;  //動態獲取節點    </li><li class="alt">               }  </li><li class="">           });  </li></ol><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div></div><pre name="code" class="java" style="display: none;">(‘#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; //動態獲取節點 } });
沒錯，客戶端就是這樣簡單幾行程式碼就實現了非同步載入樹，是不是很適合我們這些菜鳥玩玩呢？

此處特別說明（onBeforeExpand函式是關鍵意思是指載入樹展開之前會觸發這個函式再自動追加節點）

3.增刪查改

 增刪查改也就是點選選單，獲得相應的連結地址，這個我就說明下載入的js tab吧，center區域加上一個初始的tabs頁面如下程式碼：
[html] view plain copy print?
1. <divclass=“easyui-tabs”id=“tabs”fit=“true”border=“false”>
2. <divtitle=“歡迎頁”style=“padding:20px;overflow:hidden;”>
3. <divstyle=“margin-top:20px;”>
4. <h3></h3>
5. </div>
6. </div>
7. </div>
```
 <div class="easyui-tabs" id="tabs" fit="true" border="false">
 <div title="歡迎頁" style="padding:20px;overflow:hidden;"> 
 <div style="margin-top:20px;">
 <h3></h3>
 </div>
 </div>
 </div>
```
樹選單點選的時候載入tabs函式如圖 [html] view plain copy print?
1. function addtab(text,url){
2. if (("#tabs").tabs('exists', text)) {   //若選項卡已存在，選擇該選項卡    </li><li class="alt">                    ("#tabs").tabs('select', text);  </li><li class="">                } else {    </li><li class="alt">                    var content = "<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src=" + url + "></iframe>";       </li><li class="">                    ("#tabs").tabs('add', {   //生成新的選項卡，    </li><li class="alt">                        title : text,    </li><li class="">                        closable : true,    </li><li class="alt">                        content :content,    </li><li class="">                        tools:[{  </li><li class="alt">                            iconCls:'icon-mini-refresh',  </li><li class="">                            handler:function(){  </li><li class="alt">                                //window.location.reload("{zyc}/"+url);  </li><li class="">                                 var tab = ('#tabs').tabs('getSelected'); //獲得當前tab  </li><li class="alt">                                 var url = (tab.panel('options').content).attr('src');  </li><li class="">                                 $(‘#tabs’).tabs(‘update’, {
3. tab : tab,
4. options : {
5. href : url
6. }
7. });
8. }
9. }]
10. });
11. }
12. }
```
 function addtab(text,url){
 if ($("#tabs").tabs('exists', text)) { //若選項卡已存在，選擇該選項卡 
 $("#tabs").tabs('select', text);
 } else { 
 var content = "<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src=" + url + "></iframe>"; 
 $("#tabs").tabs('add', { //生成新的選項卡， 
 title : text, 
 closable : true, 
 content :content, 
 tools:[{
 iconCls:'icon-mini-refresh',
 handler:function(){
 //window.location.reload("${zyc}/"+url);
 var tab = $('#tabs').tabs('getSelected'); //獲得當前tab
 var url = $(tab.panel('options').content).attr('src');
 $('#tabs').tabs('update', {
 tab : tab,
 options : {
 href : url
 }
 }); 


 }
 }]
 }); 
 } 
 }
 
```
增刪查改我就不寫了，網上很多例子的。效果圖如下：

4模組管理

 模組管理也就是增刪查改之類的，如圖



 樹選單其實還是west區域的那個連線地址，其實這塊應該是全部的model,但是我圖方便沒改，意義是一樣的。只不過這個樹是全部加載出來的，具體的關鍵程式碼如下：
[java] view plain copy print?
1. var node = ('#tree').tree('getSelected');  </li><li class="">    if (node) {  </li><li class="alt">        $('#tree').tree('expandAll', node.target);  </li><li class="">    } else {  </li><li class="alt">        $('#tree').tree('expandAll');  </li><li class="">    }  </li></ol><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div></div><pre name="code" class="java" style="display: none;"> var node =(‘#tree’).tree(‘getSelected’); if (node) { (‘#tree’).tree(‘expandAll’, node.target);
 } else {(‘#tree’).tree(‘expandAll’); } 意思是獲得改樹每個子節點，如果沒展開就展開。修改的comboxtree同理在此就不截圖程式碼了
 
 5.角色管理
 
 角色管理也就分配許可權複雜點其它也就是增刪查改。
 
 
 
 此處用的treeggrid元件,說下邏輯吧json格式具體參照demo裡的格式，然後返回到客戶端，屬性分別是id,name（這兩項是不允許修改的是必選項），所以返回的屬性必須有這兩個屬性，其次多加了了ischecked屬性，因為多了一列checkbox。具體程式碼我就不copy了（感覺寫了好多就不多寫了！請見諒）
 
 其實感覺裡面東西好多，但是無非就是那些用到的元件，只要看看demo，再網上找點資料應該還是能解決掉的。由於本人技術能力有限，就只能寫這樣子了，望大家見解，不喜勿噴！可以互相交流下。謝謝！

jquery easy ui最新版本簡單的許可權分配

jquery easy 1.5 Maven+servlet+jsp+jdbc實現許可權管理分配

2.登入獲取許可權選單

3.增刪查改

4模組管理

5.角色管理

jquery easy ui最新版本簡單的許可權分配

【JQuery Easy UI】後臺管理系統的簡單佈局分享

jquery easy-ui 分頁插件的運用(給td添加事件,獲取匯總內容)

jQuery Easy UI Draggable(拖動)組件

7個jquery easy ui 基本組件圖解

jquery easy-ui messager使用方法

jquery easy ui tree 的用法

jquery easy ui tree 的用法

jquery easy-ui panel使用方法

jquery easy ui tabs使用

iOS二維碼掃描原生API 原始碼Demo 2016最新版本簡單易用

jquery easy ui 1.3.4 資料表格(DataGrid)（8）

jquery easy ui 1.5實現檔案匯入功能

jQuery Easy UI 實現頁面的Loading效果（類似於Android的ProgressDialog）

JQuery Easy-UI 實現動態分頁

jQuery Easy UI ProgressBar（進度條）元件

初學jQuery Easy UI的總結

jquery select下拉框和 easy-ui combox 選定指定項區別

Jquery學習---Easy UI 框架

RakNet簡單介紹，最新版本分享

jquery easy ui最新版本 簡單的許可權分配

jquery easy 1.5 Maven+servlet+jsp+jdbc實現許可權管理分配

2.登入獲取許可權選單

3.增刪查改

4模組管理

5.角色管理

相關推薦

jquery easy ui最新版本簡單的許可權分配