一种前端页面应用的开发方法、装置及相关设备制造方法及图纸

本发明专利技术属于互联网技术领域，尤其涉及一种前端页面应用的开发方法、装置及相关设备，所述方法包括获取基于Vue开发的源文件；读取所述源文件所有页面的索引文件，解析所述索引文件得到语法树；基于预设的处理规则替换所述语法树中的标签，得到符合freemarker语法标签的待处理文件；将所述待处理文件进行打包；利用所述待处理文件构建web模块化程序。本方法解决了采用Vue开发SPA应用带来的首屏渲染性能差、不利于seo、Freemarker开发带来的开发效率低、上手难度高的问题。上手难度高的问题。上手难度高的问题。

【技术实现步骤摘要】
一种前端页面应用的开发方法、装置及相关设备


[0001]本专利技术属于互联网
，尤其涉及一种前端页面应用的开发方法、装置及相关设备。

技术介绍

[0002]通常一个完整的页面应用包含前端和后端，其中，前端是面向用户的、用于提供给用户操作逻辑的网页。单页面应用(single page application，简称SPA)，是一种只有一个页面的web项目，单页面应用在运行时只加载一次资源，然后页面上的操作交互、数据交互是通过router、ajax等来进行，页面并没有刷新，页面只在最开始前刷新一次，因此，单页面应用常用来实现静态页面、只有局部内容刷新的页面或者用于实现特定功能的页面。
[0003]常见的单页面应用的开发工具有Vue、React等。Vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架；而freemarker是一种基于模板和要改变的数据，用来生成输出文本的通用工具，freemarker的语法与java很相似，它虽然不是web应用框架，但能够用来作为web框架的一个组件，因为其非常轻量。
[0004]在现有的SPA开发过程中，使用Vue进行SPA的开发有着以下缺点：首屏渲染能力差，不利于seo。首屏渲染能力是指Vue编写的SPA在初次加载时所需要的时间，在这个过程中，webpack常用来作为在SPA渲染前将其打包为可运行的js文件的工具，之后浏览器需要把js请求下载下来，再由js文件生成html代码，最后通过浏览器渲染生成页面，正因为如此，使得SPA的加载与渲染时间变长，从而影响用户体验；seo(Search Engine Optimization，搜索引擎优化)是利用搜索引擎规则来提高web页面在搜索引擎中的自然排名的技术，若一个web页面的加载时间过长，且SPA是由js生成的html代码，不符合搜索引擎规则的优化，自然地其自然排名就低，这也是利用Vue开发的SPA不利于seo的原因。而利用freemarker组件开发的SPA相较于使用Vue开发的应用大小就显得很轻量，不会出现Vue开发的SPA的缺点，但问题是freemarker不是一个完整的框架，使得其开发效率非常低，对于开发人员来说上手难度较高。

技术实现思路

[0005]本专利技术实施例提供一种前端页面应用的开发方法，旨在解决现上述SPA应用程序首屏渲染能力差、不利于seo，且利用freemarker进行开发的效率低的问题。
[0006]第一方面，本专利技术实施例提供一种前端页面应用的开发方法，包括步骤：
[0007]获取基于Vue开发的源文件；
[0008]读取所述源文件所有页面的索引文件，解析所述索引文件得到语法树；
[0009]基于预设的处理规则替换所述语法树中的标签，得到符合freemarker语法标签的待处理文件；
[0010]将所述待处理文件进行打包；
[0011]利用所述待处理文件构建web模块化程序。
[0012]更进一步地，所述获取基于Vue开发的源文件的步骤包括：
[0013]通过数据异步请求的方式，获取本地开发环境的源文件。
[0014]更进一步地，所述读取所述源文件所有页面的索引文件，解析所述索引文件得到语法树的步骤之前，还包括步骤：
[0015]判断所述源文件中是否包含图片文件；
[0016]若包含图片文件，则对图片进行预处理，生成带hash名称的图片文件。
[0017]更进一步地，所述对图片进行预处理，生成带hash名称的图片文件的步骤包括：
[0018]通过fs文件系统API读取源文件assets目录下的所有图片；
[0019]生成临时的所述图片文件；
[0020]通过webpack处理生成所述带hash名称的图片文件。
[0021]更进一步地，所述基于预设的处理规则替换所述语法树中的标签，得到符合freemarker语法标签的待处理文件的步骤包括：
[0022]将所述语法树中的style标签直接转换成index.scss文件；
[0023]使用babel工具对所述语法树中的script标签进行处理，生成index.js文件。
[0024]更进一步地，所述基于预设的处理规则替换所述语法树中的标签，得到符合freemarker语法标签的待处理文件的步骤还包括：
[0025]将所述语法树中的html/template标签转换为freemarker语法的.html文件。
[0026]更进一步地，所述利用所述待处理文件构建web模块化程序的步骤之后还包括以下步骤：
[0027]复制所述带hash名称的图片文件；
[0028]删除.html后缀的文件；
[0029]向.ftl后缀的文件注入预设的注入信息。
[0030]第二方面，本专利技术实施例还提供一种前端页面应用的开发装置，包括：
[0031]源文件获取模块，用于获取基于Vue开发的源文件；
[0032]语法树模块，用于读取所述源文件所有页面的索引文件，解析所述索引文件得到语法树；
[0033]标签转换模块，用于基于预设的处理规则替换所述语法树中的标签，得到符合freemarker语法标签的待处理文件；
[0034]文件打包模块，用于将所述待处理文件进行打包；
[0035]模块化程序构建模块，用于利用所述待处理文件构建web模块化程序。
[0036]第三方面，本专利技术实施例还提供一种计算机设备，其包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如第一方面所述的前端页面应用的开发方法中的步骤。
[0037]第四方面，本专利技术实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如第一方面所述的前端页面应用的开发方法中的步骤。
[0038]本专利技术实施例提供的前端页面应用的开发方法，在开发阶段享受Vue框架前后端分离开发的优势，前端不需要启动后端项目，因此开发人员无需记住freemarker语法，到上线生产环境时，自动转换为freemarker语法，从而提高SPA的性能，解决了采用Vue开发SPA
应用带来的首屏渲染性能差、不利于seo、freemarker开发带来的开发效率低、上手难度高的问题。
附图说明
[0039]为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0040]图1是本专利技术实施例提供的一种前端页面应用的开发方法的流程图；
[0041]图2是本专利技术实施例提供的一种前端页面应用的开发方法的第二流程图；
[0042]图本文档来自技高网...

【技术保护点】

【技术特征摘要】
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....

【专利技术属性】
技术研发人员：曾文清，黄林彬，虞孝伟，
申请(专利权)人：广州数励科技有限公司，
类型：发明
国别省市：