CN109543128B

CN109543128B - 一种基于编程语言的前端框架项目实现方法及电子设备

Info

Publication number: CN109543128B
Application number: CN201811224532.8A
Authority: CN
Inventors: 孙悦; 李天驰; 罗倩
Original assignee: Shenzhen Dianmao Technology Co Ltd
Current assignee: Shenzhen Dianmao Technology Co Ltd
Priority date: 2018-10-19
Filing date: 2018-10-19
Publication date: 2021-01-12
Anticipated expiration: 2038-10-19
Also published as: CN109543128A

Abstract

本发明公开一种基于编程语言的前端框架项目实现方法及电子设备，方法包括步骤：A、预先进行基础seo配置；B、对指定页面进行预渲染配置，并开启预渲染；C、构建项目，在配置的生成目录下生成文件夹；D、通过搜索引擎抓取网站，访问网站不同路由；E、通过不同路由返回对应的html文件。本发明将项目中不经常变化的页面进行预渲染，也就是在构建项目的时候，打包项目之前按照路由的层级进行动态渲染，输出对应的html，使搜索引擎可以将这些页面内容从html中抓取，从而提升网站seo。

Description

一种基于编程语言的前端框架项目实现方法及电子设备

技术领域

本发明涉及计算机技术领域，尤其涉及一种基于编程语言的前端框架项目实现方法。

背景技术

seo是指搜索引擎优化，即利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益；seo包含站外seo和站内seo两方面；为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力。

主流前端框架都是单页面应用，数据采用ajax异步请求的方式从后端请求，然后在前端渲染。项目编译后只有一个index.html文件，并且内容只剩下js和css的引用，不方便抓取html文件，非常不利于seo。

因此，现有技术还有待于改进和发展。

发明内容

鉴于上述现有技术的不足，本发明的目的在于提供一种基于编程语言的前端框架项目实现方法及电子设备，旨在解决现有技术中前端框架项目不方便抓取html文件的问题。

本发明的技术方案如下：

一种基于编程语言的前端框架项目实现方法，其中，包括步骤：

A、预先进行基础seo配置；

B、对指定页面进行预渲染配置，并开启预渲染；

C、构建项目，在配置的生成目录下生成文件夹；

D、通过搜索引擎抓取网站，访问网站不同路由；

E、通过不同路由返回对应的html文件。

所述的基于编程语言的前端框架项目实现方法，其中，所述步骤B中，预渲染的配置项包括：输出的指定页面的文件目录地址、项目中需要预渲染的路由地址数组、项目是否需要预渲染的事件配置。

所述的基于编程语言的前端框架项目实现方法，其中，所述步骤A包括：

在meta标签中配置网站关键词；

在html文件中使用语义化标签；

将图片的alt属性设置为网站关键词。

所述的基于编程语言的前端框架项目实现方法，其中，所述步骤B还包括：

在webpack.config.js中配置prerender-spa-plugin插件；

触发配置的事件来开启预渲染。

所述的基于编程语言的前端框架项目实现方法，其中，所述步骤E中，将所述html文件保存于所述生成目录下。

所述的基于编程语言的前端框架项目实现方法，其中，在dom元素挂载的回调中触发配置的事件来开启预渲染。

一种电子设备，其中，包括：

处理器，适于实现各指令，以及

存储设备，适于存储多条指令，所述指令适于由处理器加载并执行：

预先进行基础seo配置；

对指定页面进行预渲染配置，并开启预渲染；

构建项目，在配置的生成目录下生成文件夹；

通过搜索引擎抓取网站，访问网站不同路由；

通过不同路由返回对应的html文件。

一种非易失性计算机可读存储介质，其中，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行所述的基于编程语言的前端框架项目实现方法。

一种计算机程序产品，其中，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使所述处理器执行所述的基于编程语言的前端框架项目实现方法。

有益效果：本发明将项目中不经常变化的页面进行预渲染，也就是在构建项目的时候，打包项目之前按照路由的层级进行动态渲染，输出对应的html，使搜索引擎可以将这些页面内容从html中抓取，从而提升网站seo。

附图说明

图1为本发明一种基于编程语言的前端框架项目实现方法较佳实施例的流程示意图。

图2为本发明一种电子设备较佳实施例的结构框图。

具体实施方式

本发明提供一种基于编程语言的前端框架项目实现方法及电子设备，为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

请参阅图1，图1为本发明一种基于编程语言的前端框架项目实现方法较佳实施例的流程示意图，包括步骤：

S1、预先进行基础seo配置；

S2、对指定页面进行预渲染配置，并开启预渲染；

S3、构建项目，在配置的生成目录下生成文件夹；

S4、通过搜索引擎抓取网站，访问网站不同路由；

S5、通过不同路由返回对应的html文件。

本发明将项目中不经常变化的页面进行预渲染，也就是在构建项目的时候，打包项目之前按照路由的层级进行动态渲染，输出对应的html，使搜索引擎可以将这些页面内容从html中抓取，从而提升网站seo。

具体地，先在步骤S1中进行基础seo配置。具体是在网站的index.html中的标签中进行配置。

进一步，所述步骤S1包括：

在meta标签中配置网站关键词；

在html文件中使用语义化标签；

将图片的alt属性设置为网站关键词。

meta标签是HTML标记HEAD区的一个关键标签，它位于HTML文档的<head>和<title>之间(有些也不是在<head>和<title>之间)。它提供的信息虽然用户不可见，但却是文档的最基本的元信息。<meta>除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。利用Meta标签的Description(网站内容描述)和Keywords(关键字)属性，加入网站的关键字或者网页的关键字，可使网站更加贴近用户体验。

语义化标签，旨在让标签有自己的含义，其具有以下优点：代码结构清晰，方便阅读，有利于团队合作开发；方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页；有利于搜索引擎优化(seo)。

语义化标签主要有：

<title>：页面主体内容。

<hn>：h1～h6，分级标题，<h1>与<title>协调有利于搜索引擎优化。

<ul>：无序列表。

<li>：有序列表。

<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。

<nav>：标记导航，仅对文档中重要的链接群使用。

<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

<article>：定义外部的内容，其中的内容独立于文档的其余部分。

<section>：定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。

<footer>：页脚，只有当父级是body时，才是整个页面的页脚。

<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。

<strong>：和em标签一样，用于强调文本，但它强调的程度更强一些。

<em>：将其中的文本表示为强调的内容，表现为斜体。

<mark>：使用黄色突出显示部分文本。

<figure>：规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin)。

<figcaption>：定义figure元素的标题，应该被置于figure元素的第一个或最后一个子元素的位置。

<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

<blockquoto>：定义块引用，块引用拥有它们自己的空间。

<q>：短的引述(跨浏览器问题，尽量避免使用)。

<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。

<abbr>：简称或缩写。

<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。

<address>：作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)。

<del>：移除的内容。

<ins>：添加的内容。

<code>：标记代码。

<meter>：定义已知范围或分数值内的标量测量。(Internet Explorer不支持meter标签)

<progress>：定义运行中的进度(进程)。

<img>标签的alt属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。alt属性为用户由于某些原因无法查看图像时提供了备选的信息。alt属性是一个必需的属性，它规定在图像无法显示时的替代文本。假设由于下列原因用户无法查看图像，alt属性可以为图像提供替代的信息：网速太慢、src属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器。

在所述步骤S2中，对指定页面进行预渲染配置，并开启预渲染。

其中指定页面是指不经常变化的页面，对于不同用户来说基本内容相同。对这种页面进行预渲染，可以在构建项目的时候,打包项目之前按照路由的层级进行动态渲染出对应的html。

进一步，所述步骤S2还包括：

在webpack.config.js中配置prerender-spa-plugin插件。前端项目绝大多数采用webpack作为打包工具，此打包工具可以将网站的各类资源，包括js、css以及图片等资源打包为js文件。webpack在执行时，除在命令行传入参数，还可以通过指定的配置文件来执行。默认会搜索当前目录下webpack.config.js，这个文件是一个node.js模块，返回一个json格式的配置对象，或者通过--config选项来指定配置文件。

最后在main.js里面修改：

到这里预编译的配置修改完成。

进一步，预渲染的配置项包括：输出的指定页面的文件目录地址、项目中需要预渲染的路由地址数组、项目是否需要预渲染的事件配置。

具体是在项目根目录下的webpack.config.js中配置预渲染参数(配置项)。

输出的指定页面的文件目录地址：比如希望预渲染生成的html文件放在项目根目录下的dist文件夹下，就可配置为./dist。

项目中需要预渲染的路由地址数组：例如官网项目的首页和某排行榜页面希望达到预渲染的效果，那么配置这两个页面的路由地址数组[‘index’,’rank’]。

进一步，所述步骤S2还包括：

触发配置的事件来开启预渲染。进一步，在dom元素挂载的回调中触发配置的事件来开启预渲染，即在main.js中，通过dom元素挂载的回调触发配置的事件(router-event)来开启预渲染。

在所述步骤S3中，构建项目，在配置的生成目录下生成文件夹。

在构建项目时，在本地驱动一个phantomjs，即用代码来访问配置预渲染的路由，再将phantomjs中渲染的页面输出到html文档中。

在所述步骤S4中，通过搜索引擎抓取网站，访问网站不同路由。

具体地，搜索引擎抓取网站时，读取meta标签内容，访问网站不同路由。

在所述步骤S5中，通过不同路由返回对应的html文件，这样方便搜索引擎抓取网页内容信息，从而提升网站seo。

在没有使用预渲染前，项目会被打包为index.html、app.css(项目样式代码)、vendor.js(第三方库)、app.js业务逻辑代码。访问页面时，至少要先加载这些文件之后才能展示页面，而采用本发明的预渲染方案后，只需要加载页面对应的html和css之后就能看到页面，大大提高了加载效率，提升了用户体验。

进一步，所述步骤S5中，将所述html文件保存于所述生成目录下。

本发明在不改变现有技术框架的基础上，以一种成本较低的方式解决了seo问题。本发明所提供的技术方案适用场景广泛，能够基于不同的前端框架实现。

本发明还提供一种电子设备10，如图2所示，其包括：

处理器110，适于实现各指令，以及

存储设备120，适于存储多条指令，所述指令适于由处理器110加载并执行：

预先进行基础seo配置；

对指定页面进行预渲染配置，并开启预渲染；

构建项目，在配置的生成目录下生成文件夹；

通过搜索引擎抓取网站，访问网站不同路由；

通过不同路由返回对应的html文件。

所述处理器110可以为通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)、单片机、ARM(Acorn RISC Machine)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。还有，处理器还可以是任何传统处理器、微处理器或状态机。处理器也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP核、任何其它这种配置。

存储设备120作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的基于编程语言的前端框架项目实现方法对应的程序指令。处理器通过运行存储在存储设备中的非易失性软件程序、指令以及单元，从而执行基于编程语言的前端框架项目实现方法的各种功能应用以及数据处理，即实现上述方法实施例。

关于上述电子设备10的具体技术细节在前面的方法中已有详述，故不再赘述。

本发明还提供一种非易失性计算机可读存储介质，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行所述的基于编程语言的前端框架项目实现方法。

本发明还提供一种计算机程序产品，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使所述处理器执行所述的基于编程语言的前端框架项目实现方法。

应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。

Claims

1.一种基于编程语言的前端框架项目实现方法，其特征在于，包括步骤：

A、预先进行基础seo配置；

B、对指定页面进行预渲染配置，并开启预渲染；

C、构建项目，在配置的生成目录下生成文件夹；

D、通过搜索引擎抓取网站，访问网站不同路由；

E、通过不同路由返回对应的html文件；

所述步骤A包括：

在meta标签中配置网站关键词；

在html文件中使用语义化标签；

将图片的alt属性设置为网站关键词；

所述步骤B还包括：

在webpack.config.js中配置prerender-spa-plugin插件；

所述步骤A还包括预先在网站的index.html中的标签中进行配置；

所述步骤B还包括在打包项目之前按照路由的层级进行动态渲染出对应的html；

所述步骤B中，预渲染的配置项包括：输出的指定页面的文件目录地址、项目中需要预渲染的路由地址数组、项目是否需要预渲染的事件配置；

所述步骤B还包括：

触发配置的事件来开启预渲染；

所述步骤E中，将所述html文件保存于所述生成目录下；

在dom元素挂载的回调中触发配置的事件来开启预渲染；

步骤C还包括：在构建项目时，在本地驱动一个phantomjs，即用代码来访问配置预渲染的路由，再将phantomjs中渲染的页面输出到html文档中；

将项目中不经常变化的页面进行预渲染，打包项目之前按照路由的层级进行动态渲染，输出对应的html，使搜索引擎将这些页面内容从html中抓取，提升网站seo。

2.一种电子设备，其特征在于，包括：

处理器，适于实现各指令，以及

预先进行基础seo配置；

对指定页面进行预渲染配置，并开启预渲染；

构建项目，在配置的生成目录下生成文件夹；

通过搜索引擎抓取网站，访问网站不同路由；

通过不同路由返回对应的html文件；

在meta标签中配置网站关键词；

在html文件中使用语义化标签；

将图片的alt属性设置为网站关键词；

预先在网站的index.html中的标签中进行配置；

在打包项目之前按照路由的层级进行动态渲染出对应的html；

渲染的配置项包括：输出的指定页面的文件目录地址、项目中需要预渲染的路由地址数组、项目是否需要预渲染的事件配置；

触发配置的事件来开启预渲染；

将所述html文件保存于所述生成目录下；

在dom元素挂载的回调中触发配置的事件来开启预渲染；

在构建项目时，在本地驱动一个phantomjs，即用代码来访问配置预渲染的路由，再将phantomjs中渲染的页面输出到html文档中；

3.一种非易失性计算机可读存储介质，其特征在于，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行权利要求1所述的基于编程语言的前端框架项目实现方法。