CN115904377A - 前端页面控制方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请提供一种前端页面控制方法、装置、电子设备及存储介质，该方法先获取前端页面的更新显示请求，更新显示请求携带更新显示需求参数，然后响应于更新显示请求从数据库中获取前端页面的页面配置信息表，页面配置信息表包括前端页面中各显示元素的属性配置信息，根据更新显示需求参数对页面配置信息表中的属性配置信息进行更新，再获取前端页面的页面配置框架，页面配置框架包括前端页面中各显示元素的属性配置框架，并获取页面配置信息表和页面配置框架的调用关系，根据调用关系将更新后的属性配置信息传入属性配置框架中，得到前端页面的页面配置文件，最后基于页面配置文件控制前端页面的更新显示。本申请不需要前端对代码多次编译和发布。

Description

前端页面控制方法、装置、电子设备及存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种前端页面控制方法、装置、电子设备及存储介质。

背景技术

当前系统多采用前后端分离的方案，即前端和后端分别开发和维护，前端页面中各元素的样式排布等属性信息均直接编写在前端代码中，在每次涉及到改动时，都需要在前端代码中进行一次编译、校验和发布，使得前端页面的样式排布和改动的相关操作繁琐，效率较低。

因此，当前的前端页面元素排布和修改过程存在操作繁琐导致效率较低的技术问题，需要改进。

发明内容

本申请实施例提供一种前端页面控制方法、装置、电子设备及存储介质，用以缓解当前的前端页面元素排布和修改过程中操作繁琐导致效率较低的技术问题。

为解决上述技术问题，本申请实施例提供以下技术方案：

本申请提供一种前端页面控制方法，包括：

获取所述前端页面的更新显示请求，所述更新显示请求携带更新显示需求参数；

响应于所述更新显示请求，从数据库中获取所述前端页面的页面配置信息表，所述页面配置信息表包括所述前端页面中各显示元素的属性配置信息，根据所述更新显示需求参数，对所述页面配置信息表中的属性配置信息进行更新；

获取前端页面的页面配置框架，所述页面配置框架包括所述前端页面中各显示元素的属性配置框架，并获取所述页面配置信息表和所述页面配置框架的调用关系，根据所述调用关系，将更新后的所述属性配置信息传入所述属性配置框架中，得到所述前端页面的页面配置文件；

基于所述页面配置文件，控制所述前端页面的更新显示。

同时，本申请实施例还提供了一种前端页面控制装置，包括：

第一获取模块，用于获取所述前端页面的更新显示请求，所述更新显示请求携带更新显示需求参数；

第二获取模块，用于响应于所述更新显示请求，从数据库中获取所述前端页面的页面配置信息表，所述页面配置信息表包括所述前端页面中各显示元素的属性配置信息，根据所述更新显示需求参数，对所述页面配置信息表中的属性配置信息进行更新；

第三获取模块，用于获取前端页面的页面配置框架，所述页面配置框架包括所述前端页面中各显示元素的属性配置框架，并获取所述页面配置信息表和所述页面配置框架的调用关系，根据所述调用关系，将更新后的所述属性配置信息传入所述属性配置框架中，得到所述前端页面的页面配置文件；

控制模块，用于基于所述页面配置文件，控制所述前端页面的更新显示。

本申请还提供一种电子设备，包括存储器和处理器；所述存储器存储有应用程序，所述处理器用于运行所述存储器内的应用程序，以执行上述任一项所述的前端页面控制方法中的步骤。

本申请实施例提供一种计算机可读存储介质，计算机可读存储介质存储有多条指令，指令适于处理器进行加载，以执行上述前端页面控制方法中的步骤。

有益效果：本申请提供一种前端页面控制方法、装置、电子设备及存储介质，该方法先获取前端页面的更新显示请求，更新显示请求携带更新显示需求参数，然后响应于更新显示请求，从数据库中获取前端页面的页面配置信息表，页面配置信息表包括前端页面中各显示元素的属性配置信息，根据更新显示需求参数，对页面配置信息表中的属性配置信息进行更新，再获取前端页面的页面配置框架，页面配置框架包括前端页面中各显示元素的属性配置框架，并获取页面配置信息表和页面配置框架的调用关系，根据调用关系将更新后的属性配置信息传入属性配置框架中，得到前端页面的页面配置文件，最后基于页面配置文件，控制前端页面的更新显示。本申请通过构建前端页面的页面配置框架，同时将各显示元素的属性配置信息以页面配置信息表的形式放入数据库中，当需要对前端页面的样式排布等进行更新时，只需后台管理端从数据库中获取页面配置信息表并对其中的属性配置信息进行更新，不需要对页面配置框架进行修改，基于页面配置框架和更新后的属性配置信息即可生成页面配置文件，基于该页面配置文件即可控制前端页面的更新显示，整个过程仅在后台管理端即可完成，不需要前端对代码进行多次编译和发布，从而简化了前端页面更新的操作流程，效率得到提升。

附图说明

下面结合附图，通过对本申请的具体实施方式详细描述，将使本申请的技术方案及其它有益效果显而易见。

图1是本申请实施例提供的前端页面控制方法的应用场景示意图。

图2为本申请实施例提供的前端页面控制方法的流程示意图。

图3为本申请实施例提供的前端页面的第一示意图。

图4为本申请实施例提供的前端页面的第二示意图。

图5为本申请实施例提供的前端页面控制装置的结构示意图。

图6为本申请实施例提供的电子设备的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请实施例提供一种前端页面控制方法、系统、电子设备和计算机可读存储介质，其中，该前端页面控制装置可以集成在电子设备中，该电子设备可以是服务器，也可以是终端等设备。

请参阅图1，图1为本申请实施例所提供的前端页面控制方法应用的场景示意图，该场景可以包括终端以及服务器，终端之间、服务器之间、以及终端与服务器之间通过各种网关组成的互联网等方式连接通信，该应用场景中包括前端设备11、后台管理端12和数据库13。其中：

后台管理端12先获取前端页面的更新显示请求，更新显示请求携带更新显示需求参数，然后响应于更新显示请求，从数据库13中获取前端页面的页面配置信息表，页面配置信息表包括前端页面中各显示元素的属性配置信息，根据更新显示需求参数，对页面配置信息表中的属性配置信息进行更新，再获取前端页面的页面配置框架，页面配置框架包括前端页面中各显示元素的属性配置框架，并获取页面配置信息表和页面配置框架的调用关系，根据调用关系将更新后的属性配置信息传入属性配置框架中，得到前端页面的页面配置文件，最后基于页面配置文件，控制前端设备11中前端页面11的更新显示。

需要说明的是，图1所示的系统场景示意图仅仅是一个示例，本申请实施例描述的服务器以及场景是为了更加清楚地说明本申请实施例的技术方案，并不构成对于本申请实施例提供的技术方案的限定，本领域普通技术人员可知，随着系统的演变和新业务场景的出现，本申请实施例提供的技术方案对于类似的技术问题，同样适用。以下分别进行详细说明。需说明的是，以下实施例的描述顺序不作为对实施例优选顺序的限定。

在当前的前后端分离方案中，前端页面的控制均由前端来完成，前端页面中各显示元素的样式、排布等属性信息均直接编写在前端代码中，在每次涉及到改动时，都需要在前端代码中进行一次编译、校验和发布，使得前端页面的样式排布和改动的相关操作繁琐，效率较低。为解决这一技术缺陷，本申请提出一种应用于后台管理端的前端页面控制方法，使得前端页面上各显示元素的排布、显示、校验都交给后端来做，前端只负责显示即可。

请参阅图2，图2是本申请实施例提供的前端页面控制方法的流程示意图，该方法具体包括：

S1：获取前端页面的更新显示请求，更新显示请求携带更新显示需求参数。

根据客户的功能需求，需要在前端页面上排布各类型的显示元素，如文字、图片、输入框等，各显示元素显示的内容、显示的限制条件、排布的位置等属性均随着设计需求的不同而不同，如文本框A需要显示“工具”，输入框B输入限制为50个字符，图片C需要置于页面的右下角等。同时，设计完成的前端页面的显示排布也不是永久固定的，而是会随着功能需求的不同而进行更新迭代。当需要更新时，由后台管理端接收前端页面的更新显示请求，更新显示请求携带更新显示需求参数，更新显示需求参数用于表明本次更新需要对哪些显示元素进行更新、以及对这些显示元素具体进行哪些更新。

在一种实施例中，在S1之前，还包括：根据前端页面的显示需求参数，确定前端页面的显示模块分块参数、显示元素排布参数以及显示元素属性参数；根据显示模块分块参数，创建前端页面中各显示模块的第一标识，根据显示元素排布参数，创建每一显示模块中各显示元素的第二标识，根据显示元素属性参数，创建每一显示元素的属性配置框架和属性配置信息；根据目标显示模块的第一标识、目标显示模块内各显示元素的第二标识和属性配置框架，得到目标显示模块的目标模块配置框架；组合所有显示模块的模块配置框架，得到前端页面的页面配置框架。

在本申请实施例中，在前端页面更新之前，需要先对原始版本进行设计。在设计时，先根据前端页面的显示需求参数确定前端页面的显示模块分块参数、显示元素排布参数以及显示元素属性参数，显示需求参数用于表明当前的前端页面需要的外观样式和功能，显示需求参数可以从相关设计图和设计说明中得到。基于该显示需求参数，可以先将前端页面进行模块化排布，即分为多个显示模块，各显示模块可对应不同的功能分区，根据该需求可以确定显示模块分块参数，其包括了显示模块的数量、各显示模型的形状、大小、排布位置等信息。其次，在每个显示模块内，各显示元素需要按照一定的排列规则进行排布，根据该需求可确定显示元素排布参数，其包括在每个显示模块内各显示元素的排布顺序、排布位置等。最后，每个显示元素需要实现不同的功能，不同功能对于显示元素的属性需求也不同，根据该需求可以确定显示元素属性参数，其包括各显示元素的类型、大小、名称、非法录入提示、输入限制、联动关系等各类属性相关信息。

如图3所示，根据显示模块分块参数，可以创建各显示模块的第一标识，如a、b、c、d等，根据显示元素排布参数，可以按照各显示模块内各显示元素的排布顺序创建各显示元素的第二标识，如显示模块a内存在8个显示元素，可依次创建第二标识为1至8，如显示模块b内存在8个显示元素，可依次创建第二标识为1至8，如显示模块c内存在6个显示元素，可依次创建第二标识为1至6，如显示模块d内存在3个显示元素，可依次创建第二标识为1至3。

对于每个显示元素，均根据显示元素属性参数，为其创建属性配置框架和属性配置信息。其中，属性配置框架是指预先设定的格式和语言来表达需要配置哪些属性，如需要配置显示的名称-name、输入框的长度-length、输入框的类型-type、输入框的非法录入提示-propmtIn等，属性配置信息是指这些需要配置的属性的具体值，如具体名称“工具”、具体长度“20”、具体类型“text”等。属性配置框架和属性配置信息在创建后分别进行存储和调用，当需要控制前端页面展示某个显示元素时，先将该显示元素的属性配置框架和属性配置信息进行组合得到完整的配置控制指令，再基于该指令去控制显示元素以属性配置信息中的具体属性去显示。

将上述得到的每个显示模块依次作为目标显示模块，如先将显示模块a作为目标显示模块，显示模块a的第一标识为a，显示模块a中的各显示元素的第二标识分别为1至8，则根据第一标识a和第二标识1，可以确定显示模块a中的唯一显示元素1，将两个标识与显示元素1的属性配置框架进行结合，可以确定显示元素1的唯一框架，即组合第一标识和第二标识可得到显示元素1的属性配置框架的唯一标识。组合8个显示元素的属性配置框架，可得到显示模块a的模块配置框架，也即目标模块配置框架。依次将其他三个显示模块依次作为目标显示模块，得到显示模块b的模块配置框架、显示模块c的模块配置框架以及显示模块c的模块配置框架，组合这四者，可以得到整个前端页面的页面配置框架。

在一种实施例中，根据显示元素属性参数，创建每一显示元素的属性配置框架和属性配置信息的步骤，包括：根据显示元素属性参数，判断各显示模块是否包括联动显示元素；若否，分别创建各独立显示元素的独立属性配置框架和独立属性配置信息；若是，创建联动显示元素中各显示元素的的联动属性配置框架、联动属性配置信息、独立属性配置框架以及独立属性配置信息。

在一些较为简单的场景中，显示元素均为独立显示元素，即对该显示元素执行触发操作后，在同一前端页面中仅对自身产生影响，如独立的输入框、独立的选择框等，无论输入的内容是什么，不会影响其他显示元素的输入或选择内容。而在一些比较复杂的场景中，可能需要设计联动显示元素，联动显示元素包括至少两个相互关联的显示元素，联动显示元素中其中一个显示元素输入或选择的内容，会影响其他显示元素的输入或选择内容。具体地，如图4所示，从左到右分别排布有三个显示元素，均为选择框，分别为省选择框、市选择框和区选择框。省选择框和市选择框相互联动，市选择框依赖省选择框的选择结果来提供不同的选项，如省选择框中选择了“广西”，则市选择框中会提供广西省的“南宁”、“桂林”之类的选项，而如果省选择框中选择了“广东”，则市选择框中会提供广东省中“广州”、“深圳”之类的选项。市选择框和区选择框相互联动，区选择框依赖市选择框的选择结果来提供不同的选项，如市选择框中选择了“广州”，则区选择框中会提供广州市的“越秀”、“天河”之类的选项。

对于独立显示元素，仅需要对其本身的属性进行配置，而对于联动显示元素，则除了需要需要对其本身属性进行配置外，还需要对联动属性也进行。因此，先根据显示元素属性参数判断各显示模块中是否包括联动显示元素，如果不包括，则只需要分别创建各独立显示元素的独立属性配置框架和独立属性配置信息，如果包括，则对于联动显示元素，除了需要创建其中各显示元素的独立属性配置框架和独立属性配置信息外，还需要创建联动属性配置框架和联动属性配置信息，同一显示元素的独立属性配置框架和联动属性配置框架共同形成该显示元素的属性配置框架，同一显示元素的独立属性配置信息和联动属性配置信息共同形成该显示元素的属性配置信息。

在本申请实施例中，在创建显示模块中各显示元素的属性配置框架时，具体可参考如下内容：

<module id＝“x”>--表示当前显示模块的第一标识x

<seq no＝“y”>--表示当前显示元素的第二标识y

<id>name</id>--表示当前显示元素在页面的隐藏id

<name>名称</name>--表示当前显示元素在页面的显示名称

<ld>false<ld>--表示当前显示元素是否支持联动，true为支持，false为不支持

<ld-id></ld-id>--表示被联动显示元素的id

<idValue>{xxx}</idValue>--表示当前显示元素和被联动显示元素关系的json串为{xxx}，如ld为false，则框内的值用于显示

<type>text<type>--表示当前显示元素的类型，text为文本框，select为选择框

<isModify>true</isModify>--表示当前显示元素是否支持修改，true为支持，false为不支持，仅对输入框生效

<length>L</length>--表示当前显示元素的长度为L，L长度可以设置

<type-in></type-in>--表示输入框内容类型，可录入正则表达式进行规则验证

<prompt-in></prompt-in>--表示文本框内显示，用于触发type-in的规则验证提示

<prompt-out></prompt-out>--表示文本框外显示，用于触发type-in的规则验证提示

<visible>true</visible>--表示输入内容是否可见，true为显示，false为隐藏

</seq>

其中，根据“<ld>false<ld>”中间为“false”或者“ture”来决定该属性配置框架中是否包含联动属性配置框架。即，所有显示元素的配置框架均可采用上述规则来进行创建，当“<ld>false<ld>”中间为“false”时，该框架为独立属性配置框架，其中“id”、“name”、联动与否的“false”或者“ture”、“ld-id”、“{xxx}”、类型的“text”或者“select”、是否支持修改的“false”或者“ture”、“L”、输入内容是否可见的“false”或者“ture”、文本框内显示的具体值、文本框外显示的具体值、输入框内容的具体类型等，均为该显示元素的独立属性配置信息。当为“ture”时，该框架同时包括独立属性框架额联动属性配置框架，与联动相关的这部分配置信息：“false”或者“ture”、“ld-id”、“{xxx}”为联动属性配置信息，其他诸如隐藏id、显示名称、类型、是否支持修改等均构成独立属性配置框架和独立属性配置信息。

以图4中显示模块d的显示元素1、显示元素2和显示元素3为例，根5据上述规则创建的属性配置框架和对应的属性配置信息可表示如下：

<module id＝“a”>--表示当前显示模块的第一标识为a

<seq no＝“1”>--表示当前显示元素的第二标识为1

<id>province</id>--表示当前显示元素在页面的隐藏id为province

<name>省</name>--表示当前显示元素在页面的显示名称为省

<ld>false<ld>--表示当前显示元素不支持联动

<ld-id></ld-id>

<idValue>{0100：广东，0200：广西，0300：云南}</idValue>--表示框内显示广东、广西、云南选项

<type>select<type>--表示当前显示元素的类型为选择框5<visible>true</visible>--表示输入内容可见

</seq>

<seq no＝“2”>--表示当前显示元素的第二标识为2

<id>city</id>--表示当前显示元素在页面的隐藏id为city

<name>市</name>--表示当前显示元素在页面的显示名称为市

<ld>true<ld>--表示当前显示元素支持联动

<ld-id>province</ld-id>--表示city随着province的变动而变动

<idValue>{0100：{01001:广州，01002：深圳}，0200：{02001:南宁，02002：桂林}}</idValue>--表示框内提供广州、深圳选项，或者南宁、桂林选项

<type>select<type>--表示当前显示元素的类型为选择框

<visible>true</visible>--表示输入内容可见

</seq>

<seq no＝“3”>--表示当前显示元素的第二标识为3

<id>area</id>--表示当前显示元素在页面的隐藏id为area

<name>区</name>--表示当前显示元素在页面的显示名称为区

<ld>true<ld>--表示当前显示元素支持联动

<ld-id>city</ld-id>--表示area随着city变动而变动

<idValue>{01001：{010010：越秀，010011：天河}，01002：{010020：福田，010021：南山}}</idValue>--表示框内提供越秀、天河选项，或者福田、南山选项

<type>select<type>--表示当前显示元素的类型为选择框

<visible>true</visible>--表示输入内容可见

</seq>

</module>

上述内容包括了属性配置框架和属性配置信息，综合整个页面中所有显示元素的属性配置框架和属性配置信息，可得到页面配置文件，基于该页面配置文件可以控制前端页面的显示。之后，将属性配置框架和属性配置信息分别存储，则所有的属性配置框架形成了页面配置框架，所有的配置属性信息形成了页面配置信息表。页面配置信息表以数据表的形式存储在数据库中，数据表结构如下：

id varchar(50)--用于存放当前显示元素的id

name varchar(100)--用于存放当前显示元素的名称

ld varchar(6)--用于存放联动与否的“ture”或者“false”

ld-id varchar(50)--用于存放被联动显示元素的id

idValue varchar(500)--用于存放当前元素的字符串

type varchar(20)--用于存放当前元素的类型“text”或者“select”

visible varchar(6)--用于存放当前元素的可见性“ture”或者“false”

isModify varchar(6)--用于存放当前元素的可修改性“ture”或者“false”

length varchar(5)--用于存放输入框的长度

type-in varchar(300)--用于存放输入框的内容类型

prompt-in varchar(100)--用于存放文本框内显示的内容

prompt-out varchar(200)--用于存放文本框外显示的内容

其中，括号内的数值用于表示最大限制字符数。对每个显示元素的属性配置信息，均按照上述结构进行分类存储。

在一种实施例中，在得到前端页面的页面配置框架的步骤之后，还包括：根据目标显示模块中各显示元素的属性配置信息，在数据库中生成目标显示模块的目标模块配置信息表；根据目标显示模块的第一标识，创建目标模块配置信息表的第一索引；组合所有显示模块的模块配置信息表，得到前端页面的页面配置信息表。

在上述实施例中，前端页面以模块化的方式进行分区控制，则在数据库中可以将每个显示模块中所有显示元素的属性配置信息存储在一张总表中，作为模块配置信息表，同时根据每个显示模块的第一标识来创建每个模块配置信息表的第一索引，再组合所有模块配置信息表得到页面配置信息表，则后续可以基于该第一索引，迅速查询和定位到某个模块配置信息表，从中获取到有用信息。

在一种实施例中，根据目标显示模块中各显示元素的属性配置信息，在数据库中生成目标显示模块的目标模块配置信息表的步骤，包括：根据目标显示模块中目标显示元素的属性配置信息，在数据库中生成目标显示元素的目标元素配置信息表；根据目标显示元素的第二标识，创建目标元素配置信息表的第二索引；组合目标显示模块中所有显示元素的元素配置信息表，得到目标显示模块的模块配置信息表。

当显示模块中包含的显示元素数量较多时，还可以先得到每个显示元素的元素配置信息表，并根据各显示元素的第二标识来创建各元素配置表的第二索引，再组合得到模块配置信息表，则后续可以基于该第二索引，迅速查询和定位到某个元素配置信息表，从中获取到有用信息。

S2：响应于更新显示请求，从数据库中获取前端页面的页面配置信息表，页面配置信息表包括前端页面中各显示元素的属性配置信息，根据更新显示需求参数，对页面配置信息表中的属性配置信息进行更新。

后台管理端响应于更新显示请求，从数据库中获取预先存储的页面配置信息表，则根据更新显示请求，可以确定需要对哪些显示元素进行更新以及进行什么样的更新，如取消显示模块d中显示元素1和显示元素2的联动关系、将显示元素3的类型从选择框为输入框等，以此为依据在页面配置信息表中找到对应位置进行相应地更新。

S3：获取前端页面的页面配置框架，页面配置框架包括前端页面中各显示元素的属性配置框架，并获取页面配置信息表和页面配置框架的调用关系，根据调用关系，将更新后的属性配置信息传入属性配置框架中，得到前端页面的页面配置文件。

在对页面配置信息表进行更新后，获取预先创建的页面配置框架，页面配置框架和页面配置信息表之间预设有调用关系，该调用关系用于确定框架中各处具体需要调用哪个属性配置信息，则根据该调用关系，可以将更新后的属性配置信息传入属性配置框架中，组合得到页面配置文件。

在一种实施例中，S3具体包括：根据更新显示需求参数，确定待更新显示元素；从数据库中获取页面配置信息表，并对页面配置信息表中待更新显示元素的属性配置信息进行更新。

在每次更新时，通常不需要对每个显示元素进行更新，只需要更新部分，则可以先根据更新显示需求参数，确定哪些显示元素需要更新，然后仅对页面配置信息表中该部分显示元素的属性配置信息进行更新即可，以减小更新数据量，提高效率。

在一种实施例中，从数据库中获取页面配置信息表，并对页面配置信息表中待更新显示元素的属性配置信息进行更新的步骤，包括：获取待更新显示元素所在的待更新显示模块的第一标识、以及待更新显示元素的第二标识；根据第一标识和第一索引，从页面配置信息表中定位待更新显示模块的第一模块配置信息表，根据第二标识和第二索引，从第一模块配置信息表中定位待更新显示元素的第一元素配置信息表；从数据库中获取第一元素配置信息表，并对第一元素配置信息表中待更新显示元素的属性配置信息进行更新。

在上述实施例中，数据库中的页面配置信息表具有第一索引和第二索引，则在需要查找哪些属性配置数据需要更新时，只需要先确定待更新显示元素属于哪个显示模块，获取该显示模块的第一标识以及该显示元素在显示模块中的第二标识，即可根据第一索引和第二索引迅速定位到这些元素配置信息表，然后执行更新操作，进一步提高效率。

S4：基于页面配置文件，控制前端页面的更新显示。

基于该页面配置文件，可以控制前端页面上的各显示元素以更新后的状态进行排布和显示，从而实现了对前端页面的更新显示。

通过上述各实施例可知，本申请的前端页面控制方法，通过构建前端页面的页面配置框架，同时将各显示元素的属性配置信息以页面配置信息表的形式放入数据库中，当需要对前端页面的样式排布等进行更新时，只需后台管理端从数据库中获取页面配置信息表并对其中的属性配置信息进行更新，不需要对页面配置框架进行修改，基于页面配置框架和更新后的属性配置信息即可生成页面配置文件，基于该页面配置文件即可控制前端页面的更新显示，整个过程仅在后台管理端即可完成，不需要前端对代码进行多次编译和发布，从而简化了前端页面更新的操作流程，效率得到提升。

在上述实施例所述方法的基础上，本实施例将从前端页面控制装置的角度进一步进行描述，请参阅图5，前端页面控制装置可以包括：

第一获取模块10，用于获取所述前端页面的更新显示请求，所述更新显示请求携带更新显示需求参数；

第二获取模块20，用于响应于所述更新显示请求，从数据库中获取所述前端页面的页面配置信息表，所述页面配置信息表包括所述前端页面中各显示元素的属性配置信息，根据所述更新显示需求参数，对所述页面配置信息表中的属性配置信息进行更新；

第三获取模块30，用于获取前端页面的页面配置框架，所述页面配置框架包括所述前端页面中各显示元素的属性配置框架，并获取所述页面配置信息表和所述页面配置框架的调用关系，根据所述调用关系，将更新后的所述属性配置信息传入所述属性配置框架中，得到所述前端页面的页面配置文件；

控制模块40，用于基于所述页面配置文件，控制所述前端页面的更新显示。

在一种实施例中，前端页面控制装置还包括：

确定模块，用于根据所述前端页面的显示需求参数，确定所述前端页面的显示模块分块参数、显示元素排布参数以及显示元素属性参数；

第一创建模块，用于根据所述显示模块分块参数，创建所述前端页面中各显示模块的第一标识，根据所述显示元素排布参数，创建每一所述显示模块中各显示元素的第二标识，根据所述显示元素属性参数，创建每一所述显示元素的属性配置框架和属性配置信息；

第一得到模块，用于根据目标显示模块的第一标识、所述目标显示模块内各显示元素的第二标识和属性配置框架，得到所述目标显示模块的目标模块配置框架；

第二得到模块，用于组合所有显示模块的模块配置框架，得到所述前端页面的页面配置框架。

在一种实施例中，第一创建模块包括：

判断子模块，用于根据所述显示元素属性参数，判断各显示模块是否包括联动显示元素；

第一创建子模块，用于若否，分别创建各独立显示元素的独立属性配置框架和独立属性配置信息；

第二创建子模块，用于若是，创建联动显示元素中各显示元素的的联动属性配置框架、联动属性配置信息、独立属性配置框架以及独立属性配置信息。

在一种实施例中，前端页面控制装置还包括：

生成模块，用于根据所述目标显示模块中各显示元素的属性配置信息，在数据库中生成所述目标显示模块的目标模块配置信息表；

第二创建模块，用于根据所述目标显示模块的第一标识，创建所述目标模块配置信息表的第一索引；

第三得到模块，用于组合所有显示模块的模块配置信息表，得到所述前端页面的页面配置信息表。

在一种实施例中，生成模块包括：

生成子模块，用于根据所述目标显示模块中目标显示元素的属性配置信息，在数据库中生成所述目标显示元素的目标元素配置信息表；

第三创建子模块，用于根据所述目标显示元素的第二标识，创建所述目标元素配置信息表的第二索引；

得到子模块，用于组合所述目标显示模块中所有显示元素的元素配置信息表，得到所述目标显示模块的模块配置信息表。

在一种实施例中，第二获取模块20包括：

确定子模块，用于根据所述更新显示需求参数，确定待更新显示元素；

更新子模块，用于从所述数据库中获取所述页面配置信息表，并对所述页面配置信息表中所述待更新显示元素的属性配置信息进行更新。

在一种实施例中，更新子模块包括：

获取单元，用于获取所述待更新显示元素所在的待更新显示模块的第一标识、以及所述待更新显示元素的第二标识；

定位单元，用于根据所述第一标识和所述第一索引，从所述页面配置信息表中定位所述待更新显示模块的第一模块配置信息表，根据所述第二标识和所述第二索引，从所述第一模块配置信息表中定位所述待更新显示元素的第一元素配置信息表；

更新单元，用于从所述数据库中获取所述第一元素配置信息表，并对所述第一元素配置信息表中所述待更新显示元素的属性配置信息进行更新。

区别于现有技术，本申请提供的前端页面控制装置，先获取前端页面的更新显示请求，更新显示请求携带更新显示需求参数，然后响应于更新显示请求，从数据库中获取前端页面的页面配置信息表，页面配置信息表包括前端页面中各显示元素的属性配置信息，根据更新显示需求参数，对页面配置信息表中的属性配置信息进行更新，再获取前端页面的页面配置框架，页面配置框架包括前端页面中各显示元素的属性配置框架，并获取页面配置信息表和页面配置框架的调用关系，根据调用关系将更新后的属性配置信息传入属性配置框架中，得到前端页面的页面配置文件，最后基于页面配置文件，控制前端页面的更新显示。本申请通过构建前端页面的页面配置框架，同时将各显示元素的属性配置信息以页面配置信息表的形式放入数据库中，当需要对前端页面的样式排布等进行更新时，只需后台管理端从数据库中获取页面配置信息表并对其中的属性配置信息进行更新，不需要对页面配置框架进行修改，基于页面配置框架和更新后的属性配置信息即可生成页面配置文件，基于该页面配置文件即可控制前端页面的更新显示，整个过程仅在后台管理端即可完成，不需要前端对代码进行多次编译和发布，从而简化了前端页面更新的操作流程，效率得到提升。

相应的，本申请实施例还提供一种电子设备，如图6所示，该电子设备可以包括射频(RF，Radio Frequency)电路101、包括有一个或一个以上计算机可读存储介质的存储器102、输入单元103、显示单元104、传感器105、音频电路106、WiFi模块107、包括有一个或者一个以上处理核心的处理器108、以及电源109等部件。本领域技术人员可以理解，图6中示出的电子设备结构并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

射频电路101可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，交由一个或者一个以上处理器108处理；另外，将涉及上行的数据发送给基站。存储器102可用于存储软件程序以及模块，处理器108通过运行存储在存储器102的软件程序以及模块，从而执行各种功能应用以及前端页面控制。输入单元103可用于接收输入的数字或字符信息，以及产生与客户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。

显示单元104可用于显示由客户输入的信息或提供给客户的信息以及服务器的各种图形客户接口，这些图形客户接口可以由图形、文本、图标、视频和其任意组合来构成。

电子设备还可包括至少一种传感器105，比如光传感器、运动传感器以及其他传感器。音频电路106包括扬声器，扬声器可提供客户与电子设备之间的音频接口。

WiFi属于短距离无线传输技术，电子设备通过WiFi模块107可以帮助客户收发电子邮件、浏览网页和随访流式媒体等，它为客户提供了无线的宽带互联网随访。虽然图6示出了WiFi模块107，但是可以理解的是，其并不属于电子设备的必须构成，完全可以根据需要在不改变申请的本质的范围内而省略。

处理器108是电子设备的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器102内的软件程序和/或模块，以及调用存储在存储器102内的数据，执行电子设备的各种功能和处理数据，从而对手机进行整体监控。

电子设备还包括给各个部件供电的电源109(比如电池)，优选的，电源可以通过电源管理系统与处理器108逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。

尽管未示出，电子设备还可以包括摄像头、蓝牙模块等，在此不再赘述。具体在本实施例中，服务器中的处理器108会按照如下的指令，将一个或一个以上的应用程序的进程对应的可执行文件加载到存储器102中，并由处理器108来运行存储在存储器102中的应用程序，从而实现以下功能：

获取所述前端页面的更新显示请求，所述更新显示请求携带更新显示需求参数；

响应于所述更新显示请求，从数据库中获取所述前端页面的页面配置信息表，所述页面配置信息表包括所述前端页面中各显示元素的属性配置信息，根据所述更新显示需求参数，对所述页面配置信息表中的属性配置信息进行更新；

获取前端页面的页面配置框架，所述页面配置框架包括所述前端页面中各显示元素的属性配置框架，并获取所述页面配置信息表和所述页面配置框架的调用关系，根据所述调用关系，将更新后的所述属性配置信息传入所述属性配置框架中，得到所述前端页面的页面配置文件；

基于所述页面配置文件，控制所述前端页面的更新显示。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见上文的详细描述，此处不再赘述。

本领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过指令来完成，或通过指令控制相关的硬件来完成，该指令可以存储于一计算机可读存储介质中，并由处理器进行加载和执行。

为此，本申请实施例提供一种计算机可读存储介质，其中存储有多条指令，该指令能够被处理器进行加载，以实现以下功能：

获取所述前端页面的更新显示请求，所述更新显示请求携带更新显示需求参数；

响应于所述更新显示请求，从数据库中获取所述前端页面的页面配置信息表，所述页面配置信息表包括所述前端页面中各显示元素的属性配置信息，根据所述更新显示需求参数，对所述页面配置信息表中的属性配置信息进行更新；

获取前端页面的页面配置框架，所述页面配置框架包括所述前端页面中各显示元素的属性配置框架，并获取所述页面配置信息表和所述页面配置框架的调用关系，根据所述调用关系，将更新后的所述属性配置信息传入所述属性配置框架中，得到所述前端页面的页面配置文件；

基于所述页面配置文件，控制所述前端页面的更新显示。

以上对本申请实施例所提供的一种前端页面控制方法、装置、电子设备和计算机可读存储介质进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的技术方案及其核心思想；本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例的技术方案的范围。

Claims (10)

1.一种前端页面控制方法，其特征在于，所述前端页面控制方法应用于后台管理端，所述前端页面控制方法包括：

获取所述前端页面的更新显示请求，所述更新显示请求携带更新显示需求参数；

响应于所述更新显示请求，从数据库中获取所述前端页面的页面配置信息表，所述页面配置信息表包括所述前端页面中各显示元素的属性配置信息，根据所述更新显示需求参数，对所述页面配置信息表中的属性配置信息进行更新；

获取前端页面的页面配置框架，所述页面配置框架包括所述前端页面中各显示元素的属性配置框架，并获取所述页面配置信息表和所述页面配置框架的调用关系，根据所述调用关系，将更新后的所述属性配置信息传入所述属性配置框架中，得到所述前端页面的页面配置文件；

基于所述页面配置文件，控制所述前端页面的更新显示。

2.根据权利要求1所述的前端页面控制方法，其特征在于，在获取所述前端页面的更新显示请求的步骤之前，还包括：

根据所述前端页面的显示需求参数，确定所述前端页面的显示模块分块参数、显示元素排布参数以及显示元素属性参数；

根据所述显示模块分块参数，创建所述前端页面中各显示模块的第一标识，根据所述显示元素排布参数，创建每一所述显示模块中各显示元素的第二标识，根据所述显示元素属性参数，创建每一所述显示元素的属性配置框架和属性配置信息；

根据目标显示模块的第一标识、所述目标显示模块内各显示元素的第二标识和属性配置框架，得到所述目标显示模块的目标模块配置框架；

组合所有显示模块的模块配置框架，得到所述前端页面的页面配置框架。

3.根据权利要求2所述的前端页面控制方法，其特征在于，根据所述显示元素属性参数，创建每一所述显示元素的属性配置框架和属性配置信息的步骤，包括：

根据所述显示元素属性参数，判断各显示模块是否包括联动显示元素；

若否，分别创建各独立显示元素的独立属性配置框架和独立属性配置信息；

若是，创建联动显示元素中各显示元素的的联动属性配置框架、联动属性配置信息、独立属性配置框架以及独立属性配置信息。

4.根据权利要求2所述的前端页面控制方法，其特征在于，在得到所述前端页面的页面配置框架的步骤之后，还包括：

根据所述目标显示模块中各显示元素的属性配置信息，在数据库中生成所述目标显示模块的目标模块配置信息表；

根据所述目标显示模块的第一标识，创建所述目标模块配置信息表的第一索引；

组合所有显示模块的模块配置信息表，得到所述前端页面的页面配置信息表。

5.根据权利要求3所述的前端页面控制方法，其特征在于，根据所述目标显示模块中各显示元素的属性配置信息，在数据库中生成所述目标显示模块的目标模块配置信息表的步骤，包括：

根据所述目标显示模块中目标显示元素的属性配置信息，在数据库中生成所述目标显示元素的目标元素配置信息表；

根据所述目标显示元素的第二标识，创建所述目标元素配置信息表的第二索引；

组合所述目标显示模块中所有显示元素的元素配置信息表，得到所述目标显示模块的模块配置信息表。

6.根据权利要求5所述的前端页面控制方法，其特征在于，根据所述更新显示需求参数，对所述页面配置信息表中的属性配置信息进行更新的步骤，包括：

根据所述更新显示需求参数，确定待更新显示元素；

从所述数据库中获取所述页面配置信息表，并对所述页面配置信息表中所述待更新显示元素的属性配置信息进行更新。

7.根据权利要求6所述的前端页面控制方法，其特征在于，从所述数据库中获取所述页面配置信息表，并对所述页面配置信息表中所述待更新显示元素的属性配置信息进行更新的步骤，包括：

获取所述待更新显示元素所在的待更新显示模块的第一标识、以及所述待更新显示元素的第二标识；

根据所述第一标识和所述第一索引，从所述页面配置信息表中定位所述待更新显示模块的第一模块配置信息表，根据所述第二标识和所述第二索引，从所述第一模块配置信息表中定位所述待更新显示元素的第一元素配置信息表；

从所述数据库中获取所述第一元素配置信息表，并对所述第一元素配置信息表中所述待更新显示元素的属性配置信息进行更新。

8.一种前端页面控制装置，其特征在于，包括：

第一获取模块，用于获取所述前端页面的更新显示请求，所述更新显示请求携带更新显示需求参数；

第二获取模块，用于响应于所述更新显示请求，从数据库中获取所述前端页面的页面配置信息表，所述页面配置信息表包括所述前端页面中各显示元素的属性配置信息，根据所述更新显示需求参数，对所述页面配置信息表中的属性配置信息进行更新；

第三获取模块，用于获取前端页面的页面配置框架，所述页面配置框架包括所述前端页面中各显示元素的属性配置框架，并获取所述页面配置信息表和所述页面配置框架的调用关系，根据所述调用关系，将更新后的所述属性配置信息传入所述属性配置框架中，得到所述前端页面的页面配置文件；

控制模块，用于基于所述页面配置文件，控制所述前端页面的更新显示。

9.一种电子设备，其特征在于，包括存储器和处理器；所述存储器存储有应用程序，所述处理器用于运行所述存储器内的应用程序，以执行权利要求1至7任一项所述的前端页面控制方法中的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行以实现权利要求1至7任一项所述的前端页面控制方法中的步骤。

Images