CN114357333A - 一种低成本前端项目升级方法 - Google Patents
一种低成本前端项目升级方法 Download PDFInfo
- Publication number
- CN114357333A CN114357333A CN202111652863.3A CN202111652863A CN114357333A CN 114357333 A CN114357333 A CN 114357333A CN 202111652863 A CN202111652863 A CN 202111652863A CN 114357333 A CN114357333 A CN 114357333A
- Authority
- CN
- China
- Prior art keywords
- page
- project
- script
- upgrading
- html
- 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.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Computer Security & Cryptography (AREA)
- Data Mining & Analysis (AREA)
- Stored Programmes (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明提供一种低成本前端项目升级方法，包括如下步骤：步骤一：在项目前端框架中设置并开放入口；步骤二：在项目中添加门户页面，门户页面作为新页面加载的入口；步骤三：对HTML文件中的内容进行处理，分离并提取脚本和样式，并将提取到的脚本和样式追加到门户页面中，形成新的页面，完成升级，本发明在前端框架中开放一个入口，嵌入HTML页面，让页面开发不限制技术，便于不同开发者通过采用自己熟悉领域的技术进行升级处理，解除页面开发时所受到的技术层面的限制，更好地进行开发升级工作，也可以让不了解项目的更新人员参与到项目开发中，人员适用范围更广，可迅速部署上线，大大节省了部署成本和人力成本，增加研发速度，提高前端开发的速率。
Description
技术领域
本发明涉及计算机网络技术领域，具体为一种低成本前端项目升级方法。
背景技术
随着Angular、React、Vue三大主流前端框架的兴起，使前端开发变得越来越便利，对于中高级开发人员来说，开发成本越来越低，在项目升级时，需要前端将代码编译并打包，然后替换线上包，无论修改的内容是多少，哪怕只修改了一个字，也会花费比较长的时间去打包，并将整个包替换，如果部署速度慢，在部署期间会影响用户使用系统，所以项目升级成本很大，而且需要在非用户使用时间去升级，此外，开发人员需要花费大量的时间熟悉项目，在原项目架构的基础上进行版本迭代，比如需要新增一个投票页面，需要改一个文案等等，即使这样简单的需求，都需要非常专业的人员修改，并且等到合适的时间更新到线上环境中，有些项目为了解决这种问题，会选择拆分成多门户或者扩展为多门户，采用微前端或者iframe去加载，但是这样改造成本太大，对老的复杂的、并且不想投入过成本的项目并不适用。
发明内容
针对现有技术存在的不足，本发明目的是提供一种低成本前端项目升级方法，以解决上述背景技术中提出的问题，本发明通过在前端开放一个入口，帮助开发人员进行HTML页面的嵌入，通过对HTML的更新编写，对项目进行升级，解决了现有技术中的问题。
为了实现上述目的，本发明是通过如下的技术方案来实现：一种低成本前端项目升级方法，包括如下步骤：
步骤一：在项目前端框架中设置并开放入口，嵌入HTML页面，并将嵌入HTML页面的代码前端包单独部署在项目的根目录下；
步骤二：在项目中添加门户页面，门户页面作为新页面加载的入口，在需要进行页面内容更新时，将新的代码前端包部署到项目的根目录中，替换原有的代码前端包，对页面进行更新，访问门户页面，门户页面从访问地址中获取新页面的地址，并通过ajax的get请求获取新页面HTML文件中的内容。
步骤三：对HTML文件中的内容进行处理，分离并提取脚本和样式，并将提取到的脚本和样式追加到门户页面中，形成新的页面，再将新的页面通过v-HTML展示在门户页面上，完成升级。
作为对本发明中所述一种低成本前端项目升级方法的改进，在所述步骤三中，分离并提取脚本和样式的方法为：使用replace方法获取并删除文件里所有script和link字符串，
其中Replace方法中匹配script字符串的正则表达式为：
“/<script.*？>([\s\S]*？)<\/script>/”，
匹配link字符串的正则表达式为：
“/<link.*？>/”，
从而将HTML中的脚本和样式进行分离，并提取出来。
作为对本发明中所述一种低成本前端项目升级方法的改进，在所述步骤三中，脚本和样式追加的方法为：将获取到的script和link字符串进行处理，
通过indexOf方法将script元素包含的脚本语句和通过src属性指向的外部脚本文件链接、以及link元素通过href属性指向的外部样式文件链接获取到，
通过createElement、appendChild方法创建脚本和样式元素并将元素追加在门户页面，使页面正常加载脚本和样式。
作为对本发明中所述一种低成本前端项目升级方法的改进，在所述步骤一中，入口设置方法为：找到原有项目中的根目录A，并在根目录的路径下新建文件夹B，文件夹B用于存放相应的代码前端包或新开发的普通HTML文件。
作为对本发明中所述一种低成本前端项目升级方法的改进，所述步骤三完成升级后，会对其升级页面进行检测，当新页面检测出现异常时，会通过检测软件中的反馈电路将信息进行反馈，通知开发人员进行修复，完成修复之后再次进行检测。
与现有技术相比，本发明的有益效果：
1、本发明在前端框架中开放一个入口，嵌入HTML页面，让页面开发不限制技术，便于不同开发者通过采用自己熟悉领域的技术进行升级处理，解除页面开发时所受到的技术层面的限制，更好地进行开发升级工作，也可以让不了解项目的更新人员参与到项目开发中，人员适用范围更广；
2、本发明在开发完成后，可以直接将此部分代码部署到特定路径中，不需要更新原来的前端包，就可以顺利地将新页面嵌入到当前系统中，如果有功能更新，也只需要修改并替换这一个文件即可，而不是升级整个项目，减少升级时的工作量；
3、本发明由于更新文件小，设计范围窄，所以整个更新过程是无感知的，不会影响用户使用系统，可迅速部署上线，大大节省了部署成本和人力成本，增加研发速度，提高前端开发的速率，让升级工作能更加方便地进行。
附图说明
为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术中描述所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一种实施方式，对于本领域普通技术人员来说，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明项目升级流程结构示意图；
图2为本发明模块部署结构示意图；
图3为本发明页面加载流程结构示意图。
具体实施方式
为使本发明实现的技术手段、创作特征、达成目的与功效易于明白了解，下面对本发明具体实施方式中的技术方案进行清楚、完整的描述，以进一步阐述本发明，显然，所描述的具体实施方式仅仅是本发明的一部分实施方式，而不是全部的样式。
本具体实施方式是低成本前端项目升级方法，其项目升级流程结构示意图如图1所示，模块部署结构示意图如图2所示，页面加载流程结构示意图如图3所示，该低成本前端项目升级方法，包括如下步骤：
步骤一：在项目前端框架中设置并开放入口，嵌入HTML页面，并将嵌入HTML页面的代码前端包单独部署在项目的根目录下；
步骤二：在项目中添加门户页面，门户页面作为新页面加载的入口，在需要进行页面内容更新时，将新的代码前端包部署到项目的根目录中，替换原有的代码前端包，对页面进行更新，访问门户页面，门户页面从访问地址中获取新页面的地址，并通过ajax的get请求获取新页面HTML文件中的内容。
步骤三：对HTML文件中的内容进行处理，分离并提取脚本和样式，并将提取到的脚本和样式追加到门户页面中，形成新的页面，再将新的页面通过v-HTML展示在门户页面上，完成升级。
同时，步骤三完成升级后，会对其升级页面进行检测，当新页面检测出现异常时，会通过检测软件中的反馈电路将信息进行反馈，通知开发人员进行修复，完成修复之后再次进行检测。
使用本技术方案时，在前端框架中设置并开放入口，开发者可以嵌入HTML页面，并将嵌入HTML页面的代码前端包单独部署在项目根目录下，找到原有项目中的根目录A，并在根目录的路径下新建文件夹B，文件夹B用于存放相应的代码前端包或新开发的普通HTML文件，在项目上添加门户页面portal，作为新页面加载的入口，在需要进行页面内容更新时，将新的代码前端包部署到原有项目的根目录中，替换原有的代码前端包，对页面进行更新，形成新页面，访问门户页面，门户页面从访问地址中获取新页面的地址，并通过ajax的get请求获取新页面HTML文件中的内容，对HTML文件中的内容进行处理，分离并提取脚本和样式，并将提取到的脚本和样式追加到门户页面中，形成新的页面，使用replace方法获取并删除文件里所有script和link字符串，其中Replace方法中匹配script字符串的正则表达式为：“/<script.*？>([\s\S]*？)<\/script>/”，匹配link字符串的正则表达式为：“/<link.*？>/”，从而将HTML中的脚本和样式进行分离，并提取出来，将获取到的script和link字符串进行处理，通过indexOf方法将script元素包含的脚本语句和通过src属性指向的外部脚本文件链接、以及link元素通过href属性指向的外部样式文件链接获取到，通过createElement、appendChild方法创建脚本和样式元素并将元素追加在门户页面，使页面正常加载脚本和样式，再将新的页面通过v-HTML展示在门户页面上，完成升级。
以上描述了本发明的主要技术特征和基本原理及相关优点，对于本领域技术人员而言，显然本发明不限于上述示范性具体实施方式的细节，而且在不背离本发明的构思或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将上述具体实施方式看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内。
此外，应当理解，虽然本说明书按照各实施方式加以描述，但并非每个实施方式仅包含一个独立的技术方案，说明书的这种叙述方式仅仅是为清楚起见，本领域技术人员应当将说明书作为一个整体，各实施方式中的技术方案也可以经适当组合，形成本领域技术人员可以理解的其他实施方式。
Claims (5)
1.一种低成本前端项目升级方法，其特征在于，包括如下步骤：
步骤一：在项目前端框架中设置并开放入口，嵌入HTML页面，并将嵌入HTML页面的代码前端包单独部署在项目的根目录下；
步骤二：在项目中添加门户页面，门户页面作为新页面加载的入口，在需要进行页面内容更新时，将新的代码前端包部署到项目的根目录中，替换原有的代码前端包，对页面进行更新，访问门户页面，门户页面从访问地址中获取新页面的地址，并通过ajax的get请求获取新页面HTML文件中的内容；
步骤三：对HTML文件中的内容进行处理，分离并提取脚本和样式，并将提取到的脚本和样式追加到门户页面中，形成新的页面，再将新的页面通过v-HTML展示在门户页面上，完成升级。
2.根据权利要求1所述的一种低成本前端项目升级方法，其特征在于，在所述步骤三中，分离并提取脚本和样式的方法为：使用replace方法获取并删除文件里所有script和link字符串，
其中Replace方法中匹配script字符串的正则表达式为：
“/<script.*？>([\s\S]*？)<\/script>/”，
匹配link字符串的正则表达式为：
“/<link.*？>/”，
从而将HTML中的脚本和样式进行分离，并提取出来。
3.根据权利要求1所述的一种低成本前端项目升级方法，其特征在于，在所述步骤三中，脚本和样式追加的方法为：将获取到的script和link字符串进行处理，
通过indexOf方法将script元素包含的脚本语句和通过src属性指向的外部脚本文件链接、以及link元素通过href属性指向的外部样式文件链接获取到，
通过createElement、appendChild方法创建脚本和样式元素并将元素追加在门户页面，使页面正常加载脚本和样式。
4.根据权利要求1所述的一种低成本前端项目升级方法，其特征在于，在所述步骤一中，入口设置方法为：找到原有项目中的根目录A，并在根目录的路径下新建文件夹B，文件夹B用于存放相应的代码前端包或新开发的普通HTML文件。
5.根据权利要求1所述的一种低成本前端项目升级方法，其特征在于，所述步骤三完成升级后，会对其升级页面进行检测，当新页面检测出现异常时，会通过检测软件中的反馈电路将信息进行反馈，通知开发人员进行修复，完成修复之后再次进行检测。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111652863.3A CN114357333A (zh) | 2021-12-30 | 2021-12-30 | 一种低成本前端项目升级方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111652863.3A CN114357333A (zh) | 2021-12-30 | 2021-12-30 | 一种低成本前端项目升级方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114357333A true CN114357333A (zh) | 2022-04-15 |
Family
ID=81104206
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111652863.3A Pending CN114357333A (zh) | 2021-12-30 | 2021-12-30 | 一种低成本前端项目升级方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114357333A (zh) |
-
2021
- 2021-12-30 CN CN202111652863.3A patent/CN114357333A/zh active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10684943B2 (en) | Generating executable test automation code automatically according to a test case | |
| AU2012203071B2 (en) | Computer-implemented method, system and computer program product for displaying a user interface component | |
| US6807548B1 (en) | System and methodology providing automated selection adjustment for refactoring | |
| EP3679469A1 (en) | Automating identification of test cases for library suggestion models | |
| US20060015839A1 (en) | Development of software systems | |
| US10437574B2 (en) | System and method for providing code completion features for code modules | |
| CN112394942B (zh) | 基于云计算的分布式软件开发编译方法及软件开发平台 | |
| WO2019051388A1 (en) | AUTOMATION OF GENERATION OF ENGINE MODELS OF LIBRARY SUGGESTIONS | |
| US8701084B1 (en) | Preview of auto-fix changes to software code | |
| US20080052684A1 (en) | Stepwise source code refactoring | |
| US20070061641A1 (en) | Apparatus and method for generating test driver | |
| US8776031B1 (en) | Manipulating resources embedded in a dynamic-link library | |
| US10248409B1 (en) | Limiting the effects of source code patches on corresponding native-code patches | |
| US12032941B2 (en) | Method and system for updating legacy software | |
| US20140298290A1 (en) | Identification of code changes using language syntax and changeset data | |
| CA2347191A1 (en) | Component-based source code generator | |
| CN112632333A (zh) | 查询语句生成方法、装置、设备及计算机可读存储介质 | |
| CN114357333A (zh) | 一种低成本前端项目升级方法 | |
| CN107577476A (zh) | 一种基于模块划分的安卓系统源码差异性分析方法、服务器及介质 | |
| Schröpfer et al. | A Generic Projectional Editor for EMF Models. | |
| Andrews et al. | The formal definition of Modula-2 and its associated interpreter | |
| Malhotra et al. | Design and Development of a Tool for Analyzing the Effect of Refactoring on Maintainability | |
| US20230229584A1 (en) | System and method of writing, planning and executing manual tests utilizing hosting services for version control and a template processor | |
| JP2003108369A (ja) | Ｗｅｂからの要求を受け取り結果出力を行うプログラムの自動生成 | |
| CN114528348A (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 |