vue组件嵌入的实现方法、系统、终端及存储介质技术方案

本发明专利技术实施例公开了一种vue组件嵌入的实现方法、系统、终端及存储介质，所述方法包括：确定需要嵌入的vue组件类型；当所述vue组件为工程式组件时，新建空白页面，将所述vue组件的实例添加到后端资源文件目录下，以及将所述空白页面通过所述实例所在目录的地址与所述vue组件关联，所述空白页面用于在前端显示所述vue组件的实例。本方法使得开发人员在不需要大面积修改代码框架的基础上，可以实现前后端分离，同时在页面上实现高级页面功能，并更易于代码的维护。于代码的维护。于代码的维护。

【技术实现步骤摘要】
vue组件嵌入的实现方法、系统、终端及存储介质


[0001]本专利技术涉及计算机编程领域，尤其涉及一种vue组件嵌入的实现方法、系统、终端及存储介质。

技术介绍

[0002]随着互联网技术的发展，对于项目的开发有了更高的要求，前后端分离开发是一种大的趋势，即专业的开发人员负责各自专业的领域。
[0003]但是，由于项目的更迭周期普遍较长，很多企业没有充足的时间和精力来对项目进行破釜沉舟般的更新，而过去的代码多是使用后台模板配合JAVASCRIPT进行开发，随着项目的推进，如果没有前端人员的介入，代码就会变得愈加沉重，对于项目的后续推进和维护都会造成极大的问题。而前端直接介入不使用任何优秀的框架进行管理的话，对于代码质量的把控以及后期项目的迭代也会造成不小的影响。

技术实现思路

[0004]有鉴于此，本申请提供一种vue组件嵌入的实现方法，包括：
[0005]确定需要嵌入的vue组件类型；
[0006]当所述vue组件为工程式组件时，新建空白页面，将所述vue组件的实例添加到后端资源文件目录下，以及将所述空白页面通过所述实例所在目录的地址与所述vue组件关联，所述空白页面用于在前端显示所述vue组件的实例。
[0007]进一步的，所述将所述空白页面通过所述实例所在目录的地址与所述vue组件关联包括：
[0008]在所述空白页面中添加iframe标签，并为所述iframe标签添加唯一的第一标识，将所述第一标识与所述vue组件绑定；
[0009]为所述iframe标签添加地址属性以指向所述实例所在目录的地址，使得所述空白页面用于在前端显示所述vue组件的实例。
[0010]进一步的，还包括：
[0011]当所述vue组件为模块式组件时，在所需要嵌入的前端页面文件中创建唯一的第二标识，并将所述第二标识与所述vue组件的对象绑定，将所述第二标识插入所述前端页面文件中的目标模块中。
[0012]进一步的，所述第二标识与所述vue组件的对象绑定包括：
[0013]通过脚本语言将所述唯一标识与所述vue组件的对象绑定，并将所述对象进行实例化。
[0014]进一步的，所述vue组件的对象的实例化过程，包括：
[0015]确定所述第二标识所需插入的模块，根据所述模块的功能声明所述需要的变量；
[0016]调用对应的函数功能并根据所述变量，执行所述模块的相关功能。
[0017]进一步的，所述将所述vue组件的实例添加到指定目录下包括：
[0018]将所述vue组件经过编译后得到的静态资源添加到后台框架的静态资源目录下。
[0019]进一步的，所述静态资源包括图片、样式及页面文件。
[0020]进一步的，本申请还提供一种vue组件嵌入的实现系统，包括：前端页面和vue组件，所述vue组件通过如上述实施例中任一所述的vue组件嵌入的实现方法嵌入前端页面中。
[0021]进一步的，本申请还提供一种计算机终端，包括处理器和存储器，所述存储器存储有计算机程序，所述计算机程序在所述处理器上运行时执行如上述实施例中任一所述的vue组件嵌入的实现方法。
[0022]进一步的，本申请还提供一种可读存储介质，其存储有计算机程序，所述计算机程序在处理器上运行时执行如上述实施例中任一所述的vue组件嵌入的实现方法。
[0023]本申请的技术方案提供一种vue组件嵌入的实现方法，先确定需要嵌入的vue组件类型；当所述vue组件为工程式组件时，则新建空白页面，将所述vue组件的实例添加到后端资源文件目录下，以及将所述空白页面通过所述实例所在目录的地址与所述vue组件关联，所述空白页面用于在前端显示所述vue组件的实例。该技术方案解决从后端高度耦合到前后端完全分离如何进行平稳过渡的问题。达到前端人员可快速，高效的使用前端框架进行项目管理的目的。
附图说明
[0024]为了更清楚地说明本专利技术的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本专利技术的某些实施例，因此不应被看作是对本专利技术保护范围的限定。在各个附图中，类似的构成部分采用类似的编号。
[0025]图1示出了本申请实施例vue组件嵌入的实现方法的第一流程示意图；
[0026]图2示出了本申请实施例vue组件嵌入的实现方法的第二流程示意图。
具体实施方式
[0027]下面将结合本专利技术实施例中附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。
[0028]通常在此处附图中描述和示出的本专利技术实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本专利技术的实施例的详细描述并非旨在限制要求保护的本专利技术的范围，而是仅仅表示本专利技术的选定实施例。基于本专利技术的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0029]在下文中，可在本专利技术的各种实施例中使用的术语“包括”、“具有”及其同源词仅意在表示特定特征、数字、步骤、操作、元件、组件或前述项的组合，并且不应被理解为首先排除一个或更多个其它特征、数字、步骤、操作、元件、组件或前述项的组合的存在或增加一个或更多个特征、数字、步骤、操作、元件、组件或前述项的组合的可能性。
[0030]此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
[0031]除非另有限定，否则在这里使用的所有术语(包括技术术语和科学术语)具有与本
专利技术的各种实施例所属领域普通技术人员通常理解的含义相同的含义。所述术语(诸如在一般使用的词典中限定的术语)将被解释为具有与在相关
中的语境含义相同的含义并且将不被解释为具有理想化的含义或过于正式的含义，除非在本专利技术的各种实施例中被清楚地限定。
[0032]下面结合具体的实施例对本专利技术进行详细说明。
[0033]实施例1
[0034]请参照图1，本实施例提出一种vue组件嵌入的实现方法，应用于结合了前端和后端的大型代码工程之中，一般来讲，这种工程存在着诸多框架，有些老旧的框架不适应现在的一些新功能，且前后端不分离，使得针对前端的一些库无法使用，本实施例的方法使得前后端分离，解决在某些后端高度耦合到前端的一些框架中的问题。
[0035]步骤S100，确定需要嵌入的vue组件类型；
[0036]本实施例使用vue来对上述提到的老旧式代码框架进行嵌入，以达到前后端分离的效果，而在实际操作中，嵌入的组件根据实际工作需要有变化，比如一个前端页面，可能需要进行整体替换，或者只改动其中的一点小模块来实现从后端无法实现的功能，这两种改动对应的vue组件也是不一样的。
[0037]步骤S200，当所述vue组件为工程式组件时，新建空白页面，将所述vue组件的实例添加到后端资源文件目录下，以及将所述空白页本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种vue组件嵌入的实现方法，其特征在于，包括：确定需要嵌入的vue组件类型；当所述vue组件为工程式组件时，新建空白页面，将所述vue组件的实例添加到后端资源文件目录下，以及将所述空白页面通过所述实例所在目录的地址与所述vue组件关联，所述空白页面用于在前端显示所述vue组件的实例。2.根据权利要求1所述的vue组件嵌入的实现方法，其特征在于，所述将所述空白页面通过所述实例所在目录的地址与所述vue组件关联包括：在所述空白页面中添加iframe标签，并为所述iframe标签添加唯一的第一标识，将所述第一标识与所述vue组件绑定；为所述iframe标签添加地址属性以指向所述实例所在目录的地址，使得所述空白页面用于在前端显示所述vue组件的实例。3.根据权利要求1所述的vue组件嵌入的实现方法，其特征在于，还包括：当所述vue组件为模块式组件时，在所需要嵌入的前端页面文件中创建唯一的第二标识；将所述第二标识与所述vue组件的对象绑定，将所述第二标识插入所述前端页面文件中的目标模块中。4.根据权利要求3所述的vue组件嵌入的实现方法，其特征在于，所述第二标识与所述vue组件的对象绑定包括：通过脚本语言将所述第二标识与所述vue...

【专利技术属性】
技术研发人员：周强，孙利杰，杨涛，刘文清，陈松政，颜跃进，
申请(专利权)人：湖南麒麟信安科技股份有限公司，
类型：发明
国别省市：