一种基于可视化表单设计器的在线代码生成方法技术

本发明专利技术涉及计算机技术领域，且公开了一种基于可视化表单设计器的在线代码生成方法，其包括以下步骤：步骤一、表单设计；步骤二、JSON数据生成模块；步骤三、JSON数据存储模块；步骤四、JSON数据解析模块；步骤五、前端源文件模板；步骤六、前端源文件生成；步骤七、前端源文件存储。本发明专利技术提供的方法可提高开发效率，使用可视化界面来配置和生成Vue组件，减少了手动编写代码的工作量；提高代码质量，组件化的思想和预先定义好的组件可以帮助开发人员避免编写错误的代码，提高代码的可维护性；提高灵活性，支持将配置项和属性信息存储在JSON格式的文件中，可以在不同的环境中读取和解析，提高了系统的灵活性。提高了系统的灵活性。提高了系统的灵活性。

【技术实现步骤摘要】
一种基于可视化表单设计器的在线代码生成方法


[0001]本专利技术属于计算机
，具体为一种基于可视化表单设计器的在线代码生成方法。

技术介绍

[0002]低代码生成方法是指使用可视化界面或模板来生成代码的方法。这种方法旨在减少编码的复杂性，使非专业程序员也能够编写代码。随着企业信息化和数字化转型的推动，越来越多的企业需要编写大量的代码来支持业务流程和系统的自动化。这就导致了对高效、低成本的代码生成方法的需求，从而导致了低代码生成技术的兴起。
[0003]但是现有低代码技术方法和产品存在一些缺陷和不足：功能限制，低代码技术并不能完全替代传统的编码方式，一些复杂的或特殊的功能可能无法使用低代码实现；性能限制，低代码产品生成的代码可能不如手写代码性能高，并且在某些情况下可能存在性能瓶颈；可维护性差，低代码生成的代码可能不易于维护和修改，因为生成的代码结构可能比较混乱；依赖性，低代码产品可能会依赖于某些特定的平台或技术栈，这可能限制了它的适用范围；成本问题，某些低代码平台或产品需要付费使用，对于某些公司或个人来说成本可能过高；缺乏专业性，低代码平台或产品可能缺乏专业程序员的专业知识和经验，生成的代码可能缺乏专业性。

技术实现思路

[0004]要解决的技术问题：现有低代码技术功能和性能上存在较多限制。
[0005]技术方案：本专利技术提供了一种基于可视化表单设计器的在线代码生成方法，包括以下步骤：步骤一、选择控件区的控件后在设计区排列展示效果然后在属性配置区修改配置；步骤二、根据JSON源文件数据格式，获取表单设计器属性配置区的数据采取双向绑定的方式，表单的展示效果及数据字段进行匹配；控件采用循环生成的方式，对应匹配控件的展示名及展示效果并配置数据存储字段用以区分不同的控件；通过页面编辑器进行展示，可直接复制或修改生成后的JSON数据，无需再次去手动匹配及生成；步骤三、每个控件的配置数据为单一的Object对象，表单配置数据为整个JSON数据的基础数据；页面属性配置操作完成之后，将表单配置数据中的控件属性字段依次添加控件配置数据的Object对象，并组装成完整的JSON数据，进行JSON格式转换后，作为JSON字符串存储在一个字段传递给后端进行服务器存储；步骤四、JSON数据转换后进行页面数据匹配；表单配置信息双向数据绑定至页面右侧表单属性配置区，逐一渲染JSON数据中对应key值的控件，并将控件配置信息回填至控件属性配置区域；点击选择控件后，可读取JSON数据中对应的控件配置选项及数据，默认展示第一个控件属性区域；步骤五、代码生成器依靠前端代码源文件并读取表单设计器生成的JSON数据进行匹配；步骤六、前端源文件进行JSON数据匹配后，通过判断过滤掉没有使用到的JS交互逻辑以及HTML页面代码，并匹配JSON数据中的CSS样式部分进行源文件的修改，最后通过JAVA的Velocity模板引擎产生最终的前端源文件；步骤七、生成后的前端
源文件以文件流的形式存储在数据库，在系统页面可直接调用接口下载或预览。
[0006]进一步地，步骤四中的JSON数据被前端原文件解析时，根据表单数据及控件数据读取key值，并与前端源文件已配置的原始代码进行比对，匹配后过滤掉未使用的代码部分。
[0007]进一步地，步骤五中的前端源文件包括HTML、JavaScript和CSS三部分。
[0008]进一步地，前端源文件会根据当前项目的需求及未来可能产生的需求进行对应的变更及开发，以适应最新的表单设计器来做数据匹配。
[0009]进一步地，生成源代码的映射是指将JSON元数据转化成源代码的过程，其会根据JSON元数据中的信息来生成对应的源代码。
[0010]进一步地，步骤一中的控件有三种类型：一，输入性控件；二，选择型控件；三，event事件型控件。
[0011]进一步地，表单设计器分为三个区域：左侧控件区、中间设计物料区和右侧属性配置区，表单设计器通过拖拽的形式，完成整个表单的控件的选择及对应数据字段的定义，并可以对表单控件进行可视化的配置，做到从视图到JSON数据的归集。
[0012]进一步地，左侧控件区域可以拖拽至中间设计区进行展示及控件位置的调整、样式的修改；右侧属性配置区域修改当前选择的控件并对其配置属性进行可视化修改，修改后，中间设计区可以实时看到展示在页面的效果；中间设计区也可以直接预览生成后的页面效果以便及时修改。
[0013]技术效果：
[0014]本专利技术提供的方法可提高开发效率，使用可视化界面来配置和生成Vue组件，减少了手动编写代码的工作量；提高代码质量，组件化的思想和预先定义好的组件可以帮助开发人员避免编写错误的代码，提高代码的可维护性；提高灵活性，支持将配置项和属性信息存储在JSON格式的文件中，可以在不同的环境中读取和解析，提高了系统的灵活性；提高维护性，使用映射关系将JSON元数据转化成Vue组件的源代码，可以方便的维护和修改生成的组件。
附图说明
[0015]附图用来提供对本专利技术的进一步理解，并且构成说明书的一部分，与本专利技术的实施例一起用于解释本专利技术，并不构成对本专利技术的限制。在附图中：
[0016]图1为本专利技术的流程结构示意图。
具体实施方式
[0017]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例；基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0018]本具体实施方式提供的基于可视化表单设计器的在线代码生成方法，表单设计器分为三个区域：左侧控件区、中间设计物料区和右侧属性配置区，表单设计器通过拖拽的形式，完成整个表单的控件的选择及对应数据字段的定义，并可以对表单控件进行可视化的
配置，做到从视图到JSON数据的归集，左侧控件区域可以拖拽至中间设计区进行展示及控件位置的调整、样式的修改；右侧属性配置区域修改当前选择的控件并对其配置属性进行可视化修改，修改后，中间设计区可以实时看到展示在页面的效果；中间设计区也可以直接预览生成后的页面效果以便及时修改；方法如图1所示，包括以下步骤：
[0019]步骤一、选择控件区的控件后在设计区排列展示效果然后在属性配置区修改配置，控件包括输入性控件、选择性控件和event事件型控件；
[0020]步骤二、根据JSON源文件数据格式，获取表单设计器属性配置区的数据采取双向绑定的方式，表单的展示效果及数据字段进行匹配；控件采用循环生成的方式，对应匹配控件的展示名及展示效果并配置数据存储字段用以区分不同的控件；通过页面编辑器进行展示，可直接复制或修改生成后的JSON数据，无需再次去手动匹配及生成；
[0021]步骤三、每个控件的配置数据为单一的Object对象，表单配置数据为整个JSON数据的基础数据；页面属性配置操作完成之后，将表单配置数据中的控件属性字段依次添加控件本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于可视化表单设计器的在线代码生成方法，其特征在于，所述方法包括以下步骤：步骤一、选择控件区的控件后在设计区排列展示效果然后在属性配置区修改配置；步骤二、根据JSON源文件数据格式，获取表单设计器属性配置区的数据采取双向绑定的方式，表单的展示效果及数据字段进行匹配；控件采用循环生成的方式，对应匹配控件的展示名及展示效果并配置数据存储字段用以区分不同的控件；通过页面编辑器进行展示，可直接复制或修改生成后的JSON数据，无需再次去手动匹配及生成；步骤三、每个控件的配置数据为单一的Object对象，表单配置数据为整个JSON数据的基础数据；页面属性配置操作完成之后，将表单配置数据中的控件属性字段依次添加控件配置数据的Object对象，并组装成完整的JSON数据，进行JSON格式转换后，作为JSON字符串存储在一个字段传递给后端进行服务器存储；步骤四、JSON数据转换后进行页面数据匹配；表单配置信息双向数据绑定至页面右侧表单属性配置区，逐一渲染JSON数据中对应key值的控件，并将控件配置信息回填至控件属性配置区域；点击选择控件后，可读取JSON数据中对应的控件配置选项及数据，默认展示第一个控件属性区域；步骤五、代码生成器依靠前端代码源文件并读取表单设计器生成的JSON数据进行匹配；步骤六、前端源文件进行JSON数据匹配后，通过判断过滤掉没有使用到的JS交互逻辑以及HTML页面代码，并匹配JSON数据中的CSS样式部分进行源文件的修改，最后通过JAVA的Velocity模板引擎产生最终的前端源文件；步骤七、生成后的前端源文件以文件流的形式存储在数据库，在系统页面可直接调用接口下载或预览。2.根据权利要求1所述的基于可视化表单设计器的在线代码生成方法，其特征在...

【专利技术属性】
技术研发人员：徐欢，秦兆轩，王路权，王伟东，
申请(专利权)人：天津全网数商科技有限公司，
类型：发明
国别省市：