使用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…

10.22Python_numpy习题整合

编写一个函数&#xff0c;返回数组沿指定轴的方差。 import numpy as npdef calculate(var1,var2):arr1 np.array(var1)variance np.var(arr1, axisvar2)print(variance)calculate([[1,2,3],[4,5,6]],0)实现一个函数&#xff0c;它接受一个 NumPy 数组&#xff0c;并返回该数…

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

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

awk命令学习记录

awk命令 awk命令 表示将一行数据按特定分割符分割成多列&#xff0c;而从而选取特定列数的数据&#xff0c;默认分割符为空格&#xff0c;连接符默认也是空格 // 1. 更换分割符 awk -F : 1.txt // 1.txt为你的文件名 // 2. 打印多列 awk {print $1,$2} // $0为整行&#xff…

深度学习模型:原理、架构与应用

深度学习(Deep Learning)是机器学习中的一个分支,基于人工神经网络的发展,尤其是多层神经网络的研究,使其在语音识别、图像处理、自然语言处理等领域取得了显著进展。深度学习的核心是通过大量数据的训练,学习到数据的内在结构和模式,并且具备自动从复杂的输入中提取特征…

计算机组成原理一句话

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

Rust使用config加载Toml配置文件

前面提到用dotenvy读取配置文件到环境变量&#xff1a;https://juejin.cn/post/7411407565357449225 这里从配置文件中读取配置 添加依赖&#xff08;这里使用yaml配置&#xff09; # 异步运行时 tokio { version "1", features ["full"] } # 序列化…

SpringBoot request.getContextPath()获取到http 而不是https的问题解决

在某些情况下&#xff0c;使用 request.getContextPath() 可能会返回 HTTP 而不是 HTTPS&#xff0c;这通常是因为应用程序运行在反向代理后面&#xff08;如 Nginx 或 Apache&#xff09;&#xff0c;而代理服务器没有正确地转发请求的协议信息。 要解决这个问题&#xff0c;…

在linux中 appimage是什么文件? 为什么能直接运行

chmod x 你的.appImage ./你的.appImagehttps://github.com/AppImage/AppImageKit/wiki/AppImages AppImage 是一种用于打包和分发 Linux 应用程序的格式。它具有以下特点&#xff1a; 可移植性&#xff1a;AppImage 包可以在不同的 Linux 发行版上运行&#xff0c;因为它将应…

【牛客刷题】笔记2

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

网关挂了服务还能正常运行吗?

网关是现代架构&#xff08;尤其是在微服务架构中&#xff09;中的重要组件&#xff0c;负责处理客户端请求并将其路由到适当的服务。如果网关挂掉&#xff0c;通常会影响到系统的正常运行&#xff0c;但具体后果取决于系统的设计和架构。 网关挂掉后的影响 请求路由中断&…

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

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

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

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

【设计模式】深入理解Python中的桥接模式(Bridge Pattern)

深入理解Python中的桥接模式&#xff08;Bridge Pattern&#xff09; 在软件开发中&#xff0c;我们常常会遇到一个类随着功能的扩展&#xff0c;继承层次越来越复杂&#xff0c;导致系统僵化&#xff0c;难以维护。桥接模式&#xff08;Bridge Pattern&#xff09;提供了一种…

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;以及常用的万能句型…

鸿蒙 NEXT 开发:常用三方库与包管理

推荐列表 名称简介luvi/lv-markdown-inmarkdown 解析库ohos/axios符合前端开发习惯的 HTTP 请求库ohos/crypto-js加密算法库&#xff1a;crypto-js 已支持的算法有&#xff1a;MD5、SHA-1、SHA-256、HMAC、HMAC-MD5、HMAC-SHA1、HMAC-SHA256、PBKDF2、AES、RC4、DES 等。ohos/…