百度360必应搜狗淘宝本站头条
wireshark怎么抓包c++ base64for_eachwxsqlite3qt sleep
当前位置：网站首页 > 技术分析 > 正文

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

liebian365 2024-11-22 17:15 23 浏览 0 评论

简介

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

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

<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<DemoDbContext>(options =>
    {
        options.UseInMemoryDatabase("demo");
    });
    services.AddBlazAdmin<DemoDbContext>();
    services.AddSingleton<WeatherForecastService>();
}

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 组件库：https://github.com/wzxinchen/BlazuiBlazAdmin 核心组件库：https://github.com/wzxinchen/BlazAdminBlazAdmin 服务端渲染库：https://github.com/wzxinchen/BlazAdmin.ServerRender

作者：馨辰

出处：http://wzxinchen.cnblogs.com/

相关推荐

“版本末期”了?下周平衡补丁!国服最强5套牌!上分首选

明天，酒馆战棋就将迎来大更新，也聊了很多天战棋相关的内容了，趁此机会，给兄弟们穿插一篇构筑模式的卡组推荐！老规矩，我们先来看10职业胜率。目前10职业胜率排名与一周前基本类似，没有太多的变化。平衡补丁...

VS2017 C++ 程序报错“error C2065:“M_PI”: 未声明的标识符&quot;

首先，程序中头文件的选择，要选择头文件，在文件中是没有对M_PI的定义的。选择：项目——>”XXX属性"——>配置属性——>C/C++——>预处理器——>预处理器定义，...

东营交警实名曝光一批酒驾人员名单 88人受处罚

齐鲁网·闪电新闻5月24日讯酒后驾驶是对自己和他人生命安全极不负责的行为，为守护大家的平安出行路，东营交警一直将酒驾作为重点打击对象。5月23日，东营交警公布最新一批饮酒、醉酒名单。对以下驾驶人醉酒...

Qt界面——搭配QCustomPlot（qt platform）

这是我第一个使用QCustomPlot控件的上位机，通过串口精确的5ms发送一次数据，再将读取的数据绘制到图表中。界面方面，尝试卡片式设计，外加QSS简单的配了个色。QCustomPlot官网：Qt...

大话西游2分享赢取种族坐骑手办!PK趣闻录由你书写

老友相聚，仗剑江湖！《大话西游2》2021全民PK季4月激燃打响，各PK玩法鏖战齐开，零门槛参与热情高涨。PK季期间，不仅各种玩法奖励丰厚，参与PK趣闻录活动，投稿自己在PK季遇到的趣事，还有机会带走...

测试谷歌VS Code AI 编程插件 Gemini Code Assist

用ClaudeSonnet3.7的天气测试编码，让谷歌VSCodeAI编程插件GeminiCodeAssist自动编程。生成的文件在浏览器中的效果如下：（附源代码）VSCode...

顾爷想知道第4.5期 国服便利性到底需优化啥?

前段时间DNF国服推出了名为“阿拉德B计划”的系列改版计划，截至目前我们已经看到了两项实装。不过关于便利性上，国服似乎还有很多路要走。自从顾爷回归DNF以来，几乎每天都在跟我抱怨关于DNF里面各种各样...

掌握Visual Studio项目配置【基础篇】

1.前言VisualStudio是Windows上最常用的C++集成开发环境之一，简称VS。VS功能十分强大，对应的，其配置系统较为复杂。不管是对于初学者还是有一定开发经验的开发者来说，捋清楚VS...

还嫌LED驱动设计套路深?那就来看看这篇文章吧

随着LED在各个领域的不同应用需求,LED驱动电路也在不断进步和发展。本文从LED的特性入手，推导出适合LED的电源驱动类型，再进一步介绍各类LED驱动设计。设计必读：LED四个关键特性特性一：非线...

Visual Studio Community 2022(VS2022)安装图文方法

直接上步骤：1，首先可以下载安装一个VisualStudio安装器，叫做VisualStudioinstaller。这个安装文件很小，很快就安装完成了。2，打开VisualStudioins...

Qt添加MSVC构建套件的方法（qt添加c++11）

前言有些时候，在Windows下因为某些需求需要使用MSVC编译器对程序进行编译，假设我们安装Qt的时候又只是安装了MingW构建套件，那么此时我们该如何给现有的Qt添加一个MSVC构建套件呢？本文以...

Qt为什么站稳c++GUI的top1（qt c）

为什么现在QT越来越成为c++界面编程的第一选择，从事QT编程多年，在这之前做C++界面都是基于MFC。当时为什么会从MFC转到QT？主要原因是MFC开发界面想做得好看一些十分困难，引用第三方基于MF...

qt开发IDE应该选择VS还是qt creator

如果一个公司选择了qt来开发自己的产品，在面临IDE的选择时会出现vs或者qtcreator，选择qt的IDE需要结合产品需求、部署平台、项目定位、程序猿本身和公司战略，因为大的软件产品需要明确IDE...

Qt 5.14.2超详细安装教程，不会来打我

Qt简介Qt（官方发音[kju:t]，音同cute）是一个跨平台的C++开库，主要用来开发图形用户界面（GraphicalUserInterface，GUI）程序。Qt是纯C++开...

Cygwin配置与使用(四)——VI字体和颜色的配置

简介：VI的操作模式，基本上VI可以分为三种状态，分别是命令模式（commandmode）、插入模式（Insertmode）和底行模式（lastlinemode），各模式的功能区分如下：1)...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.