简介

　　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 文件增加以下内容

  1. @using Blazui.Admin
  2. @using Blazui.Component

为了启用登录，App.razor 文件的内容需要替换为如下

  1. <Router AppAssembly="@typeof(Program).Assembly">
  2.     <Found Context="routeData">
  3.          <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
  4.     </Found>
  5.     <NotFound>
  6.         <LayoutView Layout="@typeof(MainLayout)">
  7.             <p>Sorry, there's nothing at this address.</p>
  8.         </LayoutView>
  9.     </NotFound>
  10. </Router>

登录需要用到数据库，所以添加 DemoDbContext 类

  1. public class DemoDbContext : IdentityDbContext
  2. {
  3.     public DemoDbContext(DbContextOptions options) : base(options)
  4.     {
  5.     }
  6. }

缺少什么命名空间就直接 using，不再赘述

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

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

需要 using 相关的命名空间

  1. public void ConfigureServices(IServiceCollection services)
  2. {
  3.             services.AddDbContext<DocsDbContext>(options =>
  4.             {
  5.                 options.UseInMemoryDatabase("docs");
  6.             });
  7.             services.AddScoped<DbContext, DocsDbContext>();
  8.             services.AddRazorPages();
  9.             services.AddServerSideBlazor();
  10.             services.AddHttpClient();
  11.             await services.AddBlazuiServicesAsync();
  12.             services.AddSingleton<RouteService>();
  13.             services.AddScoped<IUserService, TUserService>();
  14.             services.AddAdmin<DocsDbContext>();
  15. }

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

增加登录相关配置

  1. app.UseAuthorization();
  2. app.UseAuthentication();

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

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

_Host.cshtml 页面内容替换如下

  1. @page "/"
  2. @namespace BlazorApp4.Pages //此处 BlazorApp4 需要改成你实际的命名空间，一般就是项目名
  3. @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <meta charset="utf-8" />
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9.     <title>BlazAdmin Demo</title>
  10.     <base href="~/" />
  11.     <link href="/_content/BlazAdmin/css/admin.css" rel="stylesheet" />
  12.     <link rel="stylesheet" href="/_content/Blazui.Component/css/index.css" />
  13.     <link rel="stylesheet" href="/_content/Blazui.Component/css/fix.css" />
  14. </head>
  15. <body>
  16.     <app>
  17.         @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
  18.     </app>
  19.     <script src="/_content/Blazui.Component/js/dom.js"></script>
  20.     <script src="_framework/blazor.server.js"></script>
  21. </body>
  22. </html>

接下来就是测试菜单和页面，将 MainLayout.razor 文件的内容替换为如下

  1. @inherits LayoutComponentBase
  2.  <BAdmin Menus="Menus" NavigationTitle="BlazAdmin Demo" EnablePermissionMenus="false"></BAdmin>
  3. @code{
  4.     protected List<MenuModel> Menus { get; set; } = new List<MenuModel>();
  5.     protected override void OnInitialized()
  6.     {
  7.         Menus.Add(new MenuModel()
  8.         {
  9.             Label = "示例页面",
  10.             Icon = "el-icon-s-promotion",
  11.             Children = new List<MenuModel>() {
  12.               new MenuModel(){
  13.                Label="示例子页面1",
  14.             Icon = "el-icon-s-promotion",
  15.                Route="/page1"
  16.               },
  17.                  new MenuModel(){
  18.                Label="示例子页面2",
  19.             Icon = "el-icon-s-promotion",
  20.                Route="/page2"
  21.               }
  22.              }
  23.         });
  24.     }
  25. }

在 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. 使用 MUI 自制 弹出层

    使用 MUI 自制 弹出层 <div class="zp-mask" style="display: none; width: 100%;height: 100%; ...

  2. nyoj 208 + poj 1456 Supermarket (贪心)

    Supermarket 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 A supermarket has a set Prod of products on sal ...

  3. 力扣（LeetCode）学生出勤记录I 个人题解

    给定一个字符串来代表一个学生的出勤记录,这个记录仅包含以下三个字符: 'A' : Absent,缺勤 'L' : Late,迟到 'P' : Present,到场 如果一个学生的出勤记录中不超过一个' ...

  4. JavaScript笔记九

    1.数组方法 reverse() - 可以用来反转一个数组,它会对原数组产生影响 concat() - 可以连接两个或多个数组,它不会影响原数组,而是新数组作为返回值返回 join() - 可以将一个 ...

  5. BIOS和CMOS概念整理

    一:什么是BIOS  BIOS(Basic Input Output System),基本输入输出系统.是被写死在主板ROM只读芯片中的一组程序,在开机的时候首先要去读取的一个小程序. 它是我们可以将 ...

  6. Java中的compareTo()方法，compareToIgnoreCase()方法

    1.compareTo(String)方法: Java中String类有一个compareTo方法,该方法返回一个int类型的数据.其比较规则是:拿出字符串的第一个字符与参数的第一个字符进行比较,如果 ...

  7. Java通过 Scanner 类来获取用户的输入

    通过 Scanner 类来获取用户的输入. import java.util.Scanner; Scanner s = new Scanner(System.in);// 从键盘接收数据  Syste ...

  8. 复制节点（cloneNode）

    DOM提供用来复制节点方法. cloneNode():将为给定节点创建一个副本,这个方法的返回值是一个指向新建克隆节点的引用指针, reference = node.cloneNode(deep) 这 ...

  9. 程序员的进阶课-架构师之路（13）-B-树

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/m0_37609579/article/de ...

  10. #在windows上使用ngix重定向目录访问远程服务器文件详细实例

    为了在开发环境保持于生产环境相同的访问远程服务器文件资源的目录配置,需要在开发环境(windows)在远程文件服务器使用nignx重定向文件目录,因为网上的资料大都是copy的,解释比较笼统,也没有具 ...