简介

  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. nyoj 975-关于521 (EOF)

    975-关于521 内存限制:64MB 时间限制:1000ms 特判: No 通过数:5 提交数:46 难度:2 题目描述: Acm队的流年对数学的研究不是很透彻,但是固执的他还是想一头扎进去. 浏览 ...

  2. ES6学习 let const

    1.前言 发现网易云笔记 单纯的记笔记没什么意思,所以今天来博客园写学习感受了,毕设做了休息时间就来写写新学的知识 哈哈哈 !! 2.ES6 就是JavaScript 语言的下一代标准,2015年6月 ...

  3. 领扣(LeetCode)七进制数 个人题解

    给定一个整数,将其转化为7进制,并以字符串形式输出. 示例 1: 输入: 100 输出: "202" 示例 2: 输入: -7 输出: "-10" 注意: 输入 ...

  4. (三十六)golang--文件的基本操作

    文件程序中是以流的形式操作的. 流:数据在数据源(文件)和程序(内存)之间经历的路径: 输入流:数据从数据源到程序的路径: 输出流:数据从程序到数据源的路径: 常用的文件操作和函数: 1.常用的文件操 ...

  5. GeoServer 修改端口

    准备内容 安装环境:win10*64位专业版 安装文件:geoserver-2.15.2 操作步骤 1.找到文件夹下的start.ini,并用记事本打开 2.找到jetty.port,修改为自己需要的 ...

  6. Flex实现web版图片查看器

    项目需求: 在web端实现图片浏览,具有放大.缩小.滚轴放大缩小.移动.旋转以及范围控制. 成果图:

  7. 使用原生javaScript绘制带图片的二维码---js

    使用链接生成二维码主要是使用qr.js或者其他,把链接转化为二维码的形式,在使用canvas时需要设置画布的尺寸,生成的颜色. <div class="qr_code"> ...

  8. JAVA数组翻转

    首先可 public class RevcArr { public static void main(String[] args) { // TODO Auto-generated method st ...

  9. docker快速部署DNS,实现快速上线

    概念Docker 是一个开源的应用容器引擎,Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.这里我将使用do ...

  10. linux用户资源控制

    /etc/security/limits.conf配置文件详解 这个文件主要是用来限制用户对资源的使用.是/lib64/security/pam_limits.so模块对应的/etc/serurity ...