CN112434330A - 一种前端页面的显示方法、系统、装置及可读存储介质 - Google Patents

Abstract

本发明的提供一种前端页面的显示方法、系统、装置及可读存储介质，方法包括获取访问请求，加载访问请求的网页页面，网页页面包括若干权限组件；获取权限组件的标签，遍历标签，得到权限组件的访问权限；确定访问请求满足访问权限；对访问请求的访问对象进行渲染，在网页页面对访问对象的展示；方法根据加载页面中，各个权限组件的标签，确定其访问权限；再根据访问请求的权限与之进行验证，根据访问请求的权限进行访问对象的渲染或者隐藏；方法对后端的权限进行解耦，不受后端权限以及信息系统的限制，具有较高的灵活性，同时逻辑更为简单，兼容性强，可广泛应用于计算机通信技术领域。

Description

一种前端页面的显示方法、系统、装置及可读存储介质

技术领域

本发明属于计算机通信技术领域，尤其是一种前端页面的显示方法、系统、装置及可读存储介质。

背景技术

随着信息化系统的逐步完善，各业务领域对信息化系统的依赖程度越来越高，信息化系统也越发复杂，功能繁多。其中操作权限的控制是信息化系统中尤为重要的部分，对系统的权限划分越来越细化，某一级页面可供不同角色权限的人员浏览；例如在商品信息系统中，在某一商品的页面，浏览器页面中的元素或信息可能包含了商品的进货价，而这些元素或者信息是不能直接展示给消费者用户的，并且针对商品信息的添加和修改的控件同样也是无法公开给消费者用户所使用的，均需要进行隐藏处理。

而现有技术采用的方法，一是通过后端渲染，但其开发的复杂程度高，无法进行前后端分离；二是前后端进行分离，一次性地完成权限的加载，导致权限不能细化，无法进行权限的及时更新，同时对权限数据的格式提出了更严格的要求。

发明内容

有鉴于此，为至少部分解决上述技术问题之一，本发明实施例目的在于提供一种灵活性高、逻辑简单的前端页面的显示方法，同时本发明还提供能够对应实现该方法的系统、装置以及计算机可读介质。

第一方面，本发明实施例提供了一种前端页面的显示方法，其包括以下步骤：获取访问请求，加载所述访问请求的网页页面，所述网页页面包括若干权限组件；

获取所述权限组件的标签，遍历所述标签，得到所述权限组件的访问权限；

确定所述访问请求满足所述访问权限；对所述访问请求的访问对象进行渲染，在所述网页页面对所述对象的展示。

在本发明的一些实施例中，所述前端页面的显示方法还包括：筛选得到所述访问权限相同的权限组件集合；

根据所述权限组件集合的访问权限构建全局变量，所述全局变量缓存重复的访问请求。

在本发明的一些实施例中，所述前端页面的显示方法还包括：设置所述权限组件的标签，并将所述访问权限的接口地址设置在所述标签的标签属性中；所述标签包括以下至少之一：图片、文本或者按钮。

在本发明的一些实施例中，所述对所述访问请求的访问对象进行渲染，在所述网页页面对所述对象的展示这一步骤，其包括：

获取所述标签属性，确定所述标签属性中访问权限的接口地址；

确定所述访问请求通过所述接口地址已完成向服务器的请求，对所述访问对象进行渲染；

缓存所述标签属性，将所述标签属性加入至待渲染队列中，根据所述待渲染队列对所述访问对象进行渲染。

在本发明的一些实施例中，所述对所述访问请求的访问对象进行渲染，在所述网页页面对所述对象的展示这一步骤，其还包括：

获取所述访问对象的元素，将所述元素叠加覆盖所述标签进行显示，并移除所述标签。

在本发明的一些实施例中，所述访问请求包括至少一种服务器端语言。

第二方面，本发明的技术方案还提供一种前端页面的显示系统，包括：

页面加载单元，用于获取访问请求，加载所述访问请求的网页页面，所述网页页面包括若干权限组件；

标签遍历单元，用于获取所述权限组件的标签，遍历所述标签，得到所述权限组件的访问权限；

权限验证单元，确定所述访问请求满足所述访问权限；

对象渲染单元，对所述访问请求的访问对象进行渲染，在所述网页页面对所述对象的展示。

在本发明的一些实施例中，所述前端页面的显示系统还包括：

全局变量单元，用于筛选得到所述访问权限相同的权限组件集合；根据所述权限组件集合的访问权限构建全局变量，所述全局变量用于缓存重复的访问请求。

第三方面，本发明的技术方案还提供一种前端页面的显示装置，其包括：

至少一个处理器；

至少一个存储器，用于存储至少一个程序；

当至少一个程序被至少一个处理器执行，使得至少一个处理器实现第一方面中的一种前端页面的显示方法。

第四方面，本发明的技术方案还提供了一种存储介质，其中存储有处理器可执行的程序，处理器可执行的程序在由处理器执行时用于实现如第一方面中的方法。

本发明的优点和有益效果将在下面的描述中部分给出，其他部分可以通过本发明的具体实施方式了解得到：

本发明所提供的一种前端页面的显示方法、系统、装置及可读存储介质，其中方法根据加载页面中，各个权限组件的标签，确定其访问权限；再根据访问请求的权限与之进行验证，根据访问请求的权限进行访问对象的渲染或者隐藏；方法对后端的权限进行解耦，不受后端权限以及信息系统的限制，具有较高的灵活性，同时逻辑更为简单，兼容性强。

附图说明

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

图1为本发明一种前端页面的显示方法的步骤流程图；

图2为本发明一种前端页面的显示装置的结构示意图。

具体实施方式

下面详细描述本发明的实施例，实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本发明，而不能理解为对本发明的限制。对于以下实施例中的步骤编号，其仅为了便于阐述说明而设置，对步骤之间的顺序不做任何限定，实施例中的各步骤的执行顺序均可根据本领域技术人员的理解来进行适应性调整。

在第一方面，如图1所示，首先提出一种前端页面的显示方法，其主要包括步骤S01-S03：

S01、获取访问请求，加载访问请求的网页页面。

其中，访问请求是根据终端的交互界面所获取的访问指令，其指令的方式可以包括触控指令以及语音指令等。步骤中加载的网页页面，为获取访问请求的交互界面，在网页页面中包括若干权限组件；权限组件为网页页面中的可视化控件，用户可通过触发该权限组件的访问请求，以获取相应的访问对象，从而获取目标信息。

S02、获取权限组件的标签，遍历标签，得到权限组件的访问权限。

具体的，通过设置标签的方式，将网页页面中的权限组件赋予不同的访问权限，同样便于对权限进行管理。当获取到访问请求后，针对该访问请求对所有权限组件的标签进行遍历，进而获取权限组件的访问权限。

更为具体地，在一些可行的实施例中，前端页面的显示方法还包括步骤S201：

S201、设置权限组件的标签，并将访问权限的接口地址设置在标签的标签属性中。

其中，标签可以使用任意html元素，图片，文本以及链接和按钮。具体的，实施例中可采用一个独立且非正规的html标签标记某个权限组件；例如，在实施中标签的代码为：

另外，可以通过html的样式设置该标签对应的权限组件在网页页面中的可见性，例如：

然后通过标签属性action来传递需要访问权限的接口地址，例如：

再对标签进行遍历，例如，网页页面加载后获取permission标签进行遍历，通过指令：document.getElementsByTagName("permission")获取页面所有permission标签，然后遍历获取访问权限。

S03、确定访问请求满足访问权限；对访问请求的访问对象进行渲染，在网页页面对对象的展示。

其中，访问对象为访问请求的目标，该目标包括但不限于各个权限组件的标签描述内容，例如图片内容，文本内容或者通过按钮按键进入到下一级界面等。当通过遍历网页页面中所有权限组件的标签得到各个权限组件的访问权限后，确定该访问请求的访问对象及其对象的权限设置，根据访问请求进行用户的权限验证，若该访问请求的权限，符合该访问对象的访问权限，则将该访问对象的内容进行渲染，在网页页面中对其进行展示。

在一些可行的实施例中，前端页面的显示方法在确定访问请求满足访问权限后，可以执行以下步骤：

S04、筛选得到访问权限相同的权限组件集合；根据权限组件集合的访问权限构建全局变量，全局变量用于缓存重复的访问请求。

具体地，使用全局变量window，建立一个客户端缓存避免重复请求服务端提升性能，例如：

在一些可行的实施例中，对访问请求的访问对象进行渲染，在网页页面对对象的展示这一步骤，可进一步细分为步骤S031-S033：

S031、获取标签属性，确定标签属性中访问权限的接口地址；

S032、确定访问请求通过接口地址已完成向服务器的请求，对访问对象进行渲染；

S033、缓存标签属性，将标签属性加入至待渲染队列中，根据待渲染队列对访问对象进行渲染。

具体地，获取标签属性action值，判断是否正在请求服务器，或已经请求过服务器，如果有则直接渲染，没有则插入全部缓存，以及待渲染队列中。例如，实施例中，步骤S031-S033的执行代码为：

在一些可行的实施例中，对访问请求的访问对象进行渲染，在网页页面对对象的展示这一步骤，其还可以包括以下步骤：

S034、获取访问对象的元素，将元素叠加覆盖标签进行显示，并移除标签。

具体的，通过浏览器XMLHttpRequest对象请求后端接口，根据后端响应结果进行渲染。先获取标签元素，插入到当前permission标签前方，然后移除permission标签，避免在客户端使用浏览器开发人员工具查看到页面元素。例如，实施例中步骤S034的执行代码为：

第二方面，本发明的技术方案提出了一种前端页面的显示系统，其包括：

页面加载单元，用于获取访问请求，加载访问请求的网页页面，网页页面包括若干权限组件；

标签遍历单元，用于获取权限组件的标签，遍历标签，得到权限组件的访问权限；

权限验证单元，确定访问请求满足访问权限；

对象渲染单元，对访问请求的访问对象进行渲染，在网页页面对对象的展示。

在一些可行的实施例中，该显示系统还包括全局变量单元，用于筛选得到访问权限相同的权限组件集合；根据权限组件集合的访问权限构建全局变量，全局变量用于缓存重复的访问请求。

第三方面，如图2所示，本发明实施例还提供一种前端页面的显示装置，其包括至少一个处理器；至少一个存储器，用于存储至少一个程序；当至少一个程序被至少一个处理器执行，使得至少一个处理器实现如第一方面中的一种前端页面的显示方法。

本发明实施例还提供了一种存储介质，其中存储有程序，程序被处理器执行如第一方面中的方法。

从上述具体的实施过程，可以总结出，本发明所提供的技术方案相较于现有技术存在以下优点或优势：

1.本发明所提供的技术方案灵活性高，不受后端语言以及平台限制，可以控制网页任意元素，单纯一个文本到图片等所有html元素。

2.本发明所提供的技术方案操作简单，前端只需要一段标签代码即可使用；服务器端只需实现一个相应接口即可。

在一些可选择的实施例中，在方框图中提到的功能/操作可以不按照操作示图提到的顺序发生。例如，取决于所涉及的功能/操作，连续示出的两个方框实际上可以被大体上同时地执行或所述方框有时能以相反顺序被执行。此外，在本发明的流程图中所呈现和描述的实施例以示例的方式被提供，目的在于提供对技术更全面的理解。所公开的方法不限于本文所呈现的操作和逻辑流程。可选择的实施例是可预期的，其中各种操作的顺序被改变以及其中被描述为较大操作的一部分的子操作被独立地执行。

此外，虽然在功能性模块的背景下描述了本发明，但应当理解的是，除非另有相反说明，功能和/或特征中的一个或多个可以被集成在单个物理装置和/或软件模块中，或者一个或多个功能和/或特征可以在单独的物理装置或软件模块中被实现。还可以理解的是，有关每个模块的实际实现的详细讨论对于理解本发明是不必要的。更确切地说，考虑到在本文中公开的装置中各种功能模块的属性、功能和内部关系的情况下，在工程师的常规技术内将会了解该模块的实际实现。因此，本领域技术人员运用普通技术就能够在无需过度试验的情况下实现在权利要求书中所阐明的本发明。还可以理解的是，所公开的特定概念仅仅是说明性的，并不意在限制本发明的范围，本发明的范围由所附权利要求书及其等同方案的全部范围来决定。

其中，功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，“计算机可读介质”可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。

计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得程序，然后将其存储在计算机存储器中。

应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

尽管已经示出和描述了本发明的实施例，本领域的普通技术人员可以理解：在不脱离本发明的原理和宗旨的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由权利要求及其等同物限定。

以上是对本发明的较佳实施进行了具体说明，但本发明并不限于上述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做作出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。

Claims (10)

1.一种前端页面的显示方法，其特征在于，包括以下步骤：

获取访问请求，加载所述访问请求的网页页面，所述网页页面包括若干权限组件；

获取所述权限组件的标签，遍历所述标签，得到所述权限组件的访问权限；

确定所述访问请求满足所述访问权限；对所述访问请求的访问对象进行渲染，在所述网页页面对所述访问对象的展示。

2.根据权利要求1所述的一种前端页面的显示方法，其特征在于，所述方法还包括：

设置所述权限组件的标签，并将所述访问权限的接口地址设置在所述标签的标签属性中；

所述标签包括以下至少之一：图片、文本或者按钮。

3.根据权利要求1所述的一种前端页面的显示方法，其特征在于，所述方法还包括：

筛选得到所述访问权限相同的权限组件集合；

根据所述权限组件集合的访问权限构建全局变量，所述全局变量缓存重复的访问请求。

4.根据权利要求2所述的一种前端页面的显示方法，其特征在于，所述对所述访问请求的访问对象进行渲染，在所述网页页面对所述对象的展示这一步骤，其包括：

获取所述标签属性，确定所述标签属性中访问权限的接口地址；

确定所述访问请求通过所述接口地址已完成向服务器的请求，对所述访问对象进行渲染；

缓存所述标签属性，将所述标签属性加入至待渲染队列中，根据所述待渲染队列对所述访问对象进行渲染。

5.根据权利要求2所述的一种前端页面的显示方法，其特征在于，所述对所述访问请求的访问对象进行渲染，在所述网页页面对所述对象的展示这一步骤，其还包括：

获取所述访问对象的元素，将所述元素叠加覆盖所述标签进行显示，并移除所述标签。

6.根据权利要求1-5任一项所述的一种前端页面的显示方法，其特征在于，所述访问请求包括至少一种服务器端语言。

7.一种前端页面的显示系统，其特征在于，包括：

页面加载单元，用于获取访问请求，加载所述访问请求的网页页面，所述网页页面包括若干权限组件；

标签遍历单元，用于获取所述权限组件的标签，遍历所述标签，得到所述权限组件的访问权限；

权限验证单元，确定所述访问请求满足所述访问权限；

对象渲染单元，对所述访问请求的访问对象进行渲染，在所述网页页面对所述对象的展示。

8.根据权利要求7所述的一种前端页面的显示系统，其特征在于，还包括：

全局变量单元，用于筛选得到所述访问权限相同的权限组件集合；根据所述权限组件集合的访问权限构建全局变量，所述全局变量用于缓存重复的访问请求。

9.一种前端页面的显示装置，其特征在于，包括：

至少一个处理器；

至少一个存储器，用于存储至少一个程序；

当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器实现如权利要求1-6任一项所述的一种前端页面的显示方法。

10.一种存储介质，其中存储有处理器可执行的程序，其特征在于：所述处理器可执行的程序在由处理器执行时用于实现如权利要求1-6中任一项所述的一种前端页面的显示方法。

Images