Web应用程序系统的多用户权限控制设计及实现-首页模块【5】

首页模块就是展示不同权限的最终结果了，在阅读这章之前若有些不明白，可看看后续的单独的权限模块，用户模块，目录模块后从整体上再看首页模块。

阅读该模块需要一定或者是比较熟练的js知识,EasyUI Tab控件知识。整个首页模块的流程是登陆模块获取到了用户的基本信息，可以访问的网页信息，目录信息后，封装在sessionManage会话中，通过JS文件做数据的格式转换及动作定义，通过Css文件做网页的效果美化。简而言之，就是获取后台数据渲染到网页。

1.1视图

首页模块的一级导航选择不同的信息关联二级导航，二级导航展开显示可以访问的页面链接。每一个链接在网页的展示模块通过EasyUI的Tab控件展示，可以实现如下效果:

对应单个的tab中显示的网页信息是通过iframe标签的方式实现的。及打开一个tab就创建一个iframe对象。关闭一个tab就释放该iframe对象。

首页模块的基本结构简图如下：

首页视图是由两部分视图组成的。主视图主要是展示整个的框架结构，还有一个部分视图主要是展示左侧的权限信息页面。主视图中比较关键的代码如下：

@using Models
@using Page = Models.Page

 <!--先把页面model加载到视图--> 

 <!--解析Model生成一级导航目录信息--> 

                  <ul class="menuchild">
                        @if (ViewBag.Navigation != null)
                        {
                            IList<Catalog> navigationList = (List<Catalog>)ViewBag.Navigation;
                            foreach (Catalog item in navigationList)
                            {
                            <li><a onclick="navigationClick(@item.CatalogId);">@item.CatalogName</a><i></i></li>
                            }
                        }
                    </ul>

 <!--左边菜单容器 加载部分视图展示左边的菜单信息 -->    
                <div class="scroll-panel" id="scrollpanel">
                    <div style="top: -10.8px;" class="scroll-content" id="scrollcontent">
                        <div id="rightListDiv">
                            @Html.Partial("_rightMessage", new { navigationId = -1 })
                        </div>
                    </div>
                </div>

首页详细视图代码如下：

 IndexHome.cshtml

部分视图代码完整代码如下：

 _rightMessage.cshtml

1.2JS文件

首页加载共用了两个JS文件，其中视图IndexHome.cshtml对应default.js,_rightMessage.cshtml对应_rightMessage.js文件。

两个文件中关键的代码均是创建iframe对象和销毁iframe对象，部分代码如下：

 /**  把iframe与Tab的属性结合起来。
         * 增加iframe模式的标签页  
         * param {[type]} jq     [description]  
         * param {[type]} params [description]  
          */
        addIframeTab: function (jq, params) {
            return jq.each(function () {
                if (params.tab.href) {
                    delete params.tab.href;
                }
                $(this).tabs('add', params.tab);
                $(this).tabs('loadTabIframe', { 'which': params.tab.title, 'iframe': params.iframe });
            });
        },

        /**
         * 更新tab的iframe内容  
         * param  {jq Object} jq     [description]  
        * param  {Object} params [description]  
       * return {jq Object}        [description]  
        */
        updateIframeTab: function (jq, params) {
            return jq.each(function () {
                params.iframe = params.iframe || {};
                if (!params.iframe.src) {
                    var $tab = $(this).tabs('getTab', params.which);
                    if ($tab == null) return;
                    var $tabBody = $tab.panel('body');
                    var $iframe = $tabBody.find('iframe');
                    if ($iframe.length === 0) return;
                    $.extend(params.iframe, { 'src': $iframe.attr('src') });
                }
                $(this).tabs('loadTabIframe', params);
            });
        }

//创建Frame
function createFrame(url) {
    var s = '<iframe scrolling="hidden" frameborder="0"  src="' + url + '" style="width:100%;height:98%;"></iframe>';
    return s;
};


//添加tab页
function addTab(title, tabHref) {
    if ($("#pageTab").tabs("exists", title)) {
        $("#pageTab").tabs("select", title);
    } else {
        $('#pageTab').tabs('addIframeTab', {
            tab: { title: title, closable: true },
            iframe: { src: tabHref }
        });
    }

default.js文件的完整代码如下：

 default.js

 

_rightMessage.js文件的完整代码如下：

 _rightMessage.js

 

 1.3控制器

首页控制器就是把SessionManage会话类中的信息取出来。部分代码如下：

         //一级导航目录
                IList<Catalog> navigationList = SessionManage.CurrentUser.NavigationList;
                //操作权限页面
                IList<Catalog> rightList = SessionManage.CurrentUser.RightList;
                if (navigationList != null && navigationList.Count > 0)
                {
                    IList<Catalog> currentRight =
                        (from item in rightList where item.ParentId == navigationList.First().CatalogId select item)
                            .ToList();
                    ViewBag.Navigation = navigationList;
                    ViewBag.RightList = currentRight;
                }

       public PartialViewResult RightMessage(int navigationId)

      {

      //根据一级导航信息，展示二级导航信息

     }

IndexHomeController.cs控制器的详细代码如下：

 IndexHomeController.cs

 

1.4运行页面

当以管理员身份登录时，运行界面如下：

当以一般用户登录时，运行界面如下：