CN108959455B - 单页Web应用实现方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及一种单页Web应用实现方法、装置、计算机设备和存储介质。所述方法包括：当监测到第一终端发布的前端资源和第二终端发布的后端资源时，创建包括第一目录和第二目录的基础镜像；将前端资源和后端资源，分别存储至第一目录和第二目录，并在第一目录和第二目录中分别部署反向服务代理和后端服务组件；整合部署了反向服务代理的第一目录和部署了后端服务组件的第二目录所属的基础镜像，得到镜像文件；通过启动镜像文件生成单页Web应用。采用本方法能够解决前后端分离部署时版本不匹配的问题。

Description

单页Web应用实现方法、装置、计算机设备和存储介质

技术领域

本申请涉及计算机技术领域，特别是涉及一种单页Web应用实现方法、装置、计算机设备和存储介质。

背景技术

单页Web应用(single page web application，SPA)采用单页模式实现页面加载，在使用期间不会重新加载页面。在首次加载页面时，单页Web应用加载全部页面的页面资源进行缓存，后续通过js脚本拉取缓存实现页面切换。相比传统的多页模式，单页模式可以明显提高页面切换速度。但单页Web应用的前端模块与后端模块通常由不同开发团队开发完成。为了便于维护，通常将前端模块与后端模块分别部署在不同服务器或同一服务器不同虚拟机上。换言之，单页Web应用通常是前后端分离部署的。前后端分离部署使得单页Web应用常存在前端模块与后端模块版本不兼容的问题。

发明内容

基于此，有必要针对上述技术问题，提供一种能够解决单页Web应用前后端版本兼容性问题的单页Web应用实现方法、装置、计算机设备和存储介质。

一种单页Web应用实现方法，所述方法包括：当监测到第一终端发布的前端资源和第二终端发布的后端资源时，创建包括第一目录和第二目录的基础镜像；将所述前端资源和所述后端资源，分别存储至所述第一目录和所述第二目录，并在所述第一目录和所述第二目录中分别部署反向服务代理和后端服务组件；整合部署了反向服务代理的第一目录和部署了后端服务组件的第二目录所属的基础镜像，得到镜像文件；通过启动所述镜像文件生成单页Web应用。

在其中一个实施例中，所述方法还包括：所述反向服务代理接收第三终端基于所述单页Web应用发送的HTTP请求；所述HTTP请求包括HTTP请求头；识别所述HTTP请求头中目标字段是否以预设字符串为初始字段；若是，则所述HTTP请求需要请求前端资源，所述反向服务代理直接响应所述HTTP请求；否则，则所述HTTP请求需要请求后端资源，所述反向服务代理将所述HTTP请求转发至所述后端服务组件，基于所述后端服务组件响应所述HTTP请求。

在其中一个实施例中，所述方法还包括：对当前的基础镜像与所述前端资源进行版本绑定；若监测到所述第一终端重新发布的前端资源及所述第二终端重新发布的后端资源，创建新版本的基础镜像；关闭所述当前的基础镜像，启动所述新版本的基础镜像；对新版本的基础镜像与重新发布的前端资源进行版本绑定；当接收到第三终端基于所述单页Web应用发送的页面跳转请求时，对所述基础镜像是否发生版本更新进行检测，根据检测结果响应所述页面跳转请求。

在其中一个实施例中，所述方法还包括：按照预设时间频率扫描是否存在被关闭的基础镜像；若存在，对所述被关闭的基础镜像进行清理回收。

在其中一个实施例中，所述前端资源包括多个前端文件；所述对当前的基础镜像与所述前端资源进行版本绑定，包括：对多个所述前端文件分别进行散列运算，得到每个前端文件对应的散列值；将多个所述前端文件对应的散列值记录至中间文件；对所述中间文件进行散列运算，得到所述中间文件对应的散列值；将所述中间文件的散列值作为所述基础镜像以及所述前端资源的版本信息记录至目标文件；将所述目标文件存储至所述基础镜像中第一目录。

在其中一个实施例中，所述当接收到第三终端基于所述单页Web应用发送的页面跳转请求时，对所述基础镜像是否发生版本更新进行检测，根据检测结果响应所述页面跳转请求，包括：接收到第三终端发送的页面跳转请求，所述页面跳转请求包含所述第三终端当前加载的前端资源的版本信息，记作加载版本；调用版本查询接口在所述目标文件中读取当前运行的基础镜像的版本信息，以获取当前运行的前端资源的版本信息，记作运行版本；比较所述前端资源的加载版本与运行版本是否一致；若是，向所述第三终端发送直接跳转提示，使所述第三终端基于当前加载的前端资源进行页面跳转；否则，向所述第三终端发送重新加载提示，使所述第三终端重新发起页面加载请求，基于当前运行的前端资源进行页面跳转。

一种单页Web应用实现装置，所述装置包括：资源发布模块，用于当监测到第一终端发布的前端资源和第二终端发布的后端资源时，创建包括第一目录和第二目录的基础镜像；镜像部署模块，用于将所述前端资源和所述后端资源，分别存储至所述第一目录和所述第二目录，并在所述第一目录和所述第二目录中分别部署反向服务代理和后端服务组件；文件打包模块，用于整合部署了反向服务代理的第一目录和部署了后端服务组件的第二目录所属的基础镜像，得到镜像文件；通过启动所述镜像文件生成单页Web应用。

在其中一个实施例中，所述装置还包括：版本绑定模块，用于对当前的基础镜像与所述前端资源进行版本绑定；若监测到所述第一终端重新发布的前端资源及所述第二终端重新发布的后端资源，创建新版本的基础镜像；关闭所述当前的基础镜像，启动所述新版本的基础镜像；对新版本的基础镜像与重新发布的前端资源进行版本绑定；跳转询问模块，用于当接收到第三终端基于所述单页Web应用发送的页面跳转请求时，对所述基础镜像是否发生版本更新进行检测，根据检测结果响应所述页面跳转请求。

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：当监测到第一终端发布的前端资源和第二终端发布的后端资源时，创建包括第一目录和第二目录的基础镜像；将所述前端资源和所述后端资源，分别存储至所述第一目录和所述第二目录，并在所述第一目录和所述第二目录中分别部署反向服务代理和后端服务组件；整合部署了反向服务代理的第一目录和部署了后端服务组件的第二目录所属的基础镜像，得到镜像文件；通过启动所述镜像文件生成单页Web应用。

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：当监测到第一终端发布的前端资源和第二终端发布的后端资源时，创建包括第一目录和第二目录的基础镜像；将所述前端资源和所述后端资源，分别存储至所述第一目录和所述第二目录，并在所述第一目录和所述第二目录中分别部署反向服务代理和后端服务组件；整合部署了反向服务代理的第一目录和部署了后端服务组件的第二目录所属的基础镜像，得到镜像文件；通过启动所述镜像文件生成单页Web应用。

上述单页Web应用实现方法、装置、计算机设备和存储介质，当监测到第一终端发布的前端资源以及第二终端发布的后端资源时，可以创建包括第一目录和第二目录的基础镜像；将所述前端资源存储至所述第一目录，将所述后端资源存储至所述第二目录，可以使前后端资源在同一镜像内分离部署；在所述第一目录部署反向服务代理，可以为第一目录的前端资源提供服务；在所述第二目录部署后端服务组件，可以为第二目录的后端资源提供服务；对完成反向服务代理和后端服务组件部署的基础镜像进行打包，可以生成镜像文件；通过启动镜像文件，可以生成单页Web应用。由于新版本的前后端资源配合发布至同一基础镜像内，利用容器化技术以较小代价完成前后端分离改造，可以减少分离发布时前后端资源版本不兼容的问题；将前后端资源部署在同一基础镜像不同目录，并采用不同服务组件分别为前后端资源提供服务，可以模拟前后端分离部署，仍便于对前后端资源独立维护。

附图说明

图1为一个实施例中单页Web应用实现方法的应用场景图；

图2为一个实施例中单页Web应用实现方法的流程示意图；

图3为一个实施例中单页Web应用实现方法的框架示意图；

图4为一个实施例中单页Web应用实现装置的结构框图；

图5为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请提供的单页Web应用实现方法，可以应用于如图1所示的应用环境中。其中，第一终端102与服务器104通过网络进行通信。第二终端106与服务器104通过网络进行通信。其中，第一终端102和第二终端106分别可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备。第一终端102与第二终端106可以是不同的终端，也可以是相同的终端。服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

单页Web应用的开发人员可以基于第一终端102进行前端模块(以下称“前端资源”)开发；基于第二终端106进行后端模块(以下称“后端资源”)开发，在服务器104基于已开发的前端资源和后端资源进行单页Web应用发布。具体的，服务器104接收第一终端102或第二终端106发送的资源发布请求，根据资源发布请求创建基础镜像。基础镜像包括多个目录，如第一目录和第二目录。服务器104将资源发布请求携带的前端资源存储至第一目录，将资源发布请求携带的后端资源存储至第二目录。服务器104在第一目录安装部署反向服务代理，以响应前端资源请求；在第二目录安装部署后端服务组件，以响应后端资源请求。服务器104对完成安装部署的基础镜像打包，生成进行镜像文件。服务器104启动该镜像文件即可生成单页Web应用，用户可以基于第三终端对单页Web应用进行访问。上述单页Web应用实现过程，用户只需下载启动镜像文件即可访问单页Web应用，简化安装操作；由于新版本的前后端资源配合发布至同一基础镜像不同目录，可以减少前后端资源单独发布造成的版本不兼容的问题；在基础镜像中采用不同服务组件响应前端资源请求和后端资源请求，可以延续前后端单独维护的便利。

在一个实施例中，如图2所示，提供了一种单页Web应用实现方法，以该方法应用于图1中的服务器为例进行说明，包括以下步骤：

步骤202，当监测到第一终端发布的前端资源和第二终端发布的后端资源时，创建包括第一目录和第二目录的基础镜像。

前端资源包括js(JavaScript，直译式脚本语言)文件、css(Cascading StyleSheets，层叠样式表)文件、html(超文本标记语言)文件等代码文件，以及页面初始数据、图片或vue(一种页面渲染框架)组件容器等静态资源，主要负责单页Web应用的前端页面展示。后端资源包括业务逻辑脚本和数据库管理脚本等，主要负责单页Web应用的后台数据处理。后端资源向前端资源提供业务处理接口。单页Web应用的开发人员可以基于不同终端分别对前端资源和后端资源进行独立开发。例如，基于第一终端进行前端资源的开发；基于第二终端进行后端资源的开发。

在完成前后端资源的开发，可以通过相应终端发布至服务器。传统方式前端资源与后端资源独立发布至不同服务器。由于前后端分离部署，对前端资源与后端资源独立发布使得前端资源与后端资源常存在版本不匹配的问题。例如，假设仅前端资源发生版本更新，当新版本前端资源调用旧版本后台资源接口时，可能存在接口不存在或功能不匹配的问题；或者假设仅后端资源发生版本更新，新增了一个接口，而旧版本前端资源无法得知该接口的存在及其调用方式，造成接口资源浪费的问题。

为了解决上述问题，服务器控制前端资源与后端资源配合发布，换言之，对前端资源与后端资源是否配合发布进行监控。具体的，服务器在监测到第一终端发布的前端资源时，开始计时，若在预设时长内未监测到第二终端发布的后端资源，向第二终端发送配合发布提示。若在预设时长到达时仍未监测到第二终端发布的后端资源，向第一终端发送发布失败提示。同样的，服务器在监测到第二终端发布的后端资源时，开始计时，若在预设时长内未监测到第一终端发布的前端资源，向第一终端发送配合发布提示。若在预设时长到达时仍未监测到第一终端发布的前端资源，向第二终端发送发布失败提示。通过控制前端资源与后端资源配合发布，可以控制前端资源与后端资源版本相匹配。

在又一个实施例中，服务器对先接收到的前端资源或后端资源进行代码扫描，得到相对其历史版本的代码变更项，基于预设的函数功能映射集合，获取每个代码变更项对应的功能变更项，根据分析得到的功能变更项生成配合发布提示，以便于后发布的后端资源或前端资源更有针对性的进行开发。

服务器上预先安装了镜像组件，如Docker(一种开源的应用容器引擎)服务组件等。第一终端向服务器发送前端资源发布请求。前端资源发布请求携带了前端资源。第二终端向服务器发送后端资源发布请求。后端资源发布请求携带了后端资源。服务器响应前端资源发布请求或后端资源发布请求，利用镜像组件创建基础镜像，如Docker镜像。

基础镜像可以理解为单页Web应用的装机盘。基于基础镜像，用户仅需一次简单下载启动的操作，即可快速获得该基础镜像中所预装的单页Web应用，相比传统的需要用户自行配置运行环境并自行安装的单页Web应用，可以简化单页Web应用安装操作。

步骤204，将前端资源和后端资源，分别存储至第一目录和第二目录，并在第一目录和第二目录中分别部署反向服务代理和后端服务组件。

基础镜像具有对应的目录结构。服务器将前端资源和后端资源分别存放至不同目录，如将前端资源存放至第一目录，将后端资源存放至第二目录。第一目录可以是/usr/src/front,第二目录可以是/usr/src/svc等。将前后端资源部署在同一基础镜像不同目录，并采用不同服务组件分别为前后端资源提供服务，可以模拟传统方式将前后端资源分别发布至不同服务器。换言之，本申请提供的单页Web应用实现方法可以延续传统方式将前后端分离部署时便于对前后端资源独立维护的优点。

如图3所示，服务器在基础镜像部署为第一目录提供服务的反向服务代理，并按照预设的配置信息对反向服务代理进行配置。反向服务代理作为整个单页Web应用的HTTP请求入口，用于为前端资源提供Http服务，可以是反向服务代理等反向代理服务器。服务器在基础镜像部署为第二目录提供服务的后端服务组件。后端服务组件用于为后端资源提供Http服务，可以是django(基于python的http服务框架)等。

步骤206，整合部署了反向服务代理的第一目录和部署了后端服务组件的第二目录所属的基础镜像，得到镜像文件。

在完成反向服务代理和后端服务组件的部署后，服务器生成Docker Build命令，基于Docker Build命令将基础镜像的第一目录和第二目录打包成Docker镜像文件(以下简称“镜像文件”)，从而将单页Web应用及其运行所依赖的其他文件打包到一个可移植的容器中。由于镜像文件预先集成了其运行所依赖的所有其他文件，从而单页Web应用可以独立运行，无需依赖其他组件，使用户在安装部署该单页Web应用时，无需关心当前浏览器的版本兼容或者依赖库的支持问题，大大简化安装操作。

在另一实施例中，服务器通过Docker Push命令将镜像文件上传至私有镜像仓库或公共仓库(以下统称“镜像仓库”)。公共仓库中的镜像文件任何用户可以下载访问。

步骤208，通过启动镜像文件生成单页Web应用。

服务器通过Docker RUN命令启动上述基础镜像，实现对当前版本单页Web应用的发布。启动后的基础镜像为docker容器(运行中的应用程序)。docker容器是单页Web应用进行版本发布的最小单元。

用户可以通过第三终端基于镜像文件访问单页Web应用。具体的，当用户需要访问单页Web应用时，向服务器发送访问请求。服务器检测是否部署了对应的单页Web应用。若服务器尚未部署单页Web应用，从镜像仓库拉取单页Web应用的镜像文件，生成Docker RUN命令，利用Docker RUN指令启动镜像文件，由此完成单页Web应用的部署。若服务器部署了单页Web应用，则服务器将单页Web应用的访问地址返回至第三终端。访问地址可以是服务器地址和端口号，如192.168.1.1：8001。访问地址可以基于实际需求自由设定。用户在第三终端的浏览器上输入相应访问地址即可访问单页Web应用。

当用户需要访问单页Web应用时，只需在镜像仓库下载对应的镜像文件，通过预设指令启动镜像，即可在浏览器通过相应访问地址直接访问单页Web应用，从而在安装部署上实现开包即用，省时省力。

本实施例中，当监测到第一终端发布的前端资源以及第二终端发布的后端资源时，可以创建包括第一目录和第二目录的基础镜像；将前端资源存储至第一目录，将后端资源存储至第二目录，可以使前后端资源在同一镜像内分离部署；在第一目录部署反向服务代理，可以为第一目录的前端资源提供服务；在第二目录部署后端服务组件，可以为第二目录的后端资源提供服务；对完成反向服务代理和后端服务组件部署的基础镜像进行打包，可以生成镜像文件；通过启动镜像文件，可以生成单页Web应用。由于新版本的前后端资源配合发布至同一基础镜像内，利用容器化技术以较小代价完成前后端分离改造，可以减少分离发布时前后端资源版本不兼容的问题；将前后端资源部署在同一基础镜像不同目录，并采用不同服务组件分别为前后端资源提供服务，可以模拟前后端分离部署，仍便于对前后端资源独立维护。

在一个实施例中，该方法还包括：反向服务代理接收第三终端基于单页Web应用发送的HTTP请求；HTTP请求包括HTTP请求头；识别HTTP请求头中目标字段是否以预设字符串为初始字段；若是，则HTTP请求需要请求前端资源，反向服务代理直接响应HTTP请求；否则，则HTTP请求需要请求后端资源，反向服务代理将HTTP请求转发至后端服务组件，基于后端服务组件响应HTTP请求。

传统方式主要通过配置单页Web应用的URL命名规则来区分前后端流量。例如，全新的单页Web应用在开发过程，在对其URL命名规则进行配置时，可以预先在URL中设定前后端判断规则。后续反向服务代理可以直接根据预设的URL前后端判断规则对Http请求的服务类型进行判断。然而，已有的单页Web应用中URL命名规则已经完全设定好，即所有的URL没有清晰的前后端判断规则。若期望对已有Web应用进行前后端分离改造，只能通过调整URL命名规则的方式来实施，即通过修改已有的URL来满足规则配置的要求。但这种方式不仅需要开发人员付出额外的开发代价，也会给单页Web应的用户造成不好的用户体验，如使已收藏原URL实效。

为了解决上述问题，反向服务代理作为整个单页Web应用的HTTP请求入口，接收用于在第三终端基于单页Web应用发送的页面资源请求(以下称“HTTP请求”)，识别该HTTP请求是请求前端资源还是请求后端资源。具体的，HTTP请求包括HTTP请求头和HTTP请求体。反向服务代理判断该Http请求头里的目标字段是否以预设字符串为初始字段。目标字段可以是Content-Type字段；预设字符串可以是“text/html”。上述识别方式不仅适用于全新的单页Web应用，也适用于已有的单页Web应用。容易理解，对于全新的单页Web应用，开发人员可以在开发时预先规划其他的判断规则。若HTTP请求头里的Content-Type字段是以“text/html”为初始字段，则表示该HTTP请求是请求前端资源；反之，表示该HTTP请求是请求后端接口。

若HTTP请求是请求前端资源，反向服务代理直接响应HTTP请求。若HTTP请求是请求后端资源，反向服务代理将HTTP请求转发至后端服务组件，基于后端服务组件响应HTTP请求。采用不同服务组件分别为前后端资源提供服务，可以模拟传统方式将前后端资源分别部署在不同服务器，基于不同服务器分别为前后端资源提供服务，从而可以延续传统方式将前后端分离部署时便于对前后端资源独立维护的优点。

本实施例中，根据http请求头里的目标字段判断该http请求头是请求前端资源还是请求后端资源，同时适用于全新开发的单页Web应用和已有的单页Web应用。基于http请求头里面的Content-Type字段差异来进行流量划分，不需要修改任何一个URL地址，减少前后端分离改造的代价。

在一个实施例中，该方法还包括：对当前的基础镜像与前端资源进行版本绑定；若监测到第一终端重新发布的前端资源及第二终端重新发布的后端资源，创建新版本的基础镜像；关闭当前的基础镜像，启动新版本的基础镜像；对新版本的基础镜像与重新发布的前端资源进行版本绑定；当接收到第三终端基于单页Web应用发送的页面跳转请求时，对基础镜像是否发生版本更新进行检测，根据检测结果响应页面跳转请求。

服务器在接收到第一终端发送的前端资源时，基于前端资源中多个前端文件生成该前端资源对应的版本信息。服务器将前后端资源通过docker add命令装入预先部署的基础镜像中，获取基础镜像对应的版本信息。服务器将前端资源的版本信息与基础镜像的版本信息进行关联，对这种对应关系进行存储。在另一个实施例中，基于前端资源中多个前端文件生成该前端资源以及基础镜像的版本信息，即前端资源与对应基础镜像具有相同的版本信息。在又一个实施例中，第一终端生成前端资源对应的版本信息，将前端资源及对应的版本信息发送至服务器，以减少服务器计算资源的占用。

若监测到第一终端重新发布的前端资源及第二终端重新发布的后端资源，服务器按照上述方式创建新版本的基础镜像，关闭当前的基础镜像，启动新版本的基础镜像；对新版本的基础镜像与重新发布的前端资源进行版本绑定。

当接收到用户在第三终端基于单页Web应用触发的页面跳转请求时，反向服务代理根据预置规则对当前运行的基础镜像的版本信息进行询问，进而对当前运行的前端资源的版本信息进行询问，根据询问结果控制单页Web应用从当前页面跳转至目标页面。

本实施例中，前端资源的版本信息与基础镜像的版本信息绑定。通过停止旧版本容器，启动新版本容器的方式来进行单页Web应用的发布；在接收到页面跳转请求时进行版本询问，根据询问结果控制页面跳转，使得单页Web应用始终能够加载到最近的前端资源，保证用户浏览内容的及时更新。

在一个实施例中，方法还包括：按照预设时间频率扫描是否存在被关闭的基础镜像；若存在，对被关闭的基础镜像进行清理回收。

服务器按照预设时间频率，对指定的存储路径是否存在被关闭的基础镜像进行扫描，生成扫描日志。服务器根据扫描日志记录的至少一项被关闭的基础镜像的镜像标识，生成清理任务，即时执行清理任务，或者在数据库空闲时间执行清理任务。

本实施例中，对对被关闭的基础镜像进行清理回收，减少对服务器资源的占用。

在一个实施例中，前端资源包括多个前端文件；对当前的基础镜像与前端资源进行版本绑定，包括：对多个前端文件分别进行散列运算，得到每个前端文件对应的散列值；将多个前端文件对应的散列值记录至中间文件；对中间文件进行散列运算，得到中间文件对应的散列值；将中间文件的散列值作为基础镜像以及前端资源的版本信息记录至目标文件；将目标文件存储至基础镜像中第一目录。

前端资源包括多个前端文件，如html文件、js文件或css文件等。服务器对多个前端文件分别进行散列运算，得到每个前端文件对应的散列值。散列运算可以是md5(MessageDigest Algorithm，消息摘要算法第五版)算法等。对应的散列值可以是md5校验码等。容易理解，服务器还可以对前端文件进行其他运算得到其他结果值，如通过哈希运算得到前端文件对应的哈希值，对此不作限制。

服务器将所有前端文件对应的散列值存储至中间文件，如sumlist文件。服务器对中间文件进行散列运算，生成中间文件对应的散列值。服务器将中间文件对应的散列值作为基础镜像以及前端资源的版本信息单独写入一个目标文件，如Checksum(总和检验码)文件。Checksum文件记录了当前运行的前端资源的版本信息，供后端服务组件读取。服务器还可以采用其他方式生成前端资源的版本信息。服务器将目标文件存储至基础镜像第一目录。

本实施例中，基于模前端资源中多个前端文件生成对应的版本信息，可以提高版本信息的标识性；将前端资源与对应基础镜像进行版本绑定，便于用户在浏览器访问单页Web应用进行页面挑战时进行版本信息读取。

在一个实施例中，当接收到第三终端基于单页Web应用发送的页面跳转请求时，对基础镜像是否发生版本更新进行检测，根据检测结果响应页面跳转请求，包括：接收到第三终端发送的页面跳转请求，页面跳转请求包含第三终端当前加载的前端资源的版本信息，记作加载版本；调用版本查询接口在目标文件中读取当前运行的基础镜像的版本信息，以获取当前运行的前端资源的版本信息，记作运行版本；比较前端资源的加载版本与运行版本是否一致；若是，向第三终端发送直接跳转提示，使第三终端基于当前加载的前端资源进行页面跳转；否则，向第三终端发送重新加载提示，使第三终端重新发起页面加载请求，基于当前运行的前端资源进行页面跳转。

单页Web应用中所有页面共用一个html文件，第三终端在第一次加载页面时将所有的html文件和静态资源全部加载完成，后续通过js脚本实现页面切换。相比传统的多页面模式，每个页面对应一个html文件，每次在不同页面之间切换时，都需要重新发起http请求执行整个html文件和静态资源的加载过程，单页模式可以明显提高页面切换的速度。完成全部前端资源的加载。但在单页面模式下，用户切换页面时不会重新加载前端资源，所以即便前端资源的版本发生更新，用户浏览器中使用的仍是旧版本前端资源，不会随之更新(除非用户主动刷新清除缓存)。

为了解决上述问题，反向服务代理在接收到第三终端基于单页Web应用发送的页面跳转请求时，根据预置规则进行版本询问，根据询问结果控制单页Web应用从当前页面跳转至目标页面。具体的，后端服务组件向反向服务代理提供版本查询接口。当用户在浏览器发起页面跳转请求时，前端资源的js脚本对浏览器触发的页面跳转请求进行捕获拦截。页面跳转请求携带了当前运行的前端资源的版本信息，记作加载版本(即缓存版本)。当拦截到页面跳转请求时，js脚本发起ajax请求，反向服务代理响应ajax请求调用后端服务组件提供的版本查询接口，利用版本查询接口在当前运行的基础镜像的目标文件中，读取服务器当前运行的前端资源的版本信息，记作运行版本(即最新版本)。

反向服务代理比较加载版本前端资源的版本信息与运行版本的前端资源的版本信息是否一致。若一致，表示前端资源尚未发生版本更新，反向服务代理向第三终端发送直接跳转提示，使第三终端基于当前加载的前端资源进行页面跳转。若不一致，表示前端资源在第三终端进行页面加载后发生版本更新，反向服务代理向第三终端发送重新加载提示，使第三终端向浏览器发起刷新指令，使浏览器重新发起页面加载请求，基于当前运行的前端资源进行页面跳转。

例如，假设在基础镜像发布了新版本的前端资源，对应版本标识为v2。js脚本判断与浏览器当前加载的前端资源的版本标识v1不同，则向浏览器发起刷新指令，浏览器根据刷新指令重新从服务器加载最新的v2版本前端资源。

本实施例中，由于前端资源与后端资源部署在同一个基础镜像中，后端服务组件能够获取到当前前端资源的版本信息。当在浏览器触发页面跳转请求时，能够通过调用后端服务组件提供的版本查询接口获取到当前运行的前端资源的版本信息，每当发现新版本的前端资源时，触发浏览器重新加载，从而用户浏览器能及时获取到单页Web应用最新的前端资源内容。

应该理解的是，虽然图2的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图2中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

在一个实施例中，如图4所示，提供了一种单页Web应用实现装置，包括：资源发布模块402、镜像部署模块404和文件打包模块406，其中：

资源发布模块402，用于当监测到第一终端发布的前端资源和第二终端发布的后端资源时，创建包括第一目录和第二目录的基础镜像。

镜像部署模块404，用于将前端资源和后端资源，分别存储至第一目录和第二目录，并在第一目录和第二目录中分别部署反向服务代理和后端服务组件。

文件打包模块406，用于整合部署了反向服务代理的第一目录和部署了后端服务组件的第二目录所属的基础镜像，得到镜像文件；通过启动镜像文件生成单页Web应用。

在一个实施例中，该装置还包括请求识别模块408，用于接收第三终端基于单页Web应用发送的HTTP请求；HTTP请求包括HTTP请求头；识别HTTP请求头中目标字段是否以预设字符串为初始字段；若是，则HTTP请求需要请求前端资源，反向服务代理直接响应HTTP请求；否则，则HTTP请求需要请求后端资源，反向服务代理将HTTP请求转发至后端服务组件，基于后端服务组件响应HTTP请求。

在一个实施例中，该装置还包括镜像启停模块410，用于对当前的基础镜像与前端资源进行版本绑定；若监测到第一终端重新发布的前端资源及第二终端重新发布的后端资源，创建新版本的基础镜像；关闭当前的基础镜像，启动新版本的基础镜像；对新版本的基础镜像与重新发布的前端资源进行版本绑定；当接收到第三终端基于单页Web应用发送的页面跳转请求时，对基础镜像是否发生版本更新进行检测，根据检测结果响应页面跳转请求。

在一个实施例中，该装置还包括垃圾清理模块412，用于按照预设时间频率扫描是否存在被关闭的基础镜像；若存在，对被关闭的基础镜像进行清理回收。

在一个实施例中，镜像启停模块410包括版本绑定模块4102，用于前端资源包括多个前端文件；对当前的基础镜像与前端资源进行版本绑定，包括：对多个前端文件分别进行散列运算，得到每个前端文件对应的散列值；将多个前端文件对应的散列值记录至中间文件；对中间文件进行散列运算，得到中间文件对应的散列值；将中间文件的散列值作为基础镜像以及前端资源的版本信息记录至目标文件；将目标文件存储至基础镜像中第一目录。

在一个实施例中，镜像启停模块410包括跳转询问模块4104，用于当接收到第三终端基于单页Web应用发送的页面跳转请求时，对基础镜像是否发生版本更新进行检测，根据检测结果响应页面跳转请求，包括：接收到第三终端发送的页面跳转请求，页面跳转请求包含第三终端当前加载的前端资源的版本信息，记作加载版本；调用版本查询接口在目标文件中读取当前运行的基础镜像的版本信息，以获取当前运行的前端资源的版本信息，记作运行版本；比较前端资源的加载版本与运行版本是否一致；若是，向第三终端发送直接跳转提示，使第三终端基于当前加载的前端资源进行页面跳转；否则，向第三终端发送重新加载提示，使第三终端重新发起页面加载请求，基于当前运行的前端资源进行页面跳转。

关于单页Web应用实现装置的具体限定可以参见上文中对于单页Web应用实现方法的限定，在此不再赘述。上述单页Web应用实现装置中的各个脚本可全部或部分通过软件、硬件及其组合来实现。上述各脚本可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个脚本对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图5所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种单页Web应用实现方法。

本领域技术人员可以理解，图5中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，该存储器存储有计算机程序，该处理器执行计算机程序时实现以下步骤：当监测到第一终端发布的前端资源和第二终端发布的后端资源时，创建包括第一目录和第二目录的基础镜像；将前端资源和后端资源，分别存储至第一目录和第二目录，并在第一目录和第二目录中分别部署反向服务代理和后端服务组件；整合部署了反向服务代理的第一目录和部署了后端服务组件的第二目录所属的基础镜像，得到镜像文件；通过启动镜像文件生成单页Web应用。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：反向服务代理接收第三终端基于单页Web应用发送的HTTP请求；HTTP请求包括HTTP请求头；识别HTTP请求头中目标字段是否以预设字符串为初始字段；若是，则HTTP请求需要请求前端资源，反向服务代理直接响应HTTP请求；否则，则HTTP请求需要请求后端资源，反向服务代理将HTTP请求转发至后端服务组件，基于后端服务组件响应HTTP请求。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：对当前的基础镜像与前端资源进行版本绑定；若监测到第一终端重新发布的前端资源及第二终端重新发布的后端资源，创建新版本的基础镜像；关闭当前的基础镜像，启动新版本的基础镜像；对新版本的基础镜像与重新发布的前端资源进行版本绑定；当接收到第三终端基于单页Web应用发送的页面跳转请求时，对基础镜像是否发生版本更新进行检测，根据检测结果响应页面跳转请求。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：按照预设时间频率扫描是否存在被关闭的基础镜像；若存在，对被关闭的基础镜像进行清理回收。

在一个实施例中，前端资源包括多个前端文件；处理器执行计算机程序时还实现以下步骤：对多个前端文件分别进行散列运算，得到每个前端文件对应的散列值；将多个前端文件对应的散列值记录至中间文件；对中间文件进行散列运算，得到中间文件对应的散列值；将中间文件的散列值作为基础镜像以及前端资源的版本信息记录至目标文件；将目标文件存储至基础镜像中第一目录。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：接收到第三终端发送的页面跳转请求，页面跳转请求包含第三终端当前加载的前端资源的版本信息，记作加载版本；调用版本查询接口在目标文件中读取当前运行的基础镜像的版本信息，以获取当前运行的前端资源的版本信息，记作运行版本；比较前端资源的加载版本与运行版本是否一致；若是，向第三终端发送直接跳转提示，使第三终端基于当前加载的前端资源进行页面跳转；否则，向第三终端发送重新加载提示，使第三终端重新发起页面加载请求，基于当前运行的前端资源进行页面跳转。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：当监测到第一终端发布的前端资源和第二终端发布的后端资源时，创建包括第一目录和第二目录的基础镜像；将前端资源和后端资源，分别存储至第一目录和第二目录，并在第一目录和第二目录中分别部署反向服务代理和后端服务组件；整合部署了反向服务代理的第一目录和部署了后端服务组件的第二目录所属的基础镜像，得到镜像文件；通过启动镜像文件生成单页Web应用。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：反向服务代理接收第三终端基于单页Web应用发送的HTTP请求；HTTP请求包括HTTP请求头；识别HTTP请求头中目标字段是否以预设字符串为初始字段；若是，则HTTP请求需要请求前端资源，反向服务代理直接响应HTTP请求；否则，则HTTP请求需要请求后端资源，反向服务代理将HTTP请求转发至后端服务组件，基于后端服务组件响应HTTP请求。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：对当前的基础镜像与前端资源进行版本绑定；若监测到第一终端重新发布的前端资源及第二终端重新发布的后端资源，创建新版本的基础镜像；关闭当前的基础镜像，启动新版本的基础镜像；对新版本的基础镜像与重新发布的前端资源进行版本绑定；当接收到第三终端基于单页Web应用发送的页面跳转请求时，对基础镜像是否发生版本更新进行检测，根据检测结果响应页面跳转请求。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：按照预设时间频率扫描是否存在被关闭的基础镜像；若存在，对被关闭的基础镜像进行清理回收。

在一个实施例中，前端资源包括多个前端文件；计算机程序被处理器执行时还实现以下步骤：对多个前端文件分别进行散列运算，得到每个前端文件对应的散列值；将多个前端文件对应的散列值记录至中间文件；对中间文件进行散列运算，得到中间文件对应的散列值；将中间文件的散列值作为基础镜像以及前端资源的版本信息记录至目标文件；将目标文件存储至基础镜像中第一目录。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：接收到第三终端发送的页面跳转请求，页面跳转请求包含第三终端当前加载的前端资源的版本信息，记作加载版本；调用版本查询接口在目标文件中读取当前运行的基础镜像的版本信息，以获取当前运行的前端资源的版本信息，记作运行版本；比较前端资源的加载版本与运行版本是否一致；若是，向第三终端发送直接跳转提示，使第三终端基于当前加载的前端资源进行页面跳转；否则，向第三终端发送重新加载提示，使第三终端重新发起页面加载请求，基于当前运行的前端资源进行页面跳转。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种单页Web应用实现方法，所述方法包括：

当在预设时长内监测到第一终端发布的前端资源和第二终端发布的后端资源时，基于预先安装的镜像组件创建包括第一目录和第二目录的基础镜像；

将所述前端资源和所述后端资源，分别存储至所述第一目录和所述第二目录，并在所述第一目录和所述第二目录中分别部署反向服务代理和后端服务组件，所述反向服务代理用于为所述前端资源提供HTTP服务，所述后端服务组件用于为所述后端资源提供HTTP服务；

整合部署了反向服务代理的第一目录和部署了后端服务组件的第二目录所属的基础镜像，得到镜像文件；

通过启动所述镜像文件生成单页Web应用；

所述反向服务代理接收第三终端基于所述单页Web应用发送的HTTP请求；所述HTTP请求包括HTTP请求头；

识别所述HTTP请求头中目标字段是否以预设字符串为初始字段；

若是，则所述HTTP请求需要请求前端资源，所述反向服务代理直接响应所述HTTP请求；

否则，则所述HTTP请求需要请求后端资源，所述反向服务代理将所述HTTP请求转发至所述后端服务组件，基于所述后端服务组件响应所述HTTP请求；

所述前端资源包括多个前端文件，所述方法还包括：对当前的基础镜像与所述前端资源进行版本绑定，包括：对多个所述前端文件分别进行散列运算，得到每个前端文件对应的散列值；将多个所述前端文件对应的散列值记录至中间文件；对所述中间文件进行散列运算，得到所述中间文件对应的散列值；将所述中间文件的散列值作为所述基础镜像以及所述前端资源的版本信息记录至目标文件；将所述目标文件存储至所述基础镜像中第一目录。

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

若监测到所述第一终端重新发布的前端资源及所述第二终端重新发布的后端资源，创建新版本的基础镜像；

关闭所述当前的基础镜像，启动所述新版本的基础镜像；

对新版本的基础镜像与重新发布的前端资源进行版本绑定；

当接收到第三终端基于所述单页Web应用发送的页面跳转请求时，对所述基础镜像是否发生版本更新进行检测，根据检测结果响应所述页面跳转请求。

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

按照预设时间频率扫描是否存在被关闭的基础镜像；

若存在，对所述被关闭的基础镜像进行清理回收。

4.根据权利要求3所述的方法，其特征在于，所述当接收到第三终端基于所述单页Web应用发送的页面跳转请求时，对所述基础镜像是否发生版本更新进行检测，根据检测结果响应所述页面跳转请求，包括：

接收到第三终端发送的页面跳转请求，所述页面跳转请求包含所述第三终端当前加载的前端资源的版本信息，记作加载版本；

调用版本查询接口在所述目标文件中读取当前运行的基础镜像的版本信息，以获取当前运行的前端资源的版本信息，记作运行版本；

比较所述前端资源的加载版本与运行版本是否一致；

若是，向所述第三终端发送直接跳转提示，使所述第三终端基于当前加载的前端资源进行页面跳转；

否则，向所述第三终端发送重新加载提示，使所述第三终端重新发起页面加载请求，基于当前运行的前端资源进行页面跳转。

5.一种单页Web应用实现装置，所述装置包括：

资源发布模块，用于当在预设时长内监测到第一终端发布的前端资源和第二终端发布的后端资源时，基于预先安装的镜像组件创建包括第一目录和第二目录的基础镜像；

镜像部署模块，用于将所述前端资源和所述后端资源，分别存储至所述第一目录和所述第二目录，并在所述第一目录和所述第二目录中分别部署反向服务代理和后端服务组件，所述反向服务代理用于为所述前端资源提供HTTP服务，所述后端服务组件用于为所述后端资源提供HTTP服务；

文件打包模块，用于整合部署了反向服务代理的第一目录和部署了后端服务组件的第二目录所属的基础镜像，得到镜像文件；通过启动所述镜像文件生成单页Web应用；

请求识别模块，用于所述反向服务代理接收第三终端基于所述单页Web应用发送的HTTP请求；所述HTTP请求包括HTTP请求头；识别所述HTTP请求头中目标字段是否以预设字符串为初始字段；若是，则所述HTTP请求需要请求前端资源，所述反向服务代理直接响应所述HTTP请求；否则，则所述HTTP请求需要请求后端资源，所述反向服务代理将所述HTTP请求转发至所述后端服务组件，基于所述后端服务组件响应所述HTTP请求；

版本绑定模块，用于对当前的基础镜像与所述前端资源包括的多个前端文件进行版本绑定，包括：对多个所述前端文件分别进行散列运算，得到每个前端文件对应的散列值；将多个所述前端文件对应的散列值记录至中间文件；对所述中间文件进行散列运算，得到所述中间文件对应的散列值；将所述中间文件的散列值作为所述基础镜像以及所述前端资源的版本信息记录至目标文件；将所述目标文件存储至所述基础镜像中第一目录。

6.根据权利要求5所述的装置，其特征在于，版本绑定模块还用于若监测到所述第一终端重新发布的前端资源及所述第二终端重新发布的后端资源，创建新版本的基础镜像；关闭所述当前的基础镜像，启动所述新版本的基础镜像；对新版本的基础镜像与重新发布的前端资源进行版本绑定；

所述装置还包括：

跳转询问模块，用于当接收到第三终端基于所述单页Web应用发送的页面跳转请求时，对所述基础镜像是否发生版本更新进行检测，根据检测结果响应所述页面跳转请求。

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

垃圾清理模块，用于按照预设时间频率扫描是否存在被关闭的基础镜像；若存在，对所述被关闭的基础镜像进行清理回收。

8.根据权利要求7所述的装置，其特征在于，所述跳转询问模块还用于接收到第三终端发送的页面跳转请求，所述页面跳转请求包含所述第三终端当前加载的前端资源的版本信息，记作加载版本；调用版本查询接口在所述目标文件中读取当前运行的基础镜像的版本信息，以获取当前运行的前端资源的版本信息，记作运行版本；比较所述前端资源的加载版本与运行版本是否一致；若是，向所述第三终端发送直接跳转提示，使所述第三终端基于当前加载的前端资源进行页面跳转；否则，向所述第三终端发送重新加载提示，使所述第三终端重新发起页面加载请求，基于当前运行的前端资源进行页面跳转。

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至4中任一项所述方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至4中任一项所述的方法的步骤。

Images