CN112287255A - 页面构建方法及装置、计算设备、计算机可读存储介质 - Google Patents

Abstract

一种页面构建方法及装置、计算设备、计算机可读存储介质，所述页面构建方法包括：获取选择的所有元素以及第一页面配置信息；调取各元素的HTML文件，所述HTML文件记录有元素的样式配置信息、文档对象模型配置信息以及交互逻辑配置脚本；根据所述各元素的HTML文件以及所述第一页面配置信息，渲染得到页面；其中，所述第一页面配置信息包括：各元素在所述页面中的布局信息。上述方案，能够提供一种新型的页面构建方式。

Description

页面构建方法及装置、计算设备、计算机可读存储介质

技术领域

本发明实施例涉及页面构建领域，尤其涉及一种页面构建方法及装置、计算设备、计算机可读存储介质。

背景技术

在一些应用场景中，通常需要在一个页面中显示多个视图，也即页面多视图。目前通常采用如下方式进行页面构建：

方式一、通过网页嵌套iframe内联框架多页面视图方式。具体而言，iframe规定一个内联框架，一个内联框架被用来在当前HTML文档中嵌入另一个完整的符合w3c规范的文档对象模型(Document Object Model，简称DOM)，从而渲染出页面内容。也即在同一个页面中加入多个iframe标签并且引用不同超文本标记语言(Hyper Text Markup Language，HTML)文档方式实现页面多视图效果。

方式二、通过视图引擎方式实现。视图引擎是一种允许向网页中嵌入基于服务器的代码的标记语法，当网页被写入浏览器时，基于服务器的代码能够创建动态页面内容或者渲染HTML页面片段实现视图的展示。

然而，上述方式一，需要基于iframe构建页面多视图，还须载入完整的HTML页面路径，此外，内联框架过多会增加服务器的http请求，以及引起在移动端应用支持效果很差、html5不受支持等问题。而方式二，服务器端视图引擎需要结合后端高级编程语言才能实现，且无法单页面运行、测试、发布。

发明内容

本发明实施例的目标是提供一种新型的页面构建方式。

为解决上述技术问题，本发明实施例提供一种页面构建方法，包括：获取选择的所有元素以及第一页面配置信息；调取各元素的HTML文件，所述HTML文件记录有元素的样式配置信息、文档对象模型配置信息以及交互逻辑配置脚本；根据所述各元素的HTML文件以及所述第一页面配置信息，渲染得到页面；其中，所述第一页面配置信息包括：各元素在所述页面中的布局信息。

可选的，所述根据所述各元素的HTML文件以及所述第一页面配置信息，渲染得到页面，包括：根据所述各元素的HTML文件，得到所述各元素的待呈现内容；根据所述各元素在所述页面中的布局信息，将各元素的待呈现内容分别呈现在页面对应的位置处，并渲染得到所述页面。

可选的，所述第一页面配置信息还包括：所述元素的可视化权限信息，所述根据所述各元素在所述页面中的位置信息，将各元素的待呈现内容分别呈现在页面对应的位置处，包括：根据所述元素的可视化权限信息，获取待呈现内容可呈现的元素；根据所各元素在所述页面中的位置信息，将待呈现内容可呈现的元素的待呈现内容分别呈现在页面对应的位置处；其中，所述元素的可视化权限信息用于表征元素的待呈现内容是否可呈现。

可选的，所述页面构建方法还包括：在渲染得到页面之后，创建所述页面对应的调用模块，并将所述页面添加至页面库。

可选的，所述页面构建方法还包括：获取选择的所有调用模块以及第二页面配置信息；从所述页面库中分别调取各调用模块对应的页面；根据调取的所述各调用模块对应的页面以及所述第二页面配置信息，构建目标页面，其中，所述目标页面由一个或多个所述页面组成；其中，所述第二页面配置信息包括：各调用模块对应的页面在所述目标页面中的布局信息。

可选的，所述元素采用如下方式注册得到：获取所述元素的声明信息，所述元素的声明信息包括：元素的样式配置信息、文档对象模型配置信息以及交互逻辑配置脚本；将所述元素的声明信息封装于所述HTML文件中；建立所述HTML文件与所述元素的标签名称之间的关联；通过Web API接口输入所述元素的配置参数，以完成所述元素的注册，所述元素的配置参数包括：元素标签名称、元素的类。

可选的，所述元素的配置参数还包括：所述元素继承的标签类型。

本发明实施例还提供一种页面构建装置，包括：获取单元，用于获取选择的所有元素以及第一页面配置信息，所述第一页面配置信息包括：各元素在页面中的布局信息；调取单元，用于调取各元素的HTML文件，所述HTML文件记录有元素的样式配置信息、文档对象模型配置信息以及交互逻辑配置脚本；渲染单元，用于根据所述各元素的HTML文件以及所述第一页面配置信息，渲染得到页面。

本发明实施例还提供一种计算设备，包括存储器和处理器，所述存储器上存储有可在所述处理器上运行的计算机程序，所述处理器运行所述计算机程序时执行上述任一种页面构建方法的步骤。

本发明实施例还提供一种计算机可读存储介质，计算机可读存储介质为非易失性存储介质或非瞬态存储介质，其上存储有计算机程序，所述计算机程序被处理器运行时执行上述任一种页面构建方法的步骤。

与现有技术相比，本发明实施例的技术方案具有以下有益效果：

调用选择的各元素的HTML文件，根据各元素的HTML文件以及第一页面配置信息中的各元素在页面中的布局信息，可以渲染得到页面，由于元素的HTML文件记录有元素的样式配置信息、文档对象模型配置信息以及交互逻辑配置脚本，可以使得每个元素均可以单独的运行、测试以及发布，在构建页面时，根据需求选择对应的元素即可，无需依赖iframe内联框架。

附图说明

图1是本发明实施例中的一种页面构建方法的流程图；

图2是本发明实施例中的一种页面构建装置的结构示意图。

具体实施方式

如上所述，采用需要基于iframe构建页面多视图，还须载入完整的HTML页面路径，此外，内联框架过多会增加服务器的http请求，以及引起在移动端应用支持效果很差、html5不受支持等问题。而采用服务器端视图引擎需要结合后端高级编程语言才能实现，且无法单页面运行、测试、发布。

为解决上述问题，在本发明实施例中，调用选择的各元素的HTML文件，根据各元素的HTML文件以及第一页面配置信息中的各元素在页面中的布局信息，可以渲染得到页面，由于元素的HTML文件记录有元素的样式配置信息、文档对象模型配置信息以及交互逻辑配置脚本，可以使得每个元素均可以单独的运行、测试以及发布，在构建页面时，根据需求选择对应的元素即可，无需依赖iframe内联框架，从而也解决了内联框架过多增加服务器的http请求，以及引起在移动端应用支持效果很差、html5不受支持等问题。

为使本发明实施例的上述目的、特征和有益效果能够更为明显易懂，下面结合附图对本发明的具体实施例做详细的说明。

参照图1，给出了本发明实施例中的一种页面构建方法的流程图，具体可以包括如下步骤：

步骤11，获取选择的所有元素以及第一页面配置信息。

在具体实施中，可以通过多种方式获取选择的所有元素，具体可以根据实际应用场景以及实际需求进行选择。

在本发明一实施例中，可以通过可视化界面选择元素。例如，每个元素均具有对应的按键或控件等，通过点击元素对应的按键或者选择元素对应的控件，来选择所需的元素。

在本发明另一实施例中，也可以通过代码输入方式输入选择的元素。

在具体实施中，第一页面配置信息可以包括各元素在页面中的布局信息，第一页面配置信息用于配置各元素在页面中的布局。

在本发明实施例中，各元素在页面中的布局信息可以包括元素的待呈现内容在页面上的位置。

例如，元素的待呈现内容为图表时，元素在页面中的布局信息可以包括图表在页面中呈现位置、呈现大小等。

步骤12，调取各元素的HTML文件。

在具体实施中，每个元素均具有一一对应的HTML文件。HTML文件中记录有元素的样式配置信息、文档对象模型(DOM)配置信息以及交互逻辑配置脚本。可以理解的是，根据实际需求，HTML文件中还可以记录有其他与元素相关的配置信息，此处不再一一举例。

在具体实施中，元素的样式配置信息用于配置元素的待显示样式。例如，待显示内容的类型(表格、输入框、图表等)、显示信息、数据处理、待显示内容的大小、待显示内容的宽度、待显示内容的高度、显示颜色、待显示内容的动作、提示信息、统计内容等。

DOM配置信息也可以称为节点配置信息，用于配置元素的层级结构。元素的层级结构指元素与其他元素的关系，其中，关系可以包括并列关系、父子关系、上下关系等。

交互逻辑配置脚本可以包括选择内容、弹出内容、改变其他元素内容、给指定终端发送消息等。

在具体实施中，在元素的HTML文件中记录有元素的样式配置信息、文档对象模型配置信息以及交互逻辑配置信息，也即将元素运行环境以及运行所需的配置信息均封装在HTML文件中，从而可以使得每个元素均可以单独的进行编排、运行、部署以及调试，可以实现无需依赖内联框架。

步骤13，根据所述各元素的HTML文件以及所述第一页面配置信息，渲染得到页面。

在具体实施中，可以根据各元素的HTML文件，得到各元素的待呈现内容。根据各元素在页面中的布局信息，将元素的待呈现内容分别呈现在页面对应的位置处，并渲染得到页面。

例如，在医院人事一体化管理应用场景中，需要构建基本信息页面，在基本信息页面需要呈现的内容包括：姓名、性别、年龄、籍贯、邮箱、联系方式、住址。需要选择姓名、性别、年龄、籍贯、邮箱、联系方式、住址分别对应的元素。根据所选择的元素的HTML文件得到各元素的待显示内容，结合第一页面配置信息中的各元素在页面中的布局信息，对各元素进行排序，从而可以得到所需的页面。

由上可知，调用选择的各元素的HTML文件，根据各元素的HTML文件以及第一页面配置信息中的各元素在页面中的布局信息，可以渲染得到页面，由于元素的HTML文件记录有元素的样式配置信息、文档对象模型配置信息以及交互逻辑配置脚本，可以使得每个元素均可以单独的运行、测试以及发布，根据需求选择对应的元素既可以实现页面的构建，而无需依赖iframe内联框架。此外，还可以根据需求选择对应的元素，以根据需求对页面进行任意编排。

在具体实施中，第一页面配置信息还可以包括：所述元素的可视化权限信息。元素的可视化权限信息用于表征元素的待呈现内容是否可呈现。待显示内容可呈现的元素，可以在对应的位置处呈现该元素的待显示内容。待显示内容不可呈现的元素，则无法在对应的位置处呈现该元素的待显示内容。

进一步地，在将各元素的待呈现内容分别呈现在页面对应的位置处时，可以根据所述元素的可视化权限信息，获取待呈现内容可呈现的元素；根据所各元素在所述页面中的位置信息，将待呈现内容可呈现的元素的待呈现内容分别呈现在页面对应的位置处。

在具体实施中，元素的可视化权限信息可以与当前创建网页的用户身份相关。

例如，有些元素的待呈现内容仅对设定用户可见，非设定用户则不可见。对于某一元素，当创建网页的用户为设定用户时，则将该元素对应的待呈现内容呈现在对应的位置处。当创建网页的用户不是设定用户时，则不呈现该元素的待呈现内容。

又如，元素的可视化权限信息与审核状态相关，当元素的处于不同审核状态时，元素的可视化权限信息指示的可呈现状态不同。若某一元素的审核状态为审核通过，则该元素的可视化权限信息指示元素的待呈现内容可呈现。若某一元素的审核状态为审核不通过，则该元素的可视化权限信息指示元素的待呈现内容不可呈现。

在具体实施中，在渲染得到页面之后，创建所述页面对应的调用模块，并将所述页面添加至页面库。

例如，在渲染得到基本信息的页面之后，可以创建与基本信息的页面对应的调用模块，调用模块的名称可为基本信息。将基本信息的页面添加至页面库，以供后续使用。

又如，在渲染得到工作经历的页面之后，可以创建与工作经历的页面对应的调用模块，调用模块的名称可以为工作经历。将工作经历的页面添加至页面库，以供后续使用。

在具体实施中，获取选择的所有调用模块以及第二页面配置信息，从所述页面库中分别调取各调用模块对应的页面，根据调取所述各调用模块对应的页面以及所述第二页面配置信息，构建目标页面，其中，所述目标页面由一个或多个所述页面组成。

在具体实施中，第二页面配置信息可以包括各调用模块对应的页面在目标页面中的布局信息。

例如，在医院人事一体化管理应用场景中，目标页面为人事管理页面，为了创建人事管理页面，选择的调用模块包括：基本信息、教育经历、工作经历。分别通过基本信息的调用模块调取基本信息的页面，通过教育经历的调用模块调取教育经历的页面，通过工作经历的调用模块调取工作经历的页面，按照第二页面配置信息中对各个页面的布局信息，将基本信息、教育经历、工作经历的页面分别显示在对应的位置处，渲染得到目标页面。

可以理解的是，也可以适用于其他领域的页面构建，构建目标页面所选择的调用模块也不局限于上述举例，根据需求以及应用场景不同，还可以存在其他类型的调用模块。

在具体实施中，可以根据实际需求拖动目标页面中的页面，也对目标页面中的页面位置进行调整。

在得到页面之后，创建页面对应的调用模块，并将页面存储至页面库，可以实现页面的复用，当后续需要创建页面时，可以通过调用模块从页面库中调取对应的页面，简化页面构建流程，且灵活性较大，便于精简或扩展页面。

在具体实施中，本发明上述实施例提供的元素可以采用如下方式构建得到：

获取元素的声明信息，元素的声明信息可以包括元素的样式配置信息、文档对象模型配置信息以及交互逻辑配置脚本。

在获取到元素的声明信息之后，可以将元素的声明信息封装于HTML文件中，建立HTML文件与元素的标签名称之间的关联。以使得通过元素的标签名称能够调用到该元素的HTML文件。可以理解的是，还可以通过元素的标识信息(ID)与HTML文件建立关联，并通过标签的ID获取元素的HTML文件。

通过Web API接口输入所述元素的配置参数，以完成所述元素的注册，所述元素的配置参数包括：元素标签名称、元素的类。

其中，元素的类指元素的类型。元素的类可以按照元素的功能进行划分，也可以按照结构进行划分，还可以按照其他方式进行划分。

应用程序编程接口(Application Programming Interface，API)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程，此处WebAPI指浏览器提供的一套浏览功能和元素的API(BOM和DOM)。

Web API接口中自定义元素(CustomElements)是Window对象上的一个只读属性，接口返回一个自定义元素注册(CustomElementRegistry)对象的引用，可用于注册新的Custom elements，或者获取之前定义过的自定义元素的信息。

CustomElements属性返回一个CustomElementRegistry对象实例，表示当前窗口的自定义元素注册表。利用CustomElementRegistry.define()方法来定义和注册一个新的自定义元素。

在具体实施中，元素的配置参数还可以包括：所述元素继承的标签类型。可以根据元素的功能需求，选择具有对应功能的元素的标签作为该元素继承的标签。当一个元素继承了某一元素的元素标签之后，则该元素具有所继承的元素的功能。

在具体实施中，在元素注册时，还可以根据需求配置该元素对外开放暴露的属性值和参数等，该元素对外开放暴露的属性值和参数等记录于HTML文件，以使得元素间可以进行通信或交互，以及使得能够在可视化界面上修改元素相关的信息。

上述现有技术中提供的通过网页嵌套iframe内联框架多页面视图方式，也即通过嵌套网页单页面实现。该方式无法修改标签名称，通过多个区域之间统一资源定位符(Uniform Resource Locator，URL)地址，暴露在前端，通过引用的地址来区分不同业务，定义的元素名称语义性比较差。而通过本发明上述实施例提供的方式创建的元素，在元素创建过程中封装和屏蔽了具体业务逻辑细节，且通过Web API接口可以配置元素的标签名称，使得标签拥有良好的语义性、实现元素的复用、便于理解和扩展。

此外，还可以根据实际需求，将一些标志信息、医疗特定领域内容等信息封装于元素的HTML文件中。由于在元素的HTML文件中封装有元素的样式配置信息、文档对象模型配置信息以及交互逻辑配置信息，也即将元素运行环境以及运行所需的配置信息均封装在HTML文件中，从而可以使得每个元素均可以单独的进行编排、运行、部署以及调试，也即每个元素均可以作为一个执行单元，从而使得具有轻量级、语义清晰、兼容性以及定制化的特点。

为了便于本领域技术人员更好的理解和实现本发明实施例，本发明实施例还提供一种页面构建装置。

参照图2，给出了本发明实施例中的一种页面构建装置的结构示意图。页面构建装置20可以包括：

获取单元21，用于获取选择的所有元素以及第一页面配置信息，所述第一页面配置信息包括：各元素在页面中的布局信息；

调取单元22，用于调取各元素的HTML文件，所述HTML文件记录有元素的样式配置信息、文档对象模型配置信息以及交互逻辑配置脚本；

渲染单元23，用于根据所述各元素的HTML文件以及所述第一页面配置信息，渲染得到页面。

在具体实施中，页面构建装置20的具体工作流程及工作原理可以参见本发明上述实施例中提供的页面构建方法的描述，此处不再赘述。

本发明实施例还提供一种计算设备，包括存储器和处理器，所述存储器上存储有可在所述处理器上运行的计算机程序，所述处理器运行所述计算机程序时执行本发明上述任一实施例提供的页面构建方法的步骤。

本发明实施例还提供一种计算机可读存储介质，计算机可读存储介质为非易失性存储介质或非瞬态存储介质，其上存储有计算机程序，所述计算机程序被处理器运行时执行本发明上述任一实施例提供的页面构建方法的步骤。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于任一计算机可读存储介质中，存储介质可以包括：ROM、RAM、磁盘或光盘等。

虽然本发明披露如上，但本发明并非限定于此。任何本领域技术人员，在不脱离本发明的精神和范围内，均可作各种更动与修改，因此本发明的保护范围应当以权利要求所限定的范围为准。

Claims (10)

1.一种页面构建方法，其特征在于，包括：

获取选择的所有元素以及第一页面配置信息；

调取各元素的HTML文件，所述HTML文件记录有元素的样式配置信息、文档对象模型配置信息以及交互逻辑配置脚本；

根据所述各元素的HTML文件以及所述第一页面配置信息，渲染得到页面；

其中，所述第一页面配置信息包括：各元素在所述页面中的布局信息。

2.如权利要求1所述的页面构建方法，其特征在于，所述根据所述各元素的HTML文件以及所述第一页面配置信息，渲染得到页面，包括：

根据所述各元素的HTML文件，得到所述各元素的待呈现内容；

根据所述各元素在所述页面中的布局信息，将各元素的待呈现内容分别呈现在页面对应的位置处，并渲染得到所述页面。

3.如权利要求2所述的页面构建方法，其特征在于，所述第一页面配置信息还包括：所述元素的可视化权限信息，所述根据所述各元素在所述页面中的位置信息，将各元素的待呈现内容分别呈现在页面对应的位置处，包括：

根据所述元素的可视化权限信息，获取待呈现内容可呈现的元素；

根据所各元素在所述页面中的位置信息，将待呈现内容可呈现的元素的待呈现内容分别呈现在页面对应的位置处；

其中，所述元素的可视化权限信息用于表征元素的待呈现内容是否可呈现。

4.如权利要求1至3任一项所述的页面构建方法，其特征在于，还包括：

在渲染得到页面之后，创建所述页面对应的调用模块，并将所述页面添加至页面库。

5.如权利要求4所述的页面构建方法，其特征在于，还包括：

获取选择的所有调用模块以及第二页面配置信息；

从所述页面库中分别调取各调用模块对应的页面；

根据调取的所述各调用模块对应的页面以及所述第二页面配置信息，构建目标页面，其中，所述目标页面由一个或多个所述页面组成；

其中，所述第二页面配置信息包括：各调用模块对应的页面在所述目标页面中的布局信息。

6.如权利要求1所述的页面构建方法，其特征在于，所述元素采用如下方式注册得到：

获取所述元素的声明信息，所述元素的声明信息包括：元素的样式配置信息、文档对象模型配置信息以及交互逻辑配置脚本；

将所述元素的声明信息封装于所述HTML文件中；

建立所述HTML文件与所述元素的标签名称之间的关联；

通过Web API接口输入所述元素的配置参数，以完成所述元素的注册，所述元素的配置参数包括：元素标签名称、元素的类。

7.如权利要求6所述的页面构建方法，其特征在于，所述元素的配置参数还包括：所述元素继承的标签类型。

8.一种页面构建装置，其特征在于，包括：

获取单元，用于获取选择的所有元素以及第一页面配置信息，所述第一页面配置信息包括：各元素在页面中的布局信息；

调取单元，用于调取各元素的HTML文件，所述HTML文件记录有元素的样式配置信息、文档对象模型配置信息以及交互逻辑配置脚本；

渲染单元，用于根据所述各元素的HTML文件以及所述第一页面配置信息，渲染得到页面。

9.一种计算设备，包括存储器和处理器，所述存储器上存储有可在所述处理器上运行的计算机程序，其特征在于，所述处理器运行所述计算机程序时执行权利要求1至7任一项所述的页面构建方法的步骤。

10.一种计算机可读存储介质，计算机可读存储介质为非易失性存储介质或非瞬态存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器运行时执行权利要求1至7任一项所述的页面构建方法的步骤。

Images