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]: 精簡版任務調度模塊

原文出處：https://www.cnblogs.com/argozhang/p/12022766.html