Blazor + Ant Design + .NET 5快速开发框架（3）AntDesignAdmin搭建

目录

MainLayout.razor

NavMenu.razor

wwwroot/app.css

运行效果

知识点

结论

代码地址

---

AntDesign是一套企业级框架，但是目前还没有提供admin后台管理模板，只能自己搭建一个了，那么接下来开始搭建

MainLayout.razor

@inherits LayoutComponentBase

@code
{
    bool collapsed;
    string ImgStr = "./Images/logo.PNG";

    void toggle()
    {
        collapsed = !collapsed;
        if (collapsed)
        {
            ImgStr = "./Images/logo-Ico.PNG";
        }
        else
        {
            ImgStr = "./Images/logo.PNG";
        }
    }
}

<Layout Style="min-height:100vh;">
    <Sider Collapsible Collapsed=@collapsed NoTrigger Breakpoint="@BreakpointType.Lg">
        <div class="logo" align="center">
            <img src="@ImgStr" height="32"/>
        </div>
        <NavMenu></NavMenu>
    </Sider>
    <Layout Class="site-layout">
        <Header Class="site-layout-background" Style="padding:0;">
            @if (collapsed)
            {
                <Icon Type="menu-unfold" Theme="outline" Class="trigger" OnClick="toggle" />
            }
            else
            {
                <Icon Type="menu-fold" Theme="outline" Class="trigger" OnClick="toggle" />
            }
        </Header>
        <Content Class="site-layout-background" Style="margin: 24px 16px;padding: 24px;min-height: 280px;">
            @Body
        </Content>
        <Footer Style="text-align: center;">Caviar ©2021 Created by 北音执念</Footer>
    </Layout>
</Layout>



@code{

    void OnCollapse(bool isCollapsed)
    {
        Console.WriteLine($"Collapsed: {isCollapsed}");
    }

}

NavMenu.razor

<Menu Mode="MenuMode.Inline"
      Accordion
      Theme="MenuTheme.Dark"
      SelectedKeys="@(new[] { "1"})"
      OpenKeys="@(new[] { "sub1" })"
      >
    <SubMenu Key="sub1" TitleTemplate=@sub1Title>
        <MenuItem Key="1">Option 1</MenuItem>
        <MenuItem Key="2">Option 2</MenuItem>
        <MenuItem Key="3">Option 3</MenuItem>
        <MenuItem Key="4">Option 4</MenuItem>
    </SubMenu>
    <SubMenu Key="sub2" TitleTemplate=@sub2Title>
        <MenuItem Key="5">Option 5</MenuItem>
        <MenuItem Key="6">Option 6</MenuItem>
        <SubMenu Key="sub3" Title="Submenu">
            <MenuItem Key="7">Option 7</MenuItem>
            <MenuItem Key="8">Option 8</MenuItem>
        </SubMenu>
    </SubMenu>
    <SubMenu Key="sub4" TitleTemplate=@sub4Title>
        <MenuItem Key="9">Option 9</MenuItem>
        <MenuItem Key="10">Option 10</MenuItem>
        <MenuItem Key="11">Option 11</MenuItem>
        <MenuItem Key="12">Option 12</MenuItem>
    </SubMenu>
</Menu>

@code {
    RenderFragment sub1Title =
    @<span>
        <Icon Type="mail" Theme="outline"></Icon>
        <span>Navigation One</span>
    </span>;

RenderFragment sub2Title =
@<span>
    <Icon Type="appstore" Theme="outline"></Icon>
    <span>Navigation Two</span>
</span>;

RenderFragment sub4Title =
@<span>
    <Icon Type="setting" Theme="outline"></Icon>
    <span>Navigation Three</span>
</span>;
}

wwwroot/app.css

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


.trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
}

    .trigger:hover {
        color: #1890ff;
    }

.logo {
    height: 32px;
    margin: 16px;
}

.site-layout .site-layout-background {
    background: #fff;
}

运行效果

知识点

1、可以看出Blazor控制起来非常非常方便，比如指定img的src，只需要一个@变量，就可以随意变化，由代码控制，这要比js或者jquery方便多了。

2、代码可以和页面写在一起，也可以分开，这极大方便了开发者，各种回调函数，停不下来。

3、可以看出来组件化开发NavMenu为菜单组件，直接可以在Labout中使用，其他同理，只要专注于组件化开发即可。

4、MainLayout.razor里面注册了LayoutComponentBase类，然后正文窗口是@Body，路由方面@page即可

结论

虽然简单搭出来界面，但是还存在许多问题，如前后端代码没有分开，没有写配置项等，前端显示也有一些问题，比如菜单缩放时候会产生bug：

                       

这类bug都和缩放有关，下一期专门解决这个bug，然后还缺一点头像等配置，下一期将admin界面搭建出来。

代码地址