基于 Blazui 的 Blazor 后台管理模板 BlazAdmin 正式尝鲜

简介

　　BlazAdmin 是一个基于Blazui的后台管理模板，无JS，无TS，非 Silverlight，非 WebForm，一个标签即可使用。
　　我将在下一篇文章讨论 Blazor 服务器端渲染与客户端渲染的基本原理，对比服务器端渲染与 WebForm 的异同点
　　经过近一个月的开发，BlazAdmin 尝鲜版终于搞定了，功能很有限，同时也存在很多问题，只集成了一个后台管理系统最基本的功能，包括：

选项卡式页面管理，无 Iframe

二级导航菜单

Identity 用户注册与登录，基于Cookies

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

初次运行时会创建管理员

主界面

修改密码

登出

马上开始尝鲜

准备条件

.net core 3.1

VS2019

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

安装 BlazAdmin.ServerRender Nuget 包

删除 NavMenu.razor 文件

_Imports.razor 文件增加以下内容

Copy@using BlazAdmin
@using Blazui.Component.Container
@using Blazui.Component.Button
@using Blazui.Component.Dom
@using Blazui.Component.Dynamic
@using Blazui.Component.NavMenu
@using Blazui.Component.Input
@using Blazui.Component.Radio
@using Blazui.Component.Select
@using Blazui.Component.CheckBox
@using Blazui.Component.Switch
@using Blazui.Component.Table
@using Blazui.Component.Popup
@using Blazui.Component.Pagination
@using Blazui.Component.Form
@using Blazui.Component

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

Copy<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 类

Copypublic class DemoDbContext : IdentityDbContext
{public DemoDbContext(DbContextOptions options) : base(options){}
}

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

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

示例为了方便所以用到了内存数据库，需要安装 nuget 包 Microsoft.EntityFrameworkCore.InMemory
需要 using 相关的命名空间

Copypublic void ConfigureServices(IServiceCollection services)
{services.AddDbContext<DemoDbContext>(options =>{options.UseInMemoryDatabase("demo");});services.AddBlazAdmin<DemoDbContext>();services.AddSingleton<WeatherForecastService>();
}

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

增加登录相关配置

Copyapp.UseAuthorization();
app.UseAuthentication();

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

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

_Host.cshtml 页面内容替换如下

Copy@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 文件的内容替换为如下

Copy@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 组件库：https://github.com/wzxinchen/Blazui

BlazAdmin 核心组件库：https://github.com/wzxinchen/BlazAdmin

BlazAdmin 服务端渲染库：https://github.com/wzxinchen/BlazAdmin.ServerRender

基于 Blazui 的 Blazor 后台管理模板 BlazAdmin 正式尝鲜相关推荐

Vary Admin：基于Vue.js的后台管理模板
简介 Vary Admin是基于Vue.js,搭配内置的vary-ui组件库组成的一套后台管理系统. Github: Vary Admin 在线预览:HomePage 效果展示功能多样化面板基础 ...
bootstrap 提交表单给后台_基于Bootstrap的响应式后台管理模板Ace
Ace是一个轻量级.功能丰富,基于Bootstrap3的响应式后台管理模板.支持多种皮肤,集成了多种插件,如Bootstrap,jQuery UI等.支持IE 8/9/10/11.Chrome.Fir ...
基于layui的后台管理模板
介绍: 基于layui的后台管理模板网盘下载地址: http://kekewangLuo.cc/U6mcEZKHXpb 图片:
X-admin经典前端后台管理模板，基于layui的轻量级前端后台管理框架，简单，兼容性好，面向所有层次的前后端程序
X-admin 简介 X-admin基于layui的轻量级前端后台管理框架,简单免费,兼容性好,面向所有层次的前后端程序.创立于2017年初,为了敏捷WEB应用开发和简化企业应用开发而诞生的.#X-a ...
Metronic – 超赞！基于 Bootstrap 的响应式后台管理模板
Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...
推荐几款基于Bootstrap的响应式后台管理模板
1.Admin LTE 该模版开源免费. AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. ...
蓝色企业CMS网站后台管理模板
介绍: 蓝色企业CMS响应式后台管理模板基于Bootstrap3.0.0制作,自适应分辨率,兼容PC端和移动端,全套模板,包括产品管理.资讯类别.资讯管理.友情链接.用户留言管理.用户管理.修改密码等 ...
bootstrap4 后台管理模板_开源的后台管理模板
后台管理模板 vue-Element-Admin vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui 实现. 它使用了最新的前端技术栈,内置了 i18 ...
vue3+ts+vite后台管理模板
vue3+ts+vite后台管理模板支持前后端控制权限,使用uniapp+vue3+ts+elementplus+vite开发,码云地址:https://gitee.com/yongqiang062 ...