29

页面开发与导航

介绍

本文档旨在讲解如何在 Known 项目中开发业务页面，包括页面模型定义、路由配置、页面间导航以及参数传递等内容。通过结合代码示例，帮助开发者快速理解并实现常见的前端功能。

项目结构

Known 项目采用模块化设计，主要分为以下几个部分：

  1. 核心模块 (Known.Core): 包含系统的基础功能和服务。
  2. 页面模块 (Known/Pages): 存放所有页面组件，如首页、登录页、模块管理页等。
  3. 共享模块 (Shared): 提供跨模块使用的工具类和数据结构。
  4. 插件模块 (Plugins): 扩展功能模块，如管理插件 (Known.Admin) 和表格插件 (Known.Cells)。
classDiagram
    class Known.Core {
        +ApiFeatureProvider
        +WebApi
        +Services
        +Entities
    }
    class Known.Pages {
        +IndexPage
        +LoginPage
        +ModulePage
        +ErrorPage
    }
    class Shared {
        +Context
        +Enums
        +Utils
    }
    class Plugins {
        +Known.Admin
        +Known.Cells
    }
    Known.Core --> Shared
    Known.Pages --> Known.Core
    Plugins --> Known.Core

核心组件

以下是项目中的核心页面组件及其功能：

  1. IndexPage: 首页组件，显示系统主界面。
  2. LoginPage: 登录页面，处理用户认证和授权。
  3. ModulePage: 系统模块管理页面，用于配置模块功能。
  4. ErrorPage: 错误页面，显示系统错误信息。

页面开发流程

页面模型定义

页面模型通常继承自 BasePage 类，并实现必要的生命周期方法。例如：

public class IndexPage : BasePage
{
    protected override void BuildPage(RenderTreeBuilder builder)
    {
        builder.Component<PluginPage>().Build();
    }
}

路由配置

通过 [Route] 属性配置页面路由。例如：

[Route("/dev/modules")]
public class ModulePage : BaseTabPage
{
    // 页面逻辑
}

页面间导航

使用 Context 或 Navigation 对象进行页面跳转。例如：

Context.GoHomePage(); // 跳转到首页
Navigation.GoErrorPage("403"); // 跳转到错误页

参数传递

通过 [Parameter] 或 [SupplyParameterFromQuery] 接收参数。例如：

[Parameter]
public string Code { get; set; } // 错误码参数

详细组件分析

IndexPage

  • 功能: 显示系统首页。
  • 关键方法:
    1. GetPageTitle: 设置页面标题。
    2. BuildPage: 构建页面内容。

LoginPage

  • 功能: 处理用户登录和注册逻辑。
  • 关键方法:
    1. OnUserLogin: 处理登录按钮事件。
    2. OnUserRegister: 处理注册按钮事件。
    3. SetCurrentUserAsync: 设置当前用户信息。
sequenceDiagram
    participant User
    participant LoginPage
    participant AuthProvider
    User->>LoginPage: 点击登录按钮
    LoginPage->>AuthProvider: SignInAsync
    AuthProvider-->>LoginPage: 返回用户信息
    LoginPage->>User: 跳转到首页

ModulePage

  • 功能: 管理系统的模块配置。
  • 关键方法:
    1. OnInitPageAsync: 初始化模块标签页。

ErrorPage

  • 功能: 显示错误信息并提供返回首页的按钮。
  • 关键方法:
    1. BuildRender: 渲染错误页面内容。

依赖关系分析

  • LoginPage 依赖 IAuthStateProvider 进行用户认证。
  • ModulePage 依赖 UIConfig 加载模块标签页。
  • 所有页面组件继承自 BasePage，共享基础功能。

性能考虑

  • 页面加载: 使用异步方法初始化数据，避免阻塞渲染。
  • 状态管理: 通过 Context 共享状态，减少重复请求。

常见问题

  1. 登录失败:

    • 检查 Model 是否包含正确的用户名和密码。
    • 确保 AuthProvider 已正确配置。

  2. 路由不生效:

    • 确认 [Route] 属性是否正确设置。
    • 检查路由表是否包含该路径。

结论

本文档详细介绍了 Known 项目中的页面开发流程，包括页面定义、路由配置、导航和参数传递。通过结合代码示例和图表，帮助开发者快速掌握核心功能。如需进一步了解，请参考项目中的其他文档或代码注释。