CN111399823A

CN111399823A - 页面组件布局方法、系统和前台终端

Info

Publication number: CN111399823A
Application number: CN202010126847.XA
Authority: CN
Inventors: 刘杰
Original assignee: Shandong Inspur Business System Co Ltd
Current assignee: Inspur Software Technology Co Ltd
Priority date: 2020-02-28
Filing date: 2020-02-28
Publication date: 2020-07-10
Anticipated expiration: 2040-02-28
Also published as: CN111399823B

Abstract

本发明提供了页面组件布局方法、系统和前台终端，该页面组件布局方法应用于前台终端，该页面组件布局方法包括：接收来自后台服务器的第一数组，其中，所述第一数组包括有至少一个第一组件代码；针对预先创建的至少两个页面组件中的每一个页面组件，如果所述第一数组中包括有用于标识该页面组件的所述第一组件代码，则将该页面组件确定为目标页面组件；针对每一个所述目标页面组件，根据用于标识该目标页面组件的所述第一组件代码在所述第一数组中的位置，确定该目标页面组件的显示位置；根据各个所述目标页面组件的所述显示位置，将各个所述目标页面组件显示在目标页面中相对应的位置。本方案能够更加便捷地实现用户自定义页面组件的布局。

Description

页面组件布局方法、系统和前台终端

技术领域

本发明涉及计算机技术领域，特别涉及页面组件布局方法、系统和前台终端。

背景技术

VUE是一套用于构建用户界面的渐进式JavaScript框架，是目前软件开发中常用的前端框架之一，使用VUE框架可以实现快速搭建项目，通过前后端分离开发的方式可以大幅提高项目搭建的效率。利用VUE框架所搭建的很多项目都要求个性化定制页面组件，比如利用VUE框架搭建的用户中心，使用者要求根据自己的使用习惯将页面中各页面组件摆放成所需的布局。

为了在利用VUE框架所搭建项目中用户能够自定义页面组件的布局，目前采用的方式是在所搭建项目中引入其他插件，通过所引入的插件使得用户可以自定义页面组件的布局。

针对目前使用户能够在利用VUE框架所搭建项目中自定义页面组件的布局，需要在所搭建的项目中引入大量的其他插件，这就需要前台人员编写大量代码才能实现，还需要后台人员进行配合，实现过程较为复杂。

发明内容

本发明实施例提供了页面组件布局方法、系统和前台终端，能够更加便捷地实现用户自定义页面组件的布局。

第一方面，本发明实施例提供了一种页面组件布局方法，应用于前台终端，包括：

接收来自后台服务器的第一数组，其中，所述第一数组包括有至少一个第一组件代码；

针对预先创建的至少两个页面组件中的每一个页面组件，如果所述第一数组中包括有用于标识该页面组件的所述第一组件代码，则将该页面组件确定为目标页面组件；

针对每一个所述目标页面组件，根据用于标识该目标页面组件的所述第一组件代码在所述第一数组中的位置，确定该目标页面组件的显示位置；

根据各个所述目标页面组件的所述显示位置，将各个所述目标页面组件显示在目标页面中相对应的位置。

在第一种可能的实现方式中，结合上述第一方面，在所述根据各个所述目标页面组件的所述显示位置将各个所述目标页面组件显示在目标页面中相对应的位置之后，进一步包括：

监测所述目标页面中所述页面组件的数量和位置是否被调整；

当监测到所述目标页面中所述页面组件的数量或位置被调整后，根据调整后所述目标页面中各个所述页面组件的位置形成第二数组，其中，所述第二数组包括有至少一个第二组件代码，每个所述第二组件代码用于标识调整后所述目标页面中的一个所述页面组件，且各个所述第二组件代码在所述第二数组中的位置用于表征调整后所述目标页面中各个所述页面组件的位置；

将所述第二数组发送给所述后台服务器，以对存储在所述后台服务器上的所述第一数组进行更新。

在第二种可能的实现方式中，结合上述第一种可能的实现方式，对所述目标页面中所述页面组件的数量和位置的调整包括如下操作中的至少一个：

操作一：删除所述目标页面中的至少一个所述页面组件；

操作二：向所述目标页面中添加新的所述页面组件；

操作三：通过拖拽的方式对所述目标页面中的至少一个所述页面组件进行位置调整。

在第三种可能的实现方式中，结合上述第一方面以及第一方面的第一种可能的实现方式和第二种可能的实现方式中的任意一个，在所述接收来自后台服务器的第一数组之前，进一步包括：

获取目标用户的用户信息，其中，所述目标用户为登陆所述前台终端的用户；

将所述用户信息发送给所述后台服务器，以使所述后台服务器根据所述用户信息发送由所述目标用户定义的所述第一数组。

第二方面，本发明实施例还提供了一种前台终端，包括：

一个数组接收模块，用于接收来自后台服务器的第一数组，其中，所述第一数组包括有至少一个第一组件代码；

一个组件匹配模块，用于针对预先创建的至少两个页面组件中的每一个页面组件，如果所述数组接收模块接收到的所述第一数组中包括有用于标识该页面组件的所述第一组件代码，则将该页面组件确定为目标页面组件；

一个位置识别模块，用于针对所述组件匹配模块确定出的每一个所述目标页面组件，根据用于标识该目标页面组件的所述第一组件代码在所述第一数组中的位置，确定该目标页面组件的显示位置；

一个页面显示模块，用于根据所述位置识别模块确定出的各个所述目标页面组件的所述显示位置，将各个所述目标页面组件显示在目标页面中相对应的位置。

在第一种可能的实现方式中，结合上述第二方面，该前台终端进一步包括：

一个组件监测模块，用于监测所述页面显示模块显示在所述目标页面中的所述页面组件的数量和位置是否被调整；

一个数组形成模块，用于在所述组件监测模块监测到所述目标页面中所述页面组件的数量或位置被调整后，根据调整后所述目标页面中各个所述页面组件的位置形成第二数组，其中，所述第二数组包括有至少一个第二组件代码，每个所述第二组件代码用于标识调整后所述目标页面中的一个所述页面组件，且各个所述第二组件代码在所述第二数组中的位置用于表征调整后所述目标页面中各个所述页面组件的位置；

一个数组发送模块，用于将所述数组形成模块形成的所述第二数组发送给所述后台服务器，以对存储在所述后台服务器上的所述第一数组进行更新。

在第二种可能的实现方式中，结合上述第一种可能的实现方式，所述组件监测模块用于监测是否针对所述目标页面中的所述页面组件执行如下操作中的至少一个：

操作一：删除所述目标页面中的至少一个所述页面组件；

操作二：向所述目标页面中添加新的所述页面组件；

在第三种可能的实现方式中，结合上述第二方面以及第二方面的第一种可能的实现方式和第二种可能的实现方式中的任意一个，该前台终端进一步包括：

一个用户识别模块，用于获取目标用户的用户信息，其中，所述目标用户为登陆所述前台终端的用户；

一个信息发送模块，用于将所述用户识别模块获取到的所述用户信息发送给所述后台服务器，以使所述后台服务器根据所述用户信息将由所述目标用户定义的所述第一数组发送给所述数组接收模块。

第三方面，本发明实施例还提供了一种页面组件布局系统，包括：一个后台服务器和一个上述第二方面或第二方面的任意一种可能的实现方式提供的前台终端；

所述后台服务器，用于当所述前台终端需要显示所述目标页面时，将所述第一数组发送给所述前台终端。

在第一种可能的实现方式中，结合上述第三方面，所述后台服务器进一步用于接收来自所述前台终端的第二数组，并利用所述第二数组对此前存储的所述第一数组进行更新。

由上述技术方案可知，当用户通过前台终端访问目标页面时，前台终端先从后台服务器获取第一数组，之后针对预先创建的每一个页面组件，判断第一数组中是否包括用于标识该页面组件的第一组件代码，如果存在则将该页面组件确定为目标页面组件，之后针对每一个目标页面组件，根据用于标识该目标页面组件的第一组件代码在第一数组中的位置确定该目标页面组件的显示位置，之后根据各个目标页面组件的显示位置将各个目标页面组件显示在目标页面中相对应的位置。由此可见，用户通过修改存储在后台服务器的数组便可以自定义目标页面中页面组件的布局，而后台服务器仅负责存储数组，因此后台人员不需要编写大量代码，从而可以更加便捷地实现用户自定义页面组件布局这一功能。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明一个实施例提供的一种页面组件布局方法的流程图；

图2是本发明一个实施例提供的一种数组更新方法的流程图；

图3是本发明一个实施例提供的一种前台终端所在设备的示意图；

图4是本发明一个实施例提供的一种前台终端的示意图；

图5是本发明一个实施例提供的另一种前台终端的示意图；

图6是本发明一个实施例提供的又一种前台终端的示意图；

图7是本发明一个实施例提供的一种页面组件布局系统的示意图；

图8是本发明一个实施例提供的另一种页面组件布局方法的流程图。

具体实施方式

如前所述，针对于通过VUE框架搭建的项目，为了使用户能够在该项目中自定义页面组件的布局，需要在该项目中引入大量的其他插件，这不仅需要前台人员编写大量的代码，而且还需要后台人员编写大量代码以记录用户的行为，以便用户在下一次访问相同页面时按照用户此前自定义的页面组件布局对页面进行显示，这不仅会增加后台人员的工作量，还导致用户自定义页面组件布局这一功能的实现过程较为复杂。

本发明实施例中，后台服务器会存储第一数组，而第一数组表征了上一次用户访问目标页面时目标页面中页面组件的布局方式，当用户通过前台终端再次访问目标页面时，后台服务器会将第一数组发送给前台终端，前台终端可以根据第一数组所包括的第一组件代码确定需要在目标页面上显示的目标页面组件，前台终端还可以根据第一数组中各个第一组件代码的排列顺序确定各个目标页面组件在目标页面上的显示位置，进而前台终端可以根据各个目标页面组件对应的显示位置将各个目标页面组件显示在目标页面中相对应的位置。由此可见，前台终端仅需根据用户对页面组件布局的需求形成数组，并将所形成的数组发送给后台服务器，而后台服务器仅需对来自前台终端的数组进行存储，并在前台终端下一次显示相同页面时将数组发送给前台终端，由于后台服务器仅负责数组的存储，因此后台人员不需要编写大量代码，从而可以更加便捷地实现用户自定义页面组件布局这一功能。

下面结合附图对本发明实施例提供的页面组件布局方法、系统和前台终端进行详细说明。

如图1所示，本发明一个实施例提供了一种页面组件布局方法，应用于前台终端，该方法可以包括如下步骤：

步骤101：接收来自后台服务器的第一数组，其中，第一数组包括有至少一个第一组件代码；

步骤102：针对预先创建的至少两个页面组件中的每一个页面组件，如果第一数组中包括有用于标识该页面组件的第一组件代码，则将该页面组件确定为目标页面组件；

步骤103：针对每一个目标页面组件，根据用于标识该目标页面组件的第一组件代码在第一数组中的位置，确定该目标页面组件的显示位置；

步骤104：根据各个目标页面组件的显示位置，将各个目标页面组件显示在目标页面中相对应的位置。

在本发明实施例中，当用户通过前台终端访问目标页面时，前台终端先从后台服务器获取第一数组，之后针对预先创建的每一个页面组件，判断第一数组中是否包括用于标识该页面组件的第一组件代码，如果存在则将该页面组件确定为目标页面组件，之后针对每一个目标页面组件，根据用于标识该目标页面组件的第一组件代码在第一数组中的位置确定该目标页面组件的显示位置，之后根据各个目标页面组件的显示位置将各个目标页面组件显示在目标页面中相对应的位置。由此可见，用户通过修改存储在后台服务器的数组便可以自定义目标页面中页面组件的布局，而后台服务器仅负责存储数组，因此后台人员不需要编写大量代码，从而可以更加便捷地实现用户自定义页面组件布局这一功能。

在本发明实施例中，目标页面为利用VUE框架搭建的项目中的用户页面。比如，在利用VUE框架搭建的门户系统中，目标页面为该门户系统中包括多个页面组件的用户页面，用户点击不同的页面组件会跳转至不同的网站或工作系统。

在本发明实施例中，第一数组包括有多个第一组件代码，每一个第一组件代码可以由一个或多个字符组成，组成第一组件代码的字符可以是数字、字母或符号，比如第一数组为12345678，其中数字1至8分别表示8个第一组件代码，再比如第一数组为ABC-DEF-GHI，其中字母组合ABC、DEF和GHI分别表示3个第一组件代码。另外，第一数组由多个第一组件代码顺序组成，每个第一组件代码用于标识一个页面组件，而且不同第一组件代码用于标识不同的页面组件，在第一数组中各个第一组件代码之间的顺序表征了相应页面组件在页面中所处的位置。

在本发明实施例中，第一数组指示了用户上一次访问目标页面时目标页面中各个目标页面组件的布局，当用户再次访问目标页面时，后台服务器将第一数组发送给前台终端，前台终端根据第一数组将各个目标页面组件显示在目标页面中，使得用户本次访问目标页面时目标页面中各页面组件的布局与用户上次访问目标页面时目标页面中各页面组件的布局相同，保证用户每次访问目标页面时都按照用户自定义的布局显示页面组件，保证用户具有较好的使用体验。

可选地，在图1所示页面组件布局方法的基础上，在根据各个目标页面组件的显示位置将各个目标页面组件显示在目标页面中相对应的位置之后，如果用户对目标页面中页面组件的布局进行了调整，则需要对后台服务器存储的第一数组进行更新，以保证用户下一次访问目标页面时目标页面中各页面组件的布局与用户调整后各页面组件的布局相同。如图2所示，对后台服务器中第一数组进行更新可以通过如下步骤实现：

步骤201：检测目标页面中页面组件的数量和位置是否被调整，如果是，执行步骤202，否则执行步骤201；

步骤202：根据调整后目标页面中各个页面组件的位置形成第二数组，其中，第二数组包括有至少一个第二组件代码，每个第二组件代码用于标识调整后目标页面中的一个页面组件，且各个第二组件代码在第二数组中的位置用于表征调整后目标页面中各个页面组件的位置；

步骤203：将第二数组发送给后台服务器，以对存储在后台服务器上的第一数组进行更新。

在本发明实施例中，在显示目标页面之后，可以监测用户是否对目标页面上各个页面组件的布局进行了调整，如果监测到用户对目标页面上各个页面组件的布局进行了调整，则可以根据调整页面组件布局之后目标页面上各个页面组件的布局来形成第二数组，使得第二数组能够指示调整页面组件布局之后目标页面上各个页面组件的布局，并将所形成的第二数组发送给后台服务器，以对后台服务器上存储的第一数组进行更新，使得用户再次访问目标页面时后台服务器可以将第二数组发送给前台终端，使得前台终端按照第二数组显示目标页面中的页面组件。

在本发明实施例中，用户可以对目标页面中页面组件的布局进行调整，前台终端可以监测用户是否对页面组件的布局进行了调整，并可以根据调整后页面组件的布局生成第二数组，并将所形成的第二数组存储到后台服务器替换此前的第一数组，当用户再次访问目标页面时，前台终端可以从后台服务器获取第二数组，并根据第二数组显示目标页面中的页面组件，使得用户可以自定义目标页面中页面组件的布局，并保证用户下一次访问目标页面时目标页面仍然后最后一次操作后的效果，保证用户的使用体验。

可选地，在图2所示数组更新方法的基础上，用户对目标页面中页面组件的数量和位置进行调整时，具体可以对目标页面中的页面组件执行如下操作中的至少一个：

操作一：删除目标页面中的至少一个页面组件；

操作二：向目标页面中添加新的页面组件；

操作三：通过拖拽方式对目标页面中的至少一个页面组件进行位置调整。

在本发明实施例中，用户可以将目标页面中原来的页面组件删除，也可以将目标页面中原来没有的页面组件添加到目标页面中，从而可以根据用户的需求在目标页面中显示用户所需的页面组件，满足不同用户的个性化需求。另外，用户还可以通过拖拽的方式对目标页面中各个页面组件的位置进行调整，以根据自身喜好将各个页面组件排布到目标页面中相对应的位置，从而可以进一步提高用户的使用体验。

在本发明实施例中，当用户向目标页面中添加新的页面组件时，前台终端会根据登陆用户的权限，将登陆用户可以使用的各个页面组件展示给用户，进而用户可以从被展示的各个页面组件中选择一个或多个添加在目标页面中。具有不同权限的用户可以使用的页面组件也不尽相同，通常具有较高权限的用户可以使用的页面组件的数量较多，而具有较低权限的用户可以使用的页面组件的数量较少，用户仅可以从其可以使用的页面组件中选择页面组件添加到页面中进行显示。

根据用户的权限控制用户自定义页面布局过程中可以添加到页面中的页面组件，方便对具有不同权限的用户进行管理，保证项目的安全性。

可选地，在上述各个实施例所提供页面组件布局方法的基础上，在接收来自后台服务器的第一数组之前，可以获取登陆前台终端的目标用户的用户信息，并将所获取到的用户信息发送给后台服务器，以使后台服务器可以根据接收到的用户信息将由目标用户定义的第一数组发送给前台终端。

在本发明实施例中，由于同一项目中的同一个页面可能被多个用户进行访问，而不同用户会根据自身习惯定义页面中页面组件的布局，为了使同一页面的不同用户登录后均能够按照登录用户定义的页面组件布局显示页面，在用户登录前台终端后，前台终端会将登录用户的用户信息发送给后台服务器，后台服务器则可以根据接收到的用户信息将登陆用户定义的数组返回给前台终端，保证前台终端根据所接收到数组显示的页面中页面组件的布局为登陆用户自定义的页面组件布局，从而保证不同用户能够针对统一页面自定义页面组件布局，进一步提高用户的使用体验。

可选地，在上述各个实施例所提供页面组件布局方法的基础上，当用户初次登陆目标页面时，后台服务器可以向前台终端发送不包括组件代码的数组，此时前台终端将按照默认的页面组件布局对目标页面进行显示。

如图3、图4所示，本发明实施例提供了一种前台终端。前台终端实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。从硬件层面而言，如图3所示，为本发明实施例提供的前台终端所在设备的一种硬件结构图，除了图3所示的处理器、内存、网络接口、以及非易失性存储器之外，实施例中装置所在的设备通常还可以包括其他硬件，如负责处理报文的转发芯片等等。以软件实现为例，如图4所示，作为一个逻辑意义上的装置，是通过其所在设备的CPU将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。本实施例提供的前台终端，包括：

一个数组接收模块401，用于接收来自后台服务器的第一数组，其中，第一数组包括有至少一个第一组件代码；

一个组件匹配模块402，用于针对预先创建的至少两个页面组件中的每一个页面组件，如果数组接收模块401接收到的第一数组中包括有用于标识该页面组件的第一组件代码，则将该页面组件确定为目标页面组件；

一个位置识别模块403，用于针对组件匹配模块402确定出的每一个目标页面组件，根据用于标识该目标页面组件的第一组件代码在第一数组中的位置，确定该目标页面组件的显示位置；

一个页面显示模块404，用于根据位置识别模块403确定出的各个目标页面组件的显示位置，将各个目标页面组件显示在目标页面中相对应的位置。

在本发明实施例中，数组接收模块401可用于执行上述方法实施例中的步骤101，组件匹配模块402可用于执行上述方法实施例中的步骤102，位置识别模块403可用于执行上述方法实施例中的步骤103，页面显示模块404可用于执行上述方法实施例中的步骤104。

可选地，在图4所示前台终端的基础上，如图5所示，该前台终端进一步包括：

一个组件监测模块405，用于监测页面显示模块404显示在目标页面中的页面组件的数量和位置是否被调整；

一个数组形成模块406，用于在组件监测模块405监测到目标页面中页面组件的数量或位置被调整后，根据调整后目标页面中各个页面组件的位置形成第二数组，其中，第二数组包括有至少一个第二组件代码，每个第二组件代码用于标识调整后目标页面中的一个页面组件，且各个第二组件代码在第二数组中的位置用于表征调整后目标页面中各个页面组件的位置；

一个数组发送模块407，用于将数组形成模块406形成的第二数组发送给后台服务器，以对存储在后台服务器上的第一数组进行更新。

在本发明实施例中，组件监测模块405可用于执行上述方法实施例中的步骤201，数组形成模块406可用于执行上述方法实施例中的步骤202，数组发送模块407可用于执行上述方法实施例中的步骤203。

可选地，在图5所示前台终端的基础上，组件监测模块405用于监测是否针对目标页面中的页面组件执行如下操作中的至少一个：

操作一：删除目标页面中的至少一个页面组件；

操作二：向目标页面中添加新的页面组件；

操作三：通过拖拽的方式对目标页面中的至少一个页面组件进行位置调整。

可选地，在图4所示前台终端的基础上，如图6所示，该前台终端进一步包括：

一个用户识别模块408，用于获取目标用户的用户信息，其中，目标用户为登陆前台终端的用户；

一个信息发送模块409，用于将用户识别模块获取到的用户信息发送给后台服务器，以使后台服务器根据用户信息将由目标用户定义的第一数组发送给数组接收模块401。

需要说明的是，上述前台终端实施例内的各模块之间的信息交互、执行过程等内容，由于与本发明方法实施例基于同一构思，具体内容可参见本发明方法实施例中的叙述，此处不再赘述。

如图7所示，本发明一个实施例提供了一种页面组件布局系统，包括：一个后台服务器701和一个上述任一实施例所提供的前台终端702；

后台服务器701，用于当前台终端702需要显示目标页面时，将第一数组发送给前台终端。

在本发明实施例中，后台服务器存储有针对目标页面的第一数组，而第一数组可以表征用户上一次登陆目标页面时目标页面中页面组件的布局，当用户在前台终端再次登陆目标页面时，后台服务器将第一数组发送给前台终端，前台终端根据第一数组将各个页面组件显示在目标页面中，使得目标页面中页面组件的布局为用户上一次自定义的页面组件布局，实现用户自定义页面组件布局的功能。由于后台服务器仅负责存储数组，不需要后台人员编写大量代码，从而可以更加便捷地实现用户自定义页面组件布局这一功能。

可选地，在图7所示页面组件布局系统的基础上，当用户对目标页面中页面组件的布局进行调整，而前台终端根据调整之后的页面组件布局形成第二数组，并将第二数组发送给后台服务器后，后台服务器可以对所接收到的第二数组进行存储，并利用第二数组更新之前存储的第一数组。

在本发明实施例中，用户对目标页面中页面组件的布局进行调整后，前台终端可以根据调整后的页面组件布局形成第二数组，使第二数组表征调整后页面组件的部件，之后将第二数组发送给后台服务器进行存储，以对后台服务器此前存储的第一数组进行更新，这样当用户再次登录目标页面时，后台服务器会将第二数组发送给前台终端，前台终端则根据第二数组显示目标页面，使得前台终端本次显示的目标页面与上一次显示的目标页面相同，保证用户具有良好的使用体验。

下面结合图7所示的页面组件布局系统，对本发明实施例提供的页面组件布局方法作进一步详细说明。如图8所示，该页面组件布局方法包括如下步骤：

步骤801：前台终端将访问目标页面的登陆用户的用户信息发送给后台服务器。

在本发明实施例中，当登陆用户在前台终端访问目标页面时，前台终端获取登陆用户的用户信息，并将登陆用户的用户信息发送给后台服务器。

步骤802：后台服务器根据接收到的用户信息，将第一数组发送给前台终端。

在本发明实施例中，后台服务器针对不同用户信息存储有相对应的第一数组，当后台服务器接收到前台终端所发送的用户信息后，后台服务器根据接收到的用户信息将相对应的第一数组发送给前台终端。

步骤803：前台终端根据第一数组显示目标页面。

在本发明实施例中，在前台终端针对目标页面预先创建有多个页面组件，当前台终端接收到第一数组后，前台终端针对每一个页面组件，判断第一数组中是否包括用于标识该页面组件的组件代码，如果是则将该页面组件确定为目标页面组件，之后根据用于标识各个目标页面组件的各个组件代码在第一数组中所处的位置，确定各个目标页面组件在目标页面中的显示位置，进而根据各个目标页面组件在目标页面中的显示位置将各个目标页面组件显示到目标页面中。

步骤804：前台终端监测登陆用户是否对目标页面中页面组件的布局进行调整，如果是，执行步骤805，否则执行步骤804。

在本发明实施例中，前台终端根据第一数组显示目标页面后，前台终端监测登陆用户是否对目标页面中页面组件的布局进行调整，如果监测到登陆用户对目标页面中页面组件的布局进行调整后，相应地执行步骤805，如果没有监测到登陆用户对目标页面中页面组件的布局进行调整，则继续执行步骤804进行监测。其中，登陆用户对页面组件的布局进行调整包括将目标页面上原有的页面组件删除、向目标页面上添加新的页面组件或者对目标页面上原来的页面组件进行位置调整。

步骤805：前台终端根据调整后目标页面中页面组件的布局形成第二数组。

在本发明实施例中，前台终端监测到登陆用户对目标页面中页面组件的布局进行调整后，前台终端根据调整后个页面组件的布局形成第二数组，使得第二数组所包括的各个第二组件代码标识目标页面上的各个页面组件，并使第二数组中各个第二组件代码的顺序表征目标页面上各个页面组件的布局。

步骤806：前台终端将第二数组发送给后台服务器。

在本发明实施例中，前台终端在形成第二数组后，将所形成的第二数组发送给后台服务器。

步骤807：后台服务器利用接收到的第二数组对第一数组进行更新。

在本发明实施例中，后台服务器接收到前台终端所发送的第二数组后，将对接收到的第二数组进行存储，并将此前针对登陆用户存储的第一数组删除，以对第一数组进行更新。

以另一种描述方式对本发明实施例提供的页面组件布局方法进行描述，该页面组件布局方法可以包括如下步骤：

(1)在VUE项目中引入此方法所封装的模块，并在所需的页面中进行初始化；

(2)前台使用方法封装的组件名称draggable编写dom模块，并用v-modal命令绑定一个数组，然后在data中定义绑定的数组。该数组用来接收后台传输的用来显示组件顺序与相应组件的数组，数组中的数字代表每个组件的ID，会用这个数字去匹配组件。若后台传输数组为空，则前台定义的数组会按照默认的顺序显示全部组件；

(3)使用v-for命令draggable代码中写一个循环，该循环绑定的数组是第二步定义的数组，在循环中，需要将前台全部组件写入，用v-if判断其ID与后台传来的ID是否匹配；若匹配则显示，若不匹配，组件则不会显示；此步骤是最关键的步骤。通过v-for的循环，可以达到所有的组件都与后台传输的数组进行匹配，然后显示。

(4)在watch中写一段监听此数组变化的代码，当用户使用拖拽功能后，前台绑定的数组会发生变化，代码监听到变化后，将更新后的数组传输到后台进行储存。这样在用户下次登录或刷新页面时，就一直是用户操作后的顺序。

本发明实施例还提供了一种可读介质，包括执行指令，当存储控制器的处理器执行所述执行指令时，所述存储控制器执行上述各个实施例所提供的页面组件布局方法。

本发明实施例还提供了一种存储控制器，包括：处理器、存储器和总线；

所述存储器用于存储执行指令，所述处理器与所述存储器通过所述总线连接，当所述存储控制器运行时，所述处理器执行所述存储器存储的所述执行指令，以使所述存储控制器执行上述各个实施例所提供的页面组件布局方法。

综上所述，本发明各个所述所提供的页面组件布局方法、系统和前台终端，至少具有如下有益效果：

1、在本发明实施例中，当用户通过前台终端访问目标页面时，前台终端先从后台服务器获取第一数组，之后针对预先创建的每一个页面组件，判断第一数组中是否包括用于标识该页面组件的第一组件代码，如果存在则将该页面组件确定为目标页面组件，之后针对每一个目标页面组件，根据用于标识该目标页面组件的第一组件代码在第一数组中的位置确定该目标页面组件的显示位置，之后根据各个目标页面组件的显示位置将各个目标页面组件显示在目标页面中相对应的位置。由此可见，用户通过修改存储在后台服务器的数组便可以自定义目标页面中页面组件的布局，而后台服务器仅负责存储数组，因此后台人员不需要编写大量代码，从而可以更加便捷地实现用户自定义页面组件布局这一功能。

2、在本发明实施例中，第一数组指示了用户上一次访问目标页面时目标页面中各个目标页面组件的布局，当用户再次访问目标页面时，后台服务器将第一数组发送给前台终端，前台终端根据第一数组将各个目标页面组件显示在目标页面中，使得用户本次访问目标页面时目标页面中各页面组件的布局与用户上次访问目标页面时目标页面中各页面组件的布局相同，保证用户每次访问目标页面时都按照用户自定义的布局显示页面组件，保证用户具有较好的使用体验。

3、在本发明实施例中，用户可以对目标页面中页面组件的布局进行调整，前台终端可以监测用户是否对页面组件的布局进行了调整，并可以根据调整后页面组件的布局生成第二数组，并将所形成的第二数组存储到后台服务器替换此前的第一数组，当用户再次访问目标页面时，前台终端可以从后台服务器获取第二数组，并根据第二数组显示目标页面中的页面组件，使得用户可以自定义目标页面中页面组件的布局，并保证用户下一次访问目标页面时目标页面仍然后最后一次操作后的效果，保证用户的使用体验。

4、在本发明实施例中，用户可以将目标页面中原来的页面组件删除，也可以将目标页面中原来没有的页面组件添加到目标页面中，从而可以根据用户的需求在目标页面中显示用户所需的页面组件，满足不同用户的个性化需求。另外，用户还可以通过拖拽的方式对目标页面中各个页面组件的位置进行调整，以根据自身喜好将各个页面组件排布到目标页面中相对应的位置，从而可以进一步提高用户的使用体验。

5、在本发明实施例中，由于同一项目中的同一个页面可能被多个用户进行访问，而不同用户会根据自身习惯定义页面中页面组件的布局，为了使同一页面的不同用户登录后均能够按照登录用户定义的页面组件布局显示页面，在用户登录前台终端后，前台终端会将登录用户的用户信息发送给后台服务器，后台服务器则可以根据接收到的用户信息将登陆用户定义的数组返回给前台终端，保证前台终端根据所接收到数组显示的页面中页面组件的布局为登陆用户自定义的页面组件布局，从而保证不同用户能够针对统一页面自定义页面组件布局，进一步提高用户的使用体验。

需要说明的是，在本文中，诸如第一和第二之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个······”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同因素。

本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储在计算机可读取的存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质中。

最后需要说明的是：以上所述仅为本发明的较佳实施例，仅用于说明本发明的技术方案，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所做的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims

1.页面组件布局方法，应用于前台终端，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，在所述根据各个所述目标页面组件的所述显示位置将各个所述目标页面组件显示在目标页面中相对应的位置之后，进一步包括：

3.根据权利要求2所述的方法，其特征在于，

对所述目标页面中所述页面组件的数量和位置的调整包括如下操作中的至少一个：

操作一：删除所述目标页面中的至少一个所述页面组件；

操作二：向所述目标页面中添加新的所述页面组件；

4.根据权利要求1至3中任一所述的方法，其特征在于，在所述接收来自后台服务器的第一数组之前，进一步包括：

5.前台终端，其特征在于，包括：

6.根据权利要求5所述的前台终端，其特征在于，进一步包括：

7.根据权利要求6所述的前台终端，其特征在于，

所述组件监测模块，用于监测是否针对所述目标页面中的所述页面组件执行如下操作中的至少一个：

操作一：删除所述目标页面中的至少一个所述页面组件；

操作二：向所述目标页面中添加新的所述页面组件；

8.根据权利要求5至7中任一所述的前台终端，其特征在于，进一步包括：

9.页面组件布局系统，其特征在于，包括：一个后台服务器和一个权利要求5至8中任一所述的前台终端；

10.根据权利要求9所述的系统，其特征在于，

所述后台服务器，进一步用于接收来自所述前台终端的第二数组，并利用所述第二数组对此前存储的所述第一数组进行更新。