首页模块就是展示不同权限的最终结果了，在阅读这章之前若有些不明白，可看看后续的单独的权限模块，用户模块，目录模块后从整体上再看首页模块。
阅读该模块需要一定或者是比较熟练的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" , new { navigationId = -1 })
</div>
</div>
</div>
首页详细视图代码如下：
1 @using Models 2 @using Page = Models.Page 3 @{ 4 Layout = null; 5 } 6 <!DOCTYPE html> 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <title>####</title> 11 <link rel="stylesheet" type="text/css" href="~/Content/easyui143/themes/gray/easyui.css"> 12 <link rel="stylesheet" type="text/css" href="~/Content/easyui143/themes/icon.css"> 13 14 <link href="~/Content/CSS/style.css" rel="stylesheet" /> 15 <style> 16 .panel-tool { 17 visibility: hidden; 18 } 19 20 #preferenceUl { 21 display: list-item; 22 margin: 5px; 23 margin-top: 2px; 24 padding: 10px; 25 } 26 27 #preferenceUl li { 28 display: list-item; 29 list-style-type: square; 30 margin: 5px; 31 } 32 </style> 33 34 </head> 35 36 <body style="overflow: hidden;"> 37 38 <div class="header"> 39 <!--header页面上面部分 --> 40 <div class=" system_name"></div> 41 <!--用户 --> 42 <div class="top_user" onmouseover="theimg.src='@Url.Content("~/Content/image/title_images/user_white.png")'" onmouseout="theimg.src='@Url.Content("~/Content/image/title_images/user_blue.png")'"> 43 <dl class="topmenu"> 44 <dd> 45 <div class="toptitle" style="height: 50px;"> 46 <span style="width: 32px; height: 32px;"> 47 <img id="theimg" src="~/Content/image/title_images/user_blue.png" /> 48 </span> 49 <span class="spant">@Html.Raw(ViewData["UserName"]) </span> 50 </div> 51 <ul class="menuchild"> 52 <li><a href="javascript:Exit();">退出系统</a><i></i></li> 53 54 </ul> 55 </dd> 56 </dl> 57 </div> 58 59 60 61 <!--导航 --> 62 <div class="top_navigation" onmouseover="nav_theimg.src='@Url.Content("~/Content/image/title_images/navigation.png")'" onmouseout="nav_theimg.src='@Url.Content("~/Content/image/title_images/navigation.png")'"> 63 <dl class="topmenu"> 64 <dd> 65 <div class="toptitle" style="height: 50px;"> 66 <span style="width: 32px; height: 32px;"> 67 <img id="nav_theimg" src="~/Content/image/title_images/navigation.png" /> 68 </span> 69 <span class="spant">导航</span> 70 </div> 71 <ul class="menuchild"> 72 @if (ViewBag.Navigation != null) 73 { 74 IList<Catalog> navigationList = (List<Catalog>)ViewBag.Navigation; 75 foreach (Catalog item in navigationList) 76 { 77 <li><a onclick="navigationClick(@item.CatalogId);">@item.CatalogName</a><i></i></li> 78 } 79 } 80 </ul> 81 </dd> 82 </dl> 83 </div> 84 85 86 87 <!--首页 --> 88 <div class="top_index" onmouseover="index_img.src='../Content/image/title_images/index_white.png'" onmouseout="index_img.src='../Content/image/title_images/index_blue.png'"> 89 <dl class="topmenu"> 90 <dd> 91 <div class="toptitle" style="height: 50px;"> 92 <a href="#" onclick="addTab('首页','');" style="color: #ffffff"><span style="width: 32px; height: 32px;"> 93 <img id="index_img" src="~/Content/image/title_images/index_blue.png" /> 94 </span> 95 <span class="spant">首页 </span></a> 96 </div> 97 </dd> 98 </dl> 99 </div> 100 101 </div> 102 <!--header结束 --> 103 104 <div class="logo" id="nowTime"> 105 <!--系统logodiv --> 106 </div> 107 108 <div class="main_hoder"> 109 <!--下面整个容器 --> 110 <div class="left_hoder"> 111 <!--左边容器 --> 112 <div class="left_hoder_menu"> 113 <!--左边菜单容器 --> 114 <div class="scroll-panel" id="scrollpanel"> 115 <div style="top: -10.8px;" class="scroll-content" id="scrollcontent"> 116 <div id="rightListDiv"> 117 @Html.Partial("_rightMessage", new { navigationId = -1 }) 118 </div> 119 </div> 120 </div> 121 <div class="scroll-bar" id="scrollbar"> 122 <div class="scroll-block" id="scrollblock"></div> 123 </div> 124 </div> 125 </div> 126 127 <div class="center_hoder"> 128 <div class="easyui-tabs" data-options="fit:true,border:false,plain:true" id="pageTab"> 129 130 131 <div title="首页" style="padding: 10px;"> 132 133 134 <div class="easyui-layout" data-options="fit:true"> 135 136 欢迎加载首页信息。 137 138 139 </div> 140 141 142 143 </div> 144 </div> 145 </div> 146 <!--其他网页显示的容器--> 147 <div class="footer"> 148 技术支持：###### 149 </div> 150 151 </div> 152 <!--下面整个容器 --> 153 </body> 154 155 <script src="~/Scripts/jquery.js"></script> 156 <!--滚动条效果 --> 157 <script src="~/Scripts/mousewheel.js"></script> 158 <script src="~/Scripts/scroll.js"></script> 159 <script type="text/javascript" src="~/Content/easyui143/jquery.easyui.min.js"></script> 160 <script type="text/javascript" src="~/Content/easyui143/locale/easyui-lang-zh_CN.js"></script> 161 162 <script type="text/javascript" src="~/Scripts/CustomJs/default.js"></script> 163 164 </html>