一种页面的生成方法及装置技术领域
本申请涉及计算机技术，尤其涉及一种页面的生成方法及装置。
背景技术
在现有技术中，页面的生成方法如下：首先是根据用户需求生成页面效果
图，然后将页面效果图动态化，再由后端开发人员根据动态化的页面前端编写
页面代码文件，最后根据代码文件生成页面。
采用现有技术中的页面的生成方法，在生成页面布局大致相似的大量页面
时，针对每个页面均需要经上述流程来生成，效率低。
发明内容
本申请实施例中提供了一种页面生成方法及装置，用于解决现有技术中的
页面生成方法效率低的问题。
根据本申请实施例中的一个方面，提供了一种页面生成方法，包括：接收
用户提交的页面布局模板、业务组件及各业务组件间的关联信息；根据页面布
局模板、业务组件及各业务组件间的关联信息生成页面的配置文件。
根据本申请实施例中的另一个方面，提供了一种页面生成装置，包括：接
收模块，用于接收用户提交的页面布局模板、业务组件及各业务组件间的关联
信息；配置文件生成模块，用于根据页面布局模板、业务组件及各业务组件间
的关联信息生成页面的配置文件。
采用本申请实施例中的页面生成方法，接收用户提交的页面布局模板、业
务组件及各业务组件间的关联信息，并根据该页面布局模板、业务组件及关联
信息生成页面的配置文件，由于可以根据预先设置的页面布局模板、业务组件
及各业务组件间的关联信息，直接生成页面的配置文件，从而提升了生成页面
的效率。并且，预先设置的页面布局模板、业务组件及各业务组件间的关联信
息，可能被多个页面选择使用，使得多个页面能够重复使用相同的业务组件、
页面布局模板，从而减少了后端开发人员重复开发，提升了效率。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，
本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限
定。在附图中：
图1为本申请实施例一所示的页面生成方法的流程图；
图2为本申请实施例一所示的页面布局模板1的示意图；
图3为本申请实施例一所示的页面布局模板2的示意图；
图4为本申请实施例一所示的页面属性设置界面示意图；
图5是向用户提供预先设置的业务组件的页面示意图；
图6是向用户提供的业务组件设置界面的示意图；
图7是向用户提供的业务组件数据源的选择界面的示意图；
图8是向用户提供预先设置的关联信息的页面示意图；
图9是向用户提供的关联信息设置界面的示意图；
图10是采用图2所示的页面布局模板和多个业务组件生成的页面的示意
图；
图11是向用户提供的业务组件组的设置界面示意图；
图12为本申请实施例二所示页面生成装置的结构示意图。
具体实施方式
为了使本申请实施例中的技术方案及优点更加清楚明白，以下结合附图对
本申请的示例性实施例进行进一步详细的说明，显然，所描述的实施例仅是本
申请的一部分实施例，而不是所有实施例的穷举。需要说明的是，在不冲突的
情况下，本申请中的实施例及实施例中的特征可以相互组合。
针对背景技术中提出的上述问题，本申请实施例中提供了一种页面生成方
法，接收用户提交的页面布局模板、业务组件及各业务组件间的关联信息，并
根据该页面布局模板、业务组件及关联信息生成页面的配置文件，由于可以根
据预先设置的页面布局模板、业务组件及各业务组件间的关联信息，直接生成
页面的配置文件，从而提升了生成页面的效率。
并且，预先设置的页面布局模板、业务组件及各业务组件间的关联信息，
可能被多个页面选择使用，使得多个页面能够重复使用相同的业务组件、页面
布局模板，从而减少了后端开发人员重复开发，提升了效率。
本申请实施例中的方案可以应用于具有多个页面的应用系统中；例如，报
表系统等。
图1为本申请实施例一所示的页面生成方法的流程图。
如图1所示，根据本申请实施例一所示的页面生成方法包括以下步骤：
S102，预先设置多种类型的页面布局模板、业务组件及业务组件间的关联
信息；
S104，向用户提供预先设置的多种类型的页面布局模板、业务组件及业务
组件间的关联信息；
S106，接收用户提交的页面布局模板、业务组件及各业务组件间的关联信
息；
S108，根据页面布局模板、业务组件及关联信息生成页面的配置文件。
在S102的一种具体实施方式中，页面布局模板中可以明确页面上业务组
件的放置顺序和放置位置，也可以仅明确业务组件的放置位置，业务组件的放
置顺序可以由用户来确定，或者按照用户添加组件的顺序依次放置。以下图2
和图3分别给出了页面布局模板的2个示例。
图2为本申请实施例一所示的页面布局模板1的示意图。在图2中，页面
上方依次排列多个小的业务组件，如业务组件1、业务组件2、业务组件3、业
务组件4，下方是一个大的区域，用于放置如表单的业务组件5。
图3为本申请实施例一所示的页面布局模板2的示意图。在图3中，可以
如图所示放置页面中的业务组件1-业务组件7。
在S102的一种具体实施方式中，业务组件可以包括功能组件和数据源；
也可以仅包括功能组件。功能组件可以是文本框，下拉框，日历，分页，查询
按钮，保存按钮等实现某一特定功能的组件；还可以是多个实现某一特定功能
的功能组件相结合形成的实现一组特定功能的新的功能组件；如将文本框与下
拉框组合，将文本框与日历组合等。
在具体实施时，该数据源可以是如货主、库区等数据。不同数据源与同一
功能组件模板相组合，可以生成不同的业务组件。例如，将货主数据与下拉框
相结合，形成货主业务组件；将库区数据与下拉框相结合，形成库区业务组件。
在S102的一种具体实施方式中，各业务组件间的关联信息可以是反映某
两个或某几个业务组件之间的关联关系的信息，例如，业务组件A的数据源变
化引起业务组件B的数据源变化；或者，业务组件A、B的数据源变化引起业
务组件C中数据源的变化等。
在S104的一种具体实施方式中，为便于用户选择，可以通过可视化界面
向用户提供预先设置的多种类型的页面布局模板、业务组件及业务组件间的关
联信息。
在具体实施时，可以通过下拉菜单的形式向用户展示页面布局模板，即，
用户点击页面布局模板对应的下拉框后，在下拉菜单中提供页面布局模板名称
列表供用户选择；还可以以缩略图的形式向用户展示页面布局模板；还可以以
列表的形式向用户展示页面布局模板，并在某一页面布局模板获取焦点后，向
用户提供页面布局模板缩略图；本申请对此均不作限制。
在具体实施时，可以通过下拉菜单的形式向用户展示业务组件，即，用户
点击业务组件对应的下拉框后，在下拉菜单中提供业务组件名称列表供用户选
择；还可以以列表的形式向用户展示业务组件；还可以以列表的形式向用户展
示业务组件，并在某一业务组件获取焦点后，向用户提供业务组件预览图；本
申请对此均不作限制。
在具体实施时，可以通过下拉菜单的形式向用户展示关联信息，即，用户
点击关联信息对应的下拉框后，在下拉菜单中提供关联信息名称列表供用户选
择；还可以以列表的形式向用户展示关联信息；还可以以动态示意图的形式向
用户展示关联信息的效果；本申请对此均不作限制。
在具体实施时，向用户提供的页面布局模板、业务组件及关联信息之间可
以完全解藕，即，页面布局模板、业务组件及关联信息之间可以相互独立，用
户可以按照任意顺序对页面布局模板、业务组件及关联信息进行选择；也可以
预先设置页面布局模板、业务组件及关联信息之间的提供顺序，以便用户可以
按顺序选择和提交。
在具体实施时，还可以设置页面布局模板、业务组件及关联信息之间的对
应关系，例如，可以根据用户选择的页面布局模板向用户提供相应页面布局模
板下的常用业务组件和关联信息，也可以根据用户选择的业务组件和/或关联信
息向用户提供相应的页面布局模板等；本申请对此均不作限制。
在具体实施时，在向用户提供页面布局模板的选择界面时，还可以根据需
要，向用户提供多种页面属性的设置，具体如图4所示。在图4中，在向用户
提供页面布局模板选择的同时，向用户提供页面名称、页面标题、页面编码、
表单名称、所属应用、所属模板、页面类型、页面布局模板、样式、状态、描
述、保存和取消、等设置。用户可以通过“样式”来对该页面布局模板进行微
调，如字体的大小、页面颜色、页面宽度等等；在具体实施时，该样式设置是
通过常用的页面编写代码实现的，例如，(.page{font-size：12px；color：#f00；})。
图5是向用户提供预先设置的业务组件的页面示意图。在该业务组件库中，
保存了多个之前预先设置的业务组件，用户可以直接选中相应的业务组件。在
业务组件较多时，还可以接收用户输入的查询条件以在业务组件库中查询相应
的业务组件。
在具体实施时，还可以根据需要，向用户提供“添加业务组件”的选项，
以便用户对业务组件进行设置。向用户提供的业务组件设置界面可以如图6所
示。在图6中，向用户提供组件名称、表单名称、组件标题、运行环境、状态，
样式、以及组件模板类型的选项。用户可以通过“样式”来对该业务组件进行
微调，如业务组件尺寸等；在具体实施时，该样式设置是通过常用的页面编写
代码实现的，例如，(.page{width：100px；})。
在具体实施时，向用户提供的业务组件数据源的选择界面可以如图7所示。
在图7中，提供了三种路径的数据源的输入方式，例如：通过界面中“http”
对应的输入框输入网络地址以添加网络数据、通过“数据源”对应的输入框输
入本地路径以添加本地数据；或者在界面的“枚举”对应的输入框中以枚举的
形式输入业务组件的数据；用户可以根据自身所需的数据填写或选择相应路径
中的数据源。
在步骤S106的一种具体实施方式中，用户可以通过该可视化界面选择相
应的页面布局模板、业务组件及业务组件间的关联信息。在具体实施时，用户
也可以根据需要自定义页面布局模板、业务组件、关联信息。
在具体实施时，用户可以按照任意顺序对页面布局模板、业务组件及关联
信息进行选择；也可以按照预先设置顺序对页面布局模板、业务组件及关联信
息进行选择。
在S106的一种具体实施方式中，接收用户提交的业务组件具体包括：接
收用户提交的功能组件；接收用户设置的功能组件对应的数据源。
优选地，接收用户提交的各业务组件间的关联信息具体包括：接收用户提
交的关联信息；接收用户提交的关联信息对应的事件、源业务组件和目标业务
组件。优选地，关联信息包括下述至少一种：查询、保存、排序、联动。
在具体实施时，关联信息对应的事件可以是如点击、获取焦点等事件；源
业务组件可以是指该关联信息的主要输入参数对应的业务组件，目标业务组件
可以是关联信息的输出参数对应的业务组件。
例如，关联信息为查询时，对应的事件可以是点击事件，源业务组件可以
是查询条件所对应的业务组件，目标业务组件可以是显示查询结果的业务组件；
关联信息为保存时，对应的事件可以是点击事件，源业务组件可以是待保存的
数据所对应的业务组件，目标业务组件可以是显示已保存数据所对应的业务组
件；关联信息为排序时，对应的事件可以是点击事件，源业务组件可以是待排
序的数据所对应的业务组件，目标业务组件可以是显示已排序数据所对应的业
务组件；关联信息为联动时，对应的事件可以是获取焦点，源业务组件可以是
设置的某一业务组件A，目标业务组件可以是随着业务组件A变化的另一业务
组件B。
在具体实施时，可以将业务组件之间的关联信息称为“动作”。图8示出
了向用户提供预先设置的关联信息(即，动作)的页面示意图。在该动作列表中，
保存了多个之前预先设置的动作，用户可以直接选中相应的动作。在动作较多
时，还可以接收用户输入的查询条件以在动作列表中查询相应的动作。
在具体实施时，还可以向用户提供关联信息设置界面，以供用户对关联信
息对应的事件、源业务组件和目标业务组件进行设置。向用户提供的关联信息
设置界面可以如图9所示。在图9中，向用户提供动作类型、动作名称、源组
件、事件、依赖入参组件、自定义入参、目标组件的选项。源组件即是动作对
应的源业务组件，依赖入参组件是动作的所有输入参数对应的业务组件，目标
组件即是动作对应的目标业务组件。
图10示出了采用图2所示的页面布局模板和多个业务组件生成的页面的
示意图。
在图10中，包括如下多个业务组件：开始时间、结束时间、货主组件、
库区、查询、及显示查询结果的表单。其中，开始时间、结果时间、货主组件、
库区和表单查询为业务组件。开始时间和结果时间组件均由功能组件文本框和
日历，以及相应的日历数据组合而成；货主组件由功能组件文本框和下拉框，
以及对应的货主数据组合而成。库区组件由功能组件文本框和查询，以及对应
的库区数据组合而成。该页面中的关联信息为“查询”，该关联信息对应的事
件为点击事件，对应的源组件为查询业务组件组，对应的依赖入参组件为开始
时间、结果时间、货主组件、库区；目标组件为表单组件。
优选地，接收用户提交的业务组件具体包括：接收用户提交的业务组件组，
其中，业务组件组包括多个业务组件。优选地，在接收用户提交的业务组件组
之后，还包括：接收用户设置的业务组件组的状态。
在具体实施时，用户可以将多个业务组件设置为一个业务组件组。例如，
在图10中，业务组件“结束时间”、“货主”、“开始时间”、“代码”、“状态”、
和“查询”组成“查询条件”业务组件组。
在具体实施时，业务组件组的状态可以包括启用和停用两种状态。提供业
务组件组的状态的设置可以便于用户启用或停用一组业务组件。
在具体实施时，既可以先设置业务组件组，再选择业务组件组中的业务组
件，也可以直接选择业务组件，再将选择的多个业务组件设置为一个业务组件
组，本申请对此均不用限制。
图11示出了向用户提供的业务组件组的设置界面示意图。在图11中，向
用户提供业务组件组(在图11中均简称为“业务组”)名称、业务组标题、业
务组编码、表单名称、所属页面、状态以及描述的选项。
优选地，根据本申请实施例的页面生成方法还包括：将配置文件发送至渲
染引擎，以使渲染引擎根据配置文件渲染生成页面。
在具体实施时，在根据页面布局模板、业务组件及关联信息生成页面的配
置文件之后，可以将该配置文件发送至渲染引擎，由渲染引擎根据该配置文件
生成页面。
在具体实施时，还可以提供将本申请实施例中的页面生成方法应用于多页
面的系统时的设置界面，用户可以通过该设置界面进行页面的生成、某一页面
上的业务组件/业务组件组的添加、设置、删除、预览等。
采用本申请实施例中的页面生成方法，将页面布局模板、业务组件及各业
务组件间的关联信息分开提交，使得多个页面能够重复使用相同的业务组件和
页面布局模板，从而减少了后端开发人员重复开发，提升了效率。
另外，采用本申请实施例中的页面生成方法，将页面布局模板与业务组件
解耦合，使得用户能够直接选择页面中使用的业务组件，降低了前后端开发人
员的联调难度，提升了开发效率。
并且，采用本申请实施例中的页面生成方法，能够实时预览页面生成效果，
便于开发人员查看，提升了用户体验。
基于同一发明构思，本申请实施例中还提供了一种页面生成装置，由于该
装置解决问题的原理与本申请实施例所提供的页面生成方法相似，因此该装置
的实施可以参见方法的实施，重复之处不再赘述。
图12为本申请实施例二所示页面生成装置的结构示意图。
如图12所示，根据本申请实施例二所示的页面生成装置1200，包括：接
收模块1202，用于接收用户提交的页面布局模板、业务组件及各业务组件间的
关联信息；配置文件生成模块1204，用于根据该页面布局模板、业务组件及各
业务组件间的关联信息生成该页面的配置文件。
优选地，根据本申请实施例二所示的页面生成装置还包括：设置模块1206，
用于预先设置多种类型的页面布局模板、业务组件及各业务组件间的关联信息。
优选地，根据本申请实施例二所示的页面生成装置还包括：提供模块1208，
用于向用户提供预先设置的多种类型的页面布局模板、业务组件及业务组件间
的关联信息。
优选地，接收模块具体用于接收用户提交的业务组件组，其中，该业务组
件组包括多个业务组件。
优选地，根据本申请实施例二所示的页面生成装置还包括：状态设置模块，
用于接收用户设置的该业务组件组的状态。
优选地，该业务组件包括功能组件和数据源，接收模块具体用于接收用户
提交的该功能组件，以及接收用户设置的该功能组件对应的数据源。
优选地，接收模块具体用于接收用户提交的关联信息；以及接收用户提交
的该关联信息对应的事件、源业务组件和目标业务组件。
优选地，该关联信息包括下述至少一种：查询、保存、排序、联动。
优选地，根据本申请实施例二所示的页面生成装置还包括：发送模块，用
于将配置文件发送至渲染引擎，以使渲染引擎根据配置文件渲染生成页面。
采用本申请实施例中的页面生成装置，将页面布局模板、业务组件及各业
务组件间的关联信息分开提交，使得多个页面能够重复使用相同的业务组件和
页面布局模板，从而减少了后端开发人员重复开发，提升了效率。
另外，采用本申请实施例中的页面生成装置，将页面布局模板与业务组件
解耦合，使得用户能够直接选择页面中使用的业务组件，降低了前后端开发人
员的联调难度，提升了开发效率。
并且，采用本申请实施例中的页面生成装置，能够实时预览页面生成效果，
便于开发人员查看，提升了用户体验。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计
算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结
合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包
含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、
CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产
品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和
/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/
或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入
式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算
机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一
个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设
备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中
的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个
流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使
得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处
理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个
流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基
本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要
求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。
显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申
请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及
其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。