本发明专利技术提出了一种按照接入方式自动切换页面布局的方法及装置，涉及计算机技术领域，该方法包括：搭建前端页面；在全局变量中添加表示接入状态的标志位；配置路由守卫，根据当前接入方式，调节对应的标志位信息；在页面布局区的组件中添加显隐控制逻辑，根据标志位的状态控制渲染；在发起访问时，初始化前端页面，将标志位置为第二状态；利用路由守卫截取访问过程中内嵌方式的参数，若路由守卫截取到访问路径为内嵌访问的参数时，调节标志位为第一状态；根据标志位的状态进行页面渲染，当标志位为第一状态时，跳过渲染页面布局区，在页面中渲染业务功能区；当标志位为第二状态时，渲染页面布局区及业务功能区。页面布局区及业务功能区。页面布局区及业务功能区。
【技术实现步骤摘要】
一种按照接入方式自动切换页面布局的方法及装置
[0001]本专利技术涉及计算机
，尤指一种按照接入方式自动切换页面布局的方法及装置。
技术介绍
[0002]前端功能页面有时不仅会在当前系统使用，还会通过内嵌的形式接入其他系统，这就导致需要在不同系统中呈现不同的页面布局。
[0003]在现有技术中，通常的处理方式是将业务功能与布局分别放在不同的工程内，在布局工程中内嵌业务功能工程，相当于为不同接入方式开发不同的布局外壳工程，这样做会导致页面性能不如原生的单页应用，同时由于分属不同的工程，布局外壳与内部业务功能通信困难，在各接入方式下都无法获得原生单页应用的开发和使用体验。
[0004]综上来看，亟需一种可以克服上述缺陷，可以保证单页应用开发使用体验的基础上，避免二次开发，且适用于单页应用前端工程的根据接入方式自动切换页面布局的方案。
技术实现思路
[0005]为解决现有技术存在的问题，本专利技术提出了一种按照接入方式自动切换页面布局的方法及装置。本专利技术可以克服单页应用中前端页面无法在不同接入方式下展示不同页面布局的问题，通过对原有的前端工程进行改造，能够实现根据接入方式自动切换页面布局，实现一次开发部署，多场景自适应接入的效果。
[0006]在本专利技术实施例的第一方面，提出了一种按照接入方式自动切换页面布局的方法，该方法包括：
[0007]搭建前端页面，在所述前端页面中设置页面布局区及业务功能区；
[0008]在全局变量中添加表示接入状态的标志位，在标志位处于第一状态时，以内嵌方式接入，隐藏页面布局区，在标志位处于第二状态时，显示页面布局区；
[0009]配置路由守卫，根据当前接入方式，调节对应的标志位信息；
[0010]在页面布局区的组件中添加显隐控制逻辑，根据标志位的状态控制渲染；
[0011]在发起访问时，初始化前端页面，将标志位置为第二状态；
[0012]利用路由守卫截取访问过程中内嵌方式的参数，若路由守卫截取到访问路径为内嵌访问的参数时，调节标志位为第一状态；若未截取到访问路径的参数或截取到访问路径不为内嵌访问的参数时，保持标志位为第二状态；
[0013]根据标志位的状态进行页面渲染，当标志位为第一状态时，跳过渲染页面布局区，在页面中渲染业务功能区；当标志位为第二状态时，渲染页面布局区及业务功能区。
[0014]进一步的，所述页面布局区至少包括：标题栏及菜单栏，用于显示系统标题、用户信息及菜单信息；
[0015]所述业务功能区的内容随着功能的切换进行切换。
[0016]进一步的，在全局变量中添加表示接入状态的标志位，在标志位处于第一状态时，
内嵌方式为接入，隐藏页面布局区，在标志位处于第二状态时，显示页面布局区，包括：
[0017]在标志位为true时，以内嵌方式接入，隐藏页面布局区；
[0018]在标志位为false时，通过本地系统入口访问，显示页面布局区；其中，标志位的默认值为false。
[0019]进一步的，配置路由守卫，根据当前接入方式，调节对应的标志位信息，包括：
[0020]添加路由守卫，根据访问的url参数判断系统接入方式；其中，路由守卫是前端页面在每次进入页面时所执行的逻辑，路由守卫中添加对url的处理逻辑；
[0021]当内嵌至其他系统时，当前系统的访问路径需要添加参数embed＝true，表示通过内嵌方式访问当前系统，路由守卫根据embed参数且参数为true，调用标志位的处理逻辑，将标志位置为true；若embed参数不存在或embed参数为false，路由守卫不做处理。
[0022]进一步的，在页面布局区的组件中添加显隐控制逻辑，根据标志位的状态控制渲染，包括：
[0023]在页面布局区的组件中，利用前端框架提供的条件渲染语句添加显隐控制逻辑，布局组件根据标志位的状态控制自身是否渲染。
[0024]进一步的，在发起访问时，初始化前端页面，将标志位置为第二状态，包括：
[0025]在发起访问时，对前端页面进行初始化，并将标志位初始化为false，默认为非嵌入状态，显示页面布局区。
[0026]进一步的，利用路由守卫截取访问过程中内嵌方式的参数，包括：
[0027]若截取到访问url中的embed参数且参数为true，调用标志位的处理逻辑，将标志位置为true；若未截取到embed参数或截取到embed参数为false，保持标志位为false。
[0028]进一步的，根据标志位的状态进行页面渲染，当标志位为第二状态时，渲染页面布局区及业务功能区；当标志位为第一状态时，跳过渲染页面布局区，在页面中渲染业务功能区，包括：
[0029]当标志位为true时，跳过渲染页面布局区，在前端页面中渲染业务功能区，并通过页面进行展示；
[0030]当标志位为false时，渲染页面布局区及业务功能区，并通过页面进行展示。
[0031]在本专利技术实施例的第二方面，提出了一种按照接入方式自动切换页面布局的装置，该装置包括：
[0032]页面设置模块，用于搭建前端页面，在所述前端页面中设置页面布局区及业务功能区；
[0033]标志位添加模块，用于在全局变量中添加表示接入状态的标志位，在标志位处于第一状态时，以内嵌方式接入，隐藏页面布局区，在标志位处于第二状态时，显示页面布局区；
[0034]路由守卫配置模块，用于配置路由守卫，根据当前接入方式，调节对应的标志位信息；
[0035]显隐控制逻辑添加模块，用于在页面布局区的组件中添加显隐控制逻辑，根据标志位的状态控制渲染；
[0036]访问模块，用于在发起访问时，初始化前端页面，将标志位置为第二状态；
[0037]参数截取模块，用于利用路由守卫截取访问过程中内嵌方式的参数，若路由守卫
截取到访问路径为内嵌访问的参数时，调节标志位为第一状态；若未截取到访问路径的参数或截取到访问路径不为内嵌访问的参数时，保持标志位为第二状态；
[0038]页面渲染模块，用于根据标志位的状态进行页面渲染，当标志位为第一状态时，跳过渲染页面布局区，在页面中渲染业务功能区；当标志位为第二状态时，渲染页面布局区及业务功能区。
[0039]在本专利技术实施例的第三方面，提出了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现按照接入方式自动切换页面布局的方法。
[0040]在本专利技术实施例的第四方面，提出了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现按照接入方式自动切换页面布局的方法。
[0041]本专利技术提出的按照接入方式自动切换页面布局的方法及装置通过对原有的前端工程进行改造，能够实现根据接入方式自动切换页面布局，实现一次开发部署，多场景自适应接入的效果；可以在单页应用的前端页面，以不同接入本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种按照接入方式自动切换页面布局的方法，其特征在于，该方法包括：搭建前端页面，在所述前端页面中设置页面布局区及业务功能区；在全局变量中添加表示接入状态的标志位，在标志位处于第一状态时，以内嵌方式接入，隐藏页面布局区，在标志位处于第二状态时，显示页面布局区；配置路由守卫，根据当前接入方式，调节对应的标志位信息；在页面布局区的组件中添加显隐控制逻辑，根据标志位的状态控制渲染；在发起访问时，初始化前端页面，将标志位置为第二状态；利用路由守卫截取访问过程中内嵌方式的参数，若路由守卫截取到访问路径为内嵌访问的参数时，调节标志位为第一状态；若未截取到访问路径的参数或截取到访问路径不为内嵌访问的参数时，保持标志位为第二状态；根据标志位的状态进行页面渲染，当标志位为第一状态时，跳过渲染页面布局区，在页面中渲染业务功能区；当标志位为第二状态时，渲染页面布局区及业务功能区。2.根据权利要求1所述的按照接入方式自动切换页面布局的方法，其特征在于，所述页面布局区至少包括：标题栏及菜单栏，用于显示系统标题、用户信息及菜单信息；所述业务功能区的内容随着功能的切换进行切换。3.根据权利要求1所述的按照接入方式自动切换页面布局的方法，其特征在于，在全局变量中添加表示接入状态的标志位，在标志位处于第一状态时，内嵌方式为接入，隐藏页面布局区，在标志位处于第二状态时，显示页面布局区，包括：在标志位为true时，以内嵌方式接入，隐藏页面布局区；在标志位为false时，通过本地系统入口访问，显示页面布局区；其中，标志位的默认值为false。4.根据权利要求3所述的按照接入方式自动切换页面布局的方法，其特征在于，配置路由守卫，根据当前接入方式，调节对应的标志位信息，包括：添加路由守卫，根据访问的url参数判断系统接入方式；其中，路由守卫是前端页面在每次进入页面时所执行的逻辑，路由守卫中添加对url的处理逻辑；当内嵌至其他系统时，当前系统的访问路径需要添加参数embed＝true，表示通过内嵌方式访问当前系统，路由守卫根据embed参数且参数为true，调用标志位的处理逻辑，将标志位置为true；若embed参数不存在或embed参数为false，路由守卫不做处理。5.根据权利要求4所述的按照接入方式自动切换页面布局的方法，其特征在于，在页面布局区的组件中添加显隐控制逻辑，根据标志位的状态控制渲染，包括：在页面布局区的组件中，利用前端框架提供的条件渲染语句添加显隐控制逻辑，布局组件根据标志位的状态控制自身是否渲染。6.根据权利要求5所述...
【专利技术属性】
技术研发人员：刘泱，林相相，詹娇淑，徐晓琳，
申请(专利权)人：中国工商银行股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。