基于 Blazui 的 Blazor 后台管理模板 BlazAdmin 正式尝鲜
簡介
BlazAdmin 是一個基于Blazui的后臺管理模板，無JS，無TS，非 Silverlight，非 WebForm，一個標簽即可使用。
我將在下一篇文章討論 Blazor 服務器端渲染與客戶端渲染的基本原理，對比服務器端渲染與 WebForm 的異同點
經過近一個月的開發，BlazAdmin 嘗鮮版終于搞定了，功能很有限，同時也存在很多問題，只集成了一個后臺管理系統最基本的功能，包括：
選項卡式頁面管理，無 Iframe
二級導航菜單
Identity 用戶注冊與登錄，基于Cookies
需要注意的一點是我們短時間不會支持 IdentityServer4 以及Jwt，但會在接下來的計劃中支持 Session 注冊與登錄。下面是 BlazAdmin 的運行效果
初次運行時會創建管理員
主界面
修改密碼
登出
馬上開始嘗鮮
準備條件
.net core 3.1
VS2019
新建一個 Blazor 服務端渲染應用
安裝 BlazAdmin.ServerRender Nuget 包
刪除 NavMenu.razor 文件
_Imports.razor 文件增加以下內容
Copy@using BlazAdmin @using Blazui.Component.Container @using Blazui.Component.Button @using Blazui.Component.Dom @using Blazui.Component.Dynamic @using Blazui.Component.NavMenu @using Blazui.Component.Input @using Blazui.Component.Radio @using Blazui.Component.Select @using Blazui.Component.CheckBox @using Blazui.Component.Switch @using Blazui.Component.Table @using Blazui.Component.Popup @using Blazui.Component.Pagination @using Blazui.Component.Form @using Blazui.Component為了啟用登錄，App.razor 文件的內容需要替換為如下
Copy<Router AppAssembly="@typeof(Program).Assembly"><Found Context="routeData"><AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /></Found><NotFound><LayoutView Layout="@typeof(MainLayout)"><p>Sorry, there's nothing at this address.</p></LayoutView></NotFound> </Router>登錄需要用到數據庫，所以添加 DemoDbContext 類
Copypublic class DemoDbContext : IdentityDbContext {public DemoDbContext(DbContextOptions options) : base(options){} }缺少什么命名空間就直接 using，不再贅述
Startup 文件 ConfigureService 方法替換為如下內容
示例為了方便所以用到了內存數據庫，需要安裝 nuget 包 Microsoft.EntityFrameworkCore.InMemory
需要 using 相關的命名空間
Startup 文件 Configure 方法增加如下內容
增加登錄相關配置
Copyapp.UseAuthorization(); app.UseAuthentication();注意需要加到 app.UseRouting() 方法之下
增加 WebApi 相關配置，這主要為登錄服務
_Host.cshtml 頁面內容替換如下
Copy@page "/" @namespace BlazorApp4.Pages //此處 BlazorApp4 需要改成你實際的命名空間，一般就是項目名 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers <!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>BlazAdmin Demo</title><base href="~/" /><link href="/_content/BlazAdmin/css/admin.css" rel="stylesheet" /><link rel="stylesheet" href="/_content/Blazui.Component/css/index.css" /><link rel="stylesheet" href="/_content/Blazui.Component/css/fix.css" /> </head> <body><app>@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))</app><script src="/_content/Blazui.Component/js/dom.js"></script><script src="_framework/blazor.server.js"></script> </body> </html>接下來就是測試菜單和頁面，將 MainLayout.razor 文件的內容替換為如下
Copy@inherits LayoutComponentBase<BAdmin Menus="Menus" NavigationTitle="BlazAdmin Demo" EnablePermissionMenus="false"></BAdmin> @code{protected List<MenuModel> Menus { get; set; } = new List<MenuModel>();protected override void OnInitialized(){Menus.Add(new MenuModel(){Label = "示例頁面",Icon = "el-icon-s-promotion",Children = new List<MenuModel>() {new MenuModel(){Label="示例子頁面1",Icon = "el-icon-s-promotion",Route="/page1"},new MenuModel(){Label="示例子頁面2",Icon = "el-icon-s-promotion",Route="/page2"}}});} }在 Pages 頁面下新建兩個 Razor 組件，注意是 Razor 組件，將路由分別設置為 /page1 和 /page2
運行查看效果
Demo 下載
示例 Demo 獲取請進QQ群 74522853
Fuck?Fork Me, Star Me
Blazui 組件庫：https://github.com/wzxinchen/Blazui
BlazAdmin 核心組件庫：https://github.com/wzxinchen/BlazAdmin
BlazAdmin 服務端渲染庫：https://github.com/wzxinchen/BlazAdmin.ServerRender
總結
以上是生活随笔為你收集整理的基于 Blazui 的 Blazor 后台管理模板 BlazAdmin 正式尝鲜的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2019 ASP.NET Core 之微
- 下一篇： Kubernetes 的2020年“野望