ShenNiusModularity项目源码学习（17：ShenNius.Admin.Mvc项目分析-2）

  ShenNiusModularity项目的后台管理主页面如下图所示，该页面为ShenNius.Admin.Mvc项目的Views\Home\Index.cshtml，使用的是layuimini后台模板（参考文献2），在layuimini的GitHub主页中提供有不同样式的页面模版链接，Index.cshtml页面的布局与其中的多tab版本很相似，后面找到参考文献3，其页面布局代码和index.shetml页面中十分相像，估计出处相同。

  大致的布局方式如下所示（从index.cshtml页面中截取了一部分以作示意，详细请见参考文献3）

<div class="layui-layout layui-layout-admin"><div class="layui-header header"><div class="layui-logo layuimini-logo"></div><div class="layuimini-header-content"><a><div class="layuimini-tool"><i title="展开" class="fa fa-outdent" data-side-fold="1"></i></div></a><!--电脑端头部菜单--><ul class="layui-nav layui-layout-left layuimini-header-menu layuimini-menu-header-pc layuimini-pc-show"></ul>           <ul class="layui-nav layui-layout-right">...                </ul></div></div><!--无限极左侧菜单--><div class="layui-side layui-bg-black layuimini-menu-left"></div><!--初始化加载层--><div class="layuimini-loader"><div class="layuimini-loader-inner"></div></div><div class="layui-body"><div class="layuimini-tab layui-tab-rollTool layui-tab" lay-filter="layuiminiTab" lay-allowclose="true"><ul class="layui-tab-title"><li class="layui-this" id="layuiminiHomeTabId" lay-id=""></li></ul><div class="layui-tab-control">...</div><div class="layui-tab-content"><div id="layuiminiHomeTabIframe" class="layui-tab-item layui-show"></div></div></div></div>
</div>

  上述html示例为框架，最重要的是调用miniAdmin.render函数初始化框架内容，如下面代码所示。其中options的iniUrl设置的是页面左侧的菜单列表，调用的是ShenNius.Admin.API项目中Controllers\sys\MenuController.LoadLeftMenuTrees函数，内部调用MenuRepository.LoadLeftMenuTreesAsync函数获取当前用户的所有角色关联的菜单id和按钮id，并构造成菜单树的形式返回前端页面。而clearUrl设置的是清除当前用户的左侧菜单缓存的接口地址，调用ShenNius.Admin.API项目中Controllers\sys\UserController.RemoveMenuCache函数。

var options = {iniUrl: "sys/menu/LoadLeftMenuTrees", // 初始化接口"menu/load-left-menu-trees",//clearUrl: "sys/user/removeMenuCache?userId=" + apiUtil.getCurrentUser().id, // 缓存清理接口urlHashLocation: true,      // 是否打开hash定位bgColorDefault: false,      // 主题默认配置multiModule: true,          // 是否开启多模块menuChildOpen: true,       // 是否默认展开菜单loadingTime: 0,             // 初始化加载时间pageAnim: true,             // iframe窗口动画maxTabNum: 15,              // 最大的tab打开数量
};
miniAdmin.render(options);

  index.cshtml页面的处理逻辑大多数都放在了页面内置的JavaScript中，除了上述初始化左侧菜单及tab页的内容，还包括以下功能：
  1）定义并调用LoadSite函数，从ShenNius.Admin.API项目中Controllers\sys\TenantController .GetList函数获取所有租户信息，并显示在页面右上角处；
  2）基于signalr，调用mysignalR.js的SaveCurrentUserInfo函数与ShenNius.Infrastructure项目的UserLoginNotifiHub通信存储用户登录信息，如果同一个用户在不同的客户端登录，，则通知后面登录的客户端下线；
  3）定义切换租户菜单响应函数，点击不同的租户时，切换选中组合的左侧菜单数据（调用LoadSite函数）；

 $("body").on("click", ".setCurrent", function () {var id = $(this).attr("value");var value = $(this).text();setCurrentSite(id, value);})

  4）定义修改密码菜单响应函数，调用ShenNius.Admin.Mvc项目的Areas\sys\UserController. ModifyPwd函数弹出修改密码页面；

$('#modifyPwd').on("click", function () {layer.open({title: '修改密码',type: 2,shade: 0.2,shadeClose: true,area: ['600px', '360px'],content: '/sys/user/modifyPwd',btn2: function () {layer.closeAll();}});
});

  5）定义查看用户基本资料菜单响应函数，调用ShenNius.Admin.Mvc项目的Areas\sys\ UserController.CurrentUserInfo函数弹出基本资料页面；；

$('#baseUserInfo').on("click", function () {layer.open({title: '基本资料',type: 2,shade: 0.2,shadeClose: true,area: ['600px', '420px'],content: '/sys/user/currentUserInfo',});
});

  6）定义退出登录菜单响应函数，调用ShenNius.Admin.Mvc项目的Areas\sys\ UserController.Logout函数退出登录，并跳转到登录页面，同时清除浏览器缓存。

$('.login-out').on("click", function () {$.ajax({url: "/sys/user/Logout",type: "get",success: function (res) {if(res.statusCode == 200 && res.success == true){apiUtil.SessionRemove("globalCurrentUserInfo");layer.msg('正在处理,即将退出...', { icon: 1, time: 4000, shift: 6 }, function () {//清空浏览器缓存数据localStorage.clear();window.location = '/sys/user/login';});}else{layer.msg(res.msg);return false;}}});
});

参考文献：
[1]https://gitee.com/shenniu_code_group/shen-nius.-modularity
[2]https://github.com/zhongshaofa/layuimini
[3]https://github.com/shceci/layuimini/blob/v2/index.html
[4]http://layuimini.99php.cn/docs/