基于 Blazui 的 Blazor 后台管理模板 BlazAdmin 正式尝鲜

简介

BlazAdmin 是一个基于Blazui后台管理模板,无JS,无TS,非 Silverlight,非 WebForm,一个标签即可使用。
我将在下一篇文章讨论 Blazor 服务器端渲染与客户端渲染基本原理,对比服务器端渲染与 WebForm 异同点
经过近一个月开发,BlazAdmin 尝鲜版终于搞定了,功能很有限,只集成了一个后台管理系统最基本功能,包括:

  • 选项卡式页面管理,无 Iframe
  • 二级导航菜单
  • Identity 用户注册与登录,基于Cookies

需要注意一点是我们短时间不会支持 IdentityServer4 以及Jwt,但会在接下来计划中支持 Session 注册与登录。下面是 BlazAdmin 运行效果

初次运行时会创建管理员

image.png-40.7kB

主界面

image.png-81.7kB

修改密码

image.png-84.2kB

登出

image.png-82.3kB

马上开始尝鲜

新建一个 Blazor 服务端渲染应用

image.png-49.6kB

安装 BlazAdmin.ServerRender Nuget 包

image.png-160.2kB

删除 NavMenu.razor 文件

image.png-73.6kB

_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 类

image.png-22.6kB

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

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

增加登录相关配置

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

注意需要加到 app.UseRouting() 方法之下
image.png-32.2kB

增加 WebApi 相关配置,这主要为登录服务

image.png-27.6kB

_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

image.png-123.3kB

运行查看效果

image.png-44.2kB

 

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 正式尝鲜

提供最优质的资源集合

立即查看 了解详情