CN113626000A

CN113626000A - 一种按照接入方式自动切换页面布局的方法及装置

Info

Publication number: CN113626000A
Application number: CN202110916903.4A
Authority: CN
Inventors: 刘泱; 林相相; 詹娇淑; 徐晓琳
Original assignee: Industrial and Commercial Bank of China Ltd ICBC
Current assignee: Industrial and Commercial Bank of China Ltd ICBC
Priority date: 2021-08-11
Filing date: 2021-08-11
Publication date: 2021-11-09
Anticipated expiration: 2041-08-11
Also published as: CN113626000B

Abstract

本发明提出了一种按照接入方式自动切换页面布局的方法及装置，涉及计算机技术领域，该方法包括：搭建前端页面；在全局变量中添加表示接入状态的标志位；配置路由守卫，根据当前接入方式，调节对应的标志位信息；在页面布局区的组件中添加显隐控制逻辑，根据标志位的状态控制渲染；在发起访问时，初始化前端页面，将标志位置为第二状态；利用路由守卫截取访问过程中内嵌方式的参数，若路由守卫截取到访问路径为内嵌访问的参数时，调节标志位为第一状态；根据标志位的状态进行页面渲染，当标志位为第一状态时，跳过渲染页面布局区，在页面中渲染业务功能区；当标志位为第二状态时，渲染页面布局区及业务功能区。

Description

一种按照接入方式自动切换页面布局的方法及装置

技术领域

本发明涉及计算机技术领域，尤指一种按照接入方式自动切换页面布局的方法及装置。

背景技术

前端功能页面有时不仅会在当前系统使用，还会通过内嵌的形式接入其他系统，这就导致需要在不同系统中呈现不同的页面布局。

在现有技术中，通常的处理方式是将业务功能与布局分别放在不同的工程内，在布局工程中内嵌业务功能工程，相当于为不同接入方式开发不同的布局外壳工程，这样做会导致页面性能不如原生的单页应用，同时由于分属不同的工程，布局外壳与内部业务功能通信困难，在各接入方式下都无法获得原生单页应用的开发和使用体验。

综上来看，亟需一种可以克服上述缺陷，可以保证单页应用开发使用体验的基础上，避免二次开发，且适用于单页应用前端工程的根据接入方式自动切换页面布局的方案。

发明内容

为解决现有技术存在的问题，本发明提出了一种按照接入方式自动切换页面布局的方法及装置。本发明可以克服单页应用中前端页面无法在不同接入方式下展示不同页面布局的问题，通过对原有的前端工程进行改造，能够实现根据接入方式自动切换页面布局，实现一次开发部署，多场景自适应接入的效果。

在本发明实施例的第一方面，提出了一种按照接入方式自动切换页面布局的方法，该方法包括：

搭建前端页面，在所述前端页面中设置页面布局区及业务功能区；

在全局变量中添加表示接入状态的标志位，在标志位处于第一状态时，以内嵌方式接入，隐藏页面布局区，在标志位处于第二状态时，显示页面布局区；

配置路由守卫，根据当前接入方式，调节对应的标志位信息；

在页面布局区的组件中添加显隐控制逻辑，根据标志位的状态控制渲染；

在发起访问时，初始化前端页面，将标志位置为第二状态；

利用路由守卫截取访问过程中内嵌方式的参数，若路由守卫截取到访问路径为内嵌访问的参数时，调节标志位为第一状态；若未截取到访问路径的参数或截取到访问路径不为内嵌访问的参数时，保持标志位为第二状态；

根据标志位的状态进行页面渲染，当标志位为第一状态时，跳过渲染页面布局区，在页面中渲染业务功能区；当标志位为第二状态时，渲染页面布局区及业务功能区。

进一步的，所述页面布局区至少包括：标题栏及菜单栏，用于显示系统标题、用户信息及菜单信息；

所述业务功能区的内容随着功能的切换进行切换。

进一步的，在全局变量中添加表示接入状态的标志位，在标志位处于第一状态时，内嵌方式为接入，隐藏页面布局区，在标志位处于第二状态时，显示页面布局区，包括：

在标志位为true时，以内嵌方式接入，隐藏页面布局区；

在标志位为false时，通过本地系统入口访问，显示页面布局区；其中，标志位的默认值为false。

进一步的，配置路由守卫，根据当前接入方式，调节对应的标志位信息，包括：

添加路由守卫，根据访问的url参数判断系统接入方式；其中，路由守卫是前端页面在每次进入页面时所执行的逻辑，路由守卫中添加对url的处理逻辑；

当内嵌至其他系统时，当前系统的访问路径需要添加参数embed＝true，表示通过内嵌方式访问当前系统，路由守卫根据embed参数且参数为true，调用标志位的处理逻辑，将标志位置为true；若embed参数不存在或embed参数为false，路由守卫不做处理。

进一步的，在页面布局区的组件中添加显隐控制逻辑，根据标志位的状态控制渲染，包括：

在页面布局区的组件中，利用前端框架提供的条件渲染语句添加显隐控制逻辑，布局组件根据标志位的状态控制自身是否渲染。

进一步的，在发起访问时，初始化前端页面，将标志位置为第二状态，包括：

在发起访问时，对前端页面进行初始化，并将标志位初始化为false，默认为非嵌入状态，显示页面布局区。

进一步的，利用路由守卫截取访问过程中内嵌方式的参数，包括：

若截取到访问url中的embed参数且参数为true，调用标志位的处理逻辑，将标志位置为true；若未截取到embed参数或截取到embed参数为false，保持标志位为false。

进一步的，根据标志位的状态进行页面渲染，当标志位为第二状态时，渲染页面布局区及业务功能区；当标志位为第一状态时，跳过渲染页面布局区，在页面中渲染业务功能区，包括：

当标志位为true时，跳过渲染页面布局区，在前端页面中渲染业务功能区，并通过页面进行展示；

当标志位为false时，渲染页面布局区及业务功能区，并通过页面进行展示。

在本发明实施例的第二方面，提出了一种按照接入方式自动切换页面布局的装置，该装置包括：

页面设置模块，用于搭建前端页面，在所述前端页面中设置页面布局区及业务功能区；

标志位添加模块，用于在全局变量中添加表示接入状态的标志位，在标志位处于第一状态时，以内嵌方式接入，隐藏页面布局区，在标志位处于第二状态时，显示页面布局区；

路由守卫配置模块，用于配置路由守卫，根据当前接入方式，调节对应的标志位信息；

显隐控制逻辑添加模块，用于在页面布局区的组件中添加显隐控制逻辑，根据标志位的状态控制渲染；

访问模块，用于在发起访问时，初始化前端页面，将标志位置为第二状态；

参数截取模块，用于利用路由守卫截取访问过程中内嵌方式的参数，若路由守卫截取到访问路径为内嵌访问的参数时，调节标志位为第一状态；若未截取到访问路径的参数或截取到访问路径不为内嵌访问的参数时，保持标志位为第二状态；

页面渲染模块，用于根据标志位的状态进行页面渲染，当标志位为第一状态时，跳过渲染页面布局区，在页面中渲染业务功能区；当标志位为第二状态时，渲染页面布局区及业务功能区。

在本发明实施例的第三方面，提出了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现按照接入方式自动切换页面布局的方法。

在本发明实施例的第四方面，提出了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现按照接入方式自动切换页面布局的方法。

本发明提出的按照接入方式自动切换页面布局的方法及装置通过对原有的前端工程进行改造，能够实现根据接入方式自动切换页面布局，实现一次开发部署，多场景自适应接入的效果；可以在单页应用的前端页面，以不同接入方式展示不同页面布局，提高单页面应用开发使用的体验度、灵活度，降低开发成本。

附图说明

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

图1是本发明一实施例的按照接入方式自动切换页面布局的方法流程示意图。

图2A是本发明一具体实施例的前端页面的结构示意图。

图2B是本发明一具体实施例的前端页面的关系示意图。

图3是本发明一具体实施例的对前端页面的具体改造过程示意图。

图4是本发明一具体实施例的按照接入方式自动切换页面布局的工作流程示意图。

图5是本发明一实施例的按照接入方式自动切换页面布局的装置架构示意图。

图6是本发明一实施例的计算机设备结构示意图。

具体实施方式

下面将参考若干示例性实施方式来描述本发明的原理和精神。应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本发明，而并非以任何方式限制本发明的范围。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

本领域技术人员知道，本发明的实施方式可以实现为一种系统、装置、设备、方法或计算机程序产品。因此，本公开可以具体实现为以下形式，即：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)，或者硬件和软件结合的形式。

根据本发明的实施方式，提出了一种按照接入方式自动切换页面布局的方法及装置，涉及计算机技术领域。

下面参考本发明的若干代表性实施方式，详细阐释本发明的原理和精神。

图1是本发明一实施例的按照接入方式自动切换页面布局的方法流程示意图。如图1所示，该方法包括：

步骤S101，搭建前端页面，在所述前端页面中设置页面布局区及业务功能区；

步骤S102，在全局变量中添加表示接入状态的标志位，在标志位处于第一状态时，以内嵌方式接入，隐藏页面布局区，在标志位处于第二状态时，显示页面布局区；

步骤S103，配置路由守卫，根据当前接入方式，调节对应的标志位信息；

步骤S104，在页面布局区的组件中添加显隐控制逻辑，根据标志位的状态控制渲染；

步骤S105，在发起访问时，初始化前端页面，将标志位置为第二状态；

步骤S106，利用路由守卫截取访问过程中内嵌方式的参数，若路由守卫截取到访问路径为内嵌访问的参数时，调节标志位为第一状态；若未截取到访问路径的参数或截取到访问路径不为内嵌访问的参数时，保持标志位为第二状态；

步骤S107，根据标志位的状态进行页面渲染，当标志位为第一状态时，跳过渲染页面布局区，在页面中渲染业务功能区；当标志位为第二状态时，渲染页面布局区及业务功能区。

本发明提出的按照接入方式自动切换页面布局的方法通过对原有的前端工程进行改造，能够实现根据接入方式自动切换页面布局，实现一次开发部署，多场景自适应接入的效果；可以在单页应用的前端页面，以不同接入方式展示不同页面布局，提高单页面应用开发使用的体验度、灵活度，降低开发成本。

为了对上述按照接入方式自动切换页面布局的方法进行更为清楚的解释，下面结合一具体实施例来进行详细说明。

在本实施例中，参考图2A及图2B，分别为本发明一具体实施例的前端页面的结构示意图、关系示意图。

如图2A及图2B所示，前端页面分为页面布局区201及业务功能区202；

其中，所述页面布局区201至少包括：标题栏2011及菜单栏2012，用于显示系统标题、用户信息及菜单信息；标题栏2011与菜单栏2012与当前打开的业务功能无关。

页面布局区201显示在页面中，通常放置全局相关的功能，比如系统标题、用户信息、菜单信息等。

与页面布局区201对应的就是业务功能区202，业务功能区202所显示的内容随着功能的切换进行切换。

在当前系统需要嵌入到其他系统时，当前系统需要隐藏页面布局区201，仅需要显示业务功能区202，页面布局部分由被内嵌的系统实现。

本发明通过对传统前端单页应用的改造，包括添加全局变量和相关处理逻辑、添加路由守卫、在页面布局组件中显影控制逻辑，实现能够根据接入方式自动切换页面布局部分的显影，达到多场景自适应接入的目的。

对前端页面的具体改造过程可以参考图3，图3为本发明一具体实施例的对前端页面的具体改造过程示意图。

如图3所示，具体改造过程为：

S301，添加全局变量和处理逻辑。

在全局变量中添加表示接入状态的标志位，在标志位为true时，以内嵌方式接入，隐藏页面布局区；

添加该标志位的处理逻辑，功能为设置该标志位为true或者false。

S302，添加路由守卫的配置。

添加路由守卫的配置，根据访问的url参数判断系统接入方式。

其中，路由守卫是前端页面在每次进入页面时所执行的逻辑，路由守卫中添加对url的处理逻辑；

当内嵌至其他系统时，当前系统的访问路径需要添加参数embed＝true，表示通过内嵌方式访问当前系统，例如，完整的访问url可以是“http://xxx.com/#/？embed＝true”的形式。

路由守卫根据embed参数且参数为true，调用标志位的处理逻辑，将标志位置为true；若embed参数不存在或embed参数为false，路由守卫不做处理。

S303，在页面布局区的组件中添加显隐控制逻辑。

其中，条件渲染语句可以是vue中的v-if指令。

在完成改造后，系统接入方式的工作过程可以参考图4，图4为本发明一具体实施例的按照接入方式自动切换页面布局的工作流程示意图。

如图4所示，具体工作流程为：

S401，访问系统。

S402，对前端页面进行初始化，并将标志位初始化为false，默认为非嵌入状态，显示页面布局区。

S403，利用路由守卫截取访问过程中内嵌方式的embed参数。

S404，embed参数是否为true。

S405，若截取到访问url中的embed参数且参数为true，调用标志位的处理逻辑，将标志位置为true；

S406，若未截取到embed参数或截取到embed参数为false，保持标志位为false；

S407，标志位是否为true，根据标志位的状态进行页面渲染；

S408，当标志位为true时，跳过渲染页面布局区，在前端页面中渲染业务功能区，并通过页面进行展示。

S409，当标志位为false时，渲染页面布局区及业务功能区，并通过页面进行展示。

需要说明的是，尽管在上述实施例及附图中以特定顺序描述了本发明方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

在介绍了本发明示例性实施方式的方法之后，接下来，参考图5对本发明示例性实施方式的按照接入方式自动切换页面布局的装置进行介绍。

按照接入方式自动切换页面布局的装置的实施可以参见上述方法的实施，重复之处不再赘述。以下所使用的术语“模块”或者“单元”，可以是实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

基于同一发明构思，本发明还提出了一种按照接入方式自动切换页面布局的装置，如图5所示，该装置包括：

页面设置模块510，用于搭建前端页面，在所述前端页面中设置页面布局区及业务功能区；

标志位添加模块520，用于在全局变量中添加表示接入状态的标志位，在标志位处于第一状态时，以内嵌方式接入，隐藏页面布局区，在标志位处于第二状态时，显示页面布局区；

路由守卫配置模块530，用于配置路由守卫，根据当前接入方式，调节对应的标志位信息；

显隐控制逻辑添加模块540，用于在页面布局区的组件中添加显隐控制逻辑，根据标志位的状态控制渲染；

访问模块550，用于在发起访问时，初始化前端页面，将标志位置为第二状态；

参数截取模块560，用于利用路由守卫截取访问过程中内嵌方式的参数，若路由守卫截取到访问路径为内嵌访问的参数时，调节标志位为第一状态；若未截取到访问路径的参数或截取到访问路径不为内嵌访问的参数时，保持标志位为第二状态；

页面渲染模块570，用于根据标志位的状态进行页面渲染，当标志位为第一状态时，跳过渲染页面布局区，在页面中渲染业务功能区；当标志位为第二状态时，渲染页面布局区及业务功能区。

在本实施例中，所述页面布局区至少包括：标题栏及菜单栏，用于显示系统标题、用户信息及菜单信息；

所述业务功能区的内容随着功能的切换进行切换。

在本实施例中，标志位添加模块520具体用于：

在标志位为true时，以内嵌方式接入，隐藏页面布局区；

在本实施例中，路由守卫配置模块530具体用于：

在本实施例中，显隐控制逻辑添加模块540具体用于：

在本实施例中，访问模块550具体用于：

在本实施例中，参数截取模块560具体用于：

若截取到访问url中的embed参数且参数为true，调用标志位的处理逻辑，将标志位置为true；若未截取到embed参数或截取到embed参数为false，保持标志位为false；

在本实施例中，页面渲染模块570具体用于：

当标志位为true时，跳过渲染页面布局区，在前端页面中渲染业务功能区，并通过页面进行展示。

应当注意，尽管在上文详细描述中提及了按照接入方式自动切换页面布局的装置的若干模块，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多模块的特征和功能可以在一个模块中具体化。反之，上文描述的一个模块的特征和功能可以进一步划分为由多个模块来具体化。

基于前述发明构思，如图6所示，本发明还提出了一种计算机设备600，包括存储器610、处理器620及存储在存储器610上并可在处理器620上运行的计算机程序630，所述处理器620执行所述计算机程序630时实现前述按照接入方式自动切换页面布局的方法。

基于前述发明构思，本发明提出了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现前述按照接入方式自动切换页面布局的方法。

本领域内的技术人员应明白，本发明的实施例可提供为方法、装置、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims

1.一种按照接入方式自动切换页面布局的方法，其特征在于，该方法包括：

在发起访问时，初始化前端页面，将标志位置为第二状态；

2.根据权利要求1所述的按照接入方式自动切换页面布局的方法，其特征在于，所述页面布局区至少包括：标题栏及菜单栏，用于显示系统标题、用户信息及菜单信息；

所述业务功能区的内容随着功能的切换进行切换。

3.根据权利要求1所述的按照接入方式自动切换页面布局的方法，其特征在于，在全局变量中添加表示接入状态的标志位，在标志位处于第一状态时，内嵌方式为接入，隐藏页面布局区，在标志位处于第二状态时，显示页面布局区，包括：

在标志位为true时，以内嵌方式接入，隐藏页面布局区；

4.根据权利要求3所述的按照接入方式自动切换页面布局的方法，其特征在于，配置路由守卫，根据当前接入方式，调节对应的标志位信息，包括：

5.根据权利要求4所述的按照接入方式自动切换页面布局的方法，其特征在于，在页面布局区的组件中添加显隐控制逻辑，根据标志位的状态控制渲染，包括：

6.根据权利要求5所述的按照接入方式自动切换页面布局的方法，其特征在于，在发起访问时，初始化前端页面，将标志位置为第二状态，包括：

7.根据权利要求6所述的按照接入方式自动切换页面布局的方法，其特征在于，利用路由守卫截取访问过程中内嵌方式的参数，包括：

8.根据权利要求7所述的按照接入方式自动切换页面布局的方法，其特征在于，根据标志位的状态进行页面渲染，当标志位为第二状态时，渲染页面布局区及业务功能区；当标志位为第一状态时，跳过渲染页面布局区，在页面中渲染业务功能区，包括：

9.一种按照接入方式自动切换页面布局的装置，其特征在于，该装置包括：

10.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至8任一所述方法。

11.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1至8任一所述方法。