网站策划与运营,网站开发概要设计模板,国家建设工程信息网站,有哪些网站可以接单做效果图简介BlazAdmin 是一个基于Blazui的后台管理模板#xff0c;无JS#xff0c;无TS#xff0c;非 Silverlight#xff0c;非 WebForm#xff0c;一个标签即可使用。 我将在下一篇文章讨论 Blazor 服务器端渲染与客户端渲染的基本原理#xff0c;对比服务器端渲染与 WebFo… 简介 BlazAdmin 是一个基于Blazui的后台管理模板无JS无TS非 Silverlight非 WebForm一个标签即可使用。 我将在下一篇文章讨论 Blazor 服务器端渲染与客户端渲染的基本原理对比服务器端渲染与 WebForm 的异同点 经过近一个月的开发BlazAdmin 尝鲜版终于搞定了功能很有限同时也存在很多问题只集成了一个后台管理系统最基本的功能包括选项卡式页面管理无 Iframe二级导航菜单Identity 用户注册与登录基于Cookies 需要注意的一点是我们短时间不会支持 IdentityServer4 以及Jwt但会在接下来的计划中支持 Session 注册与登录。下面是 BlazAdmin 的运行效果初次运行时会创建管理员主界面修改密码登出马上开始尝鲜准备条件.net core 3.1VS2019新建一个 Blazor 服务端渲染应用安装 BlazAdmin.ServerRender Nuget 包删除 NavMenu.razor 文件_Imports.razor 文件增加以下内容Copyusing 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 文件的内容需要替换为如下CopyRouter AppAssemblytypeof(Program).AssemblyFound ContextrouteDataAuthorizeRouteView RouteDatarouteData DefaultLayouttypeof(MainLayout) //FoundNotFoundLayoutView Layouttypeof(MainLayout)pSorry, theres 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.AddDbContextDemoDbContext(options {options.UseInMemoryDatabase(demo);});services.AddBlazAdminDemoDbContext();services.AddSingletonWeatherForecastService();
}Startup 文件 Configure 方法增加如下内容增加登录相关配置Copyapp.UseAuthorization();
app.UseAuthentication();注意需要加到 app.UseRouting() 方法之下增加 WebApi 相关配置这主要为登录服务_Host.cshtml 页面内容替换如下Copypage /
namespace BlazorApp4.Pages //此处 BlazorApp4 需要改成你实际的命名空间一般就是项目名
addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
!DOCTYPE html
html langen
headmeta charsetutf-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleBlazAdmin Demo/titlebase href~/ /link href/_content/BlazAdmin/css/admin.css relstylesheet /link relstylesheet href/_content/Blazui.Component/css/index.css /link relstylesheet href/_content/Blazui.Component/css/fix.css /
/head
bodyapp(await Html.RenderComponentAsyncApp(RenderMode.ServerPrerendered))/appscript src/_content/Blazui.Component/js/dom.js/scriptscript src_framework/blazor.server.js/script
/body
/html接下来就是测试菜单和页面将 MainLayout.razor 文件的内容替换为如下Copyinherits LayoutComponentBaseBAdmin MenusMenus NavigationTitleBlazAdmin Demo EnablePermissionMenusfalse/BAdmin
code{protected ListMenuModel Menus { get; set; } new ListMenuModel();protected override void OnInitialized(){Menus.Add(new MenuModel(){Label 示例页面,Icon el-icon-s-promotion,Children new ListMenuModel() {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群 74522853Fuck Fork Me, Star MeBlazui 组件库https://github.com/wzxinchen/BlazuiBlazAdmin 核心组件库https://github.com/wzxinchen/BlazAdminBlazAdmin 服务端渲染库https://github.com/wzxinchen/BlazAdmin.ServerRender
