基於 Blazui 的 Blazor 後臺管理模板 BlazAdmin 正式嚐鮮

時間 2019-12-18

標籤基於 blazui blazor 後臺管理模板 blazadmin 正式嚐鮮简体版

原文原文鏈接

簡介

　　BlazAdmin 是一個基於Blazui的後臺管理模板，無JS，無TS，非 Silverlight，非 WebForm，一個標籤便可使用。
　　我將在下一篇文章討論 Blazor 服務器端渲染與客戶端渲染的基本原理，對比服務器端渲染與 WebForm 的異同點
　　通過近一個月的開發，BlazAdmin 嚐鮮版終於搞定了，功能頗有限，同時也存在不少問題，只集成了一個後臺管理系統最基本的功能，包括：css

選項卡式頁面管理，無 Iframe

二級導航菜單

Identity 用戶註冊與登陸，基於Cookies

　　須要注意的一點是咱們短期不會支持 IdentityServer4 以及Jwt，但會在接下來的計劃中支持 Session 註冊與登陸。下面是 BlazAdmin 的運行效果html

初次運行時會建立管理員git

主界面github

修改密碼web

登出數據庫

立刻開始嚐鮮

準備條件

.net core 3.1

VS2019

新建一個 Blazor 服務端渲染應用

安裝 BlazAdmin.ServerRender Nuget 包

刪除 NavMenu.razor 文件

_Imports.razor 文件增長如下內容

@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 文件的內容須要替換爲以下

<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 類

public class DemoDbContext : IdentityDbContext
{
    public DemoDbContext(DbContextOptions options) : base(options)
    {
    }
}

缺乏什麼命名空間就直接 using，再也不贅述api

Startup 文件 ConfigureService 方法替換爲以下內容

示例爲了方便因此用到了內存數據庫，須要安裝 nuget 包 Microsoft.EntityFrameworkCore.InMemory
須要 using 相關的命名空間服務器

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<DemoDbContext>(options =>
    {
        options.UseInMemoryDatabase("demo");
    });
    services.AddBlazAdmin<DemoDbContext>();
    services.AddSingleton<WeatherForecastService>();
}

Startup 文件 Configure 方法增長以下內容

增長登陸相關配置

app.UseAuthorization();
app.UseAuthentication();

注意須要加到 app.UseRouting() 方法之下
app

增長 WebApi 相關配置，這主要爲登陸服務

_Host.cshtml 頁面內容替換以下

@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 文件的內容替換爲以下

@inherits LayoutComponentBase
<BAdmin Menus="Menus" NavigationTitle="BlazAdmin Demo"></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羣 74522853dom

Fuck Fork Me, Star Me

Blazui 組件庫：https://github.com/wzxinchen/Blazui

BlazAdmin 核心組件庫：https://github.com/wzxinchen/BlazAdmin

BlazAdmin 服務端渲染庫：https://github.com/wzxinchen/BlazAdmin.ServerRender

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。