Blazor 版 Bootstrap Admin 通用後台許可權管理框架

  • 2020 年 2 月 12 日
  • 筆記

前言

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

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

VirMach 便宜 VPS

QNews

QNews