[发明专利]一种前后端分离架构下的页面静态化方法与系统

说明书

本发明公开了一种前后端分离架构下的页面静态化方法，本发明客户端访问目标页面时接入最近的CDN接入点并发送页面获取请求至所述CDN接入点；CDN接入点接收页面获取请求，并返回目标页面静态化数据，目标页面静态化数据包括注入了请求拦截SDK的HTML文件以及页面数据包；客户端接收目标页面静态化数据，在浏览器执行HTML文件中的JS代码从而向后端服务器发起数据获取请求时，请求拦截SDK拦截数据获取请求，并调用页面数据包中对应的数据作为数据获取请求的返回数据；客户端根据返回数据对目标页面进行渲染；本发明在不影响正常前端开发的情况下实现通用的静态化方案，使得目标网页能够通过内容分发网络来向客户端返回页面数据，能够有效减轻了服务器压力。

技术领域

本发明涉及计算机软件技术领域，特别涉及一种前后端分离架构下的页面静态化方法与系统。

背景技术

在前后端分离的架构下，Web前端独立开发和部署，用户在访问Web页面时，页面中的前端JS(JavaScript，一种具有函数优先的轻量级，解释型或即时编译型的编程语言)代码会在页面加载过程中调用后端服务API(Application Programming Interface，应用程序编程接口)获取数据。在大并发下，后端服务就会承载大量的访问压力。如果峰值访问量超过服务承载能力，就会导致系统崩溃，服务不可用的严重后果。

而针对上述问题，可以采用的技术方案是利用HTTP(Hypertext TransferProtocol，超文本传输协议)协议的Cache-Control(缓存控制)机制，后端服务在API调用的返回中设置缓存过期时间。Cache-Control可以在API网关和客户端浏览器生效，即在API网关和浏览器本地可以生成本地缓存，在缓存有效期内，可以直接返回结果数据，从而减少到达后端服务的请求量。这个技术方案有一定的效果，但是仍然存在一定的不足：

在大量独立用户访问的情况下，客户端浏览器的缓存作用不大，服务端API网关需要承载大量的峰值并发，可能造成过大的磁盘I/O(Input/Output，输入/输出)压力和网络带宽压力，甚至造成整个机房网络堵塞。

发明内容

本发明所要解决的技术问题是：提供一种前后端分离架构下的页面静态化方法与系统，能够有效减轻服务器压力。

为了解决上述技术问题，本发明采用的技术方案为：

一种前后端分离架构下的页面静态化方法，包括：

S1、客户端访问目标页面时接入最近的CDN接入点并发送页面获取请求至所述CDN接入点，所述CDN接入点与所述目标页面的域名绑定；

S2、CDN接入点接收所述页面获取请求，并返回目标页面静态化数据，所述目标页面静态化数据包括注入了请求拦截SDK的HTML文件以及页面数据包；

S3、客户端接收所述目标页面静态化数据，在浏览器执行所述HTML文件中的JS代码从而向后端服务器发起数据获取请求时，所述请求拦截SDK拦截所述数据获取请求，并调用所述页面数据包中对应的数据作为所述数据获取请求的返回数据；

S4、客户端根据所述返回数据对所述目标页面进行渲染。

为了解决上述技术问题，本发明采用的另一种技术方案为：

一种前后端分离架构下的页面静态化系统，包括客户端和CDN接入点，所述客户端与所述CDN接入点通信连接，所述客户端包括第一存储器、第一处理器及存储在第一存储器上并可在第一处理器上运行的第一计算机程序，所述CDN接入点包括第二存储器、第二处理器及存储在第二存储器上并可在第二处理器上运行的第二计算机程序，所述第一处理器执行所述第一计算机程序时实现以下步骤：

S1、访问目标页面时接入最近的CDN接入点并发送页面获取请求至所述CDN接入点，所述CDN接入点与所述目标页面的域名绑定；