在快速迭代的软件开发领域，如何提升开发效率、减少重复性工作一直是开发者们关注的焦点。今天，我们向您介绍一款引领潮流的快速开发框架，其核心亮点之一就是其强大的前端代码生成模块。
前端代码生成：独立、灵活、高效
我们的前端代码生成模块并非简单依赖于后端模板引擎，而是采用了一套独立完整的体系，充分利用前端技术栈来实现代码生成的流程。这意味着，无论后端如何变化，前端代码生成都能保持其独立性和灵活性。
两大核心组件：元数据管理与CLI
- 元数据管理系统：这是一个可视化的前端工具，通过它，开发者可以直观地管理数据模型、分组和字段等元数据。元数据不仅是代码生成的基石，更是实现前后端无缝对接的关键。
- 命令行界面（CLI）：CLI接收特定指令，调用后端接口获取元数据，利用art-template模板引擎进行渲染，最终生成与指令相对应的模板代码。这一设计大大提高了代码生成的灵活性和效率。
元数据管理：清晰、有序、自动化
- 模型分组：通过对数据模型进行有序分类和组织，确保前端路由文件自动生成，大大简化了开发流程。
- 数据模型管理：深入且细致地管理数据模型，包括表单弹窗展示方式、菜单项顺序和图标选择等。更有一键导入数据库表功能，让前端开发者轻松与后端数据库表对接。
代码生成工具：一键生成，事半功倍
- 模板目录：我们提供了默认的模板目录，包括空白模板和默认模板，满足不同项目的需求。开发者还可以根据自己的需要定制模板。
- 一键生成：基于配置好的元数据，前端代码生成工具能够自动化地生成所需的代码和模板，大大提高了开发效率和质量。
轻松上手，快速迭代
无论是新建项目还是迭代现有项目，我们的前端代码生成模块都能为您提供强大的支持。通过可视化的元数据管理系统和灵活的命令行界面，您可以轻松管理元数据、生成代码，从而快速构建出高质量的前端应用。
立即体验，让您的开发更高效！
快来尝试我们的快速开发框架前端代码生成模块吧！它将为您带来前所未有的开发体验，让您的项目迭代更加轻松、高效。
元数据管理
元数据管理对应于我们的在线开发模块，这一模块设计精巧，主要包含两大核心菜单：模型分组和数据模型管理。下面，我将对这两个菜单进行简要的介绍。
模型分组
模型分组功能是对数据模型进行有序分类和组织的关键环节，其在前端代码生成中占据重要地位。作为左侧菜单的一级选项，它使用户能够直观地浏览和管理各分组下的数据模型。更值得一提的是，模型分组的唯一编码能够自动对应生成前端路由文件，从而简化了开发流程，提升了代码生成的效率与准确性。通过这一功能，我们不仅能够构建清晰、有条理的数据模型结构，还实现了数据模型与前端界面的无缝对接，为前端开发带来了极大的便利。
列表
新增/编辑
字段说明：
- 分组名称 对应前端一级菜单的名称
- 唯一编码 对应前端路由文件名称
- 图标 对应前端一级菜单图标
- 排序 对应前端一级菜单排序
- 备注
数据模型
数据模型管理菜单致力于实现对数据模型本身的深入且细致的管理，其核心关注于如何将某一张数据库表的信息精准地呈现在前端界面，并优化其交互体验。这包括但不限于设置所属分组的表单弹窗展示方式、调整菜单项的顺序、以及为菜单项选择或设计图标等。此外，该菜单还提供了对数据库表对应属性字段信息的全面维护功能，用户可以轻松管理字段的增减、属性的设定，以及字段之间的逻辑关系。为进一步减轻前端在维护数据模型时的负担，我们特别设计了一键导入数据库表的功能。用户通过简单的操作，即可将后端已经创建好的数据库表导入到前端，避免了繁琐的手动创建和配置过程。导入后，用户还可以基于该表进行二次的完善工作，根据前端的具体需求，进一步扩展和完善元数据，确保前端界面能够完美呈现数据库表的信息，并提供流畅的交互体验。
列表
新增/编辑
导入
模型字段管理
元数据
经过一系列精心配置，我们将生成相应的元数据，这些元数据是前端进行代码生成和模板制作的关键依据。前端将充分利用这些元数据，自动化地生成所需的代码和模板，从而极大地提高了开发效率和质量。通过这一流程，我们确保了代码生成的准确性和一致性，为前端开发者提供了强大的支持。
代码生成工具
目录结构
├── 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-template，下面对语法进行简单的说明。
输出
标准语法
<{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; %>
关于元数据文档
由于字段的设置和描述均十分明确清晰，此处不再逐一展开详细说明。您可以随时查阅配置页面和元数据，以便更直观地了解各个字段的用途和配置方式，从而轻松实现对号入座。我们建议您仔细查阅相关资料，以便更好地利用这些字段进行代码生成和模板制作。
