Web開發(fā)框架之權(quán)限管理系統(tǒng)
記得我在很早之前，開始介紹我的Winform開發(fā)框架和我的WCF開發(fā)框架之初，我曾經(jīng)給出下面的視圖，介紹我整理的一個框架體系，其中包含有WInform開發(fā)框架以及我的Web開發(fā)框架，由于前段時間一直忙于Winform開發(fā)框架的提煉以及優(yōu)化，并統(tǒng)一整理了很多Winform開發(fā)框架以及WCF開發(fā)框架的隨筆文章。隨著我的Winform逐步完善，終于有時間來整理介紹我的Web開發(fā)框架的事宜了，下面先介紹一下我最新優(yōu)化整理的Web開發(fā)框架之權(quán)限管理系統(tǒng)，其中這個權(quán)限管理系統(tǒng)可以說是集眾多寵愛于一身了，除了一貫的和代碼生成工具集成，可生成基礎(chǔ)性的框架代碼外，還整合Winform開發(fā)框架繼承而來的多數(shù)據(jù)庫支持，在界面層，也就是Web權(quán)限管理系統(tǒng)，整合了JQuery的Easy-UI界面組件，功能強大的zTree控件、KindEditor在線編輯控件、界面層獲取數(shù)據(jù)及保存使用基于JQuery的json數(shù)據(jù)操作，實現(xiàn)數(shù)據(jù)局部刷新等等操作，其中提供兩種不同的菜單布局操作，非常方便應(yīng)用于其他業(yè)務(wù)系統(tǒng)的界面。
首先在介紹之前，我們來貼幾個Web權(quán)限系統(tǒng)的圖片進(jìn)行感性的了解先。
1）簡潔的界面布局效果。這種效果頂部橫幅比較緊湊，左邊有一些常用的按鈕操作，適合于菜單功能不太多的小業(yè)務(wù)系統(tǒng)，如我的Web權(quán)限系統(tǒng)。
2）功能強大的界面企業(yè)業(yè)務(wù)系統(tǒng)布局。這種界面效果適合于功能比較眾多，菜單展示進(jìn)行分類管理等業(yè)務(wù)系統(tǒng)。這種框架頂部的菜單為一級菜單，單擊一級菜單可以在左邊展示二級菜單，這種效果可以不用一次性列出所有系統(tǒng)的功能，而是分層次進(jìn)行功能展示。
頂部的Tab選項卡每次打開頁面的時候，增加一個Tab頁，頁面可以雙擊進(jìn)行關(guān)閉，也可以右鍵彈出菜單進(jìn)行更多操作，如下圖所示。
如果需要了解整個系統(tǒng)的效果，也可以下載《Web權(quán)限系統(tǒng)操作視屏》進(jìn)行全面的了解。
在提煉優(yōu)化這個Web權(quán)限框架的過程中，碰到了不少的問題，一一進(jìn)行解決，現(xiàn)總結(jié)一部分進(jìn)行進(jìn)行介紹。
#p#
1）使用JSON數(shù)據(jù)構(gòu)造zTree
使用zTree確實比easy-ui自帶的Tree好很多，功能也強大很多，由于我的Web權(quán)限中，各個模塊幾乎都需要樹控件來展示相關(guān)的數(shù)據(jù)，如功能、組織機構(gòu)等等。在對比了我自己的傳統(tǒng)Tree、Easy-UI的Tree控件以及zTree后，發(fā)現(xiàn)使用zTree還是可以提高不少的界面分?jǐn)?shù)的。但是其自帶的例子，以及網(wǎng)上的例子，多數(shù)是使用預(yù)先弄好的樹形數(shù)據(jù)，而我需要動態(tài)使用ashx進(jìn)行樹形數(shù)據(jù)的獲取及生成，這確實費了一些周折來進(jìn)行調(diào)試。
首先要準(zhǔn)備基于ashx處理程序生成的Tree數(shù)據(jù)，樹的數(shù)據(jù)使用JSON格式。如功能定義的樹形數(shù)據(jù)如下所示。
- /// <summary>
- /// 遞歸獲取樹形信息
- /// </summary>
- private string GetTreeJson(int PID, string folderIcon, string leafIcon)
- {
- string condition = string.Format("PID={0}", PID);
- List<FunctionInfo> nodeList = BLLFactory<Function>.Instance.Find(condition);
- StringBuilder content = new StringBuilder();
- foreach (FunctionInfo model in nodeList)
- {
- int ParentID = (model.PID == -1 ? 0 : model.PID);
- //string tempMenu = string.Format("{{ id:{0}, pId:{1}, name:\"{2}\",icon:\"{3}\" }},", model.ID, ParentID, model.Name, imgsrc); //簡單的作法
- string subMenu = this.GetTreeJson(model.ID, folderIcon, leafIcon);
- string parentMenu = string.Format("{{ \"id\":{0}, \"pId\":{1}, \"name\":\"{2}\" ", model.ID, ParentID, model.Name);
- if (string.IsNullOrEmpty(subMenu))
- {
- if (!string.IsNullOrEmpty(leafIcon))
- {
- parentMenu += string.Format(",\"icon\":\"{0}\" }},", leafIcon);
- }
- else
- {
- parentMenu += "},";
- }
- }
- else
- {
- if (!string.IsNullOrEmpty(folderIcon))
- {
- parentMenu += string.Format(",\"icon\":\"{0}\" }},", folderIcon);
- }
- else
- {
- parentMenu += "},";
- }
- }
- content.AppendLine(parentMenu.Trim());
- content.AppendLine(subMenu.Trim());
- }
- return content.ToString().Trim();
- }
然后就是頁面的調(diào)用了，這里為了增強體驗效果，使用了基于javascript的JQuery的異步操作進(jìn)行數(shù)據(jù)處理，而不是基于aspx后臺頁面的處理，如下所示。
- //重新加載樹形結(jié)構(gòu)（異步）
- function reloadTree() {
- $("#loading").show();
- $.getJSON("http://www.cnblogs.com/AjaxHandler/FunctionJson.ashx?r=" + Math.random() + "&op=tree", function (json) {
- $.fn.zTree.init($("#treeDemo"), setting, json);
- $.fn.zTree.getZTreeObj("treeDemo").expandAll(true);
- var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
- var treeNodes = treeObj.getNodes();
- if (treeNodes != null) {
- loadData(treeNodes[0].id);
- }
- });
- $("#loading").fadeOut(500);
- }
這樣處理的效果是頁面只是局部刷新，體驗很好。
2）基于JQuery的數(shù)據(jù)加載及保存操作
由于JQuery的方便性及良好體驗性，我統(tǒng)一了數(shù)據(jù)的獲取及保存操作。下面給出相關(guān)的處理代碼供參考。
- //加載制定的對象數(shù)據(jù)
- function loadData(id) {
- $("#loading").show();
- $.getJSON("http://www.cnblogs.com/AjaxHandler/FunctionJson.ashx?r=" + Math.random() + "&op=findbyid&id=" + id, function (json) {
- $("#txtID").val(json.ID);
- $("#txtName").val(json.Name);
- $("#txtControlID").val(json.ControlID);
- $("#txtPID").val(json.PID);
- });
- $('#lbxRoles').empty();
- $.getJSON("http://www.cnblogs.com/AjaxHandler/RoleJson.ashx?r=" + Math.random() + "&op=getrolesbyfunction&id=" + id, function (json) {
- $.each(json, function (i, item) {
- $('#lbxRoles').append('<option value="' + item.ID + '">' + item.Name + '</option>');
- });
- });
- $("#loading").fadeOut(500);
- }
- //保存對象數(shù)據(jù)
- function saveData() {
- $.ajax({
- type: 'POST',
- url: 'http://www.cnblogs.com/AjaxHandler/FunctionJson.ashx?r=' + Math.random() + '&op=insert',
- async: false,
- data: { ID: $("#txtID").val(), Name: $("#txtName").val(), ControlID: $("#txtControlID").val(), PID: $("#txtPID").val() },
- success: function (id) {
- alert("操作成功！ ");
- reloadTree();
- if (id != "")
- loadData(id);
- },
- error: function (xhr, status, error) {
- alert("操作失敗"); //xhr.responseText
- }
- });
- }
3）在數(shù)據(jù)操作等待的時候，頁面中間顯示Loading效果。
整個系統(tǒng)，在各種請求操作，我都統(tǒng)一了作法，在界面顯示Loading的等待效果，任務(wù)結(jié)束后關(guān)閉，這種效果在費事的操作，用戶體檢會好一些，下面看看其效果以及實現(xiàn)代碼。
增加下面javascript腳本
- //對象居中的函數(shù)，調(diào)用例子：$("#loading").center();
- jQuery.fn.center = function () {
- this.css("position", "absolute");
- this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) +
- $(window).scrollTop()) + "px");
- this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) +
- $(window).scrollLeft()) + "px");
- return this;
- }
- //初始化對象
- $(document).ready(function () {
- $("#loading").center();//loading的圖片顯示居中
- });
然后再頁面Body后面增加一行代碼即可（默認(rèn)loading圖片不顯示的哦）。
- < id="loading" style="display: none;"><img alt="數(shù)據(jù)正在加載中..." src="http://images.cnblogs.com/loading02.gif" /></>
4）控件數(shù)據(jù)清空操作
由于添加和編輯公用界面控件元素，因此我們在要添加數(shù)據(jù)的時候，需要清空或者設(shè)置某些控件的值，但我們的控件可能比較多，一種好的方法是利用JQuery的選擇器功能來進(jìn)行有目的的控件清空操作。
如下面的例子所示。
- //新增清空控件
- function addData() {
- $("#txtPID").val($("#txtID").val());
- $("input[type=text][id*='txt']").val("");
- $("textarea[id*='txt']").empty();
- $("select[id*='lbx']").empty();
- }
其中$("#txtPID").val($("#txtID").val());是把當(dāng)前的用戶作為添加數(shù)據(jù)的上級，其他的就是清空控件的數(shù)據(jù)了，不同的類型控件清空的步驟有些不同。
5）Ashx處理程序的安全性考慮
我們在系統(tǒng)中，多數(shù)都是調(diào)用ashx進(jìn)行數(shù)據(jù)處理，雖然一般業(yè)務(wù)系統(tǒng)在VPN或者內(nèi)網(wǎng)中運行，但是也要考慮用戶沒登陸的時候，不運行調(diào)用ashx程序，這樣可以提高數(shù)據(jù)的安全性。
默認(rèn)的ashx處理程序是沒有Session的操作的，所以我們需要修改其繼承接口（多增加IReadOnlySessionState 的繼承），然后才能調(diào)用Session來進(jìn)行判斷。
- /// <summary>
- /// 權(quán)限功能操作類
- /// </summary>
- [WebService(Namespace = "http://tempuri.org/")]
- [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
- public class FunctionJson : IHttpHandler, IReadOnlySessionState
- {
- public void ProcessRequest(HttpContext context)
- {
- //類對象要顯式的實現(xiàn)接口 IReadOnlySessionState,才能訪問Session數(shù)據(jù)
- if (context.Session["Identity"] == null)
- {
- throw new ArgumentException("用戶未登錄！");
- }
6）Tab界面布局的兼容。
Web權(quán)限系統(tǒng)提供了兩種常用的菜單布局進(jìn)行管理，一般對于常用的業(yè)務(wù)系統(tǒng)肯定是沒問題了。
另外一種效果是系統(tǒng)復(fù)雜的時候用的，可以定義一級菜單和關(guān)聯(lián)的二級菜單。
對于后者，一級菜單打開的時候，可以關(guān)聯(lián)打開一個新的頁面，并且刷新二級菜單的關(guān)系。
- <!----------- 一級導(dǎo)航 ------------------>
- <ul class="navigation" style="display:block">
- <li><a href="#" onclick="showSubMenu('ListUser.aspx', '用戶管理', 'default')">權(quán)限管理</a></li>
- <li><a href="#" onclick="showSubMenu('../Commonpage/MyJob.aspx', '事務(wù)中心開發(fā)中...', 'point', 'icon-organ')">事務(wù)中心</a></li>
- <li><a href="#" onclick="showSubMenu('../Commonpage/building.htm', '合同起草開發(fā)中...', '')">合同起草</a></li>
- <li><a href="#" onclick="showSubMenu('../Commonpage/building.htm', '合同管理開發(fā)中...', '')">合同管理</a></li>
- <li><a href="#" onclick="showSubMenu('../Commonpage/building.htm', '查詢打印開發(fā)中...', '')">查詢打印</a></li>
- <li><a href="#" onclick="showSubMenu('../Commonpage/building.htm', '知識管理開發(fā)中...', '')">知識管理</a></li>
- <li><a href="#" onclick="showSubMenu('../Commonpage/building.htm', '系統(tǒng)管理開發(fā)中...', '')">系統(tǒng)管理</a></li>
- </ul>
好了，很多其他的特點，以后繼續(xù)介紹，歡迎多多提出寶貴意見。
原文鏈接：http://www.cnblogs.com/wuhuacong/archive/2012/07/28/2613593.html
【編輯推薦】
