一种不同信息系统前端表象集成的方法及系统技术方案

本发明专利技术公开了一种不同信息系统前端表象集成的方法及系统，属于信息技术领域

【技术实现步骤摘要】
一种不同信息系统前端表象集成的方法及系统


[0001]本专利技术涉及信息
，特别是一种通过公共组件实现不同信息系统前端表象集成的方法
。

技术介绍

[0002]随着现代社会的信息化程度不断加深，各种各样基于浏览器的
Web
线上系统为人们和企业提供了越来越多的便利，之前需要到现场才能办理的业务现在只需要打开浏览器输入网址进入相关的页面就能完成，人们对线上系统的依赖程度也在日益加深，人们期望着之前各种需要到现场才能办理的业务能足不出户就能在线上办理完成；在这种前提下一些业务如：跨机关单位办事等复杂业务，如果需要迁移到线上办理难免会遇到多个
Web
系统集成使用的情况，这些
Web
系统可能是主题风格完全不一样的，那么用户在此类集成系统办理业务时，从
A
系统进入到
B
系统时就会产生感官上的误差，会感觉到很突兀，这种情况对用户交互十分不友好
。
[0003]传统的方案是去解决此类问题无非就是各系统建设方协商后确定一个基本系统
UI本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种不同信息系统前端表象集成的方法，其特征在于，包括以下内容：步骤
S1、
使用
render
函数构建头尾组件，将所实现头尾组件的
javascript
代码及
css
代码编译成
js/css
文件，并进行部署；包括以下处理过程：步骤
10、
基于所需头尾组件结构样式配置，使用
web
技术实现头尾组件；其中，使用
render
函数开发构建头尾组件；且，在每个头尾组件的入口文件导出头尾组件的
render
函数，以能够接收该头尾组件被调用进行渲染所需的渲染参数和显示区域；步骤
15、
利用
webpack
编译工具将所实现头尾组件的
javascript
代码及
css
代码编译成
js/css
文件；并在浏览器全局对象
window
中注入步骤
S10
所导出的
render
函数：步骤
20、
利用
nginx
或
cdn
工具将该
js/css
文件部署在组件服务器中；步骤
S2、
在调用方
Web
信息系统使用
script
标签从组件服务器中引用头尾组件的
js/css
文件，并通过
window
调用头尾组件
render
函数进行渲染，传入所需的渲染参数及显示区域，进而在显示区域渲染出所指定的头尾组件
。2.
根据权利要求1所述的一种不同信息系统前端表象集成的方法，其特征在于：所述步骤
10
中，在每个头尾组件的
html
编码时，为头尾组件的最外层包裹一个父元素并为其赋值一个唯一的
id
，以在步骤
15
为
css
代码加上父元素的
id
作为
css
选择器
。3.
根据权利要求1所述的一种不同信息系统前端表象集成的方法，其特征在于：所述步骤
15
的具体编译过程为：在头尾组件服务中安装
webpack
编译工具；配置
webpack
编译入口；配置
webpack
编译出口；设置
webpack
的样式编译
loader
；编译代码文件
js/css
文件；其中
webpack
编译出口为：
output:{path:
存放编译产物的文件夹
filename:`[name].js`,
每个组件编译后产物的文件名
library:`$[name]`,
此处
name
为编译入口对象的
key
值
libraryTarget:"window"}。4.
根据权利要求1所述的一种不同信息系统前端表象集成的方法，其特征在于：所述步骤
S2
的具体内容为：通过
JavaScript
动态创建
script
标签，并设置
src
属性为头尾组件
web
服务地址，从组件服务器中引用头尾组件的
js/css
文件；通过
window
调用头尾组件
render
函数进行渲染，给头尾组件传入所需的渲染参数及显示区域，渲染参数包括头尾组件
web
服务地址；进而，在头尾组件中执行
render
函数，在显示区域渲染出所指定的头尾组件
。5.
根据权利要求1所述的一种不同信息系统前端表象集成的方法，其特征在于：所述步骤
S1
还包括步骤
5、
分析各信息系统需要实现表象集成统一的头尾组件，头尾组件包括网站导航
、
头...

【专利技术属性】
技术研发人员：谢恺，曹薇，苏康熙，覃福辉，吴昌远，顾祖毅，李远泽，陈旭，黄小钰，王蕊，陈燕云，梁慧，林晓婷，梁藜耀，蓝熙，梁卉花，赵克淳，梁小龙，蒙娟，林婕，
申请(专利权)人：广西联合征信有限公司，
类型：发明
国别省市：