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/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/77081.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot 与 Vue3 实现前后端互联全解析

在当前的互联网时代&#xff0c;前后端分离架构已经成为构建高效、可维护且易于扩展应用系统的主流方式。本文将详细介绍如何利用 SpringBoot 与 Vue3 构建一个前后端分离的项目&#xff0c;展示两者如何通过 RESTful API 实现无缝通信&#xff0c;让读者了解从环境搭建、代码实…

portainer.io篇

Portainer‌是一个轻量级的容器管理工具&#xff0c;支持Docker、Kubernetes、Docker Swarm、ACI和Nomad等多种平台。它提供了一个直观的Web界面&#xff0c;使用户能够轻松地管理和监控容器&#xff0c;包括创建、启动、停止、删除容器&#xff0c;以及查看容器的日志和配置信…

Dockerfile 文件常见命令及其作用

Dockerfile 文件包含一系列命令语句&#xff0c;用于定义 Docker 镜像的内容、配置和构建过程。以下是一些常见的命令及其作用&#xff1a; FROM&#xff1a;指定基础镜像&#xff0c;后续的操作都将基于该镜像进行。例如&#xff0c;FROM python:3.9-slim-buster 表示使用 Pyt…

Android Studio开发知识:从基础到进阶

引言 Android开发作为移动应用开发的主流方向之一&#xff0c;曾吸引了无数开发者投身其中。然而&#xff0c;随着市场饱和和技术迭代&#xff0c;当前的Android开发就业形势并不乐观&#xff0c;竞争日益激烈。尽管如此&#xff0c;掌握扎实的开发技能仍然是脱颖而出的关键。本…

大表查询的优化方案

‌单表优化‌&#xff1a; ‌字段选择‌&#xff1a;尽量使用TINYINT、SMALLINT、MEDIUMINT作为整数类型&#xff0c;而非INT&#xff1b;如果字段值非负&#xff0c;可以使用UNSIGNED。对于字符串字段&#xff0c;使用枚举或整数代替字符串类型&#xff0c;使用TIMESTAMP而非D…

常见MQ及类MQ对比:Redis Stream、Redis Pub/Sub、RocketMQ、Kafka 和 RabbitMQ

常见MQ及类MQ对比 基于Grok调研 Redis Stream、Redis Pub/Sub、RocketMQ、Kafka 和 RabbitMQ 关键点&#xff1a; Redis Pub/Sub 适合简单实时消息&#xff0c;但不持久化&#xff0c;消息可能丢失。Redis Stream 提供持久化&#xff0c;适合需要消息历史的场景&#xff0c;但…

DAPP实战篇:使用ethersjs连接智能合约并输入地址查询该地址余额

本系列目录 专栏:区块链入门到放弃查看目录-CSDN博客文章浏览阅读400次。为了方便查看将本专栏的所有内容列出目录,按照顺序查看即可。后续也会在此规划一下后续内容,因此如果遇到不能点击的,代表还没有更新。声明:文中所出观点大多数源于笔者多年开发经验所总结,如果你…

库magnet使用指南

Magnet 多线程控制库使用指南 目录 库功能概述环境配置核心类与接口基础使用示例代码生成工具高级功能与改进建议完整示例代码常见问题解答 https://blink.csdn.net/details/1872803?spm1001.2014.3001.5501 1. 库功能概述 Magnet 库提供以下核心功能&#xff1a; 多线程…

SpringCloud-快速通关(三)

SpringCloud-快速通关(一) SpringCloud-快速通关(二) SpringCloud-快速通关(三) SpringCloud-快速通关(三) 七、Seata - 分布式事务7.1、环境搭建7.1.1、简介7.1.2、环境搭建7.1.3、seata-server7.1.4、微服务配置7.1.5、测试7.2、事务模式7.2.1、AT模式7.2.2、XA模式…

STM32 TDS+温度补偿

#define POLAR_CONSTANT (513385) /* 电导池常数&#xff0c;可通过与标准TDS测量仪对比计算反推 */ #define TDS_COEFFICIENT (55U) /* TDS 0.55 * 电子传导率*/void TDS_Value_Conversion() {u32 ad0;u8 i;float compensationCoefficient;float compens…

数据分析实战案例:使用 Pandas 和 Matplotlib 进行居民用水

原创 IT小本本 IT小本本 2025年04月15日 18:31 北京 本文将使用 Matplotlib 及 Seaborn 进行数据可视化。探索如何清理数据、计算月度用水量并生成有价值的统计图表&#xff0c;以便更好地理解居民的用水情况。 数据处理与清理 读取 Excel 文件 首先&#xff0c;我们使用 pan…

离线环境下docker启动springboot项目

Docker linux 离线部署springboot 搭建dcoker环境 1. 首先在有网络的机器上下载Docker的离线安装包&#xff1a; - 访问 https://download.docker.com/linux/static/stable/x86_64/ - 下载对应版本的 docker-<version>.tgz 文件 2. 将下载的安装包传输到目标Linux机器上…

分布式专题-Redis Cluster集群运维与核心原理剖析

一. 哨兵集群与Redis Cluster 架构异同&#xff1a; redis单机内存不会超过10g&#xff0c;如果太大的话bgsave命令的话对单节点压力过大。 节点多了&#xff0c;之间的通信也会非常缓慢。 redis集群模式下对从节点是没有读取操作的&#xff0c;只在主节点进行读取操作。 哨…

使用 Node.js、Express 和 React 构建强大的 API

了解如何使用 Node.js、Express 和 React 创建一个强大且动态的 API。这个综合指南将引导你从设置开发环境开始&#xff0c;到集成 React 前端&#xff0c;并利用 APIPost 进行高效的 API 测试。无论你是初学者还是经验丰富的开发者&#xff0c;这篇文章都适合你。 今天&#…

智慧声防:构筑海滨浴场安全屏障的应急广播系

海滨浴场是夏季旅游的热门目的地&#xff0c;但潮汐变化、离岸流、突发天气、溺水事故等安全隐患时刻威胁着游客安全。传统的安全管理依赖人工瞭望和喊话&#xff0c;存在覆盖范围有限、响应速度慢等问题。“智慧声防”应急广播系统&#xff0c;通过智能化、网络化、多场景协同…

Redis之缓存穿透

Redis之缓存穿透 文章目录 Redis之缓存穿透一、什么是缓存穿透&#xff1f;二、缓存穿透常见的解决方案1. 缓存空对象&#xff08;Null Caching&#xff09;2. 布隆过滤器&#xff08;Bloom Filter&#xff09;​3. 互斥锁&#xff08;Mutex Lock&#xff09;​4. 接口层校验5.…

【蓝桥杯】颜色平衡树

思路 颜色平衡树&#xff0c;即子树中的节点颜色均匀分布。所以要确认一个子树是否为颜色平衡树&#xff0c;需要得到它的所有节点的颜色&#xff0c;也就是要深搜它所有的子树。 这个想法就很标准的启发式合并了&#xff0c;何为启发式合并&#xff1f;简单来说&#xff0c;…

自动化测试工具playwright中文文档-------14.Chrome 插件

介绍 注意 插件仅在以持久化上下文启动的 Chrome/Chromium 浏览器中工作。请谨慎使用自定义浏览器参数&#xff0c;因为其中一些可能会破坏 Playwright 的功能。 以下是获取位于 ./my-extension 的 Manifest v2 插件背景页面句柄的代码示例。 from playwright.sync_api imp…

让 Python 脚本在后台持续运行:架构级解决方案与工业级实践指南

让 Python 脚本在后台持续运行&#xff1a;架构级解决方案与工业级实践指南 一、生产环境需求全景分析 1.1 后台进程的工业级要求矩阵 维度开发环境要求生产环境要求容灾要求可靠性单点运行集群部署跨机房容灾可观测性控制台输出集中式日志分布式追踪资源管理无限制CPU/Memo…

MyBatis 详解

1. 什么是 MyBatis&#xff1f; MyBatis 是一款优秀的 持久层框架&#xff0c;它通过 XML 或注解配置&#xff0c;将 Java 对象&#xff08;POJO&#xff09;与数据库操作&#xff08;SQL&#xff09;进行灵活映射&#xff0c;简化了 JDBC 的复杂操作。 核心思想&#xff1a;S…