集成Abp VNext Blazor wasm的Ant Design后台框架 TF.Abp.Blazor.Layout.AntDesignTheme

最新推荐文章于 2025-04-01 09:35:40 发布

motl2000

最新推荐文章于 2025-04-01 09:35:40 发布

阅读量3k

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/motl2000/article/details/111456733

ABP VNext 同时被 3 个专栏收录

2 篇文章

订阅专栏

Blazor webassambly

1 篇文章

订阅专栏

Ant Design

1 篇文章

订阅专栏

集成Abp VNext Blazor wasm的Ant Design后台框架 TF.Abp.Blazor.Layout.AntDesignTheme

目的
Demo
实现
- 代码和文档

目的

随着微软的.Net 5.0和Blazor Webassambly的正式发布，也许一些应用项目也将开始探索使用这些新技术。
Abp VNext 是当前.Net领域稍微有点热门的框架，现在Abp也推出了基于Blazor Webassambly的前端框架，但与已有的Abp VNext免费前端一样，也是丑陋的MVC原始样式。想要好看就得买Abp VNext的商业版，对于一些小项目来说，那价钱可也不便宜啊。
好在现在也有一些免费的Blazor Webassambly后台，比如Ant Design Pro。
但Ant Design Pro不过就是做了个前端壳子，要拿来用也得费不少劲。
因此，为此开发了一套集成Abp VNext和Ant Design的工具包，快速搭建应用后台，使开发团队可以集中精力在业务实现上，快速开发，尽快收钱。

要推荐的是： TF.Abp.Blazor.Layout.AntDesignTheme

Demo

废话少说，先来看样子

瞧！页面主题是熟悉的Abp首页吧？
左侧和上面的工具栏都是由Ant Design Pro Layout提供的。 TF.Abp.Blazor.Layout.AntDesignTheme集成了Ant Design Pro Layout的前端风格，并将Abp VNext的要素集成了进来。比如主菜单、用户验证、多语言等。
上图的，右上角集成了Abp的登录验证，点击就能调用Abp自带的登录验证功能，再来看一下登录以后。
在这里插入图片描述
左侧的菜单显示了Abp 自带的管理模块，只要知道Abp是怎么管理主菜单的，就可以维护菜单，不用关心菜单显示组织的问题，这对于一穷二白的项目来说是省去了不少时间的。
在右上角可以看到多语言的菜单，这也是与Abp做了集成，可以直接使用Abp自带的多语言架构，当然也可以自定义。