低代码的页面开发方法、装置、设备及存储介质制造方法及图纸

本申请涉及页面开发技术领域，揭示了一种低代码的页面开发方法、装置、设备及存储介质，其中方法包括：在可视化界面中展示组件库、组件树编辑区域、组件属性编辑区域、逻辑方法库和逻辑属性编辑区域；基于组件库，在组件树编辑区域中获取用户输入的待处理组件树；针对待处理组件树中的各个组件，在组件属性编辑区域中获取用户输入的组件属性配置数据；基于逻辑方法库和待处理组件树，在逻辑属性编辑区域中获取用户输入的逻辑方法配置数据；根据用户输入的待处理组件树、组件属性配置数据和逻辑方法配置数据进行代码转换，得到页面开发结果。实现了可视化的进行页面的构造和交互事件的配置，提高了开发效率。提高了开发效率。提高了开发效率。

【技术实现步骤摘要】
低代码的页面开发方法、装置、设备及存储介质


[0001]本申请涉及到页面开发
，特别是涉及到一种低代码的页面开发方法、装置、设备及存储介质。

技术介绍

[0002]随着信息化的发展，越来越多的业务场景需要前端开发的支持，如何提升开发效率和降低开发门槛变得尤为重要和紧迫，低代码平台技术也随之应运而生。低代码平台技术通过使用可视化的模型和图形设计技术来构建软件，减少了前端开发的时间和成本。目前绝大数低代码平台在采用可视化的视图UI界面(用户界面)的绘制生成业务代码之后，手动输入交互事件的逻辑代码，导致开发效率不高，可维护性不高。

技术实现思路

[0003]本申请的主要目的为提供一种低代码的页面开发方法、装置、设备及存储介质，旨在解决现有技术的可视化开发页面，在采用可视化的视图UI界面的绘制生成业务代码之后，手动输入交互事件的逻辑代码，导致开发效率不高的技术问题。
[0004]为了实现上述专利技术目的，本申请提出一种低代码的页面开发方法，所述方法包括：
[0005]获取页面开发请求；
[0006]响应所述页面开发请求，在可视化界面中展示组件库、组件树编辑区域、组件属性编辑区域、逻辑方法库和逻辑属性编辑区域；
[0007]基于所述组件库，在所述组件树编辑区域中获取用户输入的待处理组件树；
[0008]针对所述待处理组件树中的各个组件，在所述组件属性编辑区域中获取所述用户输入的组件属性配置数据；
[0009]基于所述逻辑方法库和所述待处理组件树，在所述逻辑属性编辑区域中获取用户输入的逻辑方法配置数据；
[0010]根据所述用户输入的所述待处理组件树、所述组件属性配置数据和所述逻辑方法配置数据进行代码转换，得到页面开发结果。
[0011]进一步的，所述基于所述组件库，在所述组件树编辑区域中获取用户输入的待处理组件树的步骤，包括：
[0012]基于所述组件库，在所述组件树编辑区域中获取所述用户输入的待存储组件树；
[0013]获取组件树存储请求；
[0014]响应所述组件树存储请求，根据所述待存储组件树生成JSON树，得到所述待处理组件树；
[0015]将所述待处理组件树存储在组件树库中。
[0016]进一步的，所述基于所述逻辑方法库和所述待处理组件树，在所述逻辑属性编辑区域中获取用户输入的逻辑方法配置数据的步骤，包括：
[0017]根据所述待处理组件树获取逻辑方法配置请求，所述逻辑方法配置请求携带有待
处理的组件标识；
[0018]在所述逻辑属性编辑区域中展示与所述待处理的组件标识对应的逻辑方法配置界面；
[0019]基于所述逻辑方法库，在所述逻辑方法配置界面中获取逻辑方法标识集；
[0020]在所述逻辑方法配置界面中，根据所述逻辑方法标识集中的每个逻辑方法标识和所述待处理组件树中的各个组件标识获取用户输入的入参配置，得到待处理逻辑方法配置数据；
[0021]重复执行所述根据所述待处理组件树获取逻辑方法配置请求的步骤，直至获取到逻辑属性编辑完成信号；
[0022]根据所述逻辑属性编辑完成信号，将各个所述待处理逻辑方法配置数据作为所述用户输入的逻辑方法配置数据。
[0023]进一步的，所述基于所述逻辑方法库，在所述逻辑方法配置界面中获取逻辑方法标识集的步骤，包括：
[0024]基于所述逻辑方法库，在所述逻辑方法配置界面中获取用户拖拽进入的标准逻辑方法；
[0025]基于逻辑方法自定义插件，获取用户输入的自定义逻辑方法；
[0026]根据各个所述标准逻辑方法和各个所述自定义逻辑方法确定所述逻辑方法标识集。
[0027]进一步的，所述基于逻辑方法自定义插件，获取用户输入的自定义逻辑方法的步骤，包括：
[0028]获取逻辑方法自定义请求；
[0029]响应所述逻辑方法自定义请求，根据所述逻辑方法自定义插件进行逻辑方法自定义界面展示；
[0030]在所述逻辑方法自定义界面中获取用户输入的所述自定义逻辑方法。
[0031]进一步的，所述根据所述用户输入的所述待处理组件树、所述组件属性配置数据和所述逻辑方法配置数据进行代码转换，得到页面开发结果的步骤，包括：
[0032]采用遍历回归方法，从所述待处理组件树中获取一个节点作为待转换的节点；
[0033]从所述组件属性配置数据中获取与所述待转换的节点对应的组件属性配置数据作为待转换组件属性配置数据；
[0034]从所述逻辑方法配置数据中获取与所述待转换的节点对应的逻辑方法配置数据作为待转换逻辑方法配置数据；
[0035]采用预设格式，根据所述待转换的节点和所述待转换组件属性配置数据进行业务代码转换，得到待组合的业务代码；
[0036]采用所述预设格式，根据所述待转换的节点和所述待转换逻辑方法配置数据进行逻辑代码转换，得到待组合的逻辑代码；
[0037]采用预设代码插入规则，将所述待组合的逻辑代码插入所述待组合的业务代码中，得到所述待转换的节点对应的代码转换结果；
[0038]重复执行所述采用遍历回归方法，从所述待处理组件树中获取一个节点作为待转换的节点的步骤，直至遍历完成所述待处理组件树中的组件；
[0039]根据各个所述代码转换结果确定所述页面开发结果。
[0040]进一步的，所述根据所述用户输入的所述待处理组件树、所述组件属性配置数据和所述逻辑方法配置数据进行代码转换，得到页面开发结果的步骤之后，包括：
[0041]获取打包请求，所述打包请求携带有打包类型；
[0042]根据所述页面开发结果的文件格式获取打包工具；
[0043]当所述打包类型为HTML类型时，采用所述打包工具，对所述页面开发结果进行HTML文件转换，得到目标HTML文件；
[0044]当所述打包类型为JavaScript类型时，采用所述打包工具，对所述页面开发结果进行JavaScript文件转换，得到目标JavaScript文件。
[0045]本申请还提出了一种低代码的页面开发装置，所述装置包括：
[0046]请求获取模块，用于获取页面开发请求；
[0047]可视化界面展示模块，用于响应所述页面开发请求，在可视化界面中展示组件库、组件树编辑区域、组件属性编辑区域、逻辑方法库和逻辑属性编辑区域；
[0048]待处理组件树获取模块，用于基于所述组件库，在所述组件树编辑区域中获取用户输入的待处理组件树；
[0049]组件属性配置数据获取模块，用于针对所述待处理组件树中的各个组件，在所述组件属性编辑区域中获取所述用户输入的组件属性配置数据；
[0050]逻辑方法配置数据获取模块，用于基于所述逻辑方法库和所述待处理组件树，在所述逻辑属性编辑区域中获取用户输入的逻辑方法配置数据；
[0051]页面开发结果确定模块，用于根据所述用户输入的所述待处理组件树、所述组件属性本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种低代码的页面开发方法，其特征在于，所述方法包括：获取页面开发请求；响应所述页面开发请求，在可视化界面中展示组件库、组件树编辑区域、组件属性编辑区域、逻辑方法库和逻辑属性编辑区域；基于所述组件库，在所述组件树编辑区域中获取用户输入的待处理组件树；针对所述待处理组件树中的各个组件，在所述组件属性编辑区域中获取所述用户输入的组件属性配置数据；基于所述逻辑方法库和所述待处理组件树，在所述逻辑属性编辑区域中获取用户输入的逻辑方法配置数据；根据所述用户输入的所述待处理组件树、所述组件属性配置数据和所述逻辑方法配置数据进行代码转换，得到页面开发结果。2.根据权利要求1所述的低代码的页面开发方法，其特征在于，所述基于所述组件库，在所述组件树编辑区域中获取用户输入的待处理组件树的步骤，包括：基于所述组件库，在所述组件树编辑区域中获取所述用户输入的待存储组件树；获取组件树存储请求；响应所述组件树存储请求，根据所述待存储组件树生成JSON树，得到所述待处理组件树；将所述待处理组件树存储在组件树库中。3.根据权利要求1所述的低代码的页面开发方法，其特征在于，所述基于所述逻辑方法库和所述待处理组件树，在所述逻辑属性编辑区域中获取用户输入的逻辑方法配置数据的步骤，包括：根据所述待处理组件树获取逻辑方法配置请求，所述逻辑方法配置请求携带有待处理的组件标识；在所述逻辑属性编辑区域中展示与所述待处理的组件标识对应的逻辑方法配置界面；基于所述逻辑方法库，在所述逻辑方法配置界面中获取逻辑方法标识集；在所述逻辑方法配置界面中，根据所述逻辑方法标识集中的每个逻辑方法标识和所述待处理组件树中的各个组件标识获取用户输入的入参配置，得到待处理逻辑方法配置数据；重复执行所述根据所述待处理组件树获取逻辑方法配置请求的步骤，直至获取到逻辑属性编辑完成信号；根据所述逻辑属性编辑完成信号，将各个所述待处理逻辑方法配置数据作为所述用户输入的逻辑方法配置数据。4.根据权利要求3所述的低代码的页面开发方法，其特征在于，所述基于所述逻辑方法库，在所述逻辑方法配置界面中获取逻辑方法标识集的步骤，包括：基于所述逻辑方法库，在所述逻辑方法配置界面中获取用户拖拽进入的标准逻辑方法；基于逻辑方法自定义插件，获取用户输入的自定义逻辑方法；根据各个所述标准逻辑方法和各个所述自定义逻辑方法确定所述逻辑方法标识集。5.根据权利要求3所述的低代码的页面开发方法，其特征在于，所述基于逻辑方法自定
义插件，获取用户输入的自定义逻辑方法的步骤，包括：获取逻辑方法自定义请求；响应所述逻辑方法自定义请求，根据所述逻辑方法自定义插件进行逻辑方法自定义界面展示；在所述逻辑方法自定义界面中获取用户输入的所述自定义逻辑方法。6.根据权利要求1所述的低代码的页面开发方法，其特征在于，所述根据所述用户输入的所述待处理组件树、所述...

【专利技术属性】
技术研发人员：陶宗尧，
申请(专利权)人：平安国际智慧城市科技股份有限公司，
类型：发明
国别省市：