Blazor 开发指南

一、基础认知：Blazor 两种模式区别

1. Blazor Server（你当前项目使用）

运行机制：UI 在服务器渲染，客户端仅维持 SignalR 长连接

优点：

上手简单
无需单独后端接口
可直接注入 Identity、EF Core

缺点：

并发高时服务器压力大
断网页面无交互

适用场景：

内部管理系统
后台系统
ERP 系统
进销存系统（你的业务场景）

2. Blazor WebAssembly（Wasm）

运行机制：.NET 运行时下载到浏览器，前端独立运行

优点：

离线可用
服务器负载低

缺点：

首次加载慢
不能直接访问数据库，必须写后端 API

适用场景：

面向公网的轻量化页面

注意：你的项目是 Blazor Server + BootstrapBlazor + Identity，教程全部围绕 Server 模式讲解。

二、环境搭建（零基础）

1. 必备工具

Visual Studio 2022（17.5+）
- 安装组件：ASP.NET 和 Web 开发
.NET SDK
- .NET 8（推荐，长期支持）
- .NET 9

2. NuGet 包配置

<!-- BootstrapBlazor UI组件库 -->
<PackageReference Include="BootstrapBlazor" Version="8.3.0" />

<!-- 身份认证 -->
<PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" />

<!-- 数据库EF Core -->
<PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" />

3. 创建项目步骤

VS 创建新项目 → ASP.NET Core 空 / Blazor Server 应用
配置项目名称，框架选择 .NET 8

集成 BootstrapBlazor 关键两步：

// Program.cs
builder.Services.AddBootstrapBlazor();

<!-- App.razor -->
<BootstrapBlazorRoot>
    <Routes />
</BootstrapBlazorRoot>

三、Blazor 核心基础语法（Razor 组件）

1. 组件文件结构 `.razor`

@page "/路由地址"          <!-- 页面路由 -->
@inject 类型 变量名        <!-- 依赖注入 -->
@using 命名空间            <!-- 引入类 -->
@code {}                  <!-- C# 逻辑、属性、方法 -->
<!-- HTML 混合 C# 代码 -->

2. 数据绑定

单向绑定：

<p>用户名：@UserName</p>

@code {
    private string UserName = "admin";
}

双向绑定（登录页使用）：

<BootstrapInput @bind-Value="LoginModel.UserName" PlaceHolder="账号"/>

3. 条件渲染

@if (IsLogin)
{
    <span>欢迎 @UserName</span>
}
else
{
    <a href="/login">去登录</a>
}

@code {
    private bool IsLogin = false;
    private string UserName = "";
}

4. 循环渲染

@foreach (var item in UserList)
{
    <Card Title="@item.UserName"></Card>
}

@code {
    private List<User> UserList = new();
}

5. 事件绑定

<Button OnClick="SubmitLogin">登录</Button>

@code {
    private async Task SubmitLogin()
    {
        // 登录逻辑
    }
}

四、依赖注入（项目核心）

1. 三种生命周期

AddScoped：每次页面请求创建实例（最常用，AuthHelper、DbContext）
AddSingleton：全局单例，程序启动创建（配置、通用工具）
AddTransient：每次注入都新建（轻量工具类）

2. Program.cs 注册服务

// 作用域服务，每个用户会话独立实例
builder.Services.AddScoped<AuthHelper>();

// BootstrapBlazor全局UI服务
builder.Services.AddBootstrapBlazor();

// Identity认证
builder.Services.AddDefaultIdentity<AppUser>()
    .AddRoles<IdentityRole>()
    .AddEntityFrameworkStores<AppDbContext>();

3. 页面/组件注入使用

@inject AuthHelper AuthHelper
@inject ToastService Toast
@inject NavigationManager Nav

五、表单验证（登录页面 ValidateForm）

1. 数据注解验证

public class LoginDto
{
    [Required(ErrorMessage = "请输入账号")]
    public string UserName { get; set; } = "";

    [Required(ErrorMessage = "请输入密码")]
    public string Password { get; set; } = "";
}

2. BootstrapBlazor ValidateForm 完整模板

<ValidateForm Model="@LoginModel" OnValidSubmit="SubmitLogin">
    <BootstrapInput @bind-Value="LoginModel.UserName" PlaceHolder="账号"/>
    <BootstrapPassword @bind-Value="LoginModel.Password" PlaceHolder="密码"/>
    <Button ButtonType="ButtonType.Submit" Text="登录"/>
</ValidateForm>

六、ASP.NET Core Identity 身份认证（AuthHelper）

1. 核心三个类

UserManager：用户增删改查、注册、改密码
SignInManager：登录、退出、密码校验、账号锁定
RoleManager：角色管理（管理员/普通用户）

2. 封装通用 AuthHelper

public class AuthHelper
{
    private readonly SignInManager<AppUser> _signInManager;
    private readonly UserManager<AppUser> _userManager;

    public AuthHelper(SignInManager<AppUser> signInManager, 
                      UserManager<AppUser> userManager)
    {
        _signInManager = signInManager;
        _userManager = userManager;
    }

    // 登录
    public async Task<SignInResult> LoginAsync(string username, 
                                               string password, 
                                               bool remember)
    {
        return await _signInManager.PasswordSignInAsync(
            username, password, remember, lockoutOnFailure: true);
    }

    // 注册+分配角色
    public async Task<IdentityResult> RegisterAsync(AppUser user, string password)
    {
        var res = await _userManager.CreateAsync(user, password);
        if (res.Succeeded)
            await _userManager.AddToRoleAsync(user, "User");
        return res;
    }

    // 退出登录
    public async Task LogoutAsync()
    {
        await _signInManager.SignOutAsync();
    }
}

3. 获取当前登录用户信息

@inject AuthenticationStateProvider AuthStateProvider
@inject UserManager<AppUser> UserManager

@code {
    private AppUser? CurrentUser;
    
    protected override async Task OnInitializedAsync()
    {
        var state = await AuthStateProvider.GetAuthenticationStateAsync();
        var user = state.User;
        
        if (user.Identity != null && user.Identity.IsAuthenticated)
        {
            CurrentUser = await UserManager.FindByNameAsync(user.Identity.Name);
        }
    }
}

七、BootstrapBlazor UI 组件库教程

1. 必备基础组件

BootstrapInput/BootstrapPassword：输入框、密码框（登录页）
ValidateForm：表单校验
ToastService：轻量弹窗提示（登录成功/失败）
Card：卡片容器（登录布局）
Dialog：弹窗窗口
Table：数据表格（进销存、库存列表）

2. Toast 弹窗使用

前置条件：

Program.cs 注册 AddBootstrapBlazor()
App.razor 全局包裹 <BootstrapBlazorRoot>

@inject ToastService Toast

@code {
    // 成功提示
    await Toast.Success("登录成功");
    
    // 错误提示
    await Toast.Error("账号密码错误");
}

八、路由与页面跳转

1. 页面路由声明

@page "/login"
@page "/user/list"

2. 代码跳转 NavigationManager

@inject NavigationManager Nav

// 跳转首页
Nav.NavigateTo("/");

// 强制刷新页面（刷新登录认证状态）
Nav.NavigateTo("/", forceLoad: true);

九、分层架构（DDD，企业级规范）

推荐四层标准结构：

1. Domain.Abstractions
   - 接口定义 IAuthHelper
   - 数据库实体 AppUser

2. Application.Services
   - 业务逻辑实现 AuthHelper

3. Infrastructure
   - EF Core 数据库上下文
   - 第三方接口对接

4. WebApp.Server
   - Blazor 页面、组件、布局
   - Program 入口

十、实战完整案例：登录功能

@page "/login"
@using BootstrapBlazor.Components
@using System.ComponentModel.DataAnnotations
@using BootstrapBlazorApp1.Server.Services

@inject NavigationManager Nav
@inject ToastService Toast
@inject AuthHelper AuthHelper
@layout TutorialsLoginLayout

<div class="login-item login-item-gitee">
    <div class="login-header">
        <span>登录</span>
    </div>
    
    <ValidateForm Model="@LoginModel" OnValidSubmit="SubmitLogin">
        <BootstrapInput TValue="string" 
                       @bind-Value="LoginModel.UserName" 
                       ShowLabel="false" 
                       PlaceHolder="请输入账号" 
                       IsAutoFocus="true" />
        
        <BootstrapPassword TValue="string" 
                          @bind-Value="LoginModel.Password" 
                          ShowLabel="false" 
                          PlaceHolder="请输入密码" />
        
        <Checkbox @bind-Checked="LoginModel.RememberMe" Text="记住我" />
        
        <Button Text="登录" 
                Color="Color.Primary" 
                ButtonType="ButtonType.Submit" 
                Class="mt-3 w-100"></Button>
    </ValidateForm>
</div>

@code {
    public class LoginDto
    {
        [Required(ErrorMessage = "请输入账号")]
        public string UserName { get; set; } = "";
        
        [Required(ErrorMessage = "请输入密码")]
        public string Password { get; set; } = "";
        
        public bool RememberMe { get; set; }
    }

    private LoginDto LoginModel { get; set; } = new();

    private async Task SubmitLogin(EditContext context)
    {
        var result = await AuthHelper.LoginAsync(
            LoginModel.UserName, 
            LoginModel.Password, 
            LoginModel.RememberMe);
            
        if (result.Succeeded)
        {
            await Toast.Success("登录成功");
            Nav.NavigateTo("/", true);
        }
        else if (result.IsLockedOut)
        {
            await Toast.Error("账号已锁定，请稍后重试");
        }
        else
        {
            await Toast.Error("账号或密码错误");
        }
    }
}

十一、官方学习文档（权威参考）

微软官方 Blazor 文档：
https://learn.microsoft.com/zh-cn/aspnet/core/blazor/
BootstrapBlazor 官方文档：
https://www.blazor.zone/docs
BootstrapBlazor 在线演示：
https://blazor.app1.es/

十二、学习路线（循序渐进）

阶段 1：基础语法

Razor 语法
双向绑定
事件处理
循环、条件渲染

阶段 2：核心概念

依赖注入
生命周期方法（OnInitializedAsync）

阶段 3：UI 组件库

BootstrapBlazor 组件库
表单校验
Toast 弹窗

阶段 4：身份认证

Identity 身份认证
登录/注册功能
角色权限管理

Blazor 完整学习教程（分阶段，适配 BootstrapBlazor 企业开发）

Blazor 开发指南

一、基础认知：Blazor 两种模式区别

1. Blazor Server（你当前项目使用）

2. Blazor WebAssembly（Wasm）

二、环境搭建（零基础）

1. 必备工具

2. NuGet 包配置

3. 创建项目步骤

三、Blazor 核心基础语法（Razor 组件）

1. 组件文件结构 .razor

2. 数据绑定

3. 条件渲染

4. 循环渲染

5. 事件绑定

四、依赖注入（项目核心）

1. 三种生命周期

2. Program.cs 注册服务

3. 页面/组件注入使用

五、表单验证（登录页面 ValidateForm）

1. 数据注解验证

2. BootstrapBlazor ValidateForm 完整模板

六、ASP.NET Core Identity 身份认证（AuthHelper）

1. 核心三个类

2. 封装通用 AuthHelper

3. 获取当前登录用户信息

七、BootstrapBlazor UI 组件库教程

1. 必备基础组件

2. Toast 弹窗使用

八、路由与页面跳转

1. 页面路由声明

2. 代码跳转 NavigationManager

九、分层架构（DDD，企业级规范）

十、实战完整案例：登录功能

十一、官方学习文档（权威参考）

十二、学习路线（循序渐进）

阶段 1：基础语法

阶段 2：核心概念

阶段 3：UI 组件库

阶段 4：身份认证

评论 (0)

1. 组件文件结构 `.razor`