一种前端无代码生成应用界面的方法

技术领域

本发明涉及应用界面生成技术领域，具体为一种前端无代码生成应用界面的方法。

背景技术

在交互过程中，前端应用接收用户对当前界面的操作后，会根据用户的操作生成相应的指令。后端系统在接收到该指令后，生成相对应的下一时刻的界面，并通过前端应用向用户展示，前端应用界面构建是指根据界面需求，生成相应的前端应用界面的一种技术。

公开号为CN111367516B的中国专利公开了一种应用界面生成方法、装置及电子设备，包括：获取预先基于可扩展标记语言配置文件得到的控制应用界面布局的代码信息，可扩展标记语言配置文件用于定义应用界面中各个组件的属性信息，然后基于控制应用界面布局的代码信息生成目标应用界面。即预先基于可扩展标记语言配置文件得到控制应用界面布局的代码信息，然后基于得到的控制应用界面布局的代码信息生成应用界面，不需要对XML文件进行解析，从而减少了生成应用界面的耗时，提升了用户体验。此外，内存中也不需要加载XML文件解析器，从而减少了生成应用界面时占用的内存资源。

上述专利在实际使用过程中，通过代码来生成应用界面，成本较高，且完成周期长，大大的增加了构建时间和难度；因此，不满足现有的需求，对此我们提出了一种前端无代码生成应用界面的方法。

发明内容

本发明的目的在于提供一种前端无代码生成应用界面的方法，通过无代码生成，不仅节约了成本，完成周期短，大大的减少了构建时间和难度，从而大大提高应用开发效率，而且还避免了前端代码冗余，通过对初始前端应用界面的调整，使得生成的最终前端应用界面功能更加完善，使用效果更好，通过对初始前端应用界面进行功能调整，保证了生成的前端应用界面的功能性更加完整，从而加快工作进度，并且能够为后期检测修改提供方便，通过对生成的最终前端应用界面进行测试优化，保证前端应用界面的可行性，通过对前端应用界面的背景进行优化处理后在进行展示，保证了生成的前端应用界面使用的美观性，进一步确保了用户体验感，解决了上述背景技术中提出的问题。

为实现上述目的，本发明提供如下技术方案：一种前端无代码生成应用界面的方法，包括以下步骤：

S1：通过接收模块接收前端应用界面生成请求信息，分析前端应用界面生成的生成请求信息，并根据前端应用界面生成请求信息进行规划处理，并对前端应用中界面的操作进行预案设计。

S2：在可视程序开发应用程序中，通过前端应用界面生成模块根据用户发出的界面生成请求绘制初始前端应用界面，并将绘制的初始前端应用界面发送至用户端进行确认。

S3：用户接收初始前端应用界面，并根据初始前端应用界面做出相应的调整，并将调整信息发送至调整模块。

S4：调整模块接收用户所发送的针对初始前端应用界面的功能调整信息，并结合前端应用界面功能调整信息和前端应用界面生成的需求信息，生成针对初始前端应用界面的更新后的前端应用界面，作为最终前端应用界面。

S5：将最终前端应用界面发送至优化测试模块，优化测试模块对最终前端应用界面的功能进行测试优化后发送至展示模块。

S6：展示模块对测试优化完成的前端应用界面的展示背景进行最终处理，处理完成后进行展示。

优选的，所述界面生成请求包括运行环境信息和界面需求信息，其中，运行环境信息用于标识前端应用的运行环境，界面需求信息包括页面位置、页面样式、页面大小、内容、动画以及交互方式。

优选的，所述接收模块，包括：

获取模块，用于获取前端应用界面信息数据和前端应用界面生成的需求信息。

模板确定模块，用于接收获取模块所获取的前端应用界面生成的需求信息，确定前端应用界面的模板方案，并将模板方案发送至模板加载模块。

模板加载模块，用于接收前端应用界面的模板并对其进行解析，将解析后的模板加载到前端应用界面上。

优选的，所述前端应用界面生成模块，包括：

第一生成模块，用于根据前端应用界面信息数据生成相应的前端应用界面生成模型，结合前端应用界面生成的需求信息，生成初始前端应用界面集合。

评价模块，用于对于初始前端应用界面集合中的每个初始前端应用界面进行相应的前端应用界面评价，以生成界面评价信息。

排序模块，用于根据得到的界面评价信息集合，对初始前端应用界面集合中的初始前端应用界面进行排序，得到候选前端应用界面序列。

发送模块，用于将候选前端应用界面序列中处于目标位置的候选前端应用界面，作为初始前端应用界面发送至用户端。

优选的，所述前端应用界面生成模型，包括：

整理模块，用于根据前端应用界面信息数据确定前端应用界面程序代码的编写格式，并根据前端应用界面的应用功能，排列整理前端应用界面各功能的使用流程和运行逻辑。

代码设置模块，用于将实现不同功能的代码进行模块化设置，即一个模块代表可以实现一种功能的完整代码，代码模块均储存于模块储存库中，且每个代码模块基于其所能实现的功能添加有标签。

替换模块，用于对代码中可以调整替换的部分加以标注，并对标注部分设置调整项，通过调整项对标注部分加以调整替换，形成无代码的初始前端应用界面集合。

优选的，代码设置模块，包括：

代码提取模块，用于提取待分块的完整代码，并对所述完整代码进行扫描，获取每个代码的执行功能，作为目标执行功能；

代码标识模块，用于当执行功能发生变化时，在目标执行功能对应的代码起始位置和终止位置进行唯一标识的标注，其中，所述唯一标识与所述目标执行功能一一对应；

第一信息提取模块，用于提取每个目标执行功能对应的代码的行数和字符数；

第二信息提取模块，用于提取每个目标执行功能对应代码的数据量；

代码划分评价指数设置模块，用于根据所述每个目标执行功能对应的代码的行数和字符数和所述每个目标执行功能对应代码的数据量设置代码划分评价指数；其中，所述代码划分评价指数通过如下公式获取：

其中，X表示代码划分评价指数；n表示代码的行数；f

第一代码块划分模块，用于当所述目标执行功能对应的代码的代码划分评价指数超过预设的第一指数阈值时，则将所述代码划分评价指数超过预设的第一指数阈值对应的代码划分为一个代码块；

第二代码块划分模块，用于当所述目标执行功能对应的代码的代码划分评价指数没有超过预设的第一指数阈值时，则对所述代码划分评价指数没有超过预设的第一指数阈值对应的目标执行功能进行合并，形成合并后的代码块。

优选的，第二代码块划分模块，包括：

指数数据调取模块，用于调取所有所述代码划分评价指数没有超过预设的第一指数阈值对应的目标执行功能对应的代码划分评价指数，作为目标代码划分评价指数；

集合形成模块，用于将所述目标代码划分评价指数按照从低到高的顺序排列形成指数集合；

综合指数参数获取模块，用于通过指数综合模型对所述指数集合中的目标代码划分评价指数进行综合计算，获得综合指数参数；其中，所述综合指数参数通过如下公式获取：

其中，X

第一代码块综合划分模块，用于将所述综合指数参数与预设的第二指数阈值和第三指数阈值进行比较，当所述综合指数参数超过第二指数阈值且未超过第三指数阈值时，对所述合指数参数超过第二指数阈值且未超过第三指数阈值对应包含的目标代码划分评价指数对应的目标执行功能合并为一个代码块；

第二代码块综合划分模块，用于当所述综合指数参数超过第三指数阈值时，则自动对形成所述综合指数参数所包含的目标代码划分评价指数个数进行调整和剔除，直至所述综合指数参数超过第二指数阈值且未超过第三指数阈值；同时，对所述合指数参数超过第二指数阈值且未超过第三指数阈值对应包含的目标代码划分评价指数对应的目标执行功能合并为一个代码块，并对所述剔除的目标代码划分评价指数合并为一个代码块；

第三代码块综合划分模块，用于当所述综合指数参数未超过第二指数阈值时，则将所述综合指数参数未超过第二指数阈值所对应的代码存储至缓存区，并等待新增代码，直至所述综合指数参数第二指数阈值且未超过第三指数阈值时，对所述合指数参数超过第二指数阈值且未超过第三指数阈值对应包含的目标代码划分评价指数对应的目标执行功能合并为一个代码块。

优选的，所述调整模块，包括：

接收模块，用于接收用户所发送的针对初始前端应用界面的功能调整信息，并将接收的信息发送至第二生成模块。

第二生成模块，根据所接收的初始前端应用界面功能调整信息，结合前端应用界面功能调整信息和前端应用界面生成的需求信息，生成针对初始前端应用界面的更新后的前端应用界面。

优选的，所述优化测试模块，包括：

综合测试模块，用于对生成的前端应用界面进行综合功能测试和功能实现测试，并对测试数据进行储存。

优化处理模块，用于根据测试数据对生成的前端应用界面进行优化，并将优化完成的应用进行可视化展示。

优选的，所述展示模块，包括：

数据获取模块，用于获取待设置的前端应用界面的背景图片，并计算图片的主色，且对主色进行透明度处理得到渐变色。

第一绘制模块，用于利用渐变色填充该图片，将填充后的图片作为前端应用界面的背景图。

选择模块，用于根据预定颜色选取匹配的界面主题模板，其中计算设备中存储有预定颜色与界面主题模板的对应关系。

第二绘制模块，用于根据所选取的界面主题模板设置前端应用界面上控件的界面。

显示模块，用于将第二绘制模块绘制完成的前端应用界面显示在用户终端上。

与现有技术相比，本发明的有益效果是：

本发明通过无代码生成，不仅节约了成本，完成周期短，大大的减少了构建时间和难度，从而大大提高应用开发效率，而且还避免了前端代码冗余，通过对初始前端应用界面的调整，使得生成的最终前端应用界面功能更加完善，使用效果更好，通过对初始前端应用界面进行功能调整，保证了生成的前端应用界面的功能性更加完整，从而加快工作进度，并且能够为后期检测修改提供方便，通过对生成的最终前端应用界面进行测试优化，保证前端应用界面的可行性，通过对前端应用界面的背景进行优化处理后在进行展示，保证了生成的前端应用界面使用的美观性，进一步确保了用户体验感。

附图说明

图1为本发明的一种前端无代码生成应用界面的方法的流程图；

图2为本发明的一种前端无代码生成应用界面的方法的模块示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

为了解决现有的技术在实际使用过程中，通过代码来生成应用界面，成本较高，且完成周期长，大大的增加了构建时间和难度的问题，请参阅图1-图2，本实施例提供以下技术方案：

一种前端无代码生成应用界面的方法，包括以下步骤：

S1：通过接收模块接收前端应用界面生成请求信息，分析前端应用界面生成的生成请求信息，并根据前端应用界面生成请求信息进行规划处理，并对前端应用中界面的操作进行预案设计。

界面生成请求包括运行环境信息和界面需求信息，其中，运行环境信息用于标识前端应用的运行环境，界面需求信息包括页面位置、页面样式、页面大小、内容、动画以及交互方式，通过接收用户的各项需求，在生成前端应用界面时能够更加完善，满足用户的使用需求。

接收模块，包括：

获取模块，用于获取前端应用界面信息数据和前端应用界面生成的需求信息。

模板确定模块，用于接收获取模块所获取的前端应用界面生成的需求信息，确定前端应用界面的模板方案，并将模板方案发送至模板加载模块，首先对前端应用的模板进行确定，在后续前端模板应用界面生成时更加精准，不会出现反复修改的情况，减少了完成周期，提高了工作效率。

模板加载模块，用于接收前端应用界面的模板并对其进行解析，将解析后的模板加载到前端应用界面上，通过接收用户的前端应用界面生成请求信息，并根据接收的信息来生成对应的前端应用界面，能够更好的满足用户的需求，提高了用户的体验感。

S2：在可视程序开发应用程序中，通过前端应用界面生成模块根据用户发出的界面生成请求绘制初始前端应用界面，并将绘制的初始前端应用界面发送至用户端进行确认，通过对初始前端应用界面进行确认，用户根据初始前端应用界面的生成情况提出相应的需求以及修改意见，根据用户提出的需求以及意见做出最终的前端应用界面，保证了生成的前端应用界面能够满足用户的需求。

前端应用界面生成模块，包括：

第一生成模块，用于根据前端应用界面信息数据生成相应的前端应用界面生成模型，结合前端应用界面生成的需求信息，生成初始前端应用界面集合。

前端应用界面生成模型，包括：

整理模块，用于根据前端应用界面信息数据确定前端应用界面程序代码的编写格式，并根据前端应用界面的应用功能，排列整理前端应用界面各功能的使用流程和运行逻辑。

代码设置模块，用于将实现不同功能的代码进行模块化设置，即一个模块代表可以实现一种功能的完整代码，代码模块均储存于模块储存库中，且每个代码模块基于其所能实现的功能添加有标签。

替换模块，用于对代码中可以调整替换的部分加以标注，并对标注部分设置调整项，通过调整项对标注部分加以调整替换，形成无代码的初始前端应用界面集合，避免了前端代码冗余，在生成前端应用界面时，通过无代码生成，节约了成本，完成周期短，大大的减少了构建时间和难度，从而大大提高应用开发效率。

评价模块，用于对于初始前端应用界面集合中的每个初始前端应用界面进行相应的前端应用界面评价，以生成界面评价信息，通过设置评价模块，能够更好的了解初始前端应用界面的生成情况。

排序模块，用于根据得到的界面评价信息集合，对初始前端应用界面集合中的初始前端应用界面进行排序，得到候选前端应用界面序列，根据候选前端应用界面序列选择初始界面终端，使得选择的初始界面终端为评价最高的初始界面终端，生成的初始界面终端更加复合用户的需求，进而提高了用户的体验感。

发送模块，用于将候选前端应用界面序列中处于目标位置的候选前端应用界面，作为初始前端应用界面发送至用户端，通过生成初始前端应用界面，用户根据初始前端应用界面进行相应的调整，保证了生成的前端应用的可靠性。

S3：用户接收初始前端应用界面，并根据初始前端应用界面做出相应的调整，并将调整信息发送至调整模块。

调整模块，包括：

接收模块，用于接收用户所发送的针对初始前端应用界面的功能调整信息，并将接收的信息发送至第二生成模块。

第二生成模块，根据所接收的初始前端应用界面功能调整信息，结合前端应用界面功能调整信息和前端应用界面生成的需求信息，生成针对初始前端应用界面的更新后的前端应用界面，通过对初始前端应用界面的调整，使得生成的最终前端应用界面功能更加完善，使用效果更好。

S4：调整模块接收用户所发送的针对初始前端应用界面的功能调整信息，并结合前端应用界面功能调整信息和前端应用界面生成的需求信息，生成针对初始前端应用界面的更新后的前端应用界面，作为最终前端应用界面，通过对初始前端应用界面进行功能调整，保证了生成的前端应用界面的功能性更加完整，从而加快工作进度，并且能够为后期检测修改提供方便。

S5：将最终前端应用界面发送至优化测试模块，优化测试模块对最终前端应用界面的功能进行测试优化后发送至展示模块。

优化测试模块，包括：

综合测试模块，用于对生成的前端应用界面进行综合功能测试和功能实现测试，并对测试数据进行储存，使得生成的前端应用界面在使用时减少故障的产生，保证了前端应用界面使用的流畅性。

优化处理模块，用于根据测试数据对生成的前端应用界面进行优化，并将优化完成的应用进行可视化展示，通过对生成的最终前端应用界面进行测试优化，保证前端应用界面的可行性。

S6：展示模块对测试优化完成的前端应用界面的展示背景进行最终处理，处理完成后进行展示。

展示模块，包括：

数据获取模块，用于获取待设置的前端应用界面的背景图片，并计算图片的主色，且对主色进行透明度处理得到渐变色。

第一绘制模块，用于利用渐变色填充该图片，将填充后的图片作为前端应用界面的背景图。

选择模块，用于根据预定颜色选取匹配的界面主题模板，其中计算设备中存储有预定颜色与界面主题模板的对应关系。

第二绘制模块，用于根据所选取的界面主题模板设置前端应用界面上控件的界面。

显示模块，用于将第二绘制模块绘制完成的前端应用界面显示在用户终端上，通过对前端应用界面的背景进行优化处理后在进行展示，保证了生成的前端应用界面使用的美观性，进一步确保了用户体验感。

综上所述，本发明的一种前端无代码生成应用界面的方法，用户根据初始前端应用界面的生成情况提出相应的需求以及修改意见，根据用户提出的需求以及意见做出最终的前端应用界面，保证了生成的前端应用界面能够满足用户的需求，通过对初始前端应用界面的调整，使得生成的最终前端应用界面功能更加完善，使用效果更好，通过对生成的前端应用界面进行测试和优化，使得生成的前端应用界面在使用时减少故障的产生，保证了前端应用界面使用的流畅性，保证前端应用界面的可行性，通过调整项对标注部分加以调整替换，形成无代码的初始前端应用界面集合，避免了前端代码冗余，在生成前端应用界面时，通过无代码生成，节约了成本，完成周期短，大大的减少了构建时间和难度，从而大大提高应用开发效率。

同时，本发明的一个实施例，所述代码设置模块，包括：

代码提取模块，用于提取待分块的完整代码，并对所述完整代码进行扫描，获取每个代码的执行功能，作为目标执行功能；

代码标识模块，用于当执行功能发生变化时，在目标执行功能对应的代码起始位置和终止位置进行唯一标识的标注，其中，所述唯一标识与所述目标执行功能一一对应；

第一信息提取模块，用于提取每个目标执行功能对应的代码的行数和字符数；

第二信息提取模块，用于提取每个目标执行功能对应代码的数据量；

代码划分评价指数设置模块，用于根据所述每个目标执行功能对应的代码的行数和字符数和所述每个目标执行功能对应代码的数据量设置代码划分评价指数；其中，所述代码划分评价指数通过如下公式获取：

其中，X表示代码划分评价指数；n表示代码的行数；f

第一代码块划分模块，用于当所述目标执行功能对应的代码的代码划分评价指数超过预设的第一指数阈值时，则将所述代码划分评价指数超过预设的第一指数阈值对应的代码划分为一个代码块；

第二代码块划分模块，用于当所述目标执行功能对应的代码的代码划分评价指数没有超过预设的第一指数阈值时，则对所述代码划分评价指数没有超过预设的第一指数阈值对应的目标执行功能进行合并，形成合并后的代码块。

上述技术方案的技术效果为：代码自动分块：通过代码提取模块，系统能够提取待分块的完整代码，并根据每个代码块的执行功能来进行分块。这有助于将大型代码库划分为更小、可管理的代码块，提高代码的可维护性。

代码标识和唯一标识：系统能够对目标执行功能对应的代码进行标识，并为其唯一标识，这有助于在代码中精确定位和识别特定功能和变化，减少了可能的混淆和错误。

信息提取：第一信息提取模块和第二信息提取模块能够提取关于每个代码块的行数、字符数和数据量的信息，这些信息可用于进一步分析和评估代码块的特征和性能。

代码划分评价指数：通过计算代码划分评价指数，系统可以根据代码块的行数、字符数和数据量来评估代码块的质量。这有助于自动化决定是否应该划分代码块或将它们合并。

自动代码块划分和合并：系统中的第一代码块划分模块和第二代码块划分模块根据代码划分评价指数的阈值，自动决定是否划分代码块或将它们合并。这有助于优化代码的组织和结构。

总体而言，本实施例的上述技术方案的技术效果包括提高了代码的可维护性、可读性和可管理性，减少了代码冗余，提高了代码的结构和组织，有望提高开发人员的工作效率，并减少可能的错误和混淆。这对于大型软件项目的开发和维护可能特别有益。

具体的，第二代码块划分模块，包括：

指数数据调取模块，用于调取所有所述代码划分评价指数没有超过预设的第一指数阈值对应的目标执行功能对应的代码划分评价指数，作为目标代码划分评价指数；

集合形成模块，用于将所述目标代码划分评价指数按照从低到高的顺序排列形成指数集合；

综合指数参数获取模块，用于通过指数综合模型对所述指数集合中的目标代码划分评价指数进行综合计算，获得综合指数参数；其中，所述综合指数参数通过如下公式获取：

其中，X

第一代码块综合划分模块，用于将所述综合指数参数与预设的第二指数阈值和第三指数阈值进行比较，当所述综合指数参数超过第二指数阈值且未超过第三指数阈值时，对所述合指数参数超过第二指数阈值且未超过第三指数阈值对应包含的目标代码划分评价指数对应的目标执行功能合并为一个代码块；

第二代码块综合划分模块，用于当所述综合指数参数超过第三指数阈值时，则自动对形成所述综合指数参数所包含的目标代码划分评价指数个数进行调整和剔除，直至所述综合指数参数超过第二指数阈值且未超过第三指数阈值；同时，对所述合指数参数超过第二指数阈值且未超过第三指数阈值对应包含的目标代码划分评价指数对应的目标执行功能合并为一个代码块，并对所述剔除的目标代码划分评价指数合并为一个代码块；

第三代码块综合划分模块，用于当所述综合指数参数未超过第二指数阈值时，则将所述综合指数参数未超过第二指数阈值所对应的代码存储至缓存区，并等待新增代码，直至所述综合指数参数第二指数阈值且未超过第三指数阈值时，对所述合指数参数超过第二指数阈值且未超过第三指数阈值对应包含的目标代码划分评价指数对应的目标执行功能合并为一个代码块。

上述技术方案的技术效果为：第二代码块划分模块：

综合评估和调整：该模块将目标代码划分评价指数按照从低到高的顺序排列形成指数集合，并通过指数综合模型计算综合指数参数。这有助于对目标代码块进行综合评估，从而更好地确定代码块的质量和组织情况。

自动合并和剔除：模块根据预设的第二指数阈值和第三指数阈值，自动合并或剔除目标执行功能对应的代码块，以优化代码的组织和结构。这可以帮助减少不必要的代码块，提高代码的可读性和维护性。

第一和第三代码块综合划分模块：

存储和等待新增代码：第三代码块综合划分模块将综合指数参数未超过第二指数阈值的代码存储在缓存区，并等待新增代码。这有助于灵活地等待更多的代码以便综合划分，而不强制性地合并代码块。

自动划分和合并：这些模块基于第二指数阈值和第三指数阈值，自动划分和合并目标执行功能对应的代码块。这允许根据综合指数参数的变化自动优化代码的组织，以适应不断变化的需求。

总体而言，本实施例的上述技术方案的技术效果包括提高代码的质量、可维护性和可读性，减少不必要的代码块和混乱，以适应不断变化的需求，从而提高开发人员的工作效率。这些模块有望对大型软件项目的管理和维护产生积极影响。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。

尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。