低代码开发框架

Appearance

模板系统 ​

本文档引用文件

目录 ​

  1. 简介
  2. 项目结构
  3. 核心组件
  4. 架构概述
  5. 详细组件分析
  6. 依赖分析
  7. 性能考虑
  8. 故障排除指南
  9. 结论

简介 ​

本文档详细介绍了模板系统的设计与实现，重点聚焦于 codegen/src/template 目录下的三端模板结构。该系统支持为 PC 端（Vue 组件）、Rust 后端模块和 UniApp 移动端页面生成代码。文档深入分析了 [[mod_slash_table]]、[[table]] 等占位符的解析逻辑及其在代码生成过程中的动态替换流程。通过实际代码示例，展示了模板如何生成具体的 Api.ts、Model.ts 和 Resolver 文件，并说明了模板与数据模型之间的映射关系，以及如何通过模板扩展支持新的技术栈或框架。

项目结构 ​

模板系统位于 codegen/src/template 目录下，采用模块化设计，分别针对 PC 端、Rust 后端和 UniApp 移动端提供了独立的模板目录。这种结构确保了各端代码生成的独立性和可维护性。

Diagram sources

Section sources

核心组件 ​

模板系统的核心是 codegen.ts 文件中的 codegen 函数，它负责遍历模板目录，解析占位符，并根据数据模型生成最终的代码文件。该函数通过递归遍历模板目录，对每个文件进行处理，根据文件类型和内容生成相应的代码。

Section sources

架构概述 ​

模板系统采用基于占位符的代码生成模式。模板文件中包含 [[mod]]、[[table]]、[[mod_slash_table]] 等占位符，这些占位符在代码生成过程中被动态替换为实际的模块名、表名等信息。系统通过解析数据模型，获取表结构、字段信息、外键关系等，然后将这些信息注入到模板中，生成最终的代码。

Diagram sources

详细组件分析 ​

PC端Vue组件模板分析 ​

PC端模板位于 pc/src/views/[[mod_slash_table]] 目录下，使用 [[mod_slash_table]] 占位符来动态生成不同模块和表的视图组件。List.vue 模板是一个典型的例子，它根据数据模型中的字段信息，动态生成搜索表单和表格列。

Diagram sources

Section sources

Rust后端模块模板分析 ​

Rust后端模板位于 rust/generated/[[mod]]/[[table]] 目录下，使用 [[mod]] 和 [[table]] 占位符来生成模块和表的后端代码。[[table]]_resolver.rs 模板定义了 GraphQL 的解析器函数，如 find_all_<#=table#>、find_by_id_<#=table#> 等。

Diagram sources

Section sources

UniApp移动端页面模板分析 ​

UniApp移动端模板位于 uni/src/pages/[[table]] 目录下，使用 [[table]] 占位符来生成不同表的页面。Api.ts 模板定义了与后端 GraphQL 服务交互的 API 函数，如 findAll<#=Table_Up#>、findOne<#=Table_Up#> 等。

Diagram sources

Section sources

依赖分析 ​

模板系统依赖于 codegen.ts 中定义的 Context 和 TablesConfigItem 等数据模型，这些模型提供了生成代码所需的所有元数据。模板文件之间也存在依赖关系，例如 List.vue 依赖于 Api.ts 提供的数据接口。