Blazor 版 Bootstrap Admin 通用后台权限管理框架
前言
上一篇介绍过了前后台分离的 NET Core 通用权限管理系统 在这篇文章简要的介绍了 Bootstrap Admin 后台管理框架的一些功能。本篇文章带来的是微软最新出的 Blazor 版本的 NET Core 通用权限管理系统
Blazor 简介
至于 Blazor 是什么,Blazor 的优缺点小伙伴们可以自行在园子里搜索一下,相关介绍还是非常多的,我这里就不介绍 Blazor 是什么,有什么优缺点了。我想阐述的是我个人对 Blazor 技术的一些理解,Blazor 刚出来的时候国内外无数文章报道,但是有一个显著的特点,所有的文章,代码讲解等都是围绕微软的那个例子讲解的。换句话说,仅限于那个例子。离开那个例子真的自己做个功能讲解的一篇都没有,微软自己的文档也非常不健全,很多技术细节都是一笔带过。随着时间的推移,微软的文档也丰富起来了。根据微软的文档 Blazor 本人用 Blazor 技术将 Bootstrap Admin 后台管理框架重写了一版,通过自己编写组件系统的学习了一下 Blazor。通过自己的封装实现了一个小小的框架,下面详细的讲解一下。
网页布局设计
Bootstrap Admin 通用后台管理框架布局采用 AdminLTE 的经典布局
如图所示,区域被划分为四个区域,分别为:
头部 Header
负责显示网站 Logo、小挂件、当前用户信息侧边栏 Sidebar
负责显示后台管理的菜单、提供导航功能正文显示区域 Section
负责显示各个功能模块的主题部分页脚 Footer
负责显示系统信息
显示区域设计
正文显示区域在后台管理框架中基本是字典表维护这种类似的单表维护,需要提供增、删、改、查基本操作
现在将显示区域分割成三个部分
TabSet 区域
用于显示多 TabQuery 区域
用于显示查询条件Table 区域
用户显示符合过滤条件的数据结果集合,这里提供分页、编辑、删除等操作
组件设计
<EditPage Id="dict" TItem="Bootstrap.Security.BootstrapDict" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save"><QueryBody><LgbInputText @bind-Value="@context.Category" maxlength="50" /><Select Items="QueryDefine" TItem="int" @bind-Value="@context.Define" /><LgbInputText @bind-Value="@context.Name" maxlength="50" /></QueryBody><TableHeader><LgbTableHeader TItem="string" @bind-Value="@context.Category"></LgbTableHeader><LgbTableHeader TItem="string" @bind-Value="@context.Name"></LgbTableHeader><LgbTableHeader TItem="string" @bind-Value="@context.Code"></LgbTableHeader><LgbTableHeader TItem="int" @bind-Value="@context.Define"></LgbTableHeader></TableHeader><RowTemplate><td>@context.Category</td><td>@context.Name</td><td>@context.Code</td><td>@(DefineItems.FirstOrDefault(d => d.Value == context.Define.ToString())?.Text ?? "-")</td></RowTemplate><EditTemplate><div class="row"><LgbInputText @bind-Value="@context.Category" placeholder="不可为空,50字以内" maxlength="50"><RequiredValidator /><StringLengthValidator Length="50" /></LgbInputText><Select Items="DefineItems" TItem="int" @bind-Value="@context.Define"></Select><LgbInputText @bind-Value="@context.Name" placeholder="不可为空,50字以内" maxlength="50"><RequiredValidator /><StringLengthValidator Length="50" /></LgbInputText><LgbInputText @bind-Value="@context.Code" placeholder="不可为空,2000字以内" maxlength="2000"><RequiredValidator /><StringLengthValidator Length="2000" /></LgbInputText></div></EditTemplate>
</EditPage>
QueryBody 模板
本组件模板负责提供查询过滤条件点击查询按钮后数据显示区域呈现符合过滤条件的数据记录,本控件大量代码均已封装成通用,仅需提供过滤条件即可
<LgbInputText @bind-Value="@context.Category" maxlength="50" />
<Select Items="QueryDefine" TItem="int" @bind-Value="@context.Define" />
<LgbInputText @bind-Value="@context.Name" maxlength="50" />
通过设置 @bind-Value
lambda 表达式自动生成一个 label
与 一个 input
控件,极大的提高了代码编写速度
TableHeader 模板
本组件模板负责生成数据呈现 Table 的表头,通过 TItem
设置绑定字段属性,通过设置 @bind-Value
lambda 表达式自动生成汉字表头
<LgbTableHeader TItem="string" @bind-Value="@context.Category"></LgbTableHeader>
<LgbTableHeader TItem="string" @bind-Value="@context.Name"></LgbTableHeader>
<LgbTableHeader TItem="string" @bind-Value="@context.Code"></LgbTableHeader>
<LgbTableHeader TItem="int" @bind-Value="@context.Define"></LgbTableHeader>
RowTemplate 模板
本组件负责呈现符合过滤条件的数据记录,支持直接使用服务器端方法进行数据格式化
<td>@context.Category</td>
<td>@context.Name</td>
<td>@context.Code</td>
<td>@(DefineItems.FirstOrDefault(d => d.Value == context.Define.ToString())?.Text ?? "-")</td>
EditTemplate 模板
本组件负责数据的编辑功能,通过设置 @bind-Value
表达式实现双向绑定,直接调用服务器端保存方法即可
<div class="row"><LgbInputText @bind-Value="@context.Category" placeholder="不可为空,50字以内" maxlength="50"><RequiredValidator /><StringLengthValidator Length="50" /></LgbInputText><Select Items="DefineItems" TItem="int" @bind-Value="@context.Define"></Select><LgbInputText @bind-Value="@context.Name" placeholder="不可为空,50字以内" maxlength="50"><RequiredValidator /><StringLengthValidator Length="50" /></LgbInputText><LgbInputText @bind-Value="@context.Code" placeholder="不可为空,2000字以内" maxlength="2000"><RequiredValidator /><StringLengthValidator Length="2000" /></LgbInputText>
</div>
通过简单的封装,实现了仅需要提供数据属性 @context.Name
即可,组件自动会通过 [DisplayName]
标签或者通过系统服务的字典表中匹配到中文文字,非常的方便
Blazor 多 Tab 版通用权限控制系统演示网站:ba.sdgxgz.com
码云开源项目地址:Bootstrap Admin
目前仅仅完成了 字典表维护 页面的改版。其余页面等等批量更改
原文链接:https://www.cnblogs.com/argozhang/p/12022766.html
.NET社区新闻,深度好文,欢迎访问公众号文章汇总 http://www.csharpkit.com
Blazor 版 Bootstrap Admin 通用后台权限管理框架相关推荐
- NETCore Bootstrap Admin 通用后台管理权限 [1]: 前后台分离系统简介
前言 从事软件开发这个行业现在已经有十几年了,项目无论大小权限认证.授权模块总是或多或少有功能需求的,这一块费时费力但是又存在于后台,使用最多的可能是运维人员所以处于出力不讨好的尴尬地位,每次有新的项 ...
- php-人员权限管理源码,基于ThinkPHP5+ACE框架开发的响应式通用后台权限管理系统PHP源码|响应式轻量级企业网站管理系统...
源码介绍 基于ThinkPHP5+ACE框架开发的响应式通用后台权限管理系统PHP源码是一款响应式轻量级企业网站管理系统,采用ThinkPHP5.0.10+国外ACE1.40的UI模板的后台内容管理框 ...
- 基于layui的通用后台权限管理系统
基于layui的通用后台权限管理系统 基于layui的通用后台权限管理系统 Demo 链接地址: http://liu168.xyz/Admin/Login.aspx. 账号密码:admin admi ...
- java web权限框架_Java Web通用用户权限管理框架设计与实现
2014年第 3期 计 算 机 与 现 代 化 JISUANJI YU XIANDAIHUA 总第 223期 文章编号 :1006-2475(2014)03-0177-03 Java Web通用用户权 ...
- Golang通用后台权限管理系统
项目介绍 一款 Go 语言基于Gin.Xorm.Layui.MySQL等框架精心打造的一款模块化.高性能.企业级的敏捷开发框架,本着简化开发.提升开发效率的初衷触发,框架自研了一套个性化的组件,实现了 ...
- 基于Golang语言GoFrame框架通用后台权限管理系统
项目介绍 一款 Go 语言基于GoFrame.Layui.MySQL等框架精心打造的一款模块化.高性能.企业级的敏捷开发框架,本着简化开发.提升开发效率的初衷触发,框架自研了一套个性化的组件,实现了可 ...
- 基于ThinkPHP6开发的通用后台权限管理系统
项目介绍 一款 PHP 语言基于 ThinkPhp6.x.Layui.MySQL等框架精心打造的一款模块化.插件化.高性能的前后端分离架构敏捷开发框架,可用于快速搭建前后端分离后台管理系统,本着简化开 ...
- python通用权限管理框架图_开源干货!.NET Core + Vue.js通用动态权限(RBAC)管理系统框架[DncZeus]开源...
DncZeus 前言 关于 DncZeus DncZeus = Dnc + Zeus "Dnc"--.Net Core 的缩写: "Zeus"--中文译为宙斯, ...
- ThinkPHP6内核通用网站后台权限管理系统源码
介绍: 基于thinkphp6框架开发的通用后台权限管理系统,底层采用国内最流行的thinkphp6框架, 支持内容管理.文章管理.用户管理.权限管理.角色管理等功能. 网盘下载地址: http:// ...
最新文章
- 计算机视觉一些项目实战技术
- 如果文件夹不存在,请创建它
- ClickHouse 副本协同原理:ReplicatedMergeTree引擎
- mybatis枚举自动转换(通用转换处理器实现)
- bat执行clsss
- 【jupyter】notebook屏蔽warning信息输出
- Windows:打开MSDTC,恢复Windows任务栏,查看windows日志,打开远程桌面,打开Services,资源监控...
- 支持Delphi2009/2010的DES加密单元
- js获取本地时间与网络时间
- vs2015 2017 2019社区版免登录延长许可证
- 计算机的管理软件有哪些,电脑里有很多文件,很乱但是都有用,有什么管理软件值得推荐?...
- 影视动画设计有些SCI期刊推荐? - 易智编译EaseEditing
- android画cci指标代码,大智慧CCI画线指标源码 副图公式
- 海航生态科技舆情大数据平台容器化改造
- Unity中替换模型的方法
- Grammarly--你的英文写作纠错助手
- crack翻译成中文_crack是什么意思_crack的翻译_音标_读音_用法_例句_爱词霸在线词典...
- 暑假N天乐【比赛篇】 —— 2019牛客暑期多校训练营(第五场)
- 保护眼睛的电脑桌面颜色(推荐)
- 计算机动画原理课程设计,小议动画运动规律的课程设计论文
热门文章
- C# 使用int.TryParse,Convert.ToInt32,(int)将浮点类型转换整数时的区别
- ASP.NET MVC CheckBoxFor为什么会生成hidden input控件
- 基于 Spring Security 的开源统一角色访问控制系统 URACS
- Zend_Feed 的项目实际应用
- SpringBoot+Shiro学习(四):Realm授权
- OPPO R9凭创新赢得2000万销量,成2016年热销手机
- 对抗告警疲劳的8种方法
- 模块化 JS Ajax 请求
- NSInteger,NSUInteger,NSNumber
- HTML meta refresh 刷新与跳转(重定向)页面