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

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

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


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

技术介绍

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

【技术保护点】

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

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