前言

上一篇介紹過了前後臺分離的 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

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