一种组件替换方法、装置、设备及存储介质与流程-j9九游会真人

1.本技术涉及人工智能技术领域及金融领域，具体涉及一种组件替换方法、装置、设备及存储介质。


背景技术：

2.银行柜面前端基于vue框架开发的前端页面模板因为存在大量的非vue原生组件引用、非静态的变量引用，需要npm命令编译且依赖平台和前端工作流对变量值初始化，导致无法直接通过浏览器解析模板，只能使用npm启动调试的方式执行页面预览，而银行柜面前端交易数量庞大，编译非常耗时，中途如果遇到错误还需要重新编译，导致开发人员想要预览页面效率极低。
3.因此，如何不经过npm编译就能得到正常运行的vue模板，是本领域技术人员急需解决的技术问题。


技术实现要素：

4.基于上述问题，本技术提供了一种组件替换方法、装置、设备及存储介质，可以提高目标组件替换效率，同时减少出现漏报的情况。
5.本技术实施例公开了如下技术方案：
6.一种组件替换方法，所述方法包括：
7.利用正则表达式识别出vue模板中需要替换的非原生组件，并获取非原生组件与原生组件的映射关系；
8.按照所述映射关系将所述需要替换的非原生组件替换为相应的原生组件得到vue替换模板。
9.在一些可能的实现方式中，所述方法还包括：
10.为不需要替换的非原生组件分配一个默认值。
11.在一些可能的实现方式中，所述方法还包括：
12.利用所述正则表达式匹配出vue模板中的全部事件和全部指令；
13.删除所述全部事件和所述全部指令。
14.在一些可能的实现方式中，所述方法还包括：
15.利用所述正则表达式识别出全部js脚本；
16.将所述全部js脚本替换为统一的vue初始化方法。
17.在一些可能的实现方式中，所述方法还包括：
18.将vue替换模板的后缀名修改为预设名称得到预设模板；
19.为所述预设模板中增加vue引用。
20.一种组件替换装置，所述装置包括：
21.识别获取单元，用于利用正则表达式识别出vue模板中需要替换的非原生组件，并获取非原生组件与原生组件的映射关系；
22.第一替换单元，用于按照所述映射关系将所述需要替换的非原生组件替换为相应的原生组件得到vue替换模板。
23.在一些可能的实现方式中，所述装置还包括：
24.分配单元，用于为不需要替换的非原生组件分配一个默认值。
25.在一些可能的实现方式中，所述装置还包括：
26.匹配单元，用于利用所述正则表达式匹配出vue模板中的全部事件和全部指令；
27.删除单元，用于删除所述全部事件和所述全部指令。
28.一种组件替换设备，包括：存储器，处理器，及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时，实现如上所述的组件替换方法。
29.一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在终端设备上运行时，使得所述终端设备执行如上所述的组件替换方法。
30.本技术提供了一种组件替换方法、装置、设备及存储介质。具体地，在执行本技术实施例提供的组件替换方法时，首先可以利用正则表达式识别出vue模板中需要替换的非原生组件，并获取非原生组件与原生组件的映射关系。接着，按照映射关系将需要替换的非原生组件替换为相应的原生组件得到vue替换模板。本技术删除第三方的非原生组件，并用vue的原生组件代替第三方的非原生组件，使得vue模板可以不经过npm编译就能得到vue替换模板。以黑盒方式替换vue模板，当出现新增组件和新增指令时不需要更新预览工具。
附图说明
31.为更清楚地说明本实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
32.图1为本技术实施例提供的一种组件替换方法的方法流程图；
33.图2为本技术实施例提供的一种组件替换装置的结构示意图。
具体实施方式
34.为了使本技术领域的人员更好地理解本技术方案，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
35.为便于理解本技术实施例提供的技术方案，下面将先对本技术实施例涉及的背景技术进行说明。
36.银行柜面前端基于vue框架开发的前端页面模板因为存在大量的非vue原生组件引用、非静态的变量引用，需要npm命令编译且依赖平台和前端工作流对变量值初始化，导致无法直接通过浏览器解析模板，只能使用npm启动调试的方式执行页面预览，而银行柜面前端交易数量庞大，编译非常耗时，中途如果遇到错误还需要重新编译，导致开发人员想要预览页面效率极低。
37.其中，vue是一款用于构建用户界面的javascript框架。它基于标准html(hypertext markup language，创建网页标记语言)、css(cascading style sheets，级联样式表)和javascript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，vue都可以胜任。vue具有以下特点：
①
渐进式框架：vue被设计为渐进式框架，这意味着你可以逐步采用vue来构建应用。你可以将vue引入现有的项目中，或者从头开始使用vue构建整个项目。数据驱动视图：vue使用了响应式数据绑定的概念，通过将数据和dom(document object model，文档对象模型)进行关联，当数据发生变化时，对应的视图会自动更新。这为开发者提供了更简洁、高效的方式来处理页面渲染和交互。
③
组件化开发：vue鼓励使用组件化开发，将页面划分为独立的组件，每个组件具有自己的状态和行为。这样可以提高代码的可维护性、复用性和可测试性。
④
生态系统丰富：vue拥有庞大的生态系统，有许多插件、工具和第三方库可供选择，可以轻松地集成到vue应用中。
⑤
易学易用：vue的语法简洁易懂，上手较为容易。同时，vue提供了官方文档和丰富的学习资源，便于开发者学习和使用。
38.npm是一个包管理器，它让javascript开发者分享、复用代码更方便.在程序开发中我们常常需要依赖别人提供的框架，写js也不例外。这些可以重复的框架代码被称作包(package)或者模块(module)，一个包可以是一个文件夹里放着几个文件，同时有一个叫做package.json的文件.
39.npm是node.js的软件包管理器(package manager)，它是随同node.js一起安装的。npm提供了许多命令，用于管理和控制javascript软件包。
40.以下是一些常用的npm命令：npminit：初始化一个新的npm项目，创建一个package.json文件来管理项目的依赖和配置信息。npminstall：安装项目所需的依赖包。如果使用
‑‑
save选项，将会将安装的依赖包添加到package.json文件中的dependencies字段。
③
npminstall《package-name》：安装指定的软件包。
④
npm uninstall《package-name》：卸载指定的软件包。
⑤
npm update：更新项目的依赖包到最新版本。
⑥
npm outdated：检查当前项目的依赖包是否有新版本可用。
⑦
npm start：启动项目的入口文件。
⑧
npm run《script-name》：运行在scripts字段中定义的自定义脚本。
⑨
npm publish：将你的软件包发布到npm仓库，使其他开发者可以使用。npm search《package-name》：在npm仓库中搜索指定的软件包。
41.为了解决这一问题，在本技术实施例提供了一种组件替换方法、装置、设备及存储介质，先利用正则表达式识别出vue模板中需要替换的非原生组件，并获取非原生组件与原生组件的映射关系。然后按照映射关系将需要替换的非原生组件替换为相应的原生组件得到vue替换模板。本技术删除第三方的非原生组件，并用vue的原生组件代替第三方的非原生组件，使得vue模板可以不经过npm编译就能得到vue替换模板。以黑盒方式替换vue模板，当出现新增组件和新增指令时不需要更新预览工具。
42.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
43.参见图1，该图为本技术实施例提供的一种组件替换方法的方法流程图，如图1所
示，该组件替换方法可以包括步骤s101-s102：
44.s101：利用正则表达式识别出vue模板中需要替换的非原生组件，并获取非原生组件与原生组件的映射关系。
45.为了实现组件替换，组件替换系统首先需要利用正则表达式识别出vue模板中需要进行替换的非原生组件，并获取非原生组件与原生组件的映射关系。
46.其中，正则表达式(regular expression，简称regex或regexp)是一种用于描述字符串模式的工具。它可以用于检索、替换和验证字符串，提供了一种灵活且强大的文本处理方式。
47.正则表达式由特定的符号和字符组成，可以用来匹配、查找、提取、替换等操作。以下是一些常见的正则表达式元字符和操作符：
48.①
字符匹配：
49.普通字符：直接匹配对应的字符。
50.元字符：具有特殊意义的字符，如.匹配任意单个字符，[]用于指定字符范围，\d匹配数字等。
[0051]
②
重复匹配：
[0052]
*：匹配前一个字符的零个或多个重复。
[0053]
：匹配前一个字符的一个或多个重复。
[0054]
？：匹配前一个字符的零个或一个重复。
[0055]
{n}：匹配前一个字符的恰好n次重复。
[0056]
{n,}：匹配前一个字符的至少n次重复。
[0057]
{n,m}：匹配前一个字符的至少n次、最多m次重复。
[0058]
③
边界匹配：
[0059]
^：匹配字符串的开头。
[0060]
$：匹配字符串的结尾。
[0061]
\b：匹配单词的边界。
[0062]
④
分组和捕获：
[0063]
()：创建一个捕获组，用于分组匹配和提取内容。
[0064]
正则表达式可以在各种编程语言和文本编辑器中使用，每种工具对正则表达式的支持可能有所不同。在实际使用过程中，可以根据需求选择合适的正则表达式，并进行测试和调试以确保正确匹配和处理目标字符串。
[0065]
在一些可能的实现方式中，需要替换的非原生组件通常具有以下特征：兼容性问题：非原生组件无法与vue框架无缝集成，导致无法正常渲染或与其他vue组件进行交互。例如，某些第三方ui库的组件可能没有考虑到vue的生命周期，导致在使用时出现问题。性能问题：非原生组件的加载和执行可能会影响页面的性能。例如，一些较大的库文件可能会增加页面加载时间，或者某些组件可能存在内存泄漏等问题。
③
维护困难：非原生组件在项目维护中可能会引入额外的复杂性和不确定性。因为这些组件不是基于vue开发的，可能无法与vue的版本升级相适应，导致在维护过程中需要额外的工作和风险。
④
缺少vue生态支持：非原生组件可能无法充分利用vue生态系统提供的丰富功能和j9九游会真人的解决方案。例如，它们可能无法与vue的状态管理工具(如vuex)无缝集成，无法享受vue社区提供的插件和扩展等。
vue({})。在vue实例的选项对象中，创建或修改data、methods、computed、watch等属性来管理之前散布在模板中的数据和方法。将模板中的内容复制到vue实例的template选项中，作为新的模板内容。在需要的地方使用vue实例的数据和方法，以及vue的指令和表达式来动态渲染模板。将原先的模板文件中的javascript代码删除，并使用新的vue实例作为整个应用程序的入口。
[0086]
这样可以清晰地将模板和业务逻辑分离，并将所有与vue相关的代码集中到一个地方进行管理。这样做还有利于代码维护和可读性。
[0087]
在移除模板中的javascript脚本后，要保证vue实例的选项对象中包含了原先在模板中使用到的数据和方法，以及相应的vue指令和表达式来确保业务逻辑正确执行。
[0088]
在一些可能的实现方式中，所述方法还包括c1-c2：
[0089]
c1：将vue替换模板的后缀名修改为预设名称得到预设模板。
[0090]
在一些可能的实现方式中，预设名称可以是但不限于“.html”。
[0091]
c2：为所述预设模板中增加vue引用。
[0092]
为预设模板中增加vue引用可以使浏览器打开此文件就能实现预览。
[0093]
基于s101-s102的内容可知，先利用正则表达式识别出vue模板中需要替换的非原生组件，并获取非原生组件与原生组件的映射关系。最后，按照映射关系将需要替换的非原生组件替换为相应的原生组件得到vue替换模板。本技术删除第三方的非原生组件，并用vue的原生组件代替第三方的非原生组件，使得vue模板可以不经过npm编译就能得到vue替换模板。以黑盒方式替换vue模板，当出现新增组件和新增指令时不需要更新预览工具。
[0094]
参见图2，图2为本技术实施例提供的一种组件替换装置的结构示意图。如图2所示，该组件替换装置包括：
[0095]
识别获取单元201，用于利用正则表达式识别出vue模板中需要替换的非原生组件，并获取非原生组件与原生组件的映射关系。
[0096]
第一替换单元202，用于按照所述映射关系将所述需要替换的非原生组件替换为相应的原生组件得到vue替换模板。
[0097]
其中，正则表达式(regular expression，简称regex或regexp)是一种用于描述字符串模式的工具。它可以用于检索、替换和验证字符串，提供了一种灵活且强大的文本处理方式。
[0098]
正则表达式由特定的符号和字符组成，可以用来匹配、查找、提取、替换等操作。以下是一些常见的正则表达式元字符和操作符：
[0099]
①
字符匹配：
[0100]
普通字符：直接匹配对应的字符。
[0101]
元字符：具有特殊意义的字符，如.匹配任意单个字符，[]用于指定字符范围，\d匹配数字等。
[0102]
②
重复匹配：
[0103]
*：匹配前一个字符的零个或多个重复。
[0104]
：匹配前一个字符的一个或多个重复。
[0105]
？：匹配前一个字符的零个或一个重复。
[0106]
{n}：匹配前一个字符的恰好n次重复。
[0107]
{n,}：匹配前一个字符的至少n次重复。
[0108]
{n,m}：匹配前一个字符的至少n次、最多m次重复。
[0109]
③
边界匹配：
[0110]
^：匹配字符串的开头。
[0111]
$：匹配字符串的结尾。
[0112]
\b：匹配单词的边界。
[0113]
④
分组和捕获：
[0114]
()：创建一个捕获组，用于分组匹配和提取内容。
[0115]
正则表达式可以在各种编程语言和文本编辑器中使用，每种工具对正则表达式的支持可能有所不同。在实际使用过程中，可以根据需求选择合适的正则表达式，并进行测试和调试以确保正确匹配和处理目标字符串。
[0116]
在一些可能的实现方式中，需要替换的非原生组件通常具有以下特征：
①
兼容性问题：非原生组件无法与vue框架无缝集成，导致无法正常渲染或与其他vue组件进行交互。例如，某些第三方ui库的组件可能没有考虑到vue的生命周期，导致在使用时出现问题。
②
性能问题：非原生组件的加载和执行可能会影响页面的性能。例如，一些较大的库文件可能会增加页面加载时间，或者某些组件可能存在内存泄漏等问题。
③
维护困难：非原生组件在项目维护中可能会引入额外的复杂性和不确定性。因为这些组件不是基于vue开发的，可能无法与vue的版本升级相适应，导致在维护过程中需要额外的工作和风险。
④
缺少vue生态支持：非原生组件可能无法充分利用vue生态系统提供的丰富功能和j9九游会真人的解决方案。例如，它们可能无法与vue的状态管理工具(如vuex)无缝集成，无法享受vue社区提供的插件和扩展等。
[0117]
需要替换的非原生组件通常是那些与vue框架不兼容、性能低下、维护困难或无法享受vue生态支持的组件。尽可能使用基于vue开发的原生组件或经过适配的第三方vue组件，可以更好地保证项目的稳定性、性能和可维护性。
[0118]
在一种可能的实现方式中，所述装置还包括：
[0119]
分配单元，用于为不需要替换的非原生组件分配一个默认值。
[0120]
在vue中，非原生组件通常是自定义组件或第三方组件，它们可能在组件中被引入并进行使用。如果在组件的模板中使用了非原生组件，但没有为其提供默认值，那么当组件尝试解析这些非原生组件时，可能会导致无法解析的错误。当在vue组件中使用非原生组件时，确保给不需要替换的非原生组件分配一个默认值可以防止非原生组件无法解析。
[0121]
在一种可能的实现方式中，所述装置还包括：
[0122]
匹配单元，用于利用所述正则表达式匹配出vue模板中的全部事件和全部指令；
[0123]
删除单元，用于删除所述全部事件和所述全部指令。
[0124]
删除事件、指令等需要vue渲染的栏位属性，只保留html原生属性，通过这样的更改，vue在渲染页面时将不再依赖于vue特定的事件和指令，而是使用html原生属性和javascript函数来实现相同的功能。这样可以减少对vue的依赖，使得页面可以更独立地运行和渲染。
[0125]
在一种可能的实现方式中，所述装置还包括：
[0126]
识别单元，用于利用所述正则表达式识别出全部js脚本。
[0127]
第二替换单元，用于将所述全部js脚本替换为统一的vue初始化方法。
[0128]
将模板中的所有javascript脚本删除，并替换为一个单独的vue初始化方法，是指将原先分散在模板中的javascript逻辑集中到一个地方进行管理和初始化。
[0129]
通常情况下，在vue应用中，除了vue模板，还会有与之对应的javascript代码用于处理业务逻辑、数据处理和组件交互等。这些javascript代码可能会散布在不同的模板文件或组件文件中。
[0130]
当需要将全部的javascript脚本从模板中移除时，可以将原先在模板中的逻辑整合到一个统一的vue实例初始化方法中。
[0131]
在一些可能的实现方式中，将所述全部js脚本替换为统一的vue初始化方法可以通过如下步骤完成：首先，创建一个vue实例，可以通过vue构造函数进行创建，例如：new vue({})。在vue实例的选项对象中，创建或修改data、methods、computed、watch等属性来管理之前散布在模板中的数据和方法。将模板中的内容复制到vue实例的template选项中，作为新的模板内容。在需要的地方使用vue实例的数据和方法，以及vue的指令和表达式来动态渲染模板。将原先的模板文件中的javascript代码删除，并使用新的vue实例作为整个应用程序的入口。
[0132]
这样可以清晰地将模板和业务逻辑分离，并将所有与vue相关的代码集中到一个地方进行管理。这样做还有利于代码维护和可读性。
[0133]
在移除模板中的javascript脚本后，要保证vue实例的选项对象中包含了原先在模板中使用到的数据和方法，以及相应的vue指令和表达式来确保业务逻辑正确执行。
[0134]
在一些可能的实现方式中，所述装置还包括：
[0135]
修改单元，用于将vue替换模板的后缀名修改为预设名称得到预设模板。
[0136]
增加单元，用于为所述预设模板中增加vue引用。
[0137]
为预设模板中增加vue引用可以使浏览器打开此文件就能实现预览。
[0138]
另外，本技术实施例还提供了一种组件替换设备，包括：存储器，处理器，及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时，实现如上所述的组件替换方法。
[0139]
另外，本技术实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在终端设备上运行时，使得所述终端设备执行如上所述的组件替换方法。
[0140]
本技术实施例提供了一种组件替换装置，先通过识别获取单元201利用正则表达式识别出vue模板中需要替换的非原生组件，并获取非原生组件与原生组件的映射关系。然后第一替换单元202按照映射关系将需要替换的非原生组件替换为相应的原生组件得到vue替换模板。本技术删除第三方的非原生组件，并用vue的原生组件代替第三方的非原生组件，使得vue模板可以不经过npm编译就能得到vue替换模板。以黑盒方式替换vue模板，当出现新增组件和新增指令时不需要更新预览工具。
[0141]
以上对本技术所提供的一种组件替换方法、装置、设备及存储介质进行了详细介绍。说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
应当指出，对于本技术领域的普通技术人员来说，在不脱离本技术原理的前提下，还可以对本技术进行若干改进和修饰，这些改进和修饰也落入本技术权利要求的保护范围内。
[0142]
需要说明的是，本发明提供的组件替换方法、装置、设备及存储介质可用于人工智能领域或金融领域，上述仅为示例，并不对本发明提供的组件替换方法、装置、设备及存储介质的应用领域进行限定。
[0143]
应当理解，在本技术中，“至少一个(项)”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系，例如，“a和/或b”可以表示：只存在a，只存在b以及同时存在a和b三种情况，其中a，b可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达，是指这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a，b或c中的至少一项(个)，可以表示：a，b，c，“a和b”，“a和c”，“b和c”，或“a和b和c”，其中a，b，c可以是单个，也可以是多个。
[0144]
还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
[0145]
结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(ram)、内存、只读存储器(rom)、电可编程rom、电可擦除可编程rom、寄存器、硬盘、可移动磁盘、cd-rom、或技术领域内所公知的任意其它形式的存储介质中。
[0146]
对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本技术。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本技术的精神或范围的情况下，在其它实施例中实现。因此，本技术将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。