通过Blazor框架实现前后端统一开发的实战案例解析插图

通过Blazor框架实现前后端统一开发的实战案例解析：一个任务管理应用从零到一

大家好，作为一名常年混迹于前后端“边界”的开发者，我一直在寻找一种能让我用同一种语言和思维模型来构建整个应用的技术。直到我遇见了 Blazor。它承诺用 C# 和 .NET 来写前端，这听起来简直太美好了。但现实是否如宣传般美好？今天，我就通过一个完整的“个人任务管理应用”实战案例，带大家深入体验 Blazor 的开发流程，分享其中的爽点与踩过的坑。

一、 环境搭建与项目创建：选对模板是关键

首先，确保你安装了最新版的 .NET SDK 和 Visual Studio 2022 或 VS Code。Blazor 有两种主要的托管模型：Blazor Server 和 Blazor WebAssembly。前者实时通信，适合内网应用；后者完全在浏览器中运行，是真正的 SPA。为了体验最“统一”的感觉，我选择了 Blazor WebAssembly App，并且勾选“ASP.NET Core Hosted”，这会生成一个解决方案，包含 Client（前端）、Server（后端API）和 Shared（共享模型）三个项目，结构非常清晰。

dotnet new blazorwasm -n TaskManagerApp --hosted
cd TaskManagerApp

踩坑提示：初次运行时可能会因为 HTTPS 开发证书问题报错。如果遇到，可以临时在 `Properties/launchSettings.json` 中把应用 URL 改为 `http://localhost:端口`，或者用 `dotnet dev-certs https --trust` 信任证书（Windows/macOS）。

二、 定义数据模型与共享逻辑

统一开发的第一个甜头来了：共享代码。在 `Shared` 项目中，我创建了核心的数据模型 `TodoTask.cs`。

// Shared/TodoTask.cs
namespace TaskManagerApp.Shared;

public class TodoTask
{
    public int Id { get; set; }
    public string Title { get; set; } = string.Empty;
    public string? Description { get; set; }
    public bool IsCompleted { get; set; }
    public DateTime CreatedDate { get; set; } = DateTime.UtcNow;
    public PriorityLevel Priority { get; set; } = PriorityLevel.Medium;
}

public enum PriorityLevel
{
    Low, Medium, High, Critical
}

这个类在客户端和服务器端完全通用。前端表单验证、数据显示，后端的 Entity Framework Core 实体、API 传输模型，全都用它。再也不用维护两份相同的 TypeScript/Java 和 C# 定义了，这种一致性极大地减少了低级错误。

三、 服务器端：快速构建 API 与数据层

在 `Server` 项目中，我用 Entity Framework Core 和 In-Memory Database 快速搭建数据层（为了演示，生产环境请换用 SQL Server 等）。

// Server/Data/AppDbContext.cs
using Microsoft.EntityFrameworkCore;
using TaskManagerApp.Shared;

namespace TaskManagerApp.Server.Data;

public class AppDbContext : DbContext
{
    public AppDbContext(DbContextOptions options) : base(options) { }
    public DbSet Tasks => Set();
}

然后，我使用 Visual Studio 的脚手架功能，右键 `Controllers` 文件夹，选择“添加” -> “控制器”，基于 `TodoTask` 模型和 `AppDbContext` 生成一个具有完整 CRUD 操作的 API 控制器。不到一分钟，一套功能齐全的 `/api/todotasks` 端点就生成了。这是 .NET 生态的生产力体现。

四、 客户端：用 C# 和 Razor 组件构建交互界面

重头戏来了。在 `Client` 项目的 `Pages` 目录下，我创建了 `TaskList.razor` 组件。这里展示了 Blazor 的核心魅力。

@page "/tasks"
@using TaskManagerApp.Shared
@inject HttpClient Http
@inject NavigationManager Navigation


任务清单



@if (tasks == null)
{
    
加载中...

}
else if (!tasks.Any())
{
    
还没有任务，赶快创建一个吧！

}
else
{
    ...
            @foreach (var task in tasks)
            {
                
            }
        

        
        

                     ToggleTask(task))" />
                    @task.Title
                    @task.Priority
                    
                        
                        
                    
                

    

}

@code {
    private List? tasks;

    protected override async Task OnInitializedAsync()
    {
        // 直接调用后端 API，强类型！
        tasks = await Http.GetFromJsonAsync<List>("api/todotasks");
    }

    private async Task ToggleTask(TodoTask task)
    {
        // 更新操作
        var response = await Http.PutAsJsonAsync($"api/todotasks/{task.Id}", task);
        if (response.IsSuccessStatusCode)
        {
            // 状态自动更新，UI会响应式刷新
        }
    }

    private async Task DeleteTask(int id)
    {
        var confirm = await JSRuntime.InvokeAsync("confirm", $"确定删除任务 {id} 吗？");
        if (confirm)
        {
            await Http.DeleteAsync($"api/todotasks/{id}");
            tasks?.RemoveAll(t => t.Id == id); // 从本地列表移除
        }
    }

    private void EditTask(int id) => Navigation.NavigateTo($"/tasks/edit/{id}");
    private void NavigateToCreate() => Navigation.NavigateTo("/tasks/create");
}

实战感受：

  1. 强类型绑定：`@bind="task.IsCompleted"` 直接绑定到 C# 对象的属性，双向数据绑定非常简单。
  2. 同一语言调用 API：`Http.GetFromJsonAsync<List>(...)`，不需要手动反序列化，类型安全。
  3. 状态管理直观：修改 `tasks` 列表后，UI 会自动重新渲染受影响的部分。

踩坑提示：组件生命周期方法（如 `OnInitializedAsync`）在预渲染期间会执行两次（服务端一次，客户端一次）。如果其中有初始化数据的操作，要确保其幂等性或使用 `PersistentComponentState` 服务来保持状态，否则可能看到数据闪烁。

五、 表单与验证：利用 .NET 的数据注解

创建和编辑任务需要表单。我在 `Shared` 项目中对 `TodoTask` 添加了数据注解，然后在前端使用 `EditForm` 组件。

// 在 Shared/TodoTask.cs 中添加
using System.ComponentModel.DataAnnotations;

public class TodoTask
{
    // ...
    [Required(ErrorMessage = "任务标题不能为空")]
    [StringLength(100, ErrorMessage = "标题长度不能超过100个字符")]
    public string Title { get; set; } = string.Empty;
    // ...
}

// 在 Client/Pages/TaskForm.razor 中

    
    

    

        
        
         currentTask.Title)" />

看，验证逻辑在共享模型中定义一次，前后端同时生效。前端 `DataAnnotationsValidator` 提供即时客户端验证，后端 API 模型绑定也会自动进行相同的验证。这种一致性是传统分离开发难以企及的。

六、 部署与总结

开发完成后，使用 `dotnet publish -c Release` 发布。Blazor WebAssembly 的客户端部分会被编译为静态文件（.dll, .wasm等），可以部署到任何静态文件服务器（如 Azure Static Web Apps, GitHub Pages, Nginx）。服务器端 API 项目则需要一个 ASP.NET Core 托管环境。

总结与心得：

  • 优势：代码复用率极高，开发体验流畅，尤其是对 .NET 开发者来说学习曲线平缓。强类型贯穿始终，工具链强大（热重载、调试体验优秀）。
  • 考量：首次加载需要下载 .NET 运行时（约几MB），对网络敏感的场景需要关注。虽然性能在不断优化，但复杂 UI 的响应速度目前可能仍不及顶尖的 JavaScript 框架。生态虽在快速增长，但相比 React/Vue 的 npm 生态，可用组件库的丰富度仍有差距。

通过这个实战案例，我深刻体会到 Blazor 在实现“前后端统一开发”上的巨大潜力。它特别适合中后台管理系统、企业内网应用以及希望团队技术栈统一的场景。如果你是一个 C# 开发者，或者正在为一个项目选择全栈技术栈，Blazor 绝对值得你投入时间深入探索。它可能不是所有场景的银弹，但它提供了一种高效、优雅且令人愉悦的全新开发范式。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。