22

Web 与 Wasm 示例

介绍

本项目是一个基于 Blazor 的企业级快速开发框架，支持 Web 和 WebAssembly (Wasm) 两种运行模式。通过低代码和跨平台的设计，实现了“一处代码，多处运行”的目标。本示例展示了如何在 Web 和 Wasm 环境中使用 Known 框架的核心功能。

项目结构

项目的目录结构如下：

  1. Sample.Web

    • Program.cs: 启动文件，配置 Web 应用的服务和中间件。
    • App.razor: 定义应用的根组件和路由。
    • Pages/Index.razor: 首页组件，展示统计信息和功能卡片。

  2. Sample.Wasm

    • Program.cs: 启动文件，配置 Wasm 应用的服务。
    • App.razor: 定义 Wasm 应用的根组件和路由。
    • Pages/Index.razor: 首页组件，功能与 Web 版本类似。
classDiagram
  class Sample.Web {
    +Program.cs
    +App.razor
    +Pages/Index.razor
  }
  class Sample.Wasm {
    +Program.cs
    +App.razor
    +Pages/Index.razor
  }
  Sample.Web --|> Known.Framework
  Sample.Wasm --|> Known.Framework

核心组件

1. Program.cs (Web)

  • 功能: 配置 Web 应用的服务和中间件。
  • 关键代码: 
    builder.Services.AddApplication(option =>
{
    option.Database = db =>
    {
        var connString = builder.Configuration.GetSection("ConnString").Get<string>();
        db.AddSQLite<Microsoft.Data.Sqlite.SqliteFactory>(connString);
    };
});
    • 配置数据库连接，支持多种数据库类型（示例中使用 SQLite）。

2. App.razor (Web)

  • 功能: 定义应用的根组件和路由。
  • 关键代码: 
    <Routes @rendermode="Context.RenderMode" Context="Context" />
    • 动态渲染路由组件，支持服务器端和客户端渲染模式。

3. Index.razor (Web)

  • 功能: 首页组件，展示统计信息和功能卡片。
  • 关键代码: 
    var info = await Service.GetHomeAsync();
space?.SetCounts(counts);
    • 调用服务获取数据，并更新页面组件。

架构概述

  • Web 模式: 基于 ASP.NET Core，支持服务器端渲染和交互式组件。
  • Wasm 模式: 基于 Blazor WebAssembly，完全在客户端运行。
  • 共享逻辑: 通过 Known.Framework 提供统一的 API 和服务。
flowchart TD
  A[Web Server] --> B[Blazor Server]
  C[Browser] --> D[Blazor Wasm]
  E[Shared Services] --> B
  E --> D

详细组件分析

Program.cs (Wasm)

  • 功能: 配置 Wasm 应用的服务。
  • 关键代码: 
    builder.Services.AddApplication();
    • 注册共享服务，供 Wasm 应用使用。

App.razor (Wasm)

  • 功能: 定义 Wasm 应用的根组件和路由。
  • 关键代码: 
    <KContext Value="Context">
    <Router AppAssembly="typeof(Program).Assembly">
        <RouteView RouteData="routeData" DefaultLayout="typeof(AdminLayout)" />
    </Router>
</KContext>
    • 使用 Router 组件管理路由，默认布局为 AdminLayout。

依赖分析

  • Web 依赖: ASP.NET Core、Blazor Server。
  • Wasm 依赖: Blazor WebAssembly、HTTP 客户端。
  • 共享依赖: Known.Framework、数据库提供程序。

性能考虑

  • Web 模式: 服务器端渲染性能较高，适合复杂业务场景。
  • Wasm 模式: 首次加载时间较长，但后续交互流畅。

故障排除指南

  1. 数据库连接失败

    • 检查 ConnString 配置是否正确。
    • 确保数据库服务已启动。

  2. 页面加载缓慢

    • Wasm 模式下优化资源加载，使用预渲染。

结论

本项目通过 Web 和 Wasm 两种模式展示了 Known 框架的核心功能，适合企业级快速开发需求。开发者可以根据实际需求选择合适的运行模式。