[发明专利]多组件的前端界面布局方法、装置、电子设备和存储介质

说明书

本发明的实施例的提供了一种多组件的前端界面布局方法、装置、电子设备和存储介质，该多组件的前端界面布局方法包括：接收界面布局请求，界面布局请求包括请求布局的多个组件以及各组件的组件布局信息；根据各组件的组件布局信息确定多个组件中的父组件以及子组件；基于父组件的组件布局信息生成初始布局界面和与初始布局界面对应的初始界面标识；根据初始界面标识生成子组件的组件标识，基于子组件的组件标识和子组件的组件布局信息在初始布局界面上的基础上生成最终的布局界面。本发明实施例提供的多组件的前端界面布局方法，方法简洁，提高了前端界面的开发效率。

技术领域

本发明涉及计算机技术领域，尤其涉及一种多组件的前端界面布局方法、装置、电子设备和存储介质。

背景技术

随着互联网和计算机技术的迅速发展和移动终端设备的普及，通过移动终端设备处理日常生活中的各种事情已经常态化。随之而来的，越来越多针对移动终端设备的服务业务进入日常生活的各个领域。为适应更多用户对服务业务的要求，使用户能够获得更好的使用体验，对服务业务的前端开发要求也越来越高。其中，前端开发是指创建并编写如服务程序页面、网页等用户界面的过程。但是开发前端界面布局构造是一项非常重要而又繁琐的工作，尤其是在例如金融业许多管理系统的界面布局中，数据项庞大复杂，而且层次嵌套深，如何高效的开发前端界面布局一直是个很大的挑战。

为了解决这种挑战，目前的前端开源框架虽然封装了各种布局组件，比如分割条、多页签等，但布局还是比较复杂，尤其是处理多层次组件的布局嵌套时，代码量非常大，层次太深，可读性较差。因此，如何提高前端界面的开发效率，成为目前界面开发过程中亟待解决的技术问题。

发明内容

本发明提供了一种多组件的前端界面布局方法、装置、电子设备和存储介质，目的在于提供一种减少开发时间，提高前端界面的开发效率的方法、装置、电子设备和存储介质，解决目前在前端界面开发过程中，代码量大导致可读性较差进而开发效率低的技术问题。

第一方面，本发明提供一种多组件的前端界面布局方法，所述方法包括：

接收界面布局请求，所述界面布局请求包括请求布局的多个组件以及各组件的组件布局信息；

根据所述各组件的组件布局信息确定所述多个组件中的父组件以及子组件；

基于所述父组件的组件布局信息生成初始布局界面和与所述初始布局界面对应的初始界面标识；

根据所述初始界面标识生成所述子组件的组件标识，基于所述子组件的组件标识和所述子组件的组件布局信息在所述初始布局界面上的基础上生成最终的布局界面。

在一实施例中，所述根据所述各组件的组件布局信息确定所述多个组件中的父组件以及子组件，包括：

根据所述各组件的组件布局信息，确定待布局界面的布局层级和与所述各组件的组件布局信息对应的组件配置顺序；

根据所述布局层级和所述组件配置顺序确定所述多个组件中的父组件以及子组件。

在一实施例中，所述根据所述各组件的组件布局信息确定所述多个组件中的父组件以及子组件，包括：

基于预设的组件配置数据库，确定与所述组件配置顺序对应的各组件的组件配置信息；

根据所述各组件的组件配置信息生成所述父组件以及子组件。

在一实施例中，所述基于所述父组件的组件布局信息生成初始布局界面和与所述初始布局界面对应的初始界面标识，包括：

基于所述父组件的组件布局信息，从预设的组件配置数据库中确定所述父组件的组件配置信息和组件标识；

根据所述父组件的组件配置信息生成所述初始布局界面；

基于所述父组件的组件标识生成与所述初始布局界面对应的初始界面标识。