跳至主要內容

nicye大约 4 分钟约 1195 字

项目介绍

AdminBlazor 是一款 Blazor Server SaaS 后台管理项目,支持 RABC 权限菜单/按钮,支持一对一、一对多、多对多代码生成 .razor 界面。

集成功能:菜单、角色、用户、定时任务、数据字典、租户

依赖组件:BootstrapBlazor、FreeSql、FreeScheduler、Rougamo

  • github: https://github.com/2881099/AdminBlazor
  • gitee: https://gitee.com/FreeSql/AdminBlazor

正常更新一行记录

  • vue -> webapi orm 查询数据 -> 转成 dto 返回 -> 绑定 js 对象 -> 前端提交时把 js 对象转成 http post DTO -> webapi 获取 dto 转成实体对象 -> orm.Update() -> 更新成功
  • blazor server -> orm 查询数据 item -> item 与 html 控件双向绑定 -> 前端提交时 orm.Update(item) -> 更新成功

自己体会一下。。~~

快速开始

  1. 安装模板

dotnet new install AdminBlazor.Template

  1. 新建项目

dotnet new admin

  1. 运行访问

http://localhost:5231/Admin

用户名:admin 密码:freesql

  1. 新建菜单,类型选择增删改查
image
image
  1. 生成代码,在实体类型维护注释、导航属性
  • 实体上的注释,会生成 HTML Label
  • 实体上的导航属性,会生成丰富的 UI
  • 创建实体类型,建议继承 Entity/EntityCreated/EntityModifed
image
image

权限

  • UserEntity 多对多 RoleEntity
  • RoleEntity 多对多 MenuEntity

提示:AdminContext 类型已注入为 Scoped

class AdminContext
{
    public IServiceProvider Service { get; }
    public UserEntity User { get; set; }
    public List<RoleEntity> Roles { get; }
    public List<MenuEntity> RoleMenus { get; }

    //路由、按钮权限验证
    public Task<bool> AuthPath(string path);
    public Task<bool> AuthButton(string path)
}

按钮权限,在 razor 中设置特性:

[AdminButton("name")]
void ButtonClick()
{
}

之后菜单管理,会出现对应的按钮项,勾选设置角色是否有按钮的权限。

image
image

租户

提示:AdminContext 类型已注入为 Scoped

class AdminContext
{
    public IServiceProvider Service { get; }
    public TenantEntity Tenant { get; }
}

每个租户独立数据库,注入方式:

  • 访问租户:IFreeSql/IAggregateRootRepository<T>
  • 访问主库:FreeSqlCloud

FreeSqlCloud API 访问方式与 IFreeSql 一样 IAggregateRootRepository 是级联操作友好的仓储模式

image
image

定时任务

[Scheduler("任务1", "0/30 * * * * *")]
static void Scheduler001()
{
    System.Console.WriteLine("任务1 被触发...");
}

[Scheduler("任务2", "0/15 * * * * *")]
static void Scheduler002(IServiceProvider service)
{
    System.Console.WriteLine("任务2 被触发...");
}

组件

以下几个是 AdminBlazor 封装的组件,更多丰富的 UI 组件可以看:BootstrapBlazor

1. 增删改查 AdminTable2<TItem>

使用 FreeSql 对实体类型 TItem 增删改查

名称说明
bool IsDebug打开UI调试
string Title标题,弹框时
int PageSize分页,值 -1 时不分开
bool IsQueryString查询条件与 URL QueryString 同步
bool IsRemove开启删除
bool IsRowRemove开启删除(表格每行)
bool IsAdd开启添加
bool IsEdit开启编辑
bool IsRefersh开启刷新
bool IsSearchText开启文本搜索
bool IsSingleSelect开启单选
bool IsMultiSelect开启多选
bool IsConfirmEdit开启编辑保存时,弹框确认
bool IsConfirmRemove开启删除时,弹框确认
int Colspan表格一行显示几条记录
int BodyHeight表格高度
string DialogClassName弹框样式
Func<AdminQueryInfo, Task> InitQuery初始化查询
EventCallback<AdminQueryEventArgs<TItem>> OnQuery正在查询,设置条件
EventCallback<TItem> OnEdit正在编辑,设置编辑对象
EventCallback<List<TItem>> OnRemove正在删除
EventCallback<List<AdminItem<TItem>>> OnSelectChanged选择内容发生变化
EventCallback<AdminItem<TItem>> OnRowClick单击表格行时
RenderFragment TableHeader表格 TR 模板
RenderFragment<TItem> TableRow表格 TD 模板
RenderFragment<TItem> EditTemplate添加/编辑 模板
RenderFragment CardHeader卡片 Header 模板
RenderFragment CardFooter卡片 Fotter 模板

2. 弹框分配 AllocTable2<TItem, TChild>

弹框分配实体类型 TItem 【多对多】导航属性

名称说明
TItem Item被分配的对象
string ChildProperty被分配的对象的 List<TChild> 属性
string Title标题
EventCallback<TItem> ItemChanged分配变化时
int PageSizeTChild 分页,值 -1 时不分页
bool IsSearchTextTChild 开启文本搜索
EventCallback<AdminQueryEventArgs<TChild>> OnQueryTChild 正在查询,设置条件
RenderFragment TableHeaderTChild 表格 TR 模板
RenderFragment<TItem> TableRowTChild 表格 TD 模板

3. 文本框 InputTable2<TItem, TKey>

文本框 + 按钮弹框绑定 【多对一】、【多对多】导航属性

名称说明
TKey Value
EventCallback<TKey> OnValueChanged值变化时
TItem Item【多对一】导航属性
EventCallback<TItem> OnItemChanged【多对一】导航属性变化时
TItem Items【多对多】导航属性
EventCallback<TItem> OnItemsChanged【多对多】导航属性变化时
Func<TItem, string> DisplayText文本框显示内容
string ModalTitle弹框标题
int PageSize弹框 分页,值 -1 时不分页
bool IsSearchText弹框 开启文本搜索
RenderFragment TableHeader弹框 表格 TR 模板
RenderFragment<TItem> TableRow弹框 表格 TD 模板

4. 单选/多选 SelectTable2<TItem, TKey>

名称说明
TKey Value
EventCallback<TKey> OnValueChanged值变化时
TItem Items【多对多】导航属性
EventCallback<TItem> OnItemsChanged【多对多】导航属性变化时
int PageSize分页,值 -1 时不分页
bool IsSearchText开启文本搜索
RenderFragment<TItem> ChildContent内容模板

5. 弹框 AdminModal

名称说明
string Title标题
bool Visible是否显示
bool IsBackdropStatic是否静态模式
bool IsKeyboard是否接受 ESC 关闭
string DialogClassName弹框样式,如:modal-sm、modal-lg、modal-xl、modal-xxl、modal-fullscreen
string YesButton确认按钮
string CloseButton关闭按钮
EventCallback<TItem> OnYes确认时
EventCallback<TItem> OnClose关闭时
RenderFragment ChildContent内容模板