一种不同信息系统前端表象集成的方法及系统
文献发布时间：2024-04-18 19:58:21
技术领域
本发明涉及信息技术领域，特别是一种通过公共组件实现不同信息系统前端表象集成的方法。
背景技术
随着现代社会的信息化程度不断加深，各种各样基于浏览器的Web线上系统为人们和企业提供了越来越多的便利，之前需要到现场才能办理的业务现在只需要打开浏览器输入网址进入相关的页面就能完成，人们对线上系统的依赖程度也在日益加深，人们期望着之前各种需要到现场才能办理的业务能足不出户就能在线上办理完成；在这种前提下一些业务如：跨机关单位办事等复杂业务，如果需要迁移到线上办理难免会遇到多个Web系统集成使用的情况，这些Web系统可能是主题风格完全不一样的，那么用户在此类集成系统办理业务时，从A系统进入到B系统时就会产生感官上的误差，会感觉到很突兀，这种情况对用户交互十分不友好。
传统的方案是去解决此类问题无非就是各系统建设方协商后确定一个基本系统UI风格，然后各系统的建设方以此为标准修改自己的系统以达到UI风格的一致。这样做的成本无疑是巨大的，每一个系统的建设方都需要对自己的系统做相同的UI风格改造，这期间就产生了许多的重复工作，如：一个导航菜单的统一，每个系统都需要实现不便，随着集成系统的数量增加，统一导航菜单的工作量也会和系统数量成正比的添加，这就造成了很多的人力浪费。因此我们迫切需要一个技术方案解决以上问题。
发明内容
本发明的发明目的是，针对上述问题，提供一种不同信息系统前端表象集成的方法，建立一个公共组件系统，该组件系统中包含要进行表象集成而需要替换的组件，如网站的头部、底部及导航等组件，这些组件分别以javascript静态资源的形式暴露给调用方。
为达到上述目的，本发明所采用的技术方案是：
一种不同信息系统前端表象集成的方法的实现方案如下：
①在各系统中分析需要实现表象集成的组件，如：网站头部、底部等。
②可以使用Web技术(react、vue、angularJs、原生javascript等)实现这些组件，其实现方式为：在组件的javascript文件中提供一个render函数用于在调用方页面中渲染组件界面，这个函数需要接收渲染组件所需得到参数，以及渲染区域两个参数，当此方法被执行时便根据接收到的渲染组件所需参数在渲染区域内渲染出该组件；
③利用webpack编译工具将这些组件的javascript代码以及css代码编译成js/css文件(如：网站导航生成menu.js/menu.css，头部生成header.js/header.js，等)；并在浏览器全局对象window中注入②中提供的render方法：
④将③中构建生成的代码文件利用nginx、cdn等工具部署在公共组件服务器中。
经过以上步骤，组件系统便可以发挥其作用，在使用时，使用方只需在其系统总用html中的script标签将组件资源引入(如：),调用该组件的render渲染方法并传入组件参数以及渲染区域便可在其页面中显示该组件。
由于采用上述技术方案，本发明具有以下有益效果：
1.本发明通过JavaScript动态创建script标签，并设置src属性为头尾组件web服务地址，从组件服务器中引用头尾组件的js/css文件；通过window调用头尾组件render函数进行渲染，给头尾组件传入所需的渲染参数及显示区域；进而，在头尾组件中执行render函数，在显示区域渲染出所指定的头尾组件。通过JavaScript动态创建script标签，从而实现动态加载和执行头尾组件代码。通过JavaScript将一个函数作为参数传递给头尾组件web服务地址，并在头尾组件代码中执行该函数，从而实现回传数据和渲染页面。
2.本发明使用跨域请求技术，可以实现跨系统、跨平台、跨语言的调用，避免了浏览器的同源策略限制或者使用代理服务器等复杂的解决方案。
附图说明
图1是本发明的方法流程图。
图2是本发明的系统调用结构示意图。
具体实施方式
以下结合附图对发明的具体实施进一步说明。
实施例1
本实施例1将对一种不同信息系统前端表象集成的方法进行说明，其中未尽说明请参见前述说明书内容部分及后述实施例2。
如图1所示，本实施例1的一种不同信息系统前端表象集成的方法，包括以下内容：
步骤S1、使用render函数构建头尾组件，将所实现头尾组件的javascript代码及css代码编译成js/css文件，并进行部署。其包括以下处理过程：
步骤5、分析各信息系统需要实现表象集成统一的头尾组件，头尾组件包括网站导航、头部及底部组件。
在需要做表象集成的系统中需要统一的组件(头尾组件)列表，如：网站头部、底部等。此步骤5可采用人工等方式分析，并非组件集成系统必须的，即在其它实例中可省略此步骤5。
步骤10、基于所需头尾组件结构样式配置，使用web技术实现头尾组件；其中，使用render函数开发构建头尾组件；且，在每个头尾组件的入口文件导出头尾组件的render函数，以能够接收该头尾组件被调用进行渲染所需的渲染参数和显示区域。
使用web技术(vue、react、angular、原生javascript等)实现前述中的组件，实现需要遵循如下原则：
①在每个组件的入口文件(如：index.js)导出组件的渲染函数render；render函数接收两个参数：组件的渲染参数(arguments)和组件的显示区域(一个dom对象：view)。在render函数渲染实际的组件dom元素时，需将组件的实际dom挂载到接收到的显示区域中；如：原生javascript使用：view.appendChild(组件实际dom)；vue使用：new Vue({el：view，render：render＝>render(组件的vue对象)})等。
②在每个组件的html编码时，需为组件的最外层包裹一个父元素并为其赋值一个唯一的id如：
步骤15、利用webpack编译工具将所实现头尾组件的javascript代码及css代码编译成js/css文件；并在浏览器全局对象window中注入步骤S10所导出的render函数。
利用webpack编译工具将步骤10中所开发的组件的javascript代码以及css代码进行编译；并在浏览器全局对象window中注入步骤10-①中提供的render方法。具体编译过程如下：
①在公共组件服务中安装webpack相关工具；
②配置webpack的编译入口；以组件库只有header和menu组件为例，该编译入口为：
entry:{
header：header组件的index.js文件路径，
menu：menu组件的index.js文件路径
}
③配置webpack的编译出口；为：
output:{
path:存放编译产物的文件夹
filename:ˋ[name].jsˋ,每个组件编译后产物的文件名
library:ˋ$[name]ˋ,此处name为编译入口对象的key值
libraryTarget:"window"
}
上述name为编译入口对象的key值，library、libraryTarget的作用为：当代码执行时，在执行代码的客户端浏览器的window全局对象上将自动注入中注入[name]属性，这个属性下包含了组件的render方法。以header组件为例：wepack编译后将在编译产物文件夹中生成header.js文件，当header.js文件被调用方以script-src的形式引入页面后，调用方的浏览器window对象中将生成header属性，通过window.header.render即可渲染组件。
④设置webpack的样式编译loader，在处理样式文件时候，需要添加postcss-loader，并在postcss-loader中运用postcss-plugin-namespeace，并为其传入参数步骤10的唯一id；做此操作的目的是为了让生成的css代码选择器都加上前置选择器，使这部分代码只作用于当前组件中，避免样式污染；此外在处理样式文件时，可将样式代码分离形成css文件，也可不分离；若分离将形成一个javascript文件和一个css文件，若不分离将只形成一个包含css的javascript文件。最后，编译代码文件js/css文件。
步骤20、利用nginx或cdn工具将该js/css文件部署在组件服务器中。
根据需要配置其他webpack配置后编译代码文件，然后将文件用nginx部署到服务其中。
步骤S2、在调用方Web信息系统使用script标签从组件服务器中引用头尾组件的js/css文件，并通过window调用头尾组件render函数进行渲染，传入所需的渲染参数及显示区域，进而在显示区域渲染出所指定的头尾组件。具体内容为：通过JavaScript动态创建script标签，并设置src属性为头尾组件web服务地址，从组件服务器中引用头尾组件的js/css文件；通过window调用头尾组件render函数进行渲染，给头尾组件传入所需的渲染参数及显示区域，渲染参数包括头尾组件web服务地址；进而，在头尾组件中执行render函数，在显示区域渲染出所指定的头尾组件。
如图2所示，通过以上步骤之后，公共组件服务便可以被调用方调用，图示给出系统1、系统2及系统3等分别调用header.js和/或menu.js示意图。调用方调用时，只需要用scirpt标签从公共组件服务中引用相关的javascript文件以及css文件就可以直接在自己的项目中通过window调用组件的render方法就能在项目中渲染出指定的组件，无需开发。
其中，步骤10中，在每个头尾组件的html编码时，为头尾组件的最外层包裹一个父元素并为其赋值一个唯一的id，以在步骤15为css代码加上父元素的id作为css选择器。此操作为进一步改进方案，可作为优选实例，前述以该最优实例为例进行说明。
实施例2
基于前述实施例1，可组成本实施例2的一种不同信息系统前端表象集成的系统，下述将对此系统进行简要说明，其它未尽说明请参见前述实施例1。
本实施例2的一种不同信息系统前端表象集成，包括以下内容：
构建编译单元：用于使用render函数开发构建头尾组件，将所实现头尾组件的javascript代码及css代码编译成js/css文件，并进行部署；包括以下处理过程：
步骤10基于所需头尾组件结构样式配置，使用web技术实现头尾组件；其中，使用render函数开发构建头尾组件；且，在每个头尾组件的入口文件导出头尾组件的render函数，以能够接收该头尾组件被调用进行渲染所需的渲染参数和显示区域；
步骤15、利用webpack编译工具将所实现头尾组件的javascript代码及css代码编译成js/css文件；并在浏览器全局对象window中注入步骤S10所导出的render函数：
步骤20、利用nginx或cdn工具将该js/css文件部署在组件服务器中；
跨域渲染单元：用于在调用方Web信息系统使用script标签从组件服务器中引用头尾组件的js/css文件，并通过window调用头尾组件render函数进行渲染，传入所需的渲染参数及显示区域，进而在显示区域渲染出所指定的头尾组件。
其中，步骤15的具体编译过程为：在头尾组件服务中安装webpack编译工具；配置webpack编译入口；配置webpack编译出口；设置webpack的样式编译loader；编译代码文件js/css文件。
跨域渲染单元的具体内容为：通过JavaScript动态创建script标签，并设置src属性为头尾组件web服务地址，从组件服务器中引用头尾组件的js/css文件；通过window调用头尾组件render函数进行渲染，给头尾组件传入所需的渲染参数及显示区域，渲染参数包括头尾组件web服务地址；进而，在头尾组件中执行render函数，在显示区域渲染出所指定的头尾组件。
基于前述实例，在改进实例中，该构建编译单元还包括步骤5、分析各信息系统需要实现表象集成统一的头尾组件，头尾组件包括网站导航、头部及底部组件。
基于前述实例，在改进实例中，步骤10中，在每个头尾组件的html编码时，为头尾组件的最外层包裹一个父元素并为其赋值一个唯一的id，以在步骤15为css代码加上父元素的id作为css选择器。
如上述，本发明的系统中使用JavaScript实现网站头部、尾部等调用填充渲染方案，其所包含的具体组件或者模块有以下几个：
1.babel配置文件：该文件用于转换js中ES6+语法至ES5，保证组件的兼容性，确保组件能够在浏览器中正常运行。该文件的作用是将组件中使用的高级语法转换为低级语法，避免了浏览器不支持或者报错的问题。
2.index入口文件：该文件作为组件的入口，内容包括组件的基础配置、环境变量配置、初始化配置、主体的html结构、相关事件处理。该文件的作用是定义组件的基本属性和行为，以及提供组件的html结构和交互逻辑。
3.样式配置文件：该文件用于声明组件主题的css样式。该文件的作用是定义组件的外观和布局，以及提供组件的主题切换和自适应功能。
4.package.json文件：该文件作为一个js组件的基础文件，声明了组件的名字、版本、简介、入口、所有者、版权等信息。该文件的作用是描述组件的基本信息和依赖关系，以及提供组件的安装和使用方法。
5.render.js文件：该文件作为组件渲染的基础文件，负责将index文件中的内容进行组件渲染，并捕获渲染过程中的错误进行处理。该文件的作用是将组件的html结构和css样式插入到目标页面中，并提供错误提示和日志记录功能。
6.webpack配置文件：该文件作为组件webpack的编译配置文件，声明了组件编译的模式、入口、出口、使用模块、使用插件、压缩配置等相关配置信息。该文件的作用是控制组件的编译过程和输出结果，以及提供组件的优化和压缩功能。
本系统中使用JavaScript实现网站头部、尾部等跨域调用填充渲染方案，与单系统内头尾组件调用方案有很大的不同。
单系统头尾组件调用方案是将头尾组件作为整个系统内部的一个应用模块进行开发配置，没有自己的编译及配置文件。组件随着整个应用系统一并进行打包编译运行。这样的方案有以下缺点：
1)头尾组件作为整个系统的一部分，无法单独进行使用，只能在同一个系统内部共享。
2)多个系统之间如果需要使用相同的头尾组件，需要重复开发或者复制粘贴代码，造成代码冗余和维护困难。
3)头尾组件的更新和发布需要依赖整个应用系统的更新和发布，不能实现快速迭代和灵活部署。
然而，使用本申请提供的方法后，将给头尾组件提供单独的编译配置文件，将头尾组件与整个系统进行拆分不再耦合。具体步骤如下：
①头尾组件编译后会单独生成相关文件，独立于整个应用系统部署在一个web服务上。
②头尾组件会对外提供对应的配置接口API方法，可以根据不同的参数返回不同的头尾内容。
③应用系统在使用对应头尾组件时，需要引用头尾组件相关的web服务地址，按照初始化方法将入参传入头尾组件中，头尾组件将根据应用系统提供的配置渲染出对应的头尾部模块。
本申请所给出的方案具有以下优点：
1)头尾组件可以实现跨系统、跨平台、跨语言的调用，只要能够访问到头尾组件的web服务地址，就可以使用头尾组件。
2)多个系统之间可以使用相同的头尾组件，保证了多个系统间的头尾部在风格、样式、交互上的一致性，同时节省了相关的开发工作量。
3)头尾组件可以实现独立的更新和发布，不受整个应用系统的影响，可以实现快速迭代和灵活部署。
因此，本申请中使用JavaScript实现网站头部尾部等调用填充渲染方案具有以下特点：
1、本发明中使用了动态加载技术，通过JavaScript动态创建script标签，并设置src属性为头尾组件web服务地址，从而实现动态加载和执行头尾组件代码。
2、本发明中使用了回调函数技术，通过JavaScript将一个函数作为参数传递给头尾组件web服务地址，并在头尾组件代码中执行该函数，从而实现回传数据和渲染页面。
3、本发明中使用了跨域请求技术，通过JavaScript设置script标签的crossorigin属性为anonymous，并在web服务端设置Access-Control-Allow-Origin响应头为*，从而实现跨域请求和响应。
这些技术特点作用效果具体如下：
1、动态加载技术可以实现按需加载和执行头尾组件代码，避免了页面加载时阻塞其他资源或者导致页面闪烁等问题。
2、回调函数技术可以实现异步获取和处理数据，避免了页面刷新或者出现空白等问题。
3、跨域请求技术可以实现跨系统、跨平台、跨语言的调用，避免了浏览器的同源策略限制或者使用代理服务器等复杂的解决方案。
需要指出的是，上述实施例的实例可以根据实际需要优选一个或两个以上相互组合，而多个实例采用一套组合技术特征的附图说明，在此就不一一展开说明。
上述说明是针对本发明较佳可行实施例的详细说明和例证，但这些描述并非用以限定本发明所要求保护范围，凡本发明所提示的技术教导下所完成的同等变化或修饰变更，均应属于本发明所涵盖专利保护范围。
- 一种WEB信息系统前端页面自动生成的系统及其方法
- 一种边缘计算系统前端工程持续集成和自动化部署的方法