使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题

一、项目简介

使用过ABP框架的童鞋应该知道它也自带了一款免费的Blazor UI主题,它的页面是长这样的:

个人感觉不太美观,于是网上搜了很多Blazor开源组件库,发现有一款样式非常不错的组件库,名叫:Radzen,它的组件库案例网址是:https://blazor.radzen.com/dashboard?theme=material3-dark,比较符合我的审美,于是使用它开发了基于ABP框架的UI主题,项目名称叫Abp.RadzenUI,已在Github上开源:Abp.RadzenUI,欢迎大家star。已经提供了基本的功能:登录(支持多租户)、角色管理、用户管理、权限分配、租户管理、多语言切换、免费主题样式切换、侧边栏菜单等;

二、UI展示

1.登录页面,支持多租户的切换登录

2.用户列表

3.权限分配

4.支持多语言切换

5.支持多主题切换

要体验更多的功能,你可以下载本项目到本地亲自体验

三、如何使用

1. 使用ABP CLI工具创建一个新的Abp Blazor Server应用,例如项目名称叫CRM

abp new CRM -u blazor-server -dbms PostgreSQL -m none --theme leptonx-lite -csf

2. 在CRM.Blazor项目安装AbpRadzen.Blazor.Server.UI包

dotnet add package AbpRadzen.Blazor.Server.UI

3. 移除CRM.Blazor项目中与leptonx-lite主题相关的nuget包和代码

主要是 CRMBlazorModule 类中的代码需要精简,可以参考示例项目中的CRMBlazorWebModule.cs文件代码,你可以直接将它的代码覆盖你的代码;

然后删除Pages目录中自带的razor页面文件。

4. 对 Abp RadzenUI 进行配置

将 ConfigureAbpRadzenUI 方法添加到ConfigService方法中

private void ConfigureAbpRadzenUI()
{// Configure AbpRadzenUIConfigure<AbpRadzenUIOptions>(options =>{// 这句代码很重要,它会将你在Blazor Web项目中新建的razor页面组件添加到Router中,这样就可以访问到了options.RouterAdditionalAssemblies = [typeof(Home).Assembly];// 配置页面标题栏//options.TitleBar = new TitleBarSettings//{//    ShowLanguageMenu = false, // 是否显示多语言按钮菜单//    Title = "CRM" // 标题栏名称:一般是系统名称//};//options.LoginPage = new LoginPageSettings//{//    LogoPath = "xxx/xx.png" // 登录页面的logo图片//};//options.Theme = new ThemeSettings//{//    Default = "material",//    EnablePremiumTheme = true,//};});// 多租户配置, 这个会影响到登录页面是否展示租户信息Configure<AbpMultiTenancyOptions>(options =>{options.IsEnabled = MultiTenancyConsts.IsEnabled;});// Configure AbpLocalizationOptionsConfigure<AbpLocalizationOptions>(options =>{// 配置多语言资源,需要继承AbpRadzenUIResource,它包含了需要用到的多语言信息var crmResource = options.Resources.Get<CRMResource>();crmResource.AddBaseTypes(typeof(AbpRadzenUIResource));// 配置多语言菜单中显示的语言options.Languages.Clear();options.Languages.Add(new LanguageInfo("en", "en", "English"));options.Languages.Add(new LanguageInfo("fr", "fr", "Français"));options.Languages.Add(new LanguageInfo("zh-Hans", "zh-Hans", "简体中文"));});// 配置侧边栏菜单Configure<AbpNavigationOptions>(options =>{options.MenuContributors.Add(new CRMMenuContributor());});
}

最后在OnApplicationInitialization方法的最后添加以下代码,使用RadzenUI

app.UseRadzenUI();

关于更多的配置可以参考本项目的示例代码:https://github.com/ShaoHans/Abp.RadzenUI/blob/main/samples/CRM.Blazor.Web/CRMBlazorWebModule.cs

5. 配置侧边栏菜单

当你添加了新的razor页面组件后,需要在CRMMenuContributor类文件中进行配置,这样它就会显示在页面的侧边栏菜单中

四、添加自己的页面

比如你现在要做一个商品管理的增删改查功能,你只要定义一个IProductAppService接口并继承ABP的ICrudAppService接口:

public interface IProductAppService: ICrudAppService<ProductDto, Guid, GetProductsInput, CreateProductDto, UpdateProductDto> { }

然后实现IProductAppService接口:

public class ProductAppService: CrudAppService<Product,ProductDto,Guid,GetProductsInput,CreateProductDto,UpdateProductDto>,IProductAppService{}

一个简单的增删改查业务代码就搞定了,而且接口带了权限验证,完全不用写那么多代码,当然一些其他业务逻辑也可以通过override的方式去实现。

接下来就是增加产品的列表页面,razor页面需要继承下面这个组件:

@inherits AbpCrudPageBase<IProductAppService, ProductDto, Guid, GetProductsInput, CreateProductDto, UpdateProductDto>

这个组件将CRUD的代码都实现了,你只需要编写DataGrid显示列的代码,以及创建产品、编辑产品弹框的代码,强烈建议你把项目代码下载下来学习一下,实现一个后台管理系统真的太简单了。

五、RadzenDataGrid的过滤功能介绍

列表页面都有下面类似的筛选功能:

RadzenDataGrid组件也支持这种筛选,它会把所有列头的筛选条件最后组装成一个过滤字符串,放到了LoadDataArgs类的Filter参数中,这个过滤字符串类似这样:

(Name == null ? "" : Name).Contains("App") and StockCount < 10000 and Status = 0

你的查询接口只需要定义一个Filter属性接受这个字符串,通过这个字符串就能查到数据,当然这得归功于强大的工具包:Microsoft.EntityFrameworkCore.DynamicLinq,感兴趣的可以去查阅资料学习一下。

protected override async Task<IQueryable<Product>> CreateFilteredQueryAsync(GetProductsInput input
)
{var query = await base.CreateFilteredQueryAsync(input);/*在 CRM.EntityFrameworkCore 项目上安装包: Microsoft.EntityFrameworkCore.DynamicLinq然后引用命名空间 : using System.Linq.Dynamic.Core;Dynamic LINQ会自动将过滤字符串转成动态查询表达式*/if (!string.IsNullOrEmpty(input.Filter)){query = query.Where(input.Filter);}return query;
}

六、总结

以上就是对我这个开源项目(https://github.com/ShaoHans/Abp.RadzenUI)简单介绍,如果你熟悉ABP且希望使用它开发一个后台管理系统,不妨一试,有什么问题欢迎大家提issue。

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

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

相关文章

[渗透]前端源码Chrome浏览器修改并运行

文章目录 简述本项目所使用的代码[Fir](https://so.csdn.net/so/search?qFir&spm1001.2101.3001.7020) Cloud 完整项目 原始页面修改源码本地运行前端源码修改页面布局修改请求接口 本项目请求方式 简述 好久之前&#xff0c;就已经看到&#xff0c;_无论什么样的加密&am…

【p2p、分布式,区块链笔记 Blockchain】truffle004 测试网络项目部署

编写合约 一个简单的Solidity智能合约 Usermap 用于在以太坊区块链上管理用户的ID和名称&#xff1a; 数据存储: 使用了 mapping 和 array 两种方式存储用户信息。addUser: 添加用户&#xff08;id和对应的用户名name&#xff09;到区块链。getid: 根据用户 id 获取用户名。该函…

计算机组成原理一句话

文章目录 计算机系统概述存储系统 计算机系统概述 指令和数据以同等地位存储在存储器中&#xff0c;形式上没有差别&#xff0c;但计算机应能区分他们。通过指令周期的不同阶段。 完整的计算机系统包括&#xff0c;1&#xff09;软件系统&#xff1a;程序、文档和数据&#xff…

【牛客刷题】笔记2

目录 1、单词搜索 2、岛屿数量 2.1 DFS 2.2 BFS 3、腐烂的橘子 1、单词搜索 单词搜索_牛客题霸_牛客网 (nowcoder.com) 这道题我们就是先遍历数组board&#xff0c;若遇到了与word[0]相等的字符&#xff0c;则以这个字符为起点进行搜索&#xff0c;搜索可以是dfs&#x…

PHP露营地管理小程序系统源码

&#x1f3d5;️露营新风尚&#xff01;露营地管理小程序系统&#xff0c;打造完美露营体验✨ &#x1f4cd;营地预订&#xff0c;轻松搞定&#x1f4c5; 想要逃离城市的喧嚣&#xff0c;享受大自然的宁静&#xff1f;露营地管理小程序系统让你的露营计划轻松实现&#xff01…

判断网站需不需要改版的几个要点

判断一个网站是否需要改版&#xff0c;可以从多个维度进行分析。以下是一些关键要点&#xff1a; 用户体验&#xff1a; 访问速度&#xff1a;如果网站加载缓慢&#xff0c;用户可能会感到沮丧并离开。导航性&#xff1a;网站结构是否清晰&#xff0c;用户是否能够轻松找到所需…

WebGL编程指南 - 绘制和变换三角形

三角形在三维图形学中的重要地位&#xff0c;以及WebGL如何绘制三角形。使用多个三角形绘制其它类型的基本图形。利用简单的方程对三角形做基本的变换&#xff0c;如移动、旋转和缩放。利用矩阵简化变换。 绘制多个点与缓冲区对象 相关内容&#xff1a;缓冲区对象&#xff1a;创…

第J6周:ResNeXt-50实战解析(pytorch版)

>- **&#x1f368; 本文为[&#x1f517;365天深度学习训练营]中的学习记录博客** >- **&#x1f356; 原作者&#xff1a;[K同学啊]** 任务&#xff1a; ●阅读ResNeXt论文&#xff0c;了解作者的构建思路 ●对比我们之前介绍的ResNet50V2、DenseNet算法 ●使用ResNeX…

LabVIEW离心泵振动监控与诊断系统

利用LabVIEW结合数据采集与处理技术&#xff0c;构建了一套高效、低成本的振动监测与诊断系统&#xff0c;有效提升了测试精度与设备可靠性。 项目背景 在化工生产中&#xff0c;离心泵作为关键设备&#xff0c;其稳定运行对保障生产安全与效率至关重要。由于传统振动测试系统…

C++ —— set系列的使用

目录 1. 序列式容器和关联式容器 2. set和multiset参考⽂档 3. set类的介绍 4. set的构造和迭代器 4.1 set的增删查 4.1.1 插入 4.1.2 查找 4.1.3 删除 5. multiset和set的差异 1. 序列式容器和关联式容器 前⾯我们已经接触过STL中的部分容器如&#xff1a;str…

大学英语四级作文模板万能句型开头主体结尾PDF

大学英语四级笔试时间越来越近了&#xff0c;报名了英语四级的宝子要抓紧咯&#xff0c;今天给大家分享一份实用的英语四级作文模板&#xff0c;看到了就赶紧背&#xff0c;不要等到考完试才后悔没背 … 万能作文模板涵盖开头、主体和结尾的写法&#xff0c;以及常用的万能句型…

股票交易基础规则系列—集合竞价撮合/价格确定原则,连续竞价价格确定原则! 集合竞价和连续竞价的价格是怎么确定的?

竞价交易的撮合原则 证券竞价交易按价格优先、时间优先的原则撮合成交。 成交时价格优先的原则为&#xff1a;较高价格买入申报优先于较低价格买入申报&#xff0c;较低价格卖出申报优先于较高价格卖出申报。——买单价高优先&#xff0c;卖单价低优先。 成交时时间优先的原…

RAID5数据恢复—raid5阵列如何重组?raid5阵列重组方法详解

RAID5数据恢复环境&#xff1a; 一台存储上有一组由12块SCSI硬盘&#xff08;11块数据盘1块热备盘&#xff09;组建的RAID5磁盘阵列&#xff0c;FreeBSD操作系统zfs文件系统。 RAID5故障&#xff1a; 其中一块盘出现故障&#xff0c;需要重组该raid5磁盘阵列。 RAID5数据恢复…

MySQL数据库操作——(4)

目录 8 视图 8.1 常见的数据库对象 8.2 视图概述 8.2.1 为什么使用视图&#xff1f; 8.2.2 视图的理解 8.3 创建视图 8.3.1 创建单表视图 8.3.2 创建多表联合视图 8.3.3 基于视图创建视图 8.4 查看视图 8.5 更新视图的数据 8.5.1 一般情况 8.6 修改、删除视图 8.…

冲锋衣市场洞察:全方位数据分析与趋势展望

冲锋衣整体数据分析 一. 概述 本报告基于从淘宝商品搜索接口和淘宝精确月销量接口中提取的数据&#xff0c;分析了前百个品牌在销售额上的占比情况。分析涵盖了销售额和占比的数据&#xff0c;为决策提供了依据。&#xff08;数据获取时间&#xff1a;2024.10.08&#xff09;…

leetcode动态规划(十)-0-1背包理论基础(一维数组)

一维dp数组&#xff08;滚动数组&#xff09; leetcode中无纯0-1背包问题&#xff0c;可从卡码网上查看题目46.0-1背包问题 一维数组来源于二维数组&#xff0c;其本质是对一维数组进行压缩了&#xff0c;压缩后需要注意在进行背包容量循环的时候采用后序遍历&#xff0c;而不…

世界500强,计算机校招月薪 1k ?

大家好&#xff0c;我是鸭鸭&#xff01; 周末闲来无事&#xff0c;鸭鸭又来互联网冲浪了&#xff0c;没想到刷到这么一张图&#xff1a; 现在校招给计算机应届生开出的薪资只有 1&#xff5e;1k 了吗&#xff1f;鸭鸭很难不怀疑这是打错字了。 根据图里信息&#xff0c;这应…

【数据库设计】逻辑结构设计

E-R实体集的转换 概念结构设计之后就是对E-R图进行逻辑结构设计&#xff1a;即将E-R图转化成关系的过程。逻辑结构设计主要用于数据库管理系统上&#xff0c;为了让数据在计算机系统中更好地表示。 此设计过程用到的数据模型有&#xff1a;除了前面讲过的关系模型还有层次模型…

双十一该买什么比较好?双十一推荐好物清单分享

​是不是很多朋友跟我一样&#xff0c;已经为双11做好了准备&#xff0c;打算开启买买买的节奏&#xff01;作为一名家居兼数码博主&#xff0c;每年双11的时候都会疯狂囤很多物品&#xff0c;所以今天就跟大家来分享一下&#xff0c;我的双11购物清单&#xff0c;也给大家参考…

数据结构部分混淆

1.随机存储和顺序存储&#xff1a; 随机存取&#xff1a;数组&#xff0c;当存储器中的数据被读取或写入时&#xff0c;所需要的时间与该数据所在的物理地址无关 顺序存取&#xff1a;链表&#xff0c;当存储器中的数据被读取或写入时&#xff0c;所需要的时间与该数据所在的物…