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/