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";
        }
    }
}


    
        
            
        
        
    
    
        

            @if (collapsed)
            {
                
            }
            else
            {
                
            }
        
        
            @Body
        
        
    




@code{

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

}

NavMenu.razor

    
        Option 1
        Option 2
        Option 3
        Option 4
    
    
        Option 5
        Option 6
        
            Option 7
            Option 8
        
    
    
        Option 9
        Option 10
        Option 11
        Option 12
    


@code {
    RenderFragment sub1Title =
    @
        
        Navigation One
    ;

RenderFragment sub2Title =
@
    
    Navigation Two
;

RenderFragment sub4Title =
@
    
    Navigation Three
;
}

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界面搭建出来。

代码地址