CN112083966A - 一种加载远程vue组件的方法 - Google Patents
一种加载远程vue组件的方法 Download PDFInfo
- Publication number
- CN112083966A CN112083966A CN202010819181.6A CN202010819181A CN112083966A CN 112083966 A CN112083966 A CN 112083966A CN 202010819181 A CN202010819181 A CN 202010819181A CN 112083966 A CN112083966 A CN 112083966A
- Authority
- CN
- China
- Prior art keywords
- vue
- remote
- component
- content
- main frame
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 17
- 239000012634 fragment Substances 0.000 claims abstract description 7
- 238000013507 mapping Methods 0.000 claims description 3
- 238000009877 rendering Methods 0.000 claims description 3
- 238000013519 translation Methods 0.000 claims description 2
- 230000007547 defect Effects 0.000 abstract description 4
- 230000009286 beneficial effect Effects 0.000 abstract description 2
- 238000013461 design Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 230000007812 deficiency Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Abstract
本发明公开了一种加载远程vue组件的方法。它具体包括如下步骤：(1)通过vue主框架请求路由模块，路由模块调用远程组件解析模块；(2)远程组件解析模块解析远程组件的http地址，根据http地址规则访问远程组件服务来请求远程组件，若请求失败，返回默认的错误页面到步骤(1)中；若请求成功，创建新的html文档且插入远程组件片段；(3)根据vue单文件组件规范从html文档中提取script、template、style并初始为vue组件；(4)将vue组件动态编译返回到步骤(1)中并拼接到vue主框架中。本发明的有益效果是：使得vue主框架通过路由模块能够加载远程的vue组件，从而解决了vue不能加载远程vue组件的缺陷。
Description
技术领域
本发明涉及前端vue远程组件相关技术领域，尤其是指一种加载远程vue组件的方法。
背景技术
目前vue上手简单、灵活易用、便以维护，但是在应用开发中，vue其特性不支持加载远程单文件组件，使我们的平台化开发过程中时不能将子应用的vue组件封装在它自己的服务中，因此为了能够使应用能够封装属于它自己的vue组件，通过http访问加载远程vue组件变的非常迫切。
发明内容
本发明是为了克服现有技术中存在上述的不足，提供了一种解决vue不能加载远程vue组件的加载远程vue组件的方法。
为了实现上述目的，本发明采用以下技术方案：
一种加载远程vue组件的方法，具体包括如下步骤：
(1)通过vue主框架请求路由模块，路由模块调用远程组件解析模块；
(2)远程组件解析模块解析远程组件的http地址，根据http地址规则访问远程组件服务来请求远程组件，若请求失败，返回默认的错误页面到步骤(1)中；若请求成功，创建新的html文档且插入远程组件片段；
(3)根据vue官方约定的单文件组件规范，通过远程组件解析模块中的解析器分别对插入的片段进行script、template、style内容分析；如果分析的内容合法，将进一步对script、template、style的内容通过解析器进行解析；如果分析的内容不合法，则返回错误提示到步骤(1)中；
(4)解析完成后，将会对解析的内容进行vue可识别化转译，通过vue运行时编译的特性将转译后的内容织入到vue主框架中。
通过上述方法的设计使得vue主框架通过路由模块能够加载远程的vue组件，从而解决了vue不能加载远程vue组件的缺陷。
作为优选，所述的vue主框架是利用vue运行时编译特性将远程组件织入到该主框架中，用于渲染显示远程组件；所述的路由模块是根据客户端传入的路由，跳转到指定的远程服务路由路径，将远程服务路由路径传递到远程组件解析模块；所述的远程组件解析模块用于解析远程组件的http地址以及远程组件；所述的远程组件服务指的是根据vue单文件组件规范提供远程组件，其中一个单文件组件包含三个部分，分别是<template>…</template>、<script>…</script>、<style>…</style>，Template中的内容是具体的页面内容，script中的内容是javascript执行脚本，style中的内容是css样式表。
作为优选，在步骤(2)中，若请求失败，返回默认的错误页面到步骤(1)的vue主框架中，并通过vue主框架给路由模块。
作为优选，在步骤(3)中，如果分析的内容不合法，则返回错误提示到步骤(1)的vue主框架中，并通过vue主框架给路由模块。
作为优选，在步骤(4)中，通过vue运行时编译的特性将转译后的内容织入到vue主框架中初始化为vue组件后，将该vue组件设给路由模块，让路由模块通过关系映射数据结构对应到最开始的请求路由，从而使得路由模块真正跳转到该vue组件。
本发明的有益效果是：使得vue主框架通过路由模块能够加载远程的vue组件，从而解决了vue不能加载远程vue组件的缺陷。
附图说明
图1是本发明的方法流程图。
具体实施方式
下面结合附图和具体实施方式对本发明做进一步的描述。
如图1所述的实施例中，一种加载远程vue组件的方法，包括vue主框架、路由模块、远程组件解析模块以及远程组件服务，其中vue主框架是利用vue运行时编译特性将远程组件织入到该主框架中，用于渲染显示远程组件；路由模块是根据客户端传入的路由，跳转到指定的远程服务路由路径，将远程服务路由路径传递到远程组件解析模块；远程组件解析模块用于解析远程组件的http地址以及远程组件；远程组件服务指的是根据vue单文件组件规范提供远程组件，其中一个单文件组件包含三个部分，分别是<template>…</template>、<script>…</script>、<style>…</style>，Template中的内容是具体的页面内容，script中的内容是javascript执行脚本，style中的内容是css样式表，具体包括如下步骤：
(1)通过vue主框架请求路由模块，路由模块调用远程组件解析模块；
(2)远程组件解析模块解析远程组件的http地址，根据http地址规则访问远程组件服务来请求远程组件，若请求失败，返回默认的错误页面到步骤(1)的vue主框架中，并通过vue主框架给路由模块；若请求成功，创建新的html文档且插入远程组件片段；
(3)根据vue官方约定的单文件组件规范，通过远程组件解析模块中的解析器分别对插入的片段进行script、template、style内容分析；如果分析的内容合法，将进一步对script、template、style的内容通过解析器进行解析；如果分析的内容不合法，则返回错误提示到步骤(1)的vue主框架中，并通过vue主框架给路由模块；
(4)解析完成后，将会对解析的内容进行vue可识别化转译，通过vue运行时编译的特性将转译后的内容织入到vue主框架中，并将其初始化为vue组件后，将该vue组件设给路由模块，让路由模块通过关系映射数据结构对应到最开始的请求路由，从而使得路由模块真正跳转到该vue组件。
这样设计使得vue主框架通过路由模块能够加载远程的vue组件，从而解决了vue不能加载远程vue组件的缺陷。
Claims (5)
1.一种加载远程vue组件的方法，其特征是，具体包括如下步骤：
(1)通过vue主框架请求路由模块，路由模块调用远程组件解析模块；
(2)远程组件解析模块解析远程组件的http地址，根据http地址规则访问远程组件服务来请求远程组件，若请求失败，返回默认的错误页面到步骤(1)中；若请求成功，创建新的html文档且插入远程组件片段；
(3)根据vue官方约定的单文件组件规范，通过远程组件解析模块中的解析器分别对插入的片段进行script、template、style内容分析；如果分析的内容合法，将进一步对script、template、style的内容通过解析器进行解析；如果分析的内容不合法，则返回错误提示到步骤(1)中；
(4)解析完成后，将会对解析的内容进行vue可识别化转译，通过vue运行时编译的特性将转译后的内容织入到vue主框架中。
2.根据权利要求1所述的一种加载远程vue组件的方法，其特征是，所述的vue主框架是利用vue运行时编译特性将远程组件织入到该主框架中，用于渲染显示远程组件；所述的路由模块是根据客户端传入的路由，跳转到指定的远程服务路由路径，将远程服务路由路径传递到远程组件解析模块；所述的远程组件解析模块用于解析远程组件的http地址以及远程组件；所述的远程组件服务指的是根据vue单文件组件规范提供远程组件，其中一个单文件组件包含三个部分，分别是<template>…</template>、<script>…</script>、<style>…</style>，Template中的内容是具体的页面内容，script中的内容是javascript执行脚本，style中的内容是css样式表。
3.根据权利要求1或2所述的一种加载远程vue组件的方法，其特征是，在步骤(2)中，若请求失败，返回默认的错误页面到步骤(1)的vue主框架中，并通过vue主框架给路由模块。
4.根据权利要求1或2所述的一种加载远程vue组件的方法，其特征是，在步骤(3)中，如果分析的内容不合法，则返回错误提示到步骤(1)的vue主框架中，并通过vue主框架给路由模块。
5.根据权利要求1或2所述的一种加载远程vue组件的方法，其特征是，在步骤(4)中，通过vue运行时编译的特性将转译后的内容织入到vue主框架中初始化为vue组件后，将该vue组件设给路由模块，让路由模块通过关系映射数据结构对应到最开始的请求路由，从而使得路由模块真正跳转到该vue组件。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010819181.6A CN112083966B (zh) | 2020-08-14 | 2020-08-14 | 一种加载远程vue组件的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010819181.6A CN112083966B (zh) | 2020-08-14 | 2020-08-14 | 一种加载远程vue组件的方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112083966A true CN112083966A (zh) | 2020-12-15 |
| CN112083966B CN112083966B (zh) | 2024-02-27 |
Family
ID=73728293
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010819181.6A Active CN112083966B (zh) | 2020-08-14 | 2020-08-14 | 一种加载远程vue组件的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112083966B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112579242A (zh) * | 2020-12-23 | 2021-03-30 | 平安普惠企业管理有限公司 | 一种页面跳转关系分析方法、装置、设备及存储介质 |
Citations (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103314384A (zh) * | 2010-12-18 | 2013-09-18 | 高通股份有限公司 | 用于管理装置特定内容的方法和系统 |
| CN104182547A (zh) * | 2014-09-10 | 2014-12-03 | 北京浩瀚深度信息技术股份有限公司 | 一种服务器优化页面渲染的方法及web cache服务器 |
| US20170116007A1 (en) * | 2015-10-23 | 2017-04-27 | Oracle International Corporation | Execution of parameterized classes on legacy virtual machines |
| CN107562425A (zh) * | 2017-08-07 | 2018-01-09 | 上海斐讯数据通信技术有限公司 | 基于Hybrid应用的单页面应用创建方法及装置 |
| CN107766532A (zh) * | 2017-10-27 | 2018-03-06 | 深圳市行云易通科技有限公司 | 一种前端Node.js自动化正静态方法 |
| CN109445323A (zh) * | 2018-10-11 | 2019-03-08 | 上海求本信息技术有限公司 | 一种基于web的分布式智能测控软件平台设计方法 |
| CN109766503A (zh) * | 2018-12-28 | 2019-05-17 | 深圳联友科技有限公司 | 一种模块化的前端框架构建方法及装置 |
| US10375237B1 (en) * | 2016-09-12 | 2019-08-06 | Verint Americas Inc. | Virtual communications assessment system in a multimedia environment |
| CN110362312A (zh) * | 2019-06-27 | 2019-10-22 | 绿漫科技有限公司 | 一种适用于多种框架的语法转换编译系统及方法 |
| CN110635935A (zh) * | 2018-06-25 | 2019-12-31 | 丛林网络公司 | 为用户接口的相应服务接口使用多个evpn路由 |
| CN110968317A (zh) * | 2019-12-02 | 2020-04-07 | 广州鲁邦通物联网科技有限公司 | 一种通过UCI/USI配置文件自动生成vue页面组件的方法和系统 |
| CN111158818A (zh) * | 2019-12-24 | 2020-05-15 | 中国建设银行股份有限公司 | 一种页面渲染方法和装置 |
| CN111459541A (zh) * | 2020-04-09 | 2020-07-28 | 武汉联影医疗科技有限公司 | 应用程序的打包方法、装置、计算机设备和存储介质 |
-
2020
- 2020-08-14 CN CN202010819181.6A patent/CN112083966B/zh active Active
Patent Citations (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103314384A (zh) * | 2010-12-18 | 2013-09-18 | 高通股份有限公司 | 用于管理装置特定内容的方法和系统 |
| CN104182547A (zh) * | 2014-09-10 | 2014-12-03 | 北京浩瀚深度信息技术股份有限公司 | 一种服务器优化页面渲染的方法及web cache服务器 |
| US20170116007A1 (en) * | 2015-10-23 | 2017-04-27 | Oracle International Corporation | Execution of parameterized classes on legacy virtual machines |
| US10375237B1 (en) * | 2016-09-12 | 2019-08-06 | Verint Americas Inc. | Virtual communications assessment system in a multimedia environment |
| CN107562425A (zh) * | 2017-08-07 | 2018-01-09 | 上海斐讯数据通信技术有限公司 | 基于Hybrid应用的单页面应用创建方法及装置 |
| CN107766532A (zh) * | 2017-10-27 | 2018-03-06 | 深圳市行云易通科技有限公司 | 一种前端Node.js自动化正静态方法 |
| CN110635935A (zh) * | 2018-06-25 | 2019-12-31 | 丛林网络公司 | 为用户接口的相应服务接口使用多个evpn路由 |
| CN109445323A (zh) * | 2018-10-11 | 2019-03-08 | 上海求本信息技术有限公司 | 一种基于web的分布式智能测控软件平台设计方法 |
| CN109766503A (zh) * | 2018-12-28 | 2019-05-17 | 深圳联友科技有限公司 | 一种模块化的前端框架构建方法及装置 |
| CN110362312A (zh) * | 2019-06-27 | 2019-10-22 | 绿漫科技有限公司 | 一种适用于多种框架的语法转换编译系统及方法 |
| CN110968317A (zh) * | 2019-12-02 | 2020-04-07 | 广州鲁邦通物联网科技有限公司 | 一种通过UCI/USI配置文件自动生成vue页面组件的方法和系统 |
| CN111158818A (zh) * | 2019-12-24 | 2020-05-15 | 中国建设银行股份有限公司 | 一种页面渲染方法和装置 |
| CN111459541A (zh) * | 2020-04-09 | 2020-07-28 | 武汉联影医疗科技有限公司 | 应用程序的打包方法、装置、计算机设备和存储介质 |
Non-Patent Citations (5)
| Title |
|---|
| CUK5239: ""vue 远程js组件加载_vue.js组件用于全屏加载指示器"", pages 1 - 5, Retrieved from the Internet <URL:《blog.csdn.net/cuk5239/article/details/107696817》> * |
| CUK5340: ""Vue 远程JS组件加载_Vue.js的预加载程序组件"", pages 1 - 3, Retrieved from the Internet <URL:《blog.csdn.net/cuk5340/article/details/107663460》> * |
| 张凌云: ""灌溉控制柜远程运维云业务系统的设计及关键技术研究"", 《中国优秀硕士学位论文全文数据库 (农业科技辑)》, pages 044 - 98 * |
| 朱林: ""EFL平台的远程组件调用技术研究与实现"", 《中国优秀硕士学位论文全文数据库 (信息科技辑)》, pages 138 - 99 * |
| 邓雯婷;: "基于Vue.js构建单页面GIS应用的方法研究", 科技创新与应用, no. 14, pages 11 - 13 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112579242A (zh) * | 2020-12-23 | 2021-03-30 | 平安普惠企业管理有限公司 | 一种页面跳转关系分析方法、装置、设备及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112083966B (zh) | 2024-02-27 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP6629848B2 (ja) | モバイルアプリ用ページ処理 | |
| US20110289484A1 (en) | Method and System for Script Processing for Web-Based Applications | |
| US9460222B2 (en) | System for rewriting dynamically generated uniform resource locators in proxied hyper text markup language content in accordance with proxy server rules | |
| US20090204883A1 (en) | Method, Program and System for the Dynamic, Template-Based Generation of Internet Pages | |
| US20150317156A1 (en) | Systems and Methods for Automated Generation of Interactive Documentation Based on Web Application Description Language Files | |
| CN104063401B (zh) | 一种网页样式地址合并的方法和装置 | |
| US20060248538A1 (en) | Xml interfaces in unified rendering | |
| CN106909361B (zh) | 基于模版引擎的web开发方法和装置 | |
| US9182953B2 (en) | Hybrid dynamic code compiling device, method, and service system thereof | |
| KR100750962B1 (ko) | 구조적 데이터 구문 분석 | |
| WO2009085227A1 (en) | Embedding metadata with displayable content and applications thereof | |
| CN104461513B (zh) | 一种生成表单界面的方法及装置 | |
| US20080209395A1 (en) | Automatic code replacement | |
| CN110941950B (zh) | 接口文档的生成方法、装置、服务器及存储介质 | |
| CN110333863A (zh) | 一种生成、显示小程序页面的方法及装置 | |
| CN111831384A (zh) | 语言切换方法和装置、设备及存储介质 | |
| CN112083966B (zh) | 一种加载远程vue组件的方法 | |
| US20090030996A1 (en) | Technique of relaying communications between client apparatus and server apparatus | |
| CN107239265B (zh) | Java函数与C函数的绑定方法及装置 | |
| US8291385B2 (en) | Method and system for testing a software program | |
| CN106293862B (zh) | 一种可扩展标记语言xml数据的解析方法和装置 | |
| CN111209210A (zh) | 一种生成测试用例方法、装置、电子设备及存储介质 | |
| CN110738024A (zh) | 将WebAPP转换为API服务接口的方法 | |
| US9727397B2 (en) | Container-less JSP template | |
| CN113641594B (zh) | 跨端自动化测试方法以及相关装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |