CN110532491B - 前端页面构建方法及装置 - Google Patents

Abstract

本发明是关于前端页面构建方法及装置。该方法包括：在满足前端构建条件时，启动用于前端构建的守护进程；利用所述守护进程对前端页面的视图文件进行构建，获得前端页面的渲染内容；将所述前端页面的渲染内容和所述前端页面的数据内容返回至用户端，以重建所述前端页面。通过本发明的技术方案，有利于提高开发效率，避免每次启动node应用均进行前端渲染也影响用户的正常体验，页面打开性能也大幅上升。

Description

前端页面构建方法及装置

技术领域

本发明涉及页面处理技术领域，尤其涉及前端页面构建方法及装置。

背景技术

目前，对于配置大于约定的node(是一个让JavaScript运行在服务端的开发平台)服务端渲染框架而言，node服务端渲染框架与前端渲染场常常会联系在一起，而联系在一起就会导致在开发环境下，一旦修改node服务端代码或重新启动node应用时会导致前端的重新构建，当应用规模达到一定程度后，前端构建(即前端渲染)会非常缓慢，导致开发效率大幅下降；同时，每次启动均进行前端渲染也影响用户对node应用的正常体验。

发明内容

本发明实施例提供了前端页面构建方法及装置。所述技术方案如下：

根据本发明实施例的第一方面，提供一种前端页面构建方法，包括：

在满足前端构建条件时，启动用于前端构建的守护进程；

利用所述守护进程对前端页面的视图文件进行构建，获得前端页面的渲染内容；

将所述前端页面的渲染内容和所述前端页面的数据内容返回至用户端，以重建所述前端页面。

在一个实施例中，所述方法还包括：

通过所述守护进程监测所述前端页面的视图文件是否发生变化；

当发生变化时，确定满足前端构建条件；

所述利用所述守护进程对前端页面的视图文件进行构建，包括：

使用所述守护进程和变化后的视图文件进行前端页面构建，获得所述前端页面的渲染内容；

或者

在首次启动所述前端页面所在的应用时，确定满足前端构建条件。

在一个实施例中，所述方法还包括：

扫描预先存储的所述前端页面的路由文件，获得与所述路由文件对应的视图文件；

生成与所述视图文件对应的入口文件；

获取所述前端页面的数据内容。

在一个实施例中，所述方法还包括：

确定用于管理所述前端页面的当前主进程；

为所述当前主进程创建子进程，使其成为运行在后台的守护进程；

所述利用所述守护进程对前端页面的视图文件进行构建，获得前端页面的渲染内容，包括：

在所述守护进程中启动前端构建工具；

将所述入口文件传递给所述前端构建工具进行前端构建，获得所述前端页面的渲染内容；

将所述渲染内容返回给主进程；

所述将所述前端页面的渲染内容和所述前端页面的数据内容返回至用户端，以重建所述前端页面，包括：

通过所述主进程将所述前端页面的渲染内容添加至所述前端页面的数据内容中，获得所述前端页面的总数据；

通过所述主进程将所述前端页面的总数据发送至所述用户端的浏览器中进行渲染。

在一个实施例中，所述方法还包括：

在所述前端页面的数据内容对应的代码被修改时，重启所述主进程；

通过所述主进程尝试所述守护进程建立连接，若成功建立连接，则获取所述守护进程获得的渲染内容。

根据本发明实施例的第二方面，提供一种前端页面构建装置，包括：

启动模块，用于在满足前端构建条件时，启动用于前端构建的守护进程；

构建模块，用于利用所述守护进程对前端页面的视图文件进行构建，获得前端页面的渲染内容；

发送模块，用于将所述前端页面的渲染内容和所述前端页面的数据内容返回至用户端，以重建所述前端页面。

在一个实施例中，所述装置还包括：

监测模块，用于通过所述守护进程监测所述前端页面的视图文件是否发生变化；

第一确定模块，用于当发生变化时，确定满足前端构建条件；

所述构建模块包括：

构建子模块，用于使用所述守护进程和变化后的视图文件进行前端页面构建，获得所述前端页面的渲染内容；

或者

第二确定模块，用于在首次启动所述前端页面所在的应用时，确定满足前端构建条件。

在一个实施例中，所述装置还包括：

扫描模块，用于扫描预先存储的所述前端页面的路由文件，获得与所述路由文件对应的视图文件；

生成模块，用于生成与所述视图文件对应的入口文件；

第一获取模块，用于获取所述前端页面的数据内容。

在一个实施例中，所述装置还包括：

第三确定模块，用于确定用于管理所述前端页面的当前主进程；

创建模块，用于为所述当前主进程创建子进程，使其成为运行在后台的守护进程；

所述构建模块包括：

启动子模块，用于在所述守护进程中启动前端构建工具；

传递子模块，用于将所述入口文件传递给所述前端构建工具进行前端构建，获得所述前端页面的渲染内容；

返回子模块，用于将所述渲染内容返回给主进程；

所述发送模块包括：

添加子模块，用于通过所述主进程将所述前端页面的渲染内容添加至所述前端页面的数据内容中，获得所述前端页面的总数据；

发送子模块，用于通过所述主进程将所述前端页面的总数据发送至所述用户端的浏览器中进行渲染。

在一个实施例中，所述装置还包括：

重启模块，用于在所述前端页面的数据内容对应的代码被修改时，重启所述主进程；

第二获取模块，用于通过所述主进程尝试所述守护进程建立连接，若成功建立连接，则获取所述守护进程获得的渲染内容。

本发明的实施例提供的技术方案可以包括以下有益效果：

通过该守护进程，可在满足前端构建条件即需要进行前端构建时，利用守护进程对前端页面的视图文件进行构建，从而获得该前端页面的渲染内容，并将该前端页面的渲染内容和数据内容一同返回至用户端，以自动重建前端页面，如此，只要满足前端构建条件就可自动完成前端构建(即前端渲染工作)，这样，使得前端构建实时保持更新，前端构建就一直保持最新状态，进而使得修改node服务端代码或重新启动应用时也不会导致前端的重新构建，并有利于提高开发效率，避免每次启动node应用均进行前端渲染也影响用户的正常体验，页面打开性能也大幅上升。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本发明。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。

图1是根据一示例性实施例示出的一种前端页面构建方法的流程图。

图2是根据一示例性实施例示出的另一种前端页面构建方法的流程图。

图3是根据一示例性实施例示出的一种前端页面构建装置的框图。

图4是根据一示例性实施例示出的另一种前端页面构建装置的框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。

为了解决上述技术问题，本发明实施例提供了一种前端页面构建方法，该方法可用于前端页面构建程序、系统或装置中，且该方法对应的执行主体可以是node服务器，如图1所示，该方法包括步骤S101至步骤S103：

在步骤S101中，在满足前端构建条件时，启动用于前端构建的守护进程；

前端构建条件可以是下文中的视图文件发生变化或者首次启动node应用。

守护进程可一直运行在后台，确保只要需要就能及时进行前端构建。

在步骤S102中，利用守护进程对前端页面的视图文件进行(前端)构建，获得前端页面的渲染内容；

其中，本发明中的构建即前端构建，而构建的目的是获得前端页面的渲染内容，而渲染内容用于表征前端页面的布局，如前端页面的显示风格、颜色、样式、字体特征(大小、颜色、字体类型等)、页面虚拟控件的特征(如虚拟控件的大小、颜色、形状等)。视图文件描述了前述前端页面的布局。

而下文中的前端页面的数据内容即用于表征前端页面的具体数据，即前端页面具体要显示的数字、文字、字符等字符串。

而前端页面的渲染内容和前端页面的数据内容就构成了整个完整的前端页面。

前端页面即node应用端需要显示的页面。

在步骤S103中，将前端页面的渲染内容和前端页面的数据内容返回至用户端，以重建前端页面。

通过该守护进程，可在满足前端构建条件即需要进行前端构建时，利用守护进程对前端页面的视图文件进行构建，从而获得该前端页面的渲染内容，并将该前端页面的渲染内容和数据内容一同返回至用户端，以自动重建前端页面，如此，只要满足前端构建条件就可自动完成前端构建(即前端渲染工作)，这样，使得前端构建实时保持更新，前端构建就一直保持最新状态，进而使得修改node服务端代码或重新启动应用时也不会导致前端的重新构建，并有利于提高开发效率，避免每次启动node应用均进行前端渲染也影响用户的正常体验，页面打开性能也大幅上升。

在一个实施例中，方法还包括：

通过守护进程监测前端页面的视图文件是否发生变化；

当发生变化时，确定满足前端构建条件；

利用守护进程对前端页面的视图文件进行构建，包括：

使用守护进程和变化后的视图文件进行前端页面构建，获得前端页面的渲染内容；

或者

在首次启动前端页面所在的应用时，确认满足前端构建条件。

在监测到视图文件发生变化时，说明用户修改了前端代码或视图文件，希望改变页面的渲染效果，因而，可自动确定满足前端构建条件。

其次，在首次启动前端页面所在的node应用时，因为前端页面需要首次渲染，因而，可自动确认满足前端构建条件。

另外，前端构建条件不包括再次启动前端页面所在的应用，可避免每次启动node应用均需要进行前端渲染而影响用户对node应用的正常体验，使得对于配置大于约定的node服务端渲染框架而言，node服务端渲染框架与前端渲染场景能够相分离。

配置大于约定node服务器指的是没有特定的规定的服务器，例如这种node服务器对文件名没有特别要求，也不会要求某文件一定放在某个固定的文件夹中等。

在一个实施例中，方法还包括：

扫描预先存储的前端页面的路由文件，获得与路由文件对应的视图文件；

路由文件中配置有需要渲染前端页面的文件，因而，通过扫描该路由文件，可获取该路有文件对应的视图文件，从而便于之后确认前端页面的具体布局。

生成与视图文件对应的入口文件；

入口文件与视图文件的内容一样，只是数据结构可能不同。

获取前端页面的数据内容。

如图2所示，在一个实施例中，方法还包括：

在步骤S201中，确定用于管理前端页面的当前主进程；

在步骤S202中，为当前主进程创建子进程，使其成为运行在后台的守护进程；

启动一个子进程来启动构建，切断与当前主进程的组关系并创建新会话，使其成为守护进程。

上述图1所示的步骤S102，即利用守护进程对前端页面的视图文件进行构建，获得前端页面的渲染内容，可以包括：

在步骤S203中，在守护进程中启动前端构建工具；前端构建工具即webpack构建工具。

在步骤S204中，将入口文件传递给前端构建工具进行前端构建，获得前端页面的渲染内容；

传递的方式可以是socket(套接字，是一个抽象层，应用程序可以通过它发送或接收数据)通信方式。

在步骤S205中，将渲染内容返回给主进程；

在守护进程中启动心跳机制，保持与主进程的消息通讯，守护进程与主进程可保持心跳，当间隔超过最大值时，守护进程认为用户已经离开(即守护进程与主进程断开了连接)，则自动终止构建。而构建结束后，同样通过文件socket将渲染内容返回给主进程，主进程在渲染内容上添加数据内容后，返回给浏览器进行渲染。

上述图1所示的步骤S103，即将前端页面的渲染内容和前端页面的数据内容返回至用户端，以重建前端页面，可以包括：

在步骤S206中，通过主进程将前端页面的渲染内容添加至前端页面的数据内容中，获得前端页面的总数据；

在步骤S207中，通过主进程将前端页面的总数据发送至用户端的浏览器中进行渲染。

将前端页面的数据内容一并主动发送至浏览器进行渲染，可避免为前端页面专门设置数据请求接口。

在一个实施例中，方法还包括：

在前端页面的数据内容对应的代码被修改时，重启主进程；

通过主进程尝试守护进程建立连接，若成功建立连接，则获取守护进程获得的渲染内容。

在前端页面的数据内容对应的代码被修改时，可自动重启主进程，然后通过主进程尝试守护进程建立连接，若成功建立连接，则自动获取守护进程已经获得的渲染内容，无需为修改node端代码而重新构建前端页面，继续进行下步页面渲染即可，并续联心跳，如此，使得对于配置大于约定的node服务端渲染框架而言，node服务端渲染框架与前端渲染场相分离，有利于提高开发效率。

最后，需要明确的是：本领域技术人员可根据实际需求，将上述多个实施例进行自由组合。

下面将进一步说明本发明的技术方案：

1)在路由中配置前端渲染页面所需要的文件，以便在应用启动时告知node服务框架。应用启动后，node服务框架扫描所有路由文件，并将以渲染所需文件(即路由文件中的视图文件)为目标文件，生成对应构建的统一入口文件。在入口文件中插入逻辑：服务端将前端页面的数据内容发送给用户端，并将通过入口文件得到的渲染内容传递给用户端的渲染文件。

2)启动一个子进程来启动构建，并切断与当前主进程的组关系并创建新会话，使其成为守护进程，在守护进程中启动webpack构建工具，并利用文件socket的方式，将入口文件通过传递给webpack构建工具进行构建。同时，在守护进程中启动心跳机制，保持与主进程的消息通讯，主进程会与守护进程保持心跳，当间隔超过最大值时，守护进程认为用户已经离开，则自动终止构建。构建结束后，同样通过文件socket将渲染内容返回给主进程，主进程在前端页面的渲染内容上添加前端页面的数据内容后，返回给浏览器进行渲染。

3)在用户需要修改前端代码时，只需要修改前端文件(即路由文件中的视图文件)，webpack构建工具立即响应，重新编译前端文件，当页面刷新时即可感受。在用户修改node端代码时，停止前述当前主进程，修改代码后重新启动，此时框架尝试去建立与守护进程的连接，如果发现守护进程存在，则直接利用该守护进程的构建产物，继续进行页面渲染，并续联心跳。如果没有发现守护进程，或与可能存在的守护进程建立连接失败，则重新执行第二步的操作。

对应本发明实施例提供的上述前端页面构建方法，本发明实施例还提供一种前端页面构建装置，如图3所示，该装置包括：

启动模块301，被配置为在满足前端构建条件时，启动被配置为前端构建的守护进程；

构建模块302，被配置为利用守护进程对前端页面的视图文件进行构建，获得前端页面的渲染内容；

发送模块303，被配置为将前端页面的渲染内容和前端页面的数据内容返回至用户端，以重建前端页面。

在一个实施例中，装置还包括：

监测模块，被配置为通过守护进程监测前端页面的视图文件是否发生变化；

第一确定模块，被配置为当发生变化时，确定满足前端构建条件；

构建模块302可以包括：

构建子模块，被配置为使用守护进程和变化后的视图文件进行前端页面构建，获得前端页面的渲染内容；

或者

第二确定模块，被配置为在首次启动前端页面所在的应用时，确定满足前端构建条件。

如图4所示，在一个实施例中，装置还包括：

扫描模块401，被配置为扫描预先存储的前端页面的路由文件，获得与路由文件对应的视图文件；

生成模块402，被配置为生成与视图文件对应的入口文件；

第一获取模块403，被配置为获取前端页面的数据内容。

在一个实施例中，装置还包括：

第三确定模块，被配置为确定被配置为管理前端页面的当前主进程；

创建模块，被配置为为当前主进程创建子进程，使其成为运行在后台的守护进程；

构建模块包括：

启动子模块，被配置为在守护进程中启动前端构建工具；

传递子模块，被配置为将入口文件传递给前端构建工具进行前端构建，获得前端页面的渲染内容；

返回子模块，被配置为将渲染内容返回给主进程；

发送模块包括：

添加子模块，被配置为通过主进程将前端页面的渲染内容添加至前端页面的数据内容中，获得前端页面的总数据；

发送子模块，被配置为通过主进程将前端页面的总数据发送至用户端的浏览器中进行渲染。

在一个实施例中，装置还包括：

重启模块，被配置为在前端页面的数据内容对应的代码被修改时，重启主进程；

第二获取模块，被配置为通过主进程尝试守护进程建立连接，若成功建立连接，则获取守护进程获得的渲染内容。

本领域技术人员在考虑说明书及实践这里发明的发明后，将容易想到本发明的其它实施方案。本申请旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本发明未发明的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由下面的权利要求指出。

应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本发明的范围仅由所附的权利要求来限制。

Claims (6)

1.一种前端页面构建方法，其特征在于，包括：

扫描预先存储的所述前端页面的路由文件，获得与所述路由文件对应的视图文件；生成与所述视图文件对应的入口文件；获取所述前端页面的数据内容；

确定用于管理前端页面的当前主进程；

为所述当前主进程创建子进程，使其成为运行在后台的守护进程；

在满足前端构建条件时，启动用于前端构建的守护进程；

利用所述守护进程对前端页面的视图文件进行构建，获得前端页面的渲染内容，包括：在所述守护进程中启动前端构建工具；将所述入口文件传递给所述前端构建工具进行前端构建，获得所述前端页面的渲染内容；将所述渲染内容返回给主进程；

将所述前端页面的渲染内容和所述前端页面的数据内容返回至用户端，以重建所述前端页面，包括：通过所述主进程将所述前端页面的渲染内容添加至所述前端页面的数据内容中，获得所述前端页面的总数据；通过所述主进程将所述前端页面的总数据发送至所述用户端的浏览器中进行渲染。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

通过所述守护进程监测所述前端页面的视图文件是否发生变化；

当发生变化时，确定满足前端构建条件；

所述利用所述守护进程对前端页面的视图文件进行构建，包括：

使用所述守护进程和变化后的视图文件进行前端页面构建，获得所述前端页面的渲染内容；

或者

在首次启动所述前端页面所在的应用时，确定满足前端构建条件。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在所述前端页面的数据内容对应的代码被修改时，重启所述主进程；

通过所述主进程尝试所述守护进程建立连接，若成功建立连接，则获取所述守护进程获得的渲染内容。

4.一种前端页面构建装置，其特征在于，包括：

扫描模块，用于扫描预先存储的所述前端页面的路由文件，获得与所述路由文件对应的视图文件；

生成模块，用于生成与所述视图文件对应的入口文件；

第一获取模块，用于获取所述前端页面的数据内容；

第三确定模块，用于确定用于管理所述前端页面的当前主进程；

创建模块，用于为所述当前主进程创建子进程，使其成为运行在后台的守护进程；

启动模块，用于在满足前端构建条件时，启动用于前端构建的守护进程；

构建模块，用于利用所述守护进程对前端页面的视图文件进行构建，获得前端页面的渲染内容；

发送模块，用于将所述前端页面的渲染内容和所述前端页面的数据内容返回至用户端，以重建所述前端页面；

所述构建模块包括：

启动子模块，用于在所述守护进程中启动前端构建工具；

传递子模块，用于将所述入口文件传递给所述前端构建工具进行前端构建，获得所述前端页面的渲染内容；

返回子模块，用于将所述渲染内容返回给主进程；

所述发送模块包括：

添加子模块，用于通过所述主进程将所述前端页面的渲染内容添加至所述前端页面的数据内容中，获得所述前端页面的总数据；

发送子模块，用于通过所述主进程将所述前端页面的总数据发送至所述用户端的浏览器中进行渲染。

5.根据权利要求4所述的装置，其特征在于，所述装置还包括：

监测模块，用于通过所述守护进程监测所述前端页面的视图文件是否发生变化；

第一确定模块，用于当发生变化时，确定满足前端构建条件；

所述构建模块包括：

构建子模块，用于使用所述守护进程和变化后的视图文件进行前端页面构建，获得所述前端页面的渲染内容；

或者

第二确定模块，用于在首次启动所述前端页面所在的应用时，确定满足前端构建条件。

6.根据权利要求4所述的装置，其特征在于，所述装置还包括：

重启模块，用于在所述前端页面的数据内容对应的代码被修改时，重启所述主进程；

第二获取模块，用于通过所述主进程尝试所述守护进程建立连接，若成功建立连接，则获取所述守护进程获得的渲染内容。

Images