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

簡介

　　BlazAdmin 是一個基於Blazui的後臺管理模板，無JS，無TS，非 Silverlight，非 WebForm，一個標籤即可使用。

選項卡式頁面管理，無 Iframe二級導航菜單Identity 用戶註冊與登錄，基於Cookies

　　需要注意的一點是我們短時間不會支持 IdentityServer4 以及Jwt，但會在接下來的計劃中支持 Session 註冊與登錄。下面是 BlazAdmin 的運行效果

初次運行時會創建管理員

主界面

修改密碼

登出

馬上開始嚐鮮

準備條件

.net core 3.1VS2019

新建一個 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>
    <found>
         <authorizerouteview>
    /<found>
    <notfound>
        <layoutview>
            
Sorry, there's nothing at this address.

        /<layoutview>
    /<notfound>
/<router>

登錄需要用到數據庫，所以添加 DemoDbContext 類

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

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

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>();
}/<weatherforecastservice>/<demodbcontext>/<demodbcontext>

Startup 文件 Configure 方法增加如下內容

增加登錄相關配置

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

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

增加 WebApi 相關配置，這主要為登錄服務

_Host.cshtml 頁面內容替換如下

@page "/"
@namespace BlazorApp4.Pages //此處 BlazorApp4 需要改成你實際的命名空間，一般就是項目名
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers



    
    
    <title>BlazAdmin Demo/<title>
    <base> 

    <link>
    <link>
    <link>


    
        @(await Html.RenderComponentAsync(RenderMode.ServerPrerendered))
    
    
    

接下來就是測試菜單和頁面，將 MainLayout.razor 文件的內容替換為如下

@inherits LayoutComponentBase
 <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"
              }
             }
        });
    }
}/<menumodel>/<menumodel>/<menumodel>

在 Pages 頁面下新建兩個 Razor 組件，注意是 Razor 組件，將路由分別設置為 /page1 和 /page2

運行查看效果

Demo 下載

示例 Demo 獲取請進QQ群 74522853

Fuck Fork Me, Star Me

Blazui 組件庫：https://github.com/wzxinchen/BlazuiBlazAdmin 核心組件庫：https://github.com/wzxinchen/BlazAdminBlazAdmin 服務端渲染庫：https://github.com/wzxinchen/BlazAdmin.ServerRender

出處：http://wzxinchen.cnblogs.com/

閱讀更多 IT技術之家 的文章

關鍵字: 模板 數據庫 路由器