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

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

【技术实现步骤摘要】
一种按照接入方式自动切换页面布局的方法及装置


[0001]本专利技术涉及计算机
,尤指一种按照接入方式自动切换页面布局的方法及装置。

技术介绍

[0002]前端功能页面有时不仅会在当前系统使用,还会通过内嵌的形式接入其他系统,这就导致需要在不同系统中呈现不同的页面布局。
[0003]在现有技术中,通常的处理方式是将业务功能与布局分别放在不同的工程内,在布局工程中内嵌业务功能工程,相当于为不同接入方式开发不同的布局外壳工程,这样做会导致页面性能不如原生的单页应用,同时由于分属不同的工程,布局外壳与内部业务功能通信困难,在各接入方式下都无法获得原生单页应用的开发和使用体验。
[0004]综上来看,亟需一种可以克服上述缺陷,可以保证单页应用开发使用体验的基础上,避免二次开发,且适用于单页应用前端工程的根据接入方式自动切换页面布局的方案。

技术实现思路

[0005]为解决现有技术存在的问题,本专利技术提出了一种按照接入方式自动切换页面布局的方法及装置。本专利技术可以克服单页应用中前端页面无法在不同接入方式下展示不同本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种按照接入方式自动切换页面布局的方法,其特征在于,该方法包括:搭建前端页面,在所述前端页面中设置页面布局区及业务功能区;在全局变量中添加表示接入状态的标志位,在标志位处于第一状态时,以内嵌方式接入,隐藏页面布局区,在标志位处于第二状态时,显示页面布局区;配置路由守卫,根据当前接入方式,调节对应的标志位信息;在页面布局区的组件中添加显隐控制逻辑,根据标志位的状态控制渲染;在发起访问时,初始化前端页面,将标志位置为第二状态;利用路由守卫截取访问过程中内嵌方式的参数,若路由守卫截取到访问路径为内嵌访问的参数时,调节标志位为第一状态;若未截取到访问路径的参数或截取到访问路径不为内嵌访问的参数时,保持标志位为第二状态;根据标志位的状态进行页面渲染,当标志位为第一状态时,跳过渲染页面布局区,在页面中渲染业务功能区;当标志位为第二状态时,渲染页面布局区及业务功能区。2.根据权利要求1所述的按照接入方式自动切换页面布局的方法,其特征在于,所述页面布局区至少包括:标题栏及菜单栏,用于显示系统标题、用户信息及菜单信息;所述业务功能区的内容随着功能的切换进行切换。3.根据权利要求1所述的按照接入方式自动切换页面布局的方法,其特征在于,在全局变量中添加表示接入状态的标志位,在标志位处于第一状态时,内嵌方式为接入,隐藏页面布局区,在标志位处于第二状态时,显示页面布局区,包括:在标志位为true时,以内嵌方式接入,隐藏页面布局区;在标志位为false时,通过本地系统入口访问,显示页面布局区;其中,标志位的默认值为false。4.根据权利要求3所述的按照接入方式自动切换页面布局的方法,其特征在于,配置路由守卫,根据当前接入方式,调节对应的标志位信息,包括:添加路由守卫,根据访问的url参数判断系统接入方式;其中,路由守卫是前端页面在每次进入页面时所执行的逻辑,路由守卫中添加对url的处理逻辑;当内嵌至其他系统时,当前系统的访问路径需要添加参数embed=true,表示通过内嵌方式访问当前系统,路由守卫根据embed参数且参数为true,调用标志位的处理逻辑,将标志位置为true;若embed参数不存在或embed参数为false,路由守卫不做处理。5.根据权利要求4所述的按照接入方式自动切换页面布局的方法,其特征在于,在页面布局区的组件中添加显隐控制逻辑,根据标志位的状态控制渲染,包括:在页面布局区的组件中,利用前端框架提供的条件渲染语句添加显隐控制逻辑,布局组件根据标志位的状态控制自身是否渲染。6.根据权利要求5所述...

【专利技术属性】
技术研发人员:刘泱林相相詹娇淑徐晓琳
申请(专利权)人:中国工商银行股份有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1