前端代码生成方法和前端代码生成装置与流程

本技术涉及软件系统，尤其涉及一种前端代码生成方法和和前端代码生成装置。

背景技术：

1、低代码作为一种快速、高效的开发工具正在被越来越多的开发者所使用，低代码平台提供了图形化的开发方式来进行应用程序界面的设计，具有不同经验水平的开发人员可以通过简单的拖拽组件、属性设置等操作实现界面内容的布局，可帮助减轻开发人员的代码编写压力。

2、低代码平台中，开发者可以基于已有模型简单、直观地在画布中布置组件，但若需要实现自定义需求，完成复杂动态效果，则需要依赖开发者通过代码输入或逻辑编排界面等方式为组件的动态属性编排视图逻辑。

3、这样的方案导致开发者仍然要掌握编程语言的细节，或者至少了解逻辑编排的编码概念，开发门槛仍然较高。

技术实现思路

1、本技术提供了一种前端代码生成方法和前端代码生成装置，用于在低代码页面设计中通过分析数据与页面组件属性之间的关系，自动生成逻辑代码，无需用户维护视图逻辑的细节，可以降低用户开发门槛。

2、本技术的第一方面提供了一种前端代码生成方法，其特征在于，包括：获取用户输入的第一数据和第二数据，所述第一数据用于构建第一场景，所述第一场景中的组件具有第一动态属性，所述第二数据用于构建第二场景，所述第二场景中的所述组件具有第二动态属性；根据所述第一数据与所述第一动态属性的对应关系，以及所述第二数据与所述第二动态属性的对应关系进行数据处理，以获取全量的布尔类型的数据集；根据所述全量的布尔类型的数据集生成逻辑表达式；将所述逻辑表达式转换为逻辑代码，所述逻辑代码与所述组件对应的代码共同用于运行应用运行。

3、本技术提供的前端代码生成方法，前端代码生成装置获取用户输入的用于构建场景的数据，并基于数据与动态属性的关联关系进行数据处理获取全量的布尔类型的数据集，布尔类型的数据是指取值为布尔值的数据，由于布尔值是“真”或“假”中的一个，因而全量的布尔类型的数据集易于转换为逻辑表达式，进而生成逻辑代码，该逻辑代码和组件对应的预设代码可以打包在终端设备运行，根据运行时的数据不同，前端组件会展示不同场景下的动态效果。该方法通过自动生成逻辑代码，完成用户自定义的多样化功能，无需用户维护视图逻辑的细节，可以有效降低开发门槛。

4、在一种可能的实现方式中，在显示界面中显示场景编辑区，用户在该场景编辑区可以输入与场景相关的数据。

5、在第一方面的一种可能的实现方式中，所述第一数据和所述第二数据均为布尔类型的数据。

6、本技术提供的前端代码生成方法，对于用户输入数据的类型的包容度较高，因此可以降低对用户的专业度要求。在一种可能的实现方式中，用户输入的第一数据和第二数据可以都为布尔类型的数据，该类数据可以枚举，易于获取全量取值场景。

7、在第一方面的一种可能的实现方式中，所述第一数据为非布尔类型的数据；在所述前端代码生成装置根据所述第一数据与所述第一动态属性的对应关系，以及所述第二数据与所述第二动态属性的对应关系进行数据处理之前，所述方法还包括：将所述第一数据转换为布尔类型的数据。

8、在第一方面的一种可能的实现方式中，所述非布尔类型的数据包括：非布尔类型的可枚举数据；所述将所述第一数据转换为布尔类型的数据包括：将所述第一数据转换为无限区间内的区间数据；将所述区间数据转换为布尔类型的第一数据。

9、在另一种可能的实现方式中，用户输入的第一数据可能为非布尔类型的可枚举数据，例如第一数据包括：环境亮度值为400流明，灯泡组件动态属性为开，其中环境亮度值为可变的连续值，不属于布尔类型的数据。灯泡组件的动态属性为开或关，即可枚举的。也就是说第一数据为非布尔类型的可枚举数据。在该实现方式中，前端代码生成装置可以将第一数据转换为无限区间内的区间数据，再将区间数据转换为布尔类型的第一数据，在该实现方式中，用户输入的数据可以是连续值，前端代码生成装置可以根据预设算法，例如转换函数，实现连续值的布尔类型转换。本技术方案支持用户使用连续值数据来设计视图逻辑，在必须使用连续数值的复杂场景(例如传感器数据读取、统计指标等)下也可以支撑用户的设计，扩展了使用场景，并降低了对用户的专业度要求。

10、在第一方面的一种可能的实现方式中，所述非布尔类型的数据包括非布尔类型的不可枚举数据，且，所述第一数据的值为第一字段类型，所述第二数据的值为第二字段类型；所述将所述第一数据转换为布尔类型的数据包括：基于所述第一字段类型与所述第二字段类型的差异，将所述第一数据转换为布尔类型的第一数据。

11、在第一方面的一种可能的实现方式中，所述第一数据的取值范围包括任意字符串，所述第二数据的值为空。

12、在另一种可能的实现方式中，用户输入的第一数据可能为非布尔类型的不可枚举数据，且第一数据和第二数据取值的字段类型不同。例如，第一数据包括：message字段中存在消息内容，界面组件的动态属性为显示对应的消息内容；第二数据包括：message字段为空，界面组件的动态属性为显示“暂无消息”。这里，其中message字段为可变值，不属于布尔类型的数据。由于消息内容具有不确定性，即界面的动态属性不可枚举。也就是说第一数据为非布尔类型的不可枚举数据。

13、在该实现方式中，考虑到第一数据的值的字段类型与第二数据的值的字段类型的差异，将第一数据和第二数据转换为布尔类型的数据，在该实现方式中，支持开发者结合数据绑定的方式显示动态数据，在前端组件属性不可枚举的场景下(例如直接展示文本或数值数据)，前端代码生成装置可以根据预设算法实现数据的布尔类型转换，大大扩展了可用输入数据的范围，扩展了该前端代码生成方法的使用灵活度，可以满足用户多样化的自定义设计需求。

14、在第一方面的一种可能的实现方式中，根据所述第一数据与所述第一动态属性的对应关系，以及所述第二数据与所述第二动态属性的对应关系进行数据处理包括：根据所述第一数据与所述第一动态属性的对应关系，以及所述第二数据与所述第二动态属性的对应关系进行数据补全，以获取所述全量的布尔类型的数据集。

15、本技术提供的前端代码生成方法，通过获取用户在不同数据下的场景设计，对比不同数据下的低代码页面设计，通过分析数据与页面组件动态属性之间的关系完成数据补全，无需用户维护组件视图逻辑的细节即可自动生成逻辑代码，大大降低了对于用户的技能要求。

16、在第一方面的一种可能的实现方式中，根据所述第一数据与所述第一动态属性的对应关系，以及所述第二数据与所述第二动态属性的对应关系进行数据补全，包括：根据所述第一数据和所述第二数据确定场景数据集，所述场景数据集包括第一数据中的场景数据和所述第二数据中的场景数据；补全所述场景数据集的所有取值场景，和对应所述场景数据集的任一取值场景下所述组件的动态属性，以获取所述全量的布尔类型的数据集，所述全量的布尔类型的数据集包括所述全量取值场景中任一取值场景与所述组件的动态属性的对应关系。

17、本技术提供的前端代码生成方法，提供了数据补全的具体实现方式，首先获取场景数据集，包括第一数据中的场景数据和所述第二数据中的场景数据，即不同场景下变化的属性数据x，获取场景数据集之后，补全场景数据集的所有取值，以获取全量取值场景，请参阅下表。可以发现，除了用户输入的取值场景，通过预设算法补全了部分未全面输入的取值场景，以及对应的组件的动态属性，由此可以获取全量的布尔类型的数据集。

18、在一种可能的实现方式中，前端代码生成装置补全所述场景数据集的所有取值，以获取全量取值场景包括，通过预设算法判断字符串是否为空，或number类型数据是否超过阈值等实现。

19、在另一种可能的实现方式中，补全所述全量取值场景中任一取值场景下所述组件的动态属性可以由用户输入完成，或者由前端代码生成装置自动补全完成。

20、在第一方面的一种可能的实现方式中，所述全量取值场景中的第一取值场景不对应于所述第一动态属性和所述第二动态属性中任意一种动态属性；补全所述场景数据集的所有取值场景，和对应所述场景数据集的任一取值场景下所述组件的动态属性包括：确定所述第一取值场景对应的动态属性为无效。

21、在一种可能的实现方式中，全量取值场景中的部分取值场景(例如第一取值场景)未被用户输入数据覆盖，该部分取值场景下的组件的动态属性无法通过对用户输入数据的分析获取，此时，可以对该部分取值场景下的组件的动态属性进行无效标记，即确定第一取值场景对应的动态属性为无效。在实际应用运行中，随着场景数据的变化，当对应于该第一取值场景时，组件的动态属性为无效，即对于组件的动态属性不进行调整，若原动态属性为“开”，在该第一取值场景下仍然保持“开”，若原动态属性为“关”，则该第一取值场景下仍然保持“关”。

22、在第一方面的一种可能的实现方式中，在根据所述第一数据与所述第一动态属性的对应关系，以及所述第二数据与所述第二动态属性的对应关系进行数据补全之前，所述方法还包括：根据所述第一数据与所述第一动态属性的对应关系，以及所述第二数据与所述第二动态属性的对应关系过滤所述第一数据中与所述第一动态属性无关的部分数据，并过滤所述第二数据中与所述第二动态属性无关的部分数据。

23、本技术提供的前端代码生成方法，在数据补全之前，过滤出导致在不同场景下变化的属性y以及导致属性变化的数据x。即场景数据集中仅包括与组件的动态属性有关的变量。

24、在第一方面的一种可能的实现方式中，根据所述全量的布尔类型的数据集生成逻辑表达式包括：将所述全量的布尔类型的数据集输入求解算法，输出所述逻辑表达式。

25、本技术提供的前端代码生成方法，在获得了全量的布尔类型的数据集之后，满足数据集的表达式为y＝f(x)，用求解器算法对f进行解算，得到逻辑表达式。

26、在第一方面的一种可能的实现方式中，所述求解算法包括决策树算法或静态表算法。

27、在一种可能的实现方式中，前端代码生成装置根据决策树算法或静态表算法求解逻辑表达式。

28、在第一方面的一种可能的实现方式中，所述方法还包括：根据所述逻辑代码以及所述组件对应的代码运行应用。

29、本技术提供的前端代码生成方法，生成的逻辑代码与其他组件对应的前端代码一起打包至终端设备上运行，当设备运行的数据值发生变化时，应用前端展示效果会和开发者在进行场景编辑时的设计保持一致。通过本方法提供的低代码设计工具，用户可以在设计前端页面时直接表达视图逻辑，让页面根据数据的不同展示动态效果。

30、本技术的第二方面提供了一种前端代码生成装置，包括：编辑器模块，用于获取用户输入的第一数据和第二数据，所述第一数据用于构建第一场景，所述第一场景中的组件具有第一动态属性，所述第二数据用于构建第二场景，所述第二场景中的所述组件具有第二动态属性；数据处理模块，用于根据所述第一数据与所述第一动态属性的对应关系，以及所述第二数据与所述第二动态属性的对应关系进行数据处理，以获取全量的布尔类型的数据集；表达式求解模块，用于根据所述全量的布尔类型的数据集生成逻辑表达式；逻辑代码生成模块，用于将所述逻辑表达式转换为逻辑代码，所述逻辑代码与所述组件对应的代码共同用于运行应用。

31、在第二方面的一种可能的实现方式中，所述第一数据和所述第二数据均为布尔类型的数据。

32、在第二方面的一种可能的实现方式中，所述第一数据为非布尔类型的数据；所述数据处理模块还用于：将所述第一数据转换为布尔类型的数据。

33、在第二方面的一种可能的实现方式中，所述非布尔类型的数据包括：非布尔类型的可枚举数据；所述数据处理模块，具体用于：将所述第一数据转换为无限区间内的区间数据；将所述区间数据转换为布尔类型的第一数据。

34、在第二方面的一种可能的实现方式中，所述非布尔类型的数据包括非布尔类型的不可枚举数据，且，所述第一数据的值为第一字段类型，所述第二数据的值为第二字段类型；所述数据处理模块，具体用于：基于所述第一字段类型与所述第二字段类型的差异，将所述第一数据和所述第二数据转换为布尔类型的数据。

35、在第二方面的一种可能的实现方式中，所述第一数据的取值范围包括任意字符串，所述第二数据的值为空。

36、在第二方面的一种可能的实现方式中，所述数据处理模块具体用于：根据所述第一数据与所述第一动态属性的对应关系，以及所述第二数据与所述第二动态属性的对应关系进行数据补全，以获取所述全量的布尔类型的数据集。

37、在第二方面的一种可能的实现方式中，所述数据处理模块，具体用于：根据所述第一数据和所述第二数据确定场景数据集，所述场景数据集包括第一数据中的场景数据和所述第二数据中的场景数据；补全所述场景数据集的所有取值场景，和对应所述场景数据集的任一取值场景下所述组件的动态属性，以获取所述全量的布尔类型的数据集，所述全量的布尔类型的数据集包括所述全量取值场景中任一取值场景与所述组件的动态属性的对应关系。

38、在第二方面的一种可能的实现方式中，所述全量取值场景中的第一取值场景不对应于所述第一动态属性和所述第二动态属性中任意一种动态属性；所述数据处理模块，还用于：确定所述第一取值场景对应的动态属性为无效。

39、在第二方面的一种可能的实现方式中，所述数据处理模块还用于：根据所述第一数据与所述第一动态属性的对应关系，以及所述第二数据与所述第二动态属性的对应关系过滤所述第一数据中与所述第一动态属性无关的部分数据，并过滤所述第二数据中与所述第二动态属性无关的部分数据。

40、在第二方面的一种可能的实现方式中，所述表达式求解模块，具体用于：将所述全量的布尔类型的数据集输入求解算法，输出所述逻辑表达式。

41、在第二方面的一种可能的实现方式中，所述求解算法包括决策树算法或静态表算法。

42、在第二方面的一种可能的实现方式中，所述装置还包括：数据发送模块，用于向终端设备发送所述逻辑代码以及所述组件对应的代码，所述逻辑代码以及所述组件对应的代码用于所述终端设备的应用运行。

43、本技术第三方面提供了一种前端代码生成装置，包括：存储器，所述存储器中存储有计算机可读指令；与所述存储器相连的处理器，所述计算机可读指令被所述处理器执行时，使得所述前端代码生成装置实现如上述第一方面以及各种可能的实现方式中任一项所述的方法。

44、本技术第四方面提供了计算机程序产品，包括计算机可读指令，当所述计算机可读指令在计算机上运行时，使得所述计算机执行如上述第一方面以及各种可能的实现方式中任一项所述的方法。

45、本技术第五方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在计算机上运行时，使得计算机执行如上述第一方面以及各种可能的实现方式中任一项所述的方法。

46、本技术第六方面提供了一种芯片，包括处理器。处理器用于读取并执行存储器中存储的计算机程序，以执行上述任一方面任意可能的实现方式中的方法。可选地，该芯片该包括存储器，该存储器与该处理器通过电路或电线与存储器连接。进一步可选地，该芯片还包括通信接口，处理器与该通信接口连接。通信接口用于接收需要处理的数据和/或信息，处理器从该通信接口获取该数据和/或信息，并对该数据和/或信息进行处理，并通过该通信接口输出处理结果。该通信接口可以是输入输出接口。

47、本技术第七方面提供了一种通信系统，包括前端代码生成装置和终端设备，该前端代码生成装置用于执行如上述第一方面以及各种可能的实现方式中任一项所述的方法，该终端设备用于获取代码并运行应用。

48、其中，第二方面、第三方面、第四方面、第五方面、第六方面或第七方面以及其中任一种实现方式所带来的技术效果可参见第一方面中相应实现方式所带来的技术效果，此处不再赘述。

49、本技术提供的前端代码生成方法，通过自动分析用户的页面设计，自动生成对应逻辑代码，无需用户手动实现逻辑，提高了低代码平台的实用性，可以有效降低开发门槛。

50、相较通过代码实现视图逻辑，要求用户掌握编程语言细节的方案，本方案可以降低前端代码生成过程中对用户的专业度要求。

51、相较提供逻辑编排的交互界面的方案，用户基于基本的逻辑元素编排视图逻辑，需要用户学习并掌握分支、循环、函数等逻辑概念，本方案可以进一步降低对开发人员的专业度要求，并减少工作量。

52、相较基于内置视图逻辑的组件直接生成代码的方案，需要针对特定应用领域预设模型，成本较高，功能单一，而本方案可以降低维护模型的成本，满足用户自定义的需求，灵活度较高。

53、此外，本技术的前端代码生成方法可以复用低代码工具原有的前端设计功能，使得开发者可以高效表达需求，提高低代码工具生成应用的质量。