CN113741900A - 一种前端页面应用的开发方法、装置及相关设备 - Google Patents
一种前端页面应用的开发方法、装置及相关设备 Download PDFInfo
- Publication number
- CN113741900A CN113741900A CN202111023459.XA CN202111023459A CN113741900A CN 113741900 A CN113741900 A CN 113741900A CN 202111023459 A CN202111023459 A CN 202111023459A CN 113741900 A CN113741900 A CN 113741900A
- Authority
- CN
- China
- Prior art keywords
- file
- syntax
- developing
- processed
- end page
- 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 62
- 238000011161 development Methods 0.000 title claims abstract description 38
- 238000012545 processing Methods 0.000 claims abstract description 25
- 238000004806 packaging method and process Methods 0.000 claims abstract description 12
- 238000004590 computer program Methods 0.000 claims description 20
- 238000003860 storage Methods 0.000 claims description 13
- 238000006243 chemical reaction Methods 0.000 claims description 10
- 238000007781 pre-processing Methods 0.000 claims description 7
- 238000002347 injection Methods 0.000 claims description 6
- 239000007924 injection Substances 0.000 claims description 6
- 239000008186 active pharmaceutical agent Substances 0.000 claims description 5
- 238000012217 deletion Methods 0.000 claims description 4
- 230000037430 deletion Effects 0.000 claims description 4
- 238000009877 rendering Methods 0.000 abstract description 7
- 230000009286 beneficial effect Effects 0.000 abstract description 6
- 238000010586 diagram Methods 0.000 description 10
- 230000008569 process Effects 0.000 description 10
- 238000012423 maintenance Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 239000000243 solution Substances 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 2
- 238000013524 data verification Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000004519 manufacturing process Methods 0.000 description 2
- 238000005457 optimization Methods 0.000 description 2
- 238000012856 packing Methods 0.000 description 2
- 238000000926 separation method Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000009466 transformation Effects 0.000 description 2
- 238000004422 calculation algorithm Methods 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000002349 favourable effect Effects 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 230000002035 prolonged effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/10—File systems; File servers
- G06F16/13—File access structures, e.g. distributed indices
- G06F16/137—Hash-based
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- Stored Programmes (AREA)
- Information Transfer Between Computers (AREA)
- Document Processing Apparatus (AREA)
Abstract
本发明属于互联网技术领域，尤其涉及一种前端页面应用的开发方法、装置及相关设备，所述方法包括获取基于Vue开发的源文件；读取所述源文件所有页面的索引文件，解析所述索引文件得到语法树；基于预设的处理规则替换所述语法树中的标签，得到符合freemarker语法标签的待处理文件；将所述待处理文件进行打包；利用所述待处理文件构建web模块化程序。本方法解决了采用Vue开发SPA应用带来的首屏渲染性能差、不利于seo、Freemarker开发带来的开发效率低、上手难度高的问题。
Description
技术领域
本发明属于互联网技术领域，尤其涉及一种前端页面应用的开发方法、装置及相关设备。
背景技术
通常一个完整的页面应用包含前端和后端，其中，前端是面向用户的、用于提供给用户操作逻辑的网页。单页面应用(single page application，简称SPA)，是一种只有一个页面的web项目，单页面应用在运行时只加载一次资源，然后页面上的操作交互、数据交互是通过router、ajax等来进行，页面并没有刷新，页面只在最开始前刷新一次，因此，单页面应用常用来实现静态页面、只有局部内容刷新的页面或者用于实现特定功能的页面。
常见的单页面应用的开发工具有Vue、React等。Vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架；而freemarker是一种基于模板和要改变的数据，用来生成输出文本的通用工具，freemarker的语法与java很相似，它虽然不是web应用框架，但能够用来作为web框架的一个组件，因为其非常轻量。
在现有的SPA开发过程中，使用Vue进行SPA的开发有着以下缺点：首屏渲染能力差，不利于seo。首屏渲染能力是指Vue编写的SPA在初次加载时所需要的时间，在这个过程中，webpack常用来作为在SPA渲染前将其打包为可运行的js文件的工具，之后浏览器需要把js请求下载下来，再由js文件生成html代码，最后通过浏览器渲染生成页面，正因为如此，使得SPA的加载与渲染时间变长，从而影响用户体验；seo(Search EngineOptimization，搜索引擎优化)是利用搜索引擎规则来提高web页面在搜索引擎中的自然排名的技术，若一个web页面的加载时间过长，且SPA是由js生成的html代码，不符合搜索引擎规则的优化，自然地其自然排名就低，这也是利用Vue开发的SPA不利于seo的原因。而利用freemarker组件开发的SPA相较于使用Vue开发的应用大小就显得很轻量，不会出现Vue开发的SPA的缺点，但问题是freemarker不是一个完整的框架，使得其开发效率非常低，对于开发人员来说上手难度较高。
发明内容
本发明实施例提供一种前端页面应用的开发方法，旨在解决现上述SPA应用程序首屏渲染能力差、不利于seo，且利用freemarker进行开发的效率低的问题。
第一方面，本发明实施例提供一种前端页面应用的开发方法，包括步骤：
获取基于Vue开发的源文件；
读取所述源文件所有页面的索引文件，解析所述索引文件得到语法树；
基于预设的处理规则替换所述语法树中的标签，得到符合freemarker语法标签的待处理文件；
将所述待处理文件进行打包；
利用所述待处理文件构建web模块化程序。
更进一步地，所述获取基于Vue开发的源文件的步骤包括：
通过数据异步请求的方式，获取本地开发环境的源文件。
更进一步地，所述读取所述源文件所有页面的索引文件，解析所述索引文件得到语法树的步骤之前，还包括步骤：
判断所述源文件中是否包含图片文件；
若包含图片文件，则对图片进行预处理，生成带hash名称的图片文件。
更进一步地，所述对图片进行预处理，生成带hash名称的图片文件的步骤包括：
通过fs文件系统API读取源文件assets目录下的所有图片；
生成临时的所述图片文件；
通过webpack处理生成所述带hash名称的图片文件。
更进一步地，所述基于预设的处理规则替换所述语法树中的标签，得到符合freemarker语法标签的待处理文件的步骤包括：
将所述语法树中的style标签直接转换成index.scss文件；
使用babel工具对所述语法树中的script标签进行处理，生成index.js文件。
更进一步地，所述基于预设的处理规则替换所述语法树中的标签，得到符合freemarker语法标签的待处理文件的步骤还包括：
将所述语法树中的html/template标签转换为freemarker语法的.html文件。
更进一步地，所述利用所述待处理文件构建web模块化程序的步骤之后还包括以下步骤：
复制所述带hash名称的图片文件；
删除.html后缀的文件；
向.ftl后缀的文件注入预设的注入信息。
第二方面，本发明实施例还提供一种前端页面应用的开发装置，包括：
源文件获取模块，用于获取基于Vue开发的源文件；
语法树模块，用于读取所述源文件所有页面的索引文件，解析所述索引文件得到语法树；
标签转换模块，用于基于预设的处理规则替换所述语法树中的标签，得到符合freemarker语法标签的待处理文件；
文件打包模块，用于将所述待处理文件进行打包；
模块化程序构建模块，用于利用所述待处理文件构建web模块化程序。
第三方面，本发明实施例还提供一种计算机设备，其包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如第一方面所述的前端页面应用的开发方法中的步骤。
第四方面，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如第一方面所述的前端页面应用的开发方法中的步骤。
本发明实施例提供的前端页面应用的开发方法，在开发阶段享受Vue框架前后端分离开发的优势，前端不需要启动后端项目，因此开发人员无需记住freemarker语法，到上线生产环境时，自动转换为freemarker语法，从而提高SPA的性能，解决了采用Vue开发SPA应用带来的首屏渲染性能差、不利于seo、freemarker开发带来的开发效率低、上手难度高的问题。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的一种前端页面应用的开发方法的流程图；
图2是本发明实施例提供的一种前端页面应用的开发方法的第二流程图；
图3是本发明实施例提供的一种前端页面应用的开发方法的步骤S202的子流程框图；
图4是本发明实施例提供的一种前端页面应用的开发方法的步骤S103的子流程框图；
图5是本发明实施例提供的一种前端页面应用的开发方法的预设语法转换规则示意图；
图6是本发明实施例提供的一种前端页面应用的开发方法的第三流程图；
图7是本发明实施例提供的前端页面应用的开发装置的结构示意图；
图8是本发明实施例提供的一种计算机设备的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
如图1所示，图1是本发明实施例提供的一种前端页面应用的开发方法的流程图，该方法包括步骤：
S101、获取基于Vue开发的源文件。
本发明实施例所述的源文件是通过本地开发得到的Vue源文件。在SPA开发项目中，利用Vue进行开发工作往往是多人同时进行的，因此各个开发人员所编写的Vue源文件通常会包含不同的内容，以实现不同的功能模块。本发明实施例用于获取所述源文件的方式为异步请求的方式，通过一个异步程序来向所述开发人员获取不同功能模块的所述源文件。
请参照图2，图2是本发明实施例提供的一种前端页面应用的开发方法的第二流程图，在上述步骤S101获取到所述源文件后，进行以下步骤：
S201、判断所述源文件中是否包含图片文件。
在一个完整的SPA项目中，除了构成web页面的最基本的页面文件，还包括在页面上进行显示或者播放的媒体文件，其中，所述图片文件为所述源文件中的依赖文件，其具体存放在所述源文件的文件夹中，或者通过网络地址链接加载到所述源文件中。
S202、若包含图片文件，则对图片进行预处理，生成带hash名称的图片文件。
若所述源文件中包含所述图片文件，则所述图片文件进行数据验证，本发明实施例所使用的具体方式为hash算法，根据所述图片文件生成hash值，并将所述hash值作为所述图片文件的名称，最后得到所述带hash名称的图片文件。具体的，若所述源文件中包含所述图片文件，请参照图3，图3是本发明实施例提供的一种前端页面应用的开发方法的步骤S202的子流程框图，包括以下步骤：
S2021、通过fs文件系统API读取源文件assets目录下的所有图片。
所述fs文件系统为一种web开发所使用的常用逻辑接口，所述fs文件系统能够在事件循环线程之外执行异步的文件系统操作，因此使用fs文件系统不会影响到所述源文件的运行。本发明实施例通过所述fs文件系统读取所述源文件的assets目录下的所有图片，以进行下一步骤。
S2022、生成临时图片文件。
将上述步骤S2021得到的所述源文件的assets目录下的所有图片转换为所述临时图片文件。
S2023、通过webpack处理生成所述带hash名称的图片文件。
在本发明实施例中，使用webpack作为Vue项目的打包工具，因此可以利用所述webpack的自带功能对所述临时图片文件进行数据验证，具体的方式为，对所述临时图片文件进行hash计算，从而得到所述临时图片文件的hash值，并将所述hash值设为所述临时图片文件的名称，从而得到所述带hash名称的图片文件。
S102、读取所述源文件所有页面的索引文件，解析所述索引文件得到语法树。
所述索引文件为所述源文件中的页面在SPA开发项目中开发框架自动生成的带有文件信息的文件，所述索引文件中包含所述源文件之间的依赖信息、开发语言和媒体文件等。在本发明实施例中，获取到所述源文件后，对所述源文件中的所有所述索引文件进行读取，获取所述源文件的所述开发语言信息，并生成所述语法树，所述语法树为所述源文件中利用Vue语言进行开发所用到的Vue语法在所述源文件中抽象位置信息。
具体的，所述源文件是一个Vue文件，其拥有JavaScript语言的基本样式，即在编写所述Vue文件时，其语法的使用在整个页面文件中是一一对应的。在计算机科学中，语法树(Abstract Syntax Tree，AST)，是源代码语法架构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构，这种结构是固定的，进一步地说，这种结构都有着规范的文件进行指导，从而使开发人员能够快速通过规范文件进行代码撰写，而结构在所述语法树中之所以是“抽象表示”，一是因为所述语法树中的语法并不会是所述源代码语法中出现的每个细节，比如嵌套括号被隐含在树的结构中，并没有以节点的形式呈现；二是类条件跳转语句，可以使用带有三个分支的节点来表示，因此，通过所述语法树能够很直观地获取到源代码中的结构信息。
S103、基于预设的处理规则替换所述语法树中的标签，得到符合freemarker语法标签的待处理文件。
根据所述语法树，本发明实施例中，具体处理的是所述语法树中的style、html/template、script三处语法，并且其对应的预设的处理规则也有所不同，具体的，请参照图4，图4是本发明实施例提供的一种前端页面应用的开发方法的步骤S103的子流程框图，包括以下步骤：
S301、将所述语法树中的style标签直接转换成index.scss文件。
所述style标签用于在所述Vue文件中实现各种视觉样式，在本发明实施例中，将所述style标签直接转换为用于实现视觉样式的所述index.scss文件。
S302、使用babel工具对所述语法树中的script标签进行处理，生成index.js文件。
所述babel工具本质上是一种文本转换器，其本来是用于在当前和旧的浏览器或运行环境中，将旧版本的ECMAScript 2015+代码转换为JavaScript或者其他向后兼容版本的代码，也就是说，通过所述babel工具能够进行语法的转换。在本发明实施例中，首先利用所述babel工具中的babel/parser对所述语法树中的所述script标签进行向JavaScript语言的转换，得到Javascript语法树，之后，再利用所述babel工具中的babel/generator根据所述Javascript语法树进行所述index.js文件的生成，从而完成通过所述babel工具将所述script标签转换为所述index.js文件的步骤。
S303、将所述语法树中的html/template标签转换为freemarker语法的.html文件。
所述html/template标签是所述Vue文件中的实例化内容，具体地说，所述html标签用于在web页面上显示各种内容，而所述template标签则是web页面上内容的实体，因此所述html/template标签实际上是最为影响所述Vue文件的加载速度的内容。在本发明实施例中，通过预设语法转换规则对所述html/template标签进行转换，从而得到对应的所述freemarker语法的文件，具体的，请参照图5，图5是本发明实施例提供的一种前端页面应用的开发方法的预设语法转换规则示意图。根据图5所示的预设语法转换规则实现语法替换后，生成所述.html文件。
S104、将所述待处理文件进行打包。
将上述步骤S103得到的所述index.scss文件、所述index.js文件、所述freemarker语法的.html文件利用webpack进行打包。
S105、利用所述待处理文件构建web模块化程序。
通过所述webpack将所述index.scss文件、所述index.js文件、所述freemarker语法的.html文件打包后，所述webpack会生成一个完成的项目文件，从而得到所述模块化程序，其具体为，通过所述index.scss文件实现SPA的样式，通过所述index.js文件实现SPA的代码运行，通过所述.html文件实现SPA的内容显示。
优选地，请参照图6，图6是本发明实施例提供的一种前端页面应用的开发方法的第三流程图，在上述步骤S105的所述webpack成功构建所述模块化程序之后，还包括以下步骤：
S401、复制所述带hash名称的图片文件。
将所述带hash名称的图片文件复制到备份文件夹中，以便于SPA的后续维护和内容更新。
S402、删除.html后缀的文件。
在根据原本的所述.html文件生成所述模块化程序之后，现有的后缀为.html的文件便不再使用，所述.html文件是通过所述预设语法转换规则得到的所述freemarker语法的代码文件，而在本发明实施例中是以Vue的语言进行开发的，因此所述.html文件在完成所述模块化程序后便不再有维护的意义，将其删除有利于项目文件的维护。
S403、向.ftl后缀的文件注入预设的注入信息。
所述.ftl后缀的文件是所述freemarker模板的文件后缀名，在本发明实施例中，所述.ftl后缀的文件是所述模块化程序中使用且运行的文件，所述预设的注入信息包括不影响所述模块化程序运行的信息，包括开发人员在开发过程中设计的SPA版本信息、开发流程信息、开发人员或开发商的信息等等。
本发明实施例提供的前端页面应用的开发方法，在开发阶段享受Vue框架前后端分离开发的优势，前端不需要启动后端项目，因此开发人员无需记住Freemarker语法，到上线生产环境时，自动转换为Freemarker语法，从而提高SPA的性能，解决了采用Vue开发SPA应用带来的首屏渲染性能差、不利于seo、Freemarker开发带来的开发效率低、上手难度高的问题。
本发明实施例还提供一种前端页面应用的开发装置，如图7所示，图7是本发明实施例提供的前端页面应用的开发装置的结构示意图，所述前端页面应用的开发装置500包括源文件获取模块501、语法树模块502、标签转换模块503、文件打包模块504、模块化程序构建模块505，其中：
源文件获取模块501，用于获取基于Vue开发的源文件；
语法树模块502，用于读取所述源文件所有页面的索引文件，解析所述索引文件得到语法树；
标签转换模块503，用于基于预设的处理规则替换所述语法树中的标签，得到符合freemarker语法标签的待处理文件；
文件打包模块504，用于将所述待处理文件进行打包；
模块化程序构建模块505，用于利用所述待处理文件构建web模块化程序。
优选的，所述源文件获取模块501还用于：
通过数据异步请求的方式，获取本地开发环境的源文件。
优选的，所述源文件获取模块501还用于：
判断所述源文件中是否包含图片文件；
若包含图片文件，则对图片进行预处理，生成带hash名称的图片文件。
优选的，所述源文件获取模块501还用于：
通过fs文件系统API读取源文件assets目录下的所有图片；
生成临时的所述图片文件；
通过webpack处理生成所述带hash名称的图片文件。
优选的，所述标签转换模块503还用于：
将所述语法树中的style标签直接转换成index.scss文件；
使用babel工具对所述语法树中的script标签进行处理，生成index.js文件。
优选的，所述标签转换模块503还用于：
将所述语法树中的html/template标签转换为freemarker语法的.html文件。
优选的，所述模块化程序构建模块505还用于：
复制所述带hash名称的图片文件；
删除.html后缀的文件；
向.ftl后缀的文件注入预设的注入信息。
本发明实施例提供的前端页面应用的开发装置500可用于实现本发明实施例提供的前端页面应用的开发方法中的步骤，解决的技术问题和达到的技术效果也相同，参上述前端页面应用的开发方法的描述，在此不再赘述。
本发明实施例还提供一种计算机设备，如图8所示，图8是本发明实施例提供的一种计算机设备的结构示意图，该计算机设备600包括：存储器602、处理器601、网络接口603及存储在存储器602上并可在处理器601上运行的计算机程序，处理器601执行计算机程序时实现如本发明实施例提供的前端页面应用的开发方法中的步骤。
请参照图1，具体的，处理器601调用存储于存储器602上的计算机程序执行以下步骤：
S101、获取基于Vue开发的源文件；
S102、读取所述源文件所有页面的索引文件，解析所述索引文件得到语法树；
S103、基于预设的处理规则替换所述语法树中的标签，得到符合freemarker语法标签的待处理文件；
S104、将所述待处理文件进行打包；
S105、利用所述待处理文件构建web模块化程序。
优选的，处理器601调用存储于存储器602上的计算机程序时还执行以下步骤：
通过数据异步请求的方式，获取本地开发环境的源文件。
优选的，处理器601调用存储于存储器602上的计算机程序时还执行以下步骤：
判断所述源文件中是否包含图片文件；
若包含图片文件，则对图片进行预处理，生成带hash名称的图片文件。
优选的，处理器601调用存储于存储器602上的计算机程序时还执行以下步骤：
通过fs文件系统API读取源文件assets目录下的所有图片；
生成临时的所述图片文件；
通过webpack处理生成所述带hash名称的图片文件。
优选的，处理器601调用存储于存储器602上的计算机程序时还执行以下步骤：
将所述语法树中的style标签直接转换成index.scss文件；
使用babel工具对所述语法树中的script标签进行处理，生成index.js文件。
优选的，处理器601调用存储于存储器602上的计算机程序时还执行以下步骤：
将所述语法树中的html/template标签转换为freemarker语法的.html文件。
优选的，处理器601调用存储于存储器602上的计算机程序时还执行以下步骤：
复制所述带hash名称的图片文件；
删除.html后缀的文件；
向.ftl后缀的文件注入预设的注入信息。
本发明实施例提供的计算机设备600能够实现前端页面应用的开发方法的实施例中的各个实施方式，以及相应有益效果，为避免重复，这里不再赘述。
需要指出的是，图中仅示出了具有组件的601-603，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备600是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(ApplicationSpecific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable GateArray，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。
计算机设备600可以是桌上型计算机、笔记本及掌上电脑等计算设备。计算机设备600可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。
存储器602至少包括一种类型的可读存储介质，可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器602可以是计算机设备600的内部存储单元，例如该计算机设备600的硬盘或内存。在另一些实施例中，存储器602也可以是计算机设备600的外部存储设备，例如该计算机设备600上配备的插接式硬盘，智能存储卡(Smart Media Card，简称SMC)，安全数字(Secure Digital，简称SD)卡，闪存卡(FlashCard)等。当然，存储器602还可以既包括计算机设备600的内部存储单元也包括其外部存储设备。本实施例中，存储器602通常用于存储安装于计算机设备600的操作系统和各类应用软件，例如前端页面应用的开发方法的程序代码等。此外，存储器602还可以用于暂时地存储已经输出或者将要输出的各类数据。
处理器601在一些实施例中可以是中央处理器(Central Processing Unit，简称CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器601通常用于控制计算机设备600的总体操作。本实施例中，处理器601用于运行存储器602中存储的程序代码或者处理数据，例如运行前端页面应用的开发方法的程序代码。
网络接口603可包括无线网络接口或有线网络接口，该网络接口603通常用于在计算机设备600与其他电子设备之间建立通信连接。
本发明实施例还提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器601执行时实现实施例提供的前端页面应用的开发方法中的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存取存储器(Random AccessMemory，简称RAM)等。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。
以上所揭露的仅为本发明较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。
Claims (10)
1.一种前端页面应用的开发方法，其特征在于，包括步骤：
获取基于Vue开发的源文件；
读取所述源文件所有页面的索引文件，解析所述索引文件得到语法树；
基于预设的处理规则替换所述语法树中的标签，得到符合freemarker语法标签的待处理文件；
将所述待处理文件进行打包；
利用所述待处理文件构建web模块化程序。
2.根据权利要求1所述的前端页面应用的开发方法，其特征在于，所述获取基于Vue开发的源文件的步骤包括：
通过数据异步请求的方式，获取本地开发环境的源文件。
3.根据权利要求1所述的前端页面应用的开发方法，其特征在于，所述读取所述源文件所有页面的索引文件，解析所述索引文件得到语法树的步骤之前，还包括步骤：
判断所述源文件中是否包含图片文件；
若包含图片文件，则对图片进行预处理，生成带hash名称的图片文件。
4.根据权利要求3所述的前端页面应用的开发方法，其特征在于，所述对图片进行预处理，生成带hash名称的图片文件的步骤包括：
通过fs文件系统API读取源文件assets目录下的所有图片；
生成临时的所述图片文件；
通过webpack处理生成所述带hash名称的图片文件。
5.根据权利要求1所述的前端页面应用的开发方法，其特征在于，所述基于预设的处理规则替换所述语法树中的标签，得到符合freemarker语法标签的待处理文件的步骤包括：
将所述语法树中的style标签直接转换成index.scss文件；
使用babel工具对所述语法树中的script标签进行处理，生成index.js文件。
6.根据权利要求5所述的前端页面应用的开发方法，其特征在于，所述基于预设的处理规则替换所述语法树中的标签，得到符合freemarker语法标签的待处理文件的步骤还包括：
将所述语法树中的html/template标签转换为freemarker语法的.html文件。
7.根据权利要求3所述的前端页面应用的开发方法，其特征在于，所述利用所述待处理文件构建web模块化程序的步骤之后还包括以下步骤：
复制所述带hash名称的图片文件；
删除.html后缀的文件；
向.ftl后缀的文件注入预设的注入信息。
8.一种前端页面应用的开发装置，其特征在于，包括：
源文件获取模块，用于获取基于Vue开发的源文件；
语法树模块，用于读取所述源文件所有页面的索引文件，解析所述索引文件得到语法树；
标签转换模块，用于基于预设的处理规则替换所述语法树中的标签，得到符合freemarker语法标签的待处理文件；
文件打包模块，用于将所述待处理文件进行打包；
模块化程序构建模块，用于利用所述待处理文件构建web模块化程序。
9.一种计算机设备，其特征在于，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如权利要求1至7中任一项所述的前端页面应用的开发方法中的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述的前端页面应用的开发方法中的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111023459.XA CN113741900B (zh) | 2021-08-31 | 2021-08-31 | 一种前端页面应用的开发方法、装置及相关设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111023459.XA CN113741900B (zh) | 2021-08-31 | 2021-08-31 | 一种前端页面应用的开发方法、装置及相关设备 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113741900A true CN113741900A (zh) | 2021-12-03 |
| CN113741900B CN113741900B (zh) | 2024-03-19 |
Family
ID=78734801
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111023459.XA Active CN113741900B (zh) | 2021-08-31 | 2021-08-31 | 一种前端页面应用的开发方法、装置及相关设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113741900B (zh) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150302110A1 (en) * | 2014-04-21 | 2015-10-22 | Alibaba Group Holding Limited | Decoupling front end and back end pages using tags |
| CN110333863A (zh) * | 2019-06-17 | 2019-10-15 | 无线生活（杭州）信息科技有限公司 | 一种生成、显示小程序页面的方法及装置 |
| CN111176629A (zh) * | 2019-12-24 | 2020-05-19 | 中国建设银行股份有限公司 | 一种应用开发的方法和装置 |
| CN111209004A (zh) * | 2019-12-30 | 2020-05-29 | 北京健康之家科技有限公司 | 代码转换方法及装置 |
| CN111539200A (zh) * | 2020-04-22 | 2020-08-14 | 北京字节跳动网络技术有限公司 | 一种生成富文本的方法、装置、介质和电子设备 |
| CN112417338A (zh) * | 2020-11-30 | 2021-02-26 | 北京博瑞彤芸科技股份有限公司 | 一种页面适配方法、系统及设备 |
-
2021
- 2021-08-31 CN CN202111023459.XA patent/CN113741900B/zh active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150302110A1 (en) * | 2014-04-21 | 2015-10-22 | Alibaba Group Holding Limited | Decoupling front end and back end pages using tags |
| CN105094754A (zh) * | 2014-04-21 | 2015-11-25 | 阿里巴巴集团控股有限公司 | 基于标签的程序开发方法、页面请求响应方法及其装置 |
| CN110333863A (zh) * | 2019-06-17 | 2019-10-15 | 无线生活（杭州）信息科技有限公司 | 一种生成、显示小程序页面的方法及装置 |
| CN111176629A (zh) * | 2019-12-24 | 2020-05-19 | 中国建设银行股份有限公司 | 一种应用开发的方法和装置 |
| CN111209004A (zh) * | 2019-12-30 | 2020-05-29 | 北京健康之家科技有限公司 | 代码转换方法及装置 |
| CN111539200A (zh) * | 2020-04-22 | 2020-08-14 | 北京字节跳动网络技术有限公司 | 一种生成富文本的方法、装置、介质和电子设备 |
| CN112417338A (zh) * | 2020-11-30 | 2021-02-26 | 北京博瑞彤芸科技股份有限公司 | 一种页面适配方法、系统及设备 |
Non-Patent Citations (2)
| Title |
|---|
| JAVASCRIPT中文网: "npm 包 freemarker.js 使用教程", pages 1 - 4, Retrieved from the Internet <URL:http://www.javascriptcn.com/post/67432> * |
| 静夜思龙: "后台使用freeMarker和前端使用vue的方法", pages 1 - 3, Retrieved from the Internet <URL:https://www.cnblogs.com/dragonlong-0606/p/11017338.html> * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113741900B (zh) | 2024-03-19 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109840083B (zh) | 网页组件模板构建方法、装置、计算机设备和存储介质 | |
| CN116069325B (zh) | 前端项目构建方法、装置、设备及计算机可读存储介质 | |
| CN114996619A (zh) | 一种页面显示的方法、装置、计算机设备及存储介质 | |
| CN110389755B (zh) | 代码处理方法及装置、电子设备和计算机可读存储介质 | |
| CN105683957A (zh) | 样式表推测性预加载 | |
| CN113918195A (zh) | 应用界面更新方法、装置、电子设备及可读存储介质 | |
| CN114153459A (zh) | 接口文档生成方法及装置 | |
| CN113031932A (zh) | 项目开发方法、装置、电子设备及存储介质 | |
| CN110187886B (zh) | 一种文档网站生成方法及终端 | |
| CN114706616A (zh) | 小程序构建方法和装置 | |
| CN112835568A (zh) | 一种项目构建方法和装置 | |
| CN112269602A (zh) | 一种WebAssembly加载方法、装置及存储介质 | |
| CN116719523A (zh) | 页面渲染方法及电子设备 | |
| CN116432624A (zh) | 一种微服务api文档生成方法、装置、设备、存储介质 | |
| CN113741900B (zh) | 一种前端页面应用的开发方法、装置及相关设备 | |
| US20220284371A1 (en) | Method, device and medium for a business function page | |
| CN114398912A (zh) | 语言处理方法、装置、设备及存储介质 | |
| CN112417827A (zh) | 在线文档编辑展示的方法、装置、电子设备及存储介质 | |
| CN113961279A (zh) | 页面渲染方法、装置、服务器和存储介质 | |
| CN111782196A (zh) | 基于mvp架构的开发方法及装置 | |
| CN112632436A (zh) | 一种网页显示方法、装置、电子设备及存储介质 | |
| CN117311799B (zh) | 一种软件项目页面的配置方法 | |
| CN115618887B (zh) | 动态长文本国际化方法、装置、设备及存储介质 | |
| CN113986322B (zh) | 一种动态修改页面代码的方法、装置及存储介质 | |
| CN112732254B (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 |