VTJ.PRO 在线应用开发平台的低代码引擎与DSL系统

踩着两条虫
0 阅读2分钟

低代码引擎与DSL系统

低代码引擎是VTJ.PRO平台的核心，它提供了将视觉设计表示、存储和转换为功能代码的机制。它利用领域特定语言（DSL）模式来抽象应用逻辑、UI结构和状态管理。该系统通过先进的代码生成和解析能力，弥合了可视化工作台与标准Vue.js开发之间的差距。

11.png

核心架构与集成

该引擎构建于一系列专门的内部包之上，这些包负责处理低代码生命周期的不同阶段：

  • @vtj/core：定义DSL的基础模式和类型。
  • @vtj/coder：负责“出码”操作，将DSL模式转换为可执行的Vue 3源代码。
  • @vtj/parser：处理“入码”操作，将现有的Vue文件解析回DSL模式。
  • @vtj/renderer：运行时引擎，在浏览器中实时解释DSL以进行预览和实时执行。
系统实体映射

下图将概念上的低代码组件映射到代码库中的具体实现。

引擎实体映射

flowchart
    subgraph Natural Language Space
        A[Application Blueprint]
        B[Visual Component]
        C[Source Code]
        D[Production Build]
    end
    subgraph Code Entity Space
        E[DSLEntity]
        F[MaterialEntity]
        G["dslToVue()"]
        H["genProject()"]
    end
    A --> E
    B --> F
    C --> G
    D --> H
    E --> I[backend/src/business/dsl/dsl.entity.ts]
    F --> J[backend/src/business/material/material.entity.ts]
    G --> K["@vtj/coder"]
    H --> L[JSZip]
    E -- Defined in --> I
    F -- Defined in --> J
    G -- Calls --> K
    H -- Uses --> L

DSL表示

VTJ.PRO中的应用作为结构化JSON对象存储在DSLEntity中。该实体使用DslType枚举来跟踪不同类型的低代码产物：

TypeCode SymbolPurpose
ProjectDslType.Project整个应用的根配置。
MaterialDslType.Material组件库的定义和元数据。
FileDslType.File单个页面或组件的DSL模式。
HistoryDslType.History用于撤销/重做和备份的版本快照。

DSL生命周期：从开发到生产

低代码项目的生命周期涉及**开发（Dev）环境和生产（Prod）**环境的严格分离。这确保了进行中的更改不会影响线上应用。

DslService通过两个主要工作流程管理这种转换：

  1. 发布：将验证过的DSL从开发环境移动到生产环境（publishFromDev）。
  2. 同步：将生产环境的DSL复制回开发环境，以便重置或分支更改（copyToDev）。

DSL工作流逻辑

flowchart
    subgraph Development Context
        DEV["DSLEntity (is_prod: 0)"]
    end
    subgraph Service Layer
        SVC[DslService]
    end
    subgraph Production Context
        PROD["DSLEntity (is_prod: 1)"]
    end
    DEV -- publishFromDev --> SVC
    SVC -- Upsert Prod Record --> PROD
    PROD -- copyToDev --> SVC
    SVC -- Overwrite Dev Record --> DEV

代码生成（出码）与模板

VTJ.PRO支持“全源代码导出”，允许开发者从低代码环境迁移到传统的开发工作流。DslService提供了将DSL转换为完整、可下载的项目结构的方法。

  • dslToVue：将单个DSL模式转换为标准的Vue单文件组件（SFC）字符串。
  • genProject：协调整个项目的创建。它选择一个基础模板（Web、H5或UniApp），注入生成的Vue文件，并将结果打包成ZIP压缩包供用户下载。
  • 模板系统：位于templates/目录下的预配置项目结构，充当所有生成项目的脚手架。

参考资料

avatar
文章
阅读
粉丝