使用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.rhkb.cn/news/451475.html

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

相关文章

【Linux系统编程】第三十四弹---使用匿名管道构建简易Linux进程池

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、引言 2、进程池的基本概念 3、管道在进程池中的应用 4、进程池的实现 4.1、master类定义 4.2、测试信道 4.3、通过cha…

一文读懂JPA及Mybatis的原理和机制(面试经)

导览 前言Q&#xff1a;什么是JPA1. 简介2. 原理 Q&#xff1a;JPA持久化框架—Mybatis1. 内部组成与关系2. 各组件作用域和生命周期3. 动态SQL3.1 if语句3.2 choose-when-otherwise 4. mapper映射XML4.1 select4.2 insert 5. $与#的区别5.1 #{...}5.2 ${...} 结语精彩回顾 前言…

明日周刊-第23期

十月已过半&#xff0c;气温也转凉了&#xff0c;大家注意保温哦。冬吃萝卜&#xff0c;夏吃姜&#xff0c;在快要到来的冬季大家可以选择多吃点萝卜。 配图是本周末去商场抓娃娃的时候拍的照片&#xff0c;现在抓娃娃单次普遍都控制在1块钱以下了&#xff0c;还记得多年前的抓…

qt继承结构

一、 继承结构 所有的窗口类均继承自QWidget类&#xff0c;因此QWidget类本身包含窗口的特性。QWidget对象本身既可以作为独立窗口&#xff0c;又可以作为组件&#xff08;子窗口&#xff09;。 通过构造函数可以创建以上两种形态的QWidget&#xff1a; // 参数1&#xff1a;使…

[C#][winform]基于yolov8的道路交通事故检测系统C#源码+onnx模型+评估指标曲线+精美GUI界面

【重要说明】 该系统以opencvsharp作图像处理,onnxruntime做推理引擎&#xff0c;使用CPU进行推理&#xff0c;适合有显卡或者没有显卡windows x64系统均可&#xff0c;不支持macOS和Linux系统&#xff0c;不支持x86的windows操作系统。由于采用CPU推理&#xff0c;要比GPU慢。…

【重学 MySQL】七十一、揭秘数据库魔法——深入探索并引入视图

【重学 MySQL】七十一、揭秘数据库魔法——深入探索并引入视图 视图的定义视图的作用视图的注意事项 在MySQL数据库中&#xff0c;视图&#xff08;View&#xff09;是一种非常强大且灵活的工具&#xff0c;它为用户提供了以更安全、更清晰的方式查看和管理数据的途径。 视图的…

《计算机视觉》—— 换脸

效果如下&#xff1a; 完整代码&#xff1a; import cv2 import dlib import numpy as npJAW_POINTS list(range(0, 17)) RIGHT_BROW_POINTS list(range(17, 22)) LEFT_BROW_POINTS list(range(22, 27)) NOSE_POINTS list(range(27, 35)) RIGHT_EYE_POINTS list(range(36…

【深入解析】ChatGPT各版本在论文写作中的五大表现差异

学境思源&#xff0c;一键生成论文初稿&#xff1a; AcademicIdeas - 学境思源AI论文写作 人工智能在自然语言处理领域已取得了显著进展&#xff0c;尤其是OpenAI的ChatGPT系列在文本生成和理解方面表现突出。然而&#xff0c;不同版本的ChatGPT在论文写作中的表现存在明显差异…

Python 从入门到实战37(进程间通信)

我们的目标是&#xff1a;通过这一套资料学习下来&#xff0c;可以熟练掌握python基础&#xff0c;然后结合经典实例、实践相结合&#xff0c;使我们完全掌握python&#xff0c;并做到独立完成项目开发的能力。 上篇文章我们讨论了通过multiprocessing模块创建进程操作的相关知…

力扣 142.环形链表Ⅱ【详细解释】

一、题目 二、思路 三、代码 /*** Definition for singly-linked list.* class ListNode {* int val;* ListNode next;* ListNode(int x) {* val x;* next null;* }* }*/ public class Solution {public ListNode detectCycle(ListNode hea…

javaWeb项目-ssm+jsp房屋出租管理系统功能介绍

本项目源码&#xff08;点击下方链接下载&#xff09;&#xff1a;java-ssmjsp房屋出租管理系统实现源码(项目源码-说明文档)资源-CSDN文库 项目关键技术 开发工具&#xff1a;IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架&#xff1a;ssm、Springboot 前端&#xff…

[含文档+PPT+源码等]精品基于springboot实现的原生Andriod大学校园食堂外卖系统App

基于Spring Boot实现的原生Android大学校园食堂外卖系统App的背景可以从以下几个方面进行阐述&#xff1a; 一、项目背景与需求 随着移动互联网技术的快速发展和智能手机的普及&#xff0c;大学生对于便捷、高效的校园生活服务需求日益增长。大学校园食堂作为学生们日常用餐的…

【电商项目】1分布式基础篇

1 项目简介 1.2 项目架构图 1.2.1 项目微服务架构图 1.2.2 微服务划分图 2 分布式基础概念 3 Linux系统环境搭建 查看网络IP和网关 linux网络环境配置 补充P123&#xff08;修改linux网络设置&开启root密码访问&#xff09; 设置主机名和hosts映射 主机名解析过程分析&…

【问题解决】——当出现0xc000007b和缺少mfc140.dll时,该怎么做才能让软件可以打开

目录 事情起因 问题处理 明确定义 填坑之路 最后我是怎么解决的&#xff08;不想看故事直接到这里&#xff09; 事情起因 最近想要重新安装西门子博途来做西门子的一些算法的时候&#xff0c;发现自己软件装的是V15.1的版本&#xff0c;而买的plc1200固件版本要求至少16以…

性能评测第一,阿里开源可商用AI模型Ovis 1.6使用指南,AI多模态大模型首选

什么是 Ovis 1.6 Gemma 2 9B&#xff1f; Ovis 1.6 Gemma 2 9B 是阿里国际AI团队推出的最新多模态大模型&#xff08;Multimodal Large Language Model&#xff0c;MLLM&#xff09;。该模型旨在结构化地对齐视觉和文本嵌入&#xff0c;能够处理和理解多种不同类型的数据输入&…

抑郁症自测量表 API 接口,洞察情绪状态

抑郁症是一种常见的心理疾病&#xff0c;会给患者的生活和工作带来很大的困扰。为了帮助人们更好地了解自己的情绪状态&#xff0c;有一种抑郁症自测量表&#xff08;简称SDS&#xff09;&#xff0c;它是一种能够反映病人主观抑郁症状的自评量表。下面我们将通过调用抑郁症自测…

基于FreeRTOS的LWIP移植

目录 前言一、移植准备工作二、以太网固件库与驱动2.1 固件库文件添加2.2 库文件修改2.3 添加网卡驱动 三、LWIP 数据包和网络接口管理3.1 添加LWIP源文件3.2 Lwip文件修改3.2.1 修改cc.h3.2.2 修改lwipopts.h3.2.3 修改icmp.c3.2.4 修改sys_arch.h和sys_arch.c3.2.5 修改ether…

Linux·文件与IO

1. 回忆文件操作相关知识 我们首先回忆一下关于文件的一些知识。 如果一个文件没有内容&#xff0c;那它到底有没有再磁盘中存在&#xff1f;答案是存在&#xff0c;因为 文件 内容 属性&#xff0c;即使文件内容为空&#xff0c;但属性信息也是要记录的。就像进程的…

硬件产品经理的开店冒险之旅(下篇)

缘起&#xff1a;自己为何想要去寻找职业第二曲线 承接上篇的内容&#xff0c;一名工作13年的普通硬件产品经理将尝试探索第二职业曲线。根本原因不是出于什么高大上的人生追求或者什么职业理想主义&#xff0c;就是限于目前的整体就业形式到了40岁的IT从业人员基本不可能在岗…

【Python】selenium遇到“InvalidArgumentException”的解决方法

在使用try……except 的时候捕获到这个错误&#xff1a; InvalidArgumentException: invalid argument (Session info: chrome112.0.5614.0) 这个错误代表的是&#xff0c;当传入的参数不符合期望时&#xff0c;就会抛出这个异常&#xff1a; InvalidArgumentException: invali…