請注明轉載地址：http://www.cnblogs.com/arhat
今天突然發現博客園出問題了，老魏使用了PC,手機，平板都訪問博客園了，都是不能正常的訪問，原因是不能加載CSS，也就是不能訪問common.cnblogs.com這個域名，一直出現“Aborted”，非常的郁悶。
頁面就是這樣子的，不知道為什么，難道是不是我的3個終端有問題吧，還是園子的服務器有問題呢？還是路由器的問題呢？到現在這個問題還沒解決，郁悶死了！弄得心情非常的不爽。
好吧，不在說這個問題了，開始我們的正文。在上一章中，我們只是去簡單的說明了一下這系統的一些基本的問題，本章就開始設計和實施了。
首先我們這里首先得解決一下在權限中所涉及的幾個比較中要的概念：用戶，角色，動作。這三個是在權限設計中的核心表，每個權限系統中都是圍繞着這幾張表來擴展的，可以說很多表都是關系表，用來描述着3個之間的關系。
(一)對於用戶來說
一個用戶可以擁有多個角色，一個角色可以有多個用戶
(二)對於角色來說
一個角色可以擁有多個動作，一個動作可以隸屬於角色
根據這個分析，我們可以得到5張表。其中有兩張表是關系表，下面我們看看這5章表。
這個就是這5張表的關系圖，同圖上可以單出，他們之間都是一種對對多的關系。為了清楚的描述他們的關系，並在后面的編程中能夠簡化，所以這里老魏只是把一些主要的字段給列舉出來了，當然如果大家可以根據自己的需要添加一些必要的字段。下面老魏來闡述一下這5個表。
ArHat_User:用戶表
ArHat_Role:角色表
ArHat_User_Role:用戶角色表
ArHat_Action:動作表
ArHat_Role_Action:角色動作表
其中需要注意的是這個動作表，所謂的動作的就是用戶操作的時候可能發送的指令。比如CRUD等。但是需要弄清楚的是動作和權限是兩個不同的概念，權限==模塊值+動作。當然了，這里老魏使用的是這個公式，大家可以根據自己的需要來調整。
好了，現在又了數據庫了，我們開始搭建ASP.NET MVC+EasyUI環境。在VS2013中建立解決方案和項目。
同時在“Com.ArHat.UI”中添加EasyUI的資源。
不要忘了三層之間的引用哦。在建立項目的時候，老魏已經把Model和DAL中的幫助類已經寫好了，大家可以自行的書寫。
使用EasyUI搭建主頁面：
在Controller中添加一個HomeController,然后添加對Index的視圖。並在視圖中加入EasyUI的代碼。
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>ArHat權限系統</title> <link href="/Content/easyui.css" rel="stylesheet" /> <link href="/Content/icon.css" rel="stylesheet" /> <link href="/Content/base.css" rel="stylesheet" /> <script src="/Content/jquery.min.js"></script> <script src="/Content/jquery.easyui.min.js"></script> <script type="text/javascript"> $(document).ready(function () { initPage(); }); function initPage() { var menus = $(".menu a"); $.each(menus, function (i, v) { $(v).on("click", function () { openTab($(v).attr("t"), $(v).attr("v")); }); }); } function openTab(_title, _value) { if ($("#tab").tabs("exists", _title)) { $("#tab").tabs("select", _title); } else { $("#tab").tabs("add", { title: _title, closable: true, content: createIFrame(_value) }); } } </script> </head> <body class="easyui-layout"> <div data-options="region:'north'" style="height:50px;"></div> <div data-options="region:'south'" style="height:50px;"></div> <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:200px;"> <div style="width:100%;height:180px"> <!--日歷--> <div data-options="border:false,fit:true" id="cc" class="easyui-calendar"></div> </div> </div> <div data-options="region:'west',title:'功能菜單',split:true" style="width:200px;"> <!--Accordion--> <div data-options="border:false,fit:true" id="aa" class="easyui-accordion" style="width:300px;height:200px;"> <div title="權限管理" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;"> <ul class="menu"> <li><a t="用戶管理" v="/User/Index" href="#">用戶列表</a></li> <li><a t="角色管理" v="/Role/Index" href="#">角色列表</a></li> <li><a t="動作管理" v="/Action/Index" href="#">動作管理</a></li> </ul> </div> </div> </div> <div data-options="region:'center',border:false" style="padding:0px;background:#eee;"> <!--選項卡--> <div data-options="fit:true" id="tab" class="easyui-tabs" style="width:500px;height:250px;"> <div title="Welcome" style="padding:20px;"> 歡迎界面 </div> </div> </div> </body> </html>
預覽界面效果如下：
到此呢，本章就先到這兒吧，完成了主界面的設計，從下章開始就慢慢來實現權限系統吧！順便說一下，文章開頭的問題，老魏重啟了一下路由器就好了，真是很奇怪！