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

浙江好梦来投资

一、项目简介

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

个人感觉不太美观，于是网上搜了很多Blazor开源组件库，发现有一款样式非常不错的组件库，名叫：Radzen，它的组件库案例网址是：Sample Blazor Dashboard | Free UI Components by Radzen，比较符合我的审美，于是使用它开发了基于ABP框架的UI主题，项目名称叫Abp.RadzenUI，已在Github上开源：GitHub - ShaoHans/Abp.RadzenUI: Abp RadzenUI is a UI theme built on the Abp framework and developed using the Radzen Blazor component，欢迎大家star。已经提供了基本的功能：登录（支持多租户）、角色管理、用户管理、权限分配、租户管理、多语言切换、免费主题样式切换、侧边栏菜单等；
二、UI展示

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

2.用户列表

3.权限分配

4.支持多语言切换

5.支持多主题切换

要体验更多的功能，你可以下载本项目到本地亲自体验
三、如何使用

• 使用ABP CLI工具创建一个新的Abp Blazor Server应用，例如项目名称叫CRM
  abp new CRM -u blazor-server -dbms PostgreSQL -m none --theme leptonx-lite -csf
  
• 在CRM.Blazor项目安装AbpRadzen.Blazor.Server.UI包
  dotnet add package AbpRadzen.Blazor.Server.UI
  
• 移除CRM.Blazor项目中与leptonx-lite主题相关的nuget包和代码
  主要是 CRMBlazorModule 类中的代码需要精简，可以参考示例项目中的CRMBlazorWebModule.cs文件代码，你可以直接将它的代码覆盖你的代码；
  然后删除Pages目录中自带的razor页面文件。
  
• 对 Abp RadzenUI 进行配置
  将 ConfigureAbpRadzenUI 方法添加到ConfigService方法中
  

1. private void ConfigureAbpRadzenUI()
2. {
3.     // Configure AbpRadzenUI
4.     Configure<AbpRadzenUIOptions>(options =>
5.     {
6.         // 这句代码很重要，它会将你在Blazor Web项目中新建的razor页面组件添加到Router中，这样就可以访问到了
7.         options.RouterAdditionalAssemblies = [typeof(Home).Assembly];
9.         // 配置页面标题栏
10.         //options.TitleBar = new TitleBarSettings
11.         //{
12.         //    ShowLanguageMenu = false, // 是否显示多语言按钮菜单
13.         //    Title = "CRM" // 标题栏名称：一般是系统名称
14.         //};
15.         //options.LoginPage = new LoginPageSettings
16.         //{
17.         //    LogoPath = "xxx/xx.png" // 登录页面的logo图片
18.         //};
19.         //options.Theme = new ThemeSettings
20.         //{
21.         //    Default = "material",
22.         //    EnablePremiumTheme = true,
23.         //};
24.     });
26.     // 多租户配置, 这个会影响到登录页面是否展示租户信息
27.     Configure<AbpMultiTenancyOptions>(options =>
28.     {
29.         options.IsEnabled = MultiTenancyConsts.IsEnabled;
30.     });
32.     // Configure AbpLocalizationOptions
33.     Configure<AbpLocalizationOptions>(options =>
34.     {
35.         // 配置多语言资源，需要继承AbpRadzenUIResource，它包含了需要用到的多语言信息
36.         var crmResource = options.Resources.Get<CRMResource>();
37.         crmResource.AddBaseTypes(typeof(AbpRadzenUIResource));
39.         // 配置多语言菜单中显示的语言
40.         options.Languages.Clear();
41.         options.Languages.Add(new LanguageInfo("en", "en", "English"));
42.         options.Languages.Add(new LanguageInfo("fr", "fr", "Français"));
43.         options.Languages.Add(new LanguageInfo("zh-Hans", "zh-Hans", "简体中文"));
44.     });
46.     // 配置侧边栏菜单
47.     Configure<AbpNavigationOptions>(options =>
48.     {
49.         options.MenuContributors.Add(new CRMMenuContributor());
50.     });
51. }

复制代码

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

1. app.UseRadzenUI();

复制代码

关于更多的配置可以参考本项目的示例代码：Abp.RadzenUI/samples/CRM.Blazor.Web/CRMBlazorWebModule.cs at main · ShaoHans/Abp.RadzenUI · GitHub
5. 配置侧边栏菜单
当你添加了新的razor页面组件后，需要在CRMMenuContributor类文件中进行配置，这样它就会显示在页面的侧边栏菜单中
四、添加自己的页面

比如你现在要做一个商品管理的增删改查功能，你只要定义一个IProductAppService接口并继承ABP的ICrudAppService接口：
public interface IProductAppService     : ICrudAppService { }
然后实现IProductAppService接口：

1. public class ProductAppService
2.     : CrudAppService<
3.         Product,
4.         ProductDto,
5.         Guid,
6.         GetProductsInput,
7.         CreateProductDto,
8.         UpdateProductDto
9.     >,
10.         IProductAppService{}

复制代码

一个简单的增删改查业务代码就搞定了，而且接口带了权限验证，完全不用写那么多代码，当然一些其他业务逻辑也可以通过override的方式去实现。
接下来就是增加产品的列表页面，razor页面需要继承下面这个组件：
@inherits AbpCrudPageBase
这个组件将CRUD的代码都实现了，你只需要编写DataGrid显示列的代码，以及创建产品、编辑产品弹框的代码，强烈建议你把项目代码下载下来学习一下，实现一个后台管理系统真的太简单了。
五、RadzenDataGrid的过滤功能介绍

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

RadzenDataGrid组件也支持这种筛选，它会把所有列头的筛选条件最后组装成一个过滤字符串，放到了LoadDataArgs类的Filter参数中，这个过滤字符串类似这样：
(Name == null ? "" : Name).Contains("App") and StockCount < 10000 and Status = 0
你的查询接口只需要定义一个Filter属性接受这个字符串，通过这个字符串就能查到数据，当然这得归功于强大的工具包：Microsoft.EntityFrameworkCore.DynamicLinq，感兴趣的可以去查阅资料学习一下。

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

复制代码

六、总结

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

来源:https://www.cnblogs.com/chuandao/p/18491215
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！