代码生成

前言

本框架的前端代码生成机制独具特色，与其他框架显著不同。它并未依赖于后端模板引擎与模板的生成方式，而是构筑了一个独立完整的体系，充分运用了前端的技术栈来实现代码生成的流程。具体而言，它主要包含两大核心部分：一是可视化的前端代码生成元数据管理系统，二是前端代码生成命令行界面（CLI）。其中，CLI能够接收特定指令，通过调用后端接口来获取元数据，进而利用art-template模板引擎进行渲染，最终生成与指令相对应的模板代码。这一设计不仅提高了代码生成的灵活性和效率，还确保了生成的代码质量符合前端开发的最佳实践。

元数据管理

元数据管理对应于我们的在线开发模块，这一模块设计精巧，主要包含两大核心菜单：模型分组和数据模型管理。下面，我将对这两个菜单进行简要的介绍。 image

模型分组

模型分组功能是对数据模型进行有序分类和组织的关键环节，其在前端代码生成中占据重要地位。作为左侧菜单的一级选项，它使用户能够直观地浏览和管理各分组下的数据模型。更值得一提的是，模型分组的唯一编码能够自动对应生成前端路由文件，从而简化了开发流程，提升了代码生成的效率与准确性。通过这一功能，我们不仅能够构建清晰、有条理的数据模型结构，还实现了数据模型与前端界面的无缝对接，为前端开发带来了极大的便利。

列表

列表

新增/编辑

新增/编辑

字段说明：

  • 分组名称 对应前端一级菜单的名称
  • 唯一编码 对应前端路由文件名称
  • 图标 对应前端一级菜单图标
  • 排序 对应前端一级菜单排序
  • 备注

数据模型

数据模型管理菜单致力于实现对数据模型本身的深入且细致的管理，其核心关注于如何将某一张数据库表的信息精准地呈现在前端界面，并优化其交互体验。这包括但不限于设置所属分组的表单弹窗展示方式、调整菜单项的顺序、以及为菜单项选择或设计图标等。此外，该菜单还提供了对数据库表对应属性字段信息的全面维护功能，用户可以轻松管理字段的增减、属性的设定，以及字段之间的逻辑关系。为进一步减轻前端在维护数据模型时的负担，我们特别设计了一键导入数据库表的功能。用户通过简单的操作，即可将后端已经创建好的数据库表导入到前端，避免了繁琐的手动创建和配置过程。导入后，用户还可以基于该表进行二次的完善工作，根据前端的具体需求，进一步扩展和完善元数据，确保前端界面能够完美呈现数据库表的信息，并提供流畅的交互体验。

列表

列表

新增/编辑

新增/编辑

导入

导入

模型字段管理

模型字段管理

元数据

经过一系列精心配置，我们将生成相应的元数据，这些元数据是前端进行代码生成和模板制作的关键依据。前端将充分利用这些元数据，自动化地生成所需的代码和模板，从而极大地提高了开发效率和质量。通过这一流程，我们确保了代码生成的准确性和一致性，为前端开发者提供了强大的支持。

元数据

代码生成工具

目录结构

├── config  
  └── default.json 配置文件
└── generate 
	└── templates  模板目录
    ├── blank    空白模板  对应的是default.json的theme
      └── index.art
    └── default 默认模板   对应的是default.json的theme（当前框架以该模板为主）
      ├── add.art  新增/编辑表单模板
      ├── api.art  接口模板
      ├── customFormComponent.art 自定义表单组件模板
      ├── customViewComponent.art 自定义回显组件模板
      ├── detail.art  详情页模板
      ├── formComponents.art  自动注册自定义表单组件入口模板
      ├── index.art 首页模板
      ├── route.art 路由文件模拟
      ├── schemas.art 元数据模板
      └── viewComponents.art 自动注册自定义回显组件入口模板

配置文件

config/default.json

{
  "apiUrl": "http://localhost:18080/dev/schema/getByTableName",
  "theme": "default",
  "appId": "admin",
  "appSecret": "123456",
  "templates": [
    {
      "name": "接口模板",
      "selected": true,
      "templateFile": "api.art",
      "targetPath": "src/api/<{moduleName}>",
      "targetFileName": "<{tableCamelName}>.ts"
    },
    {
      "name": "首页模板",
      "selected": true,
      "templateFile": "index.art",
      "targetPath": "src/views/<{moduleName}>/<{tableCamelName}>",
      "targetFileName": "index.vue"
    },
    {
      "name": "元数据",
      "selected": true,
      "templateFile": "schemas.art",
      "targetPath": "src/views/<{moduleName}>/<{tableCamelName}>/schemas",
      "targetFileName": "index.ts",
      "data": true
    },
    {
      "name": "表单页",
      "selected": true,
      "templateFile": "add.art",
      "targetPath": "src/views/<{moduleName}>/<{tableCamelName}>",
      "targetFileName": "add.vue"
    },
    {
      "name": "详情页",
      "selected": true,
      "templateFile": "detail.art",
      "targetPath": "src/views/<{moduleName}>/<{tableCamelName}>",
      "targetFileName": "detail.vue"
    },
    {
      "name": "路由文件",
      "selected": true,
      "templateFile": "route.art",
      "targetPath": "src/router/routes/modules",
      "targetFileName": "<{schemaGroup.code}>.ts"
    },
    {
      "name": "表单自定义组件入口文件",
      "selected": true,
      "templateFile": "formComponents.art",
      "targetPath": "src/views/<{moduleName}>/<{tableCamelName}>/components/form",
      "targetFileName": "index.ts"
    },
    {
      "name": "列表自定义组件入口文件",
      "selected": true,
      "templateFile": "viewComponents.art",
      "targetPath": "src/views/<{moduleName}>/<{tableCamelName}>/components/view",
      "targetFileName": "index.ts"
    },
    {
      "name": "表单自定义组件",
      "selected": false,
      "templateFile": "customFormComponent.art",
      "targetPath": "src/views/<{moduleName}>/<{tableCamelName}>/components/form",
      "targetFileName": "*.vue"
    },
    {
      "name": "列表/详情自定义组件",
      "selected": false,
      "templateFile": "customViewComponent.art",
      "targetPath": "src/views/<{moduleName}>/<{tableCamelName}>/components/view",
      "targetFileName": "*.vue"
    }
  ]
}

配置说明：

  • apiUrl 获取元数据接口地址
  • appId 获取元数据应用id
  • appSecret 获取元数据应用密钥
  • templates[0].name 模板名称
  • templates[0].selected 是否选中，选中才会生成代码
  • templates[0].templateFile 对应的模板名称
  • templates[0].targetPath 生成的目标文件路径
  • templates[0].targetFileName 生成的目标文件名称

代码生成样例结构

└── src 
	├── api  接口目录
    └── biz  biz模块
      └── demo.ts demo相关接口
  └── views 页面目录
    └── biz/demo demo相关页面
      ├── components 组件目录
        ├── form 自定义表单组件目录
          ├── DemoCustomInput.vue 自定义表单组件，根据元数据配置生成的，不一定会有
          └── index.ts 自动注册表单组件入口，默认将当前目录下的.vue注册
        ├── view 自定义回显组件目录
          ├── DemoCustomInput.vue 自定义回显组件，根据元数据配置生成的，不一定会有
          └── index.ts 自动注册回显组件入口，默认将当前目录下的.vue注册
      ├── schemas
        └── index.ts
      ├── add.vue
      ├── detail.vue
      └── index.vue

代码生成命令说明

查看帮助

node generate/main.cjs --help

选项：
      --version    显示版本号                                             [布尔]
  -t, --tableName  表名称                                        [字符串] [必需]
  -c, --cover      是否覆盖                                   [数字] [默认值: 0]
  -d, --data       是否仅生成元数据                           [数字] [默认值: 0]
  -h, --help       显示帮助信息                                           [布尔]

代码生成配置文件

config/default.json

指定某个元数据生成代码

node generate/main.cjs -t biz_demo

指定某个元数据生成代码－覆盖式

node generate/main.cjs -t biz_demo -c 1

指定某个元数据生成代码－仅覆盖元数据文件

node generate/main.cjs -t biz_demo -d 1

模板语法

前端模板引擎使用的是art-templateopen in new window，下面对语法进行简单的说明。

输出

标准语法
<{value}>
<{data.key}>
<{data['key']}>
<{a ? b : c}>
<{a || b}>
<{a + b}>
原始语法
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

原文输出，不转义

标准语法
<{@ value }>
原始语法
<%- value %>

条件

标准语法
<{if value}> ... <{/if}>
<{if value}> ... <{else}> ... <{/if}>
<{if v1}> ... <{else if v2}> ... <{/if>}
<{if v1}> ... <{else if v2}> ... <{else}> ... <{/if}>
原始语法
<% if (value) { %> ... <% } %>
<% if (value) { %> ... <% } else { %>... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% }  else { %>... <% } %>

循环

标准语法
隐式定义，默认$value/$index
<{each target}>
    <{$index}} <{$value>}>
<{/each}>
显示定义
<{each target val index}>
    <{index}> <{val>}>
<{/each}>
原始语法
<% for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
<% } %>

变量

标准语法
<{set temp = data.sub.content}>
原始语法
<% var temp = data.sub.content; %>

关于元数据文档

由于字段的设置和描述均十分明确清晰，此处不再逐一展开详细说明。您可以随时查阅配置页面和元数据，以便更直观地了解各个字段的用途和配置方式，从而轻松实现对号入座。我们建议您仔细查阅相关资料，以便更好地利用这些字段进行代码生成和模板制作。

相关视频

AI神器！阿里通义灵码从零带你开发前端代码生成器open in new window

前端代码生成演示open in new window