NETCore Bootstrap Admin 通用后台管理權限 [2]: Blazor 版本介紹

前言

上一篇介紹過了前后台分離的 NET Core 通用權限管理系統 在這篇文章簡要的介紹了 Bootstrap Admin 后台管理框架的一些功能。本篇文章帶來的是微軟最新出的 Blazor 版本的 NET Core 通用權限管理系統

Blazor 簡介

至於 Blazor 是什么，Blazor 的優缺點小伙伴們可以自行在園子里搜索一下，相關介紹還是非常多的，我這里就不介紹 Blazor 是什么，有什么優缺點了。我想闡述的是我個人對 Blazor 技術的一些理解，Blazor 剛出來的時候國內外無數文章報道，但是有一個顯著的特點，所有的文章，代碼講解等都是圍繞微軟的那個例子講解的。換句話說，僅限於那個例子。離開那個例子真的自己做個功能講解的一篇都沒有，微軟自己的文檔也非常不健全，很多技術細節都是一筆帶過。隨着時間的推移，微軟的文檔也豐富起來了。根據微軟的文檔 Blazor 本人用 Blazor 技術將 Bootstrap Admin 后台管理框架重寫了一版，通過自己編寫組件系統的學習了一下 Blazor。通過自己的封裝實現了一個小小的框架，下面詳細的講解一下。

網頁布局設計

Bootstrap Admin 通用后台管理框架布局采用 AdminLTE 的經典布局
如圖所示，區域被划分為四個區域，分別為：

1. 頭部 Header
   負責顯示網站 Logo、小掛件、當前用戶信息

2. 側邊欄 Sidebar
   負責顯示后台管理的菜單、提供導航功能

3. 正文顯示區域 Section
   負責顯示各個功能模塊的主題部分

4. 頁腳 Footer
   負責顯示系統信息

顯示區域設計

正文顯示區域在后台管理框架中基本是字典表維護這種類似的單表維護，需要提供增、刪、改、查基本操作

現在將顯示區域分割成三個部分

1. TabSet 區域
   用於顯示多 Tab

2. Query 區域
   用於顯示查詢條件

3. Table 區域
   用戶顯示符合過濾條件的數據結果集合，這里提供分頁、編輯、刪除等操作

組件設計

<EditPage Id="dict" TItem="Bootstrap.Security.BootstrapDict" QueryModel="QueryModel" OnQuery="Query" OnAdd="Add" OnDelete="Delete" OnSave="Save">
    <QueryBody>
        <LgbInputText @bind-Value="@context.Category" maxlength="50" />
        <Select Items="QueryDefine" TItem="int" @bind-Value="@context.Define" />
        <LgbInputText @bind-Value="@context.Name" maxlength="50" />
    </QueryBody>
    <TableHeader>
        <LgbTableHeader TItem="string" @bind-Value="@context.Category"></LgbTableHeader>
        <LgbTableHeader TItem="string" @bind-Value="@context.Name"></LgbTableHeader>
        <LgbTableHeader TItem="string" @bind-Value="@context.Code"></LgbTableHeader>
        <LgbTableHeader TItem="int" @bind-Value="@context.Define"></LgbTableHeader>
    </TableHeader>
    <RowTemplate>
        <td>@context.Category</td>
        <td>@context.Name</td>
        <td>@context.Code</td>
        <td>@(DefineItems.FirstOrDefault(d => d.Value == context.Define.ToString())?.Text ?? "-")</td>
    </RowTemplate>
    <EditTemplate>
        <div class="row">
            <LgbInputText @bind-Value="@context.Category" placeholder="不可為空，50字以內" maxlength="50">
                <RequiredValidator />
                <StringLengthValidator Length="50" />
            </LgbInputText>
            <Select Items="DefineItems" TItem="int" @bind-Value="@context.Define"></Select>
            <LgbInputText @bind-Value="@context.Name" placeholder="不可為空，50字以內" maxlength="50">
                <RequiredValidator />
                <StringLengthValidator Length="50" />
            </LgbInputText>
            <LgbInputText @bind-Value="@context.Code" placeholder="不可為空，2000字以內" maxlength="2000">
                <RequiredValidator />
                <StringLengthValidator Length="2000" />
            </LgbInputText>
        </div>
    </EditTemplate>
</EditPage>

QueryBody 模板

本組件模板負責提供查詢過濾條件點擊查詢按鈕后數據顯示區域呈現符合過濾條件的數據記錄，本控件大量代碼均已封裝成通用，僅需提供過濾條件即可

<LgbInputText @bind-Value="@context.Category" maxlength="50" />
<Select Items="QueryDefine" TItem="int" @bind-Value="@context.Define" />
<LgbInputText @bind-Value="@context.Name" maxlength="50" />

通過設置 @bind-Value lambda 表達式自動生成一個 label 與 一個 input 控件，極大的提高了代碼編寫速度

TableHeader 模板

本組件模板負責生成數據呈現 Table 的表頭，通過 TItem 設置綁定字段屬性，通過設置 @bind-Value lambda 表達式自動生成漢字表頭

<LgbTableHeader TItem="string" @bind-Value="@context.Category"></LgbTableHeader>
<LgbTableHeader TItem="string" @bind-Value="@context.Name"></LgbTableHeader>
<LgbTableHeader TItem="string" @bind-Value="@context.Code"></LgbTableHeader>
<LgbTableHeader TItem="int" @bind-Value="@context.Define"></LgbTableHeader>

RowTemplate 模板

本組件負責呈現符合過濾條件的數據記錄，支持直接使用服務器端方法進行數據格式化

<td>@context.Category</td>
<td>@context.Name</td>
<td>@context.Code</td>
<td>@(DefineItems.FirstOrDefault(d => d.Value == context.Define.ToString())?.Text ?? "-")</td>

EditTemplate 模板

本組件負責數據的編輯功能，通過設置 @bind-Value 表達式實現雙向綁定，直接調用服務器端保存方法即可

<div class="row">
    <LgbInputText @bind-Value="@context.Category" placeholder="不可為空，50字以內" maxlength="50">
        <RequiredValidator />
        <StringLengthValidator Length="50" />
    </LgbInputText>
    <Select Items="DefineItems" TItem="int" @bind-Value="@context.Define"></Select>
    <LgbInputText @bind-Value="@context.Name" placeholder="不可為空，50字以內" maxlength="50">
        <RequiredValidator />
        <StringLengthValidator Length="50" />
    </LgbInputText>
    <LgbInputText @bind-Value="@context.Code" placeholder="不可為空，2000字以內" maxlength="2000">
        <RequiredValidator />
        <StringLengthValidator Length="2000" />
    </LgbInputText>
</div>

通過簡單的封裝，實現了僅需要提供數據屬性 @context.Name 即可，組件自動會通過 [DisplayName] 標簽或者通過系統服務的字典表中匹配到中文文字，非常的方便

Blazor 多 Tab 版通用權限控制系統演示網站：ba.sdgxgz.com
碼雲開源項目地址：Bootstrap Admin

目前僅僅完成了 字典表維護 頁面的改版。其余頁面等等批量更改

碼雲項目地址：https://gitee.com/LongbowEnterprise/BootstrapAdmin
演示網站地址：https://ba.sdgxgz.com

NETCore Bootstrap Admin 通用后台管理權限 [1]: 前后台分離權限管理系統介紹
NETCore Bootstrap Admin 通用后台管理權限 [2]: Blazor 版本介紹
NETCore Bootstrap Admin 通用后台管理權限 [3]: 精簡版任務調度模塊