组件布局方法、装置、计算机设备及存储介质与流程

本技术涉及计算机硬件架构，尤其涉及一种组件布局方法、装置、计算机设备及存储介质。

背景技术：

1、目前，企业为了跟上人工智能、大数据等新兴技术发展的步伐，进行了数字化转型的决策，而数字化转型的核心是数字化技术的应用。数字化技术的应用包括但不限于软件开发技术，但是传统软件开发技术存在周期长、成本高等问题。

2、现有技术中，无代码软件开发技术中多采用单层的数据结构模型，采用数据与组件进行直接映射的方式，能够极大的降低开发周期和开发成本，满足多数企业对应用构建的要求。

3、然而，现有技术中，由于无代码软件开发技术多为单层数据结构，导致组件中无法再嵌套其他组件，使得用户使用时布局难度大，灵活性低。

技术实现思路

1、本技术提供一种组件布局方法、装置、计算机设备及存储介质，用以解决组件中无法再嵌套其他组件，使得用户使用时布局难度大，灵活性低技术问题。

2、第一方面，本技术提供一种组件布局方法，应用于具有显示界面的计算机设备，所述显示界面上有一个布局组件区和业务组件区，包括：

3、响应于用户在所述布局组件区的拖拽操作，从布局组件区中拖拽任一布局组件，其中布局组件中包括横向布局的布局单元和纵向布局的布局单元；

4、响应于用户的添加操作，将所述任一布局组件添加至待显示的移动端界面的任一目标显示区域；

5、针对所述目标显示区域的中的所述任一布局组件中的任一布局单元，响应于用户在业务组件区的拖拽操作，直接添加业务组件；或者，

6、针对所述目标显示区域的中的所述任一布局组件中的任一布局单元，响应于用户在布局组件区的拖拽操作，从布局组件区中拖拽另一布局组件；针对所述目标显示区域中的所述任一布局组件中的任一布局单元，响应于用户在业务组件区的拖拽操作，直接添加业务组件；

7、获取所有所述目标显示区域中各组件对应的渲染引擎，利用所述渲染引擎对各组件进行渲染；

8、设置所述所有的目标显示区域中各组件的交互关系，得到组件布局后的移动端界面；

9、计算所述组件布局后的移动端界面的健康度，根据所述健康度将所述组件布局后的移动端界面推送至推荐界面布局表中。

10、在一种可能的设计中，所述针对所述目标显示区域的中的所述任一布局组件中的任一布局单元，响应于用户在业务组件区的拖拽操作，直接添加业务组件，包括：

11、从所述目标显示区域的中的所述任一布局组件，获取预添加的子索引节点；

12、响应于用户在业务组件区的拖拽操作，在所述预添加的子索引节点处直接添加业务组件。

13、在一种可能的设计中，所述针对所述目标显示区域的中的所述任一布局组件中的任一布局单元，响应于用户在布局组件区的拖拽操作，从布局组件区中拖拽另一布局组件之后，还包括：

14、若所述另一布局组件为横向布局的布局单元，则获取任一布局单元中设置的多个预设等分点；

15、根据所述拖拽操作定位到最近的预设等分点，将所述另一布局组件布局在所述最近的预设等分点的位置。

16、在一种可能的设计中，所述计算所述组件布局后的移动端界面的健康度，包括：

17、获取预设健康度总分；

18、将所述组件布局后的移动端界面与预设的健康度规则表进行对比，获得健康度的扣分；

19、将所述预设健康度总分减去所述健康度的扣分，得到所述组件布局后的移动端界面的健康度。

20、在一种可能的设计中，所述根据所述健康度将所述组件布局后的移动端界面推送至推荐界面布局表中，包括：

21、查询健康度与评分结果的映射表，得出所述健康度对应的所述组件布局后的移动端界面的评分结果；

22、若所述评分结果满足预设评分结果，则将所述组件布局后的移动端界面发送至推荐界面布局表中进行展示。

23、在一种可能的设计中，所述计算所述组件布局后的移动端界面的健康度之后，还包括：

24、将所述组件布局后的移动端界面与所述推荐界面布局表中已有的移动端界面进行相似度的对比；

25、若相似度超过预设值，则不发送所述组件布局后的移动端界面至所述推荐界面布局表。

26、第二方面，本技术提供一种组件布局装置，应用于具有显示界面的计算机设备，所述显示界面上有一个布局组件区和业务组件区，包括：

27、第一拖拽模块：用于响应于用户在所述布局组件区的拖拽操作，从布局组件区中拖拽任一布局组件，其中布局组件中包括横向布局的布局单元和纵向布局的布局单元；

28、添加模块：用于响应于用户的添加操作，将所述任一布局组件添加至待显示的移动端界面的任一目标显示区域；

29、第二拖拽模块：用于针对所述目标显示区域的中的所述任一布局组件中的任一布局单元，响应于用户在业务组件区的拖拽操作，直接添加业务组件；或者，用于针对所述目标显示区域的中的所述任一布局组件中的任一布局单元，响应于用户在布局组件区的拖拽操作，从布局组件区中拖拽另一布局组件；针对所述目标显示区域中的所述任一布局组件中的任一布局单元，响应于用户在业务组件区的拖拽操作，直接添加业务组件；

30、第一获取模块：用于获取所有所述目标显示区域中各组件对应的渲染引擎，利用所述渲染引擎对各组件进行渲染；

31、设置模块：用于设置所述所有的目标显示区域中各组件的交互关系，得到组件布局后的移动端界面；

32、计算模块：用于计算所述组件布局后的移动端界面的健康度，根据所述健康度将所述组件布局后的移动端界面推送至推荐界面布局表中。

33、在一种可能的设计中，所述第二拖拽模块，具体用于：

34、从所述目标显示区域的中的所述任一布局组件，获取预添加的子索引节点；响应于用户在业务组件区的拖拽操作，在所述预添加的子索引节点处直接添加业务组件。

35、第三方面，本技术提供一种计算机设备，包括：处理器，以及与所述处理器通信连接的存储器；所述存储器存储计算机执行指令；所述处理器执行所述存储器存储的计算机执行指令，以实现如上第一方面以及第一方面各种可能的设计所述的组件布局方法。

36、第四方面，本技术提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现如上第一方面以及第一方面各种可能的设计所述的组件布局方法。

37、本技术提供的组件布局方法、装置、计算机设备及存储介质，首先，具有显示界面的计算机设备响应于用户在布局组件区的拖拽操作，从布局组件区中拖拽任一布局组件，再将任一布局组件添加至待显示的移动端界面的任一目标显示区域；其中，在任一布局组件中可以直接添加业务组件或者再拖拽另一布局组件，接着在另一布局组件中添加业务组件，最后对所有组件进行渲染以及设置不同组件间的交互关系，得到组件布局后的移动端界面。实现了组件内可以继续嵌套其他组件的目的，使得用户使用时布局难度小，灵活性高。