简介

　　Blazui.Admin 是一个基于Blazui的后台管理模板，无JS，无TS，非 Silverlight，非 WebForm，一个标签即可使用。

　　我将在下一篇文章讨论 Blazor 服务器端渲染与客户端渲染的基本原理，对比服务器端渲染与 WebForm 的异同点

　　经过近一个月的开发，Blazui.Admin 尝鲜版终于搞定了，功能很有限，同时也存在很多问题，只集成了一个后台管理系统最基本的功能，包括：

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

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

初次运行时会创建管理员

主界面

修改密码

登出

马上开始尝鲜

准备条件

  • .net core 3.1
  • VS2019

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

安装 Blazui.Admin.ServerRender Nuget 包，注意图片中的包名是错的

删除 NavMenu.razor 文件

_Imports.razor 文件增加以下内容

@using Blazui.Admin

@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，不再赘述

Startup 文件 ConfigureService 方法替换为如下内容

示例为了方便所以用到了内存数据库，需要安装 nuget 包 Microsoft.EntityFrameworkCore.InMemory

需要 using 相关的命名空间

public void ConfigureServices(IServiceCollection services)

{

            services.AddDbContext<DocsDbContext>(options =>

            {

                options.UseInMemoryDatabase("docs");

            });

            services.AddScoped<DbContext, DocsDbContext>();

            services.AddRazorPages();

            services.AddServerSideBlazor();

            services.AddHttpClient();

            await services.AddBlazuiServicesAsync();

            services.AddSingleton<RouteService>();

            services.AddScoped<IUserService, TUserService>();

            services.AddAdmin<DocsDbContext>();

}

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

增加登录相关配置

app.UseAuthorization();

app.UseAuthentication();

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

增加 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" EnablePermissionMenus="false"></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群 74522853

Fuck Fork Me, Star Me

基于 Blazui 的 Blazor 后台管理模板 BlazAdmin 正式尝鲜的更多相关文章

  1. Bootstrap后台管理模板调研

    Bootstrap后台管理模板调研 SB Admin 2(推荐) SB Admin 2是一款开源的基于Bootstrap搭建的后台管理模板,简约,易用.没有复杂的组件和花炫的设计,很质朴,但较为美观. ...

  2. Metronic – 超赞！基于 Bootstrap 的响应式后台管理模板

    Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...

  3. 推荐几款基于Bootstrap的响应式后台管理模板

    1.Admin LTE 该模版开源免费. AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. ...

  4. Bootstrap的响应式后台管理模板推荐

    1.Admin LTE 该模版开源免费.已用到项目中,客户评价说UI很好看... AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕 ...

  5. 最值得拥有的免费Bootstrap后台管理模板

    在PHP开发项目中,后台管理因为面向群体相对比较固定,大部分以实现业务逻辑和功能.使用Bootstrap后台模板可以让后端开发很轻松的就展现给客户一个响应式的后台,节约前端开发的时间.下面PHP程序员 ...

  6. [转]最值得拥有的免费Bootstrap后台管理模板

    在PHP开发项目中,后台管理因为面向群体相对比较固定,大部分以实现业务逻辑和功能.使用Bootstrap后台模板可以让后端开发很轻松的就展现给客户一个响应式的后台,节约前端开发的时间.下面PHP程序员 ...

  7. Vue.js+vue-element搭建属于自己的后台管理模板：什么是Vue.js?（一）

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...

  8. Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  9. Vue.js+vue-element搭建属于自己的后台管理模板：创建一个项目（四）

    Vue.js+vue-element搭建属于自己的后台管理模板:创建一个项目(四) 前言 本章主要讲解通过Vue CLI 脚手架构建工具创建一个项目,在学习Vue CLI之前我们需要先了解下webpa ...

随机推荐

  1. pat 1100 Mars Numbers（20 分）

    1100 Mars Numbers(20 分) People on Mars count their numbers with base 13: Zero on Earth is called &qu ...

  2. nyoj 655-光棍的yy (python, 未A)

    655-光棍的yy 内存限制:64MB 时间限制:1000ms 特判: No 通过数:4 提交数:7 难度:2 题目描述: yy经常遇见一个奇怪的事情,每当他看时间的时候总会看见11:11,这个很纠结 ...

  3. runlevel init

    init概念存在于cnetos7以下,配置文件/etc/inittab init 以及 文本和图形界面切换(可以用ctrl+alt+n 或者 init3 5切换,不是重启切) 命令init N 0 关 ...

  4. 学习记录：《C++设计模式——李建忠主讲》4.“单一职责”模式

    单一职责模式:在软件组件的设计中,如果责任划分的不清晰,使用继承得到的结果往往是随着需求的变化,子类急剧膨胀,同时充斥着重复代码,这时候的关键是划清责任. 典型模式:装饰模式(Decorator).桥 ...

  5. 剑指Offer-25.复杂链表的复制(C++/Java)

    题目: 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否则 ...

  6. Python算法——《算法图解》笔记

    算法目录 二分查找 大O表示法 选择排序 递归 快速排序,分而治之(D&C) 散列表——字典 广度优先搜索——BFS Dijkstra算法 贪婪算法 二分查找 # 要求list是有序表,num ...

  7. SpringMvc demo示例及源码详细分析

    三层架构介绍 我们的开发架构一般都是基于两种形式,一种C/S架构,也就是客户端/服务器,另一种是B/S架构,也就是浏览器/服务器.在JavaEE开发中,几乎全部都是基于B/S架构的开发.那么在B/S架 ...

  8. 如何使用C#调用C++类虚函数（即动态内存调用）

      本文讲解如何使用C#调用只有.h头文件的c++类的虚函数(非实例函数,因为非虚函数不存在于虚函数表,无法通过类对象偏移计算地址,除非用export导出,而gcc默认是全部导出实例函数,这也是为什么 ...

  9. node 后台使用增删改查（4）

    无论node还是java增删改查都是一样的原理,变得是配合框架使用时候有简便方法而已. 这里我接着上一篇开始讲,使用同一个数据库(数据库创建)这里必须创建了数据库 优化:为了维护方便这里我们把sql语 ...

  10. MyBaits框架入门总结

    MBaits简介 联系方式:18873247271(微信同步) 廖先生 qq:1727292697 MyBatis的前身叫iBatis,本是apache的一个开源项目, 2010年这个项目由apach ...