基于 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