一种页面静态资源的处理方法和装置与流程

本发明涉及互联网技术领域，具体涉及一种页面静态资源的处理方法和装置。

背景技术：

随着互联网和万维网的发展，以往的c/s(客户端/服务器)架构已无法满足当前全球网络开放、互连、信息随处可见和信息共享的新要求，于是就出现了b/s(浏览器/服务器)模式。它是对c/s架构的一种改进，属于三层c/s架构。b/s模式主要是在成熟的万维网浏览器技术基础上，利用通用浏览器实现原来需要复杂专用软件才能实现的强大功能，并节约了开发成本，是当今最流行的网络架构。

b/s架构技术发展的新趋势就是前后端的分离，前后端分离很多优势例如：前端静态化，前端有且仅有静态内容，其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装，前端内容的运行环境和引擎完全基于浏览器本身。后端数据化：后端可以用任何语言，技术和平台实现，但它们必须遵循一个原则：只提供数据，不提供任何和界面表现有关的内容。换言之，他们提供的数据可以用于任何其他客户端(如本地程序或移动端程序)。平台无关化：前端技术本身就是平台无关的，而后台连接的本质是实现合适的restful接口和json接口数据交互，任何技术和平台都可以实现。构架分离化：由于前台是纯静态内容，大型构架方面可以考虑向cdn(contentdeliverynetwork，内容分发网络)方向发展。

但是，现有技术中的前后端分离还存在一些问题，例如，对服务器的性能优化不能达到用户的需求，应用的页面静态资源重复开发，浪费了开发费用。

技术实现要素：

本发明提供了一种页面静态资源的处理方法和装置，以解决现有技术中存在的静态资源重复开发，浪费开发费用，以及服务器性能优化不能满足用户需求的问题。

根据本发明的一个方面，提供了一种页面静态资源的处理方法，该方法包括：

提取一个或多个应用的页面静态资源；

将提取的静态资源部署在可公用的静态资源数据库中，并在静态资源数据库的配置文件中配置静态资源数据库与后端服务器进行数据交互的接口；

接收浏览器侧发送的访问请求，根据访问请求从后端服务器中获取交互数据，并从静态资源数据库中查找相应的静态资源，根据交互数据和所查找出的静态资源生成响应页面返回给浏览器。

可选地，根据交互数据和所查找出的静态资源生成响应页面返回给浏览器，还包括：

在响应页面中增加缓存设置属性，将缓存设置属性的属性值设置为对应阈值，以允许浏览器缓存该响应页面上的静态资源或禁止浏览器缓存该响应页面上的静态资源。

可选地，从静态资源数据库中查找相应的静态资源包括：

根据访问请求中的静态资源访问路径，查找记录相应静态资源与实际保存路径间对应关系的映射文件，找到相应的静态资源后异步加载静态资源。

可选地，静态资源数据库可被放到同一个服务器中或者被分放到不同的服务器中；

静态资源包括：层叠样式表css，javascript脚本和/或页面图片。

根据本发明的另一个方面，提供了一种页面静态资源的处理装置，该装置包括：

静态资源提取单元，用于提取一个或多个应用的页面静态资源；

静态资源部署单元，用于将提取的静态资源部署在可公用的静态资源数据库中，并在静态资源数据库的配置文件中配置静态资源数据库与后端服务器进行数据交互的接口；

静态资源调用单元，用于接收浏览器侧发送的访问请求，根据访问请求从后端服务器中获取交互数据，并从静态资源数据库中查找相应的静态资源，根据交互数据和所查找出的静态资源生成响应页面返回给浏览器。

可选地，静态资源调用单元包括：缓存设置子单元；

缓存设置子单元，用于在响应页面中增加缓存设置属性，将缓存设置属性的属性值设置为对应阈值，以允许浏览器缓存该响应页面上的静态资源或禁止浏览器缓存该响应页面上的静态资源。

可选地，静态资源调用单元，具体用于根据访问请求中的静态资源访问路径，查找记录相应静态资源与实际保存路径间对应关系的映射文件，找到相应的静态资源后异步加载静态资源。

可选地，静态资源数据库可被放到同一个服务器中或者被分放到不同的服务器；静态资源包括：层叠样式表css，javascript脚本和/或页面图片。

本发明的有益效果是：本发明实施例的技术方案提供了一种基于bs架构前后端分离技术的页面资源处理方案，通过提取某个或某些应用的页面静态资源，将这些静态资源部署在新建的可以公用的静态资源数据库中，然后当收到浏览器侧发送的访问请求时，将该公用的静态资源数据库中相应的静态资源直接加载到响应页面中返回给浏览器，从而在新应用开发时不需要再重复开发相同的静态资源而是直接使用公用的静态资源，从而极大缩短了开发周期，降低了开发成本。

附图说明

图1是本发明一个实施例的一种页面静态资源的处理方法流程图；

图2是本发明另一个实施例的一种页面静态资源的处理装置的结构框图；

图3是本发明又一个实施例的一种页面静态资源的处理装置的系统架构图；

图4是本发明又一个实施例的一种页面静态资源的处理装置的提取静态资源文件的示意图；

图5是本发明又一个实施例的一种页面静态资源的处理装置的写配置文件的示意图。

具体实施方式

本发明的设计构思在于：基于b/s架构的前端和后端分离技术，将某个或者某些应用的前端的页面静态资源提取出来，放在一个可以公用的静态资源数据库中，这样当收到浏览器侧发送的访问请求时可以直接在该静态资源数据库中查找相应的静态资源，并把找到的静态资源加载到响应页面中返回给浏览器。如此，新应用开发时也可以通过调用公用静态资源数据库中的静态资源的方式而避免了单独重复开发前端静态资源，从而节省了开发成本，缩短了开发周期，方便大规模推广。

前后端分离技术下，应用开发通常包括：前端开发和后端开发，应用所有用到的前端展现数据都由后端通过接口(如ajax或json)的方式提供，前端只管展现。静态资源是指那些不变的、与前端展现界面相关的资源。例如，html(hypertextmarkuplanguage，超文本标记语言)页面中对应的图片，声音，css(cascadingstylesheets，层叠样式表)，javascript等页面资源。

在b/s架构下，服务器通常是代理加缓存的服务器处理模块，浏览器的页面请求通过服务器代理模块发送到后端服务器，而从后端服务器(如网站)返回的页面响应也通过服务器代理模块返回至浏览器，同时将页面响应缓存在服务器端，浏览器在收到服务器端的页面响应之后，通过浏览器渲染引擎进行渲染，最终将渲染好的页面展现给用户。

实施例一

图1是本发明一个实施例的一种页面静态资源的处理方法流程图，参见图1，该方法包括：

步骤s110，提取一个或多个应用的页面静态资源；

步骤s120，将提取的静态资源部署在可公用的静态资源数据库中，并在静态资源数据库的配置文件中配置静态资源数据库与后端服务器进行数据交互的接口；

步骤s130，接收浏览器侧发送的访问请求，根据访问请求从后端服务器中获取交互数据，并从静态资源数据库中查找相应的静态资源，根据交互数据和所查找出的静态资源生成响应页面返回给浏览器。

步骤s130中接收浏览器侧发送的访问请求，可以是其他应用的访问请求，举例而言，步骤s110中提取的是a应用的前端页面静态资源，而b应用和a应用的前端架构相同，这时，b应用可以直接通过浏览器调用公用静态资源数据库中a应用的静态资源，这样b应用就不需要再重复开发前端页面静态资源。可以理解，a应用和b应用的前台架构也可以不同，对此不作限制。

由图1所示的方法可知，本发明实施例中通过提取一个或多个应用的页面静态资源，将提取的静态资源部署到一个新建的公用静态资源数据库中，从而当收到浏览器发送的其他应用的访问请求时，可以直接调用静态资源数据库中的静态资源并加载响应页面上，返回给发送请求的浏览器。这样，其他应用不需要再去重复开发静态资源，而是使用公用静态资源数据库中的静态资源，从而节省了其他应用的开发成本，缩短了开发周期。同时，由于前端内容是完全的静态内容，在初次获取以后的大部分时间内，浏览器可以使用本地缓存，这种情况下服务器的压力主要来自于承载数据的restful接口调用，大幅减轻了服务器的压力，优化了服务器性能。

浏览器本地缓存技术是，浏览器访问后端服务器(如，某个网站)，接收到html页面响应后，解析html页面，得到css、js等静态资源。缓存的主要对象即为这些页面静态资源，之后如果浏览器再访问这些页面静态资源，便可以从本地缓存中获得相应静态资源，不必到后端服务器去取，从而提高了请求的响应速度和页面加载的速度。

浏览器本地缓存虽然可以减少浏览器对静态资源的请求次数，减少对服务器的网络请求量，提升服务器的性能。但是，本地缓存也会将前端的相关静态资源暴露出来，导致安全性问题。为此，在本发明的实施例二中提供了解决浏览器本地缓存导致安全性问题的技术手段。

实施例二

本实施例中重点对浏览器能否缓存网页静态资源的控制方式进行说明，其他内容参见本发明的其他实施例。

在本实施例中，根据交互数据和所查找出的静态资源生成响应页面返回给浏览器时，在返回的响应页面中增加缓存设置属性，将缓存设置属性的属性值设置为对应阈值，以允许浏览器缓存该响应页面上的静态资源或禁止浏览器缓存该响应页面上的静态资源。

这里的静态资源包括：层叠样式表css，javascript脚本和/或页面图片。

举例而言，缓存设置属性的属性值的数据类型可以设置成布尔型，布尔型的取值有两个：false(假)和true(真)。并设定当该属性值取值为真时，允许浏览器缓存响应页面上的静态资源，当该属性值取值为假时，禁止浏览器缓存响应页面上的静态资源。具体应用时，可以根据实际应用需求进行选择。例如，若某一应用对安全性要求较高，不希望将前端页面静态资源暴露，那么可以设置缓存设置属性的属性值为假，从而禁止浏览器缓存该响应页面上的静态资源，即浏览器无缓存，以保护数据安全。

在本实施例中，在收到浏览器的访问请求后，根据浏览器访问请求中的静态资源访问路径，查找记录相应静态资源与实际保存路径间对应关系的映射文件，找到相应的静态资源后异步加载静态资源。

异步加载实现的一种方式是通过一个开源的工具(如seajs，seajs是一个遵循cmd规范的javascript模块加载框架，可以实现javascript的模块化开发及加载机制)在浏览器访问静态资源的时候再去静态资源数据库中查找并加载请求的相应静态资源，而不是在访问页面时将所有的静态资源全部加载，这样可以提高浏览器的访问效率，而且也可以在具体使用静态资源时再去映射文件中查找相应静态资源的实际存储路径。

在本实施例中，静态资源数据库可被放到同一个前端服务器中或者被分放到不同的前端服务器中。实际应用时可以根据服务器的性能需求进行选择，对此不作限制。

实施例三

图2是本发明另一个实施例的一种页面静态资源的处理装置的结构框图，参见图2，该页面静态资源的处理装置20包括：

静态资源提取单元210，用于提取一个或多个应用的页面静态资源；这里的静态资源包括：层叠样式表css，javascript脚本和/或页面图片。

静态资源部署单元220，用于将提取的静态资源部署在可公用的静态资源数据库中，并在静态资源数据库的配置文件中配置静态资源数据库与后端服务器进行数据交互的接口；

静态资源调用单元230，用于接收浏览器侧发送的访问请求，根据访问请求从后端服务器中获取交互数据，并从静态资源数据库中查找相应的静态资源，根据交互数据和所查找出的静态资源生成响应页面返回给浏览器。

图2所示的这种页面静态资源的处理装置20基于前后端分离技术，通过“一个部署，多个调用”把某个(也可以是某些应用，对此不作限制)指定应用的静态资源放到一个公用目录下，供不同应用的前端共同使用。

例如，提取出a应用的静态资源，后续在开发b应用时，如果b应用采取了和a应用一样的前台架构，则b应用完全没有必要自己开发一套前台架构，采用本实施例的前后端分离技术a应用和b应用都直接调用公用的静态资源就可以了，极大地缩短了b应用的开发周期，降低了开发成本，提升了服务器的性能。

本实施例中，静态资源调用单元230包括：缓存设置子单元；

缓存设置子单元，用于在响应页面中增加缓存设置属性，将缓存设置属性的属性值设置为对应阈值，以允许浏览器缓存该响应页面上的静态资源或禁止浏览器缓存该响应页面上的静态资源。

本实施例中，静态资源调用单元230具体用于根据访问请求中的静态资源访问路径，查找记录相应静态资源与实际保存路径间对应关系的映射文件，找到相应的静态资源后异步加载静态资源。

本实施例中，静态资源数据库可被放到同一个服务器中或者被分放到不同的服务器。

需要说明的是，本实施例中的页面静态资源的处理装置是与前述页面静态资源的处理方法相对应的，因而本实施例中对页面静态资源的处理装置没有描述的内容可以参见本发明前述实施例的相关说明，这里不再赘述。

实施例四

图3是本发明又一个实施例的一种页面静态资源的处理装置的系统架构图。参见图3，页面静态资源的处理装置310和三个后台系统分别连接，三个后台系统为：移动门户后端服务器320，uflow系统后端服务器330，和项目管理系统后端服务器340。需要说明的是，本实施例的这种页面静态资源的处理装置310运行在前端服务器上。该前端服务器直接与浏览器进行交互。

本实施例中，以产品u为例，u(是一个流程管理应用)是基于b/s架构的前后端分离技术的产品。

提取出u手机版的js，css，img等页面静态资源。在服务器中新建一个静态资源数据库取名为m，将提取出的静态资源放到该数据库中。如图4所示。

写配置文件，配置后端服务系统交互的接口及其后端项目名称及其他与后台对应的配置如：皮肤。具体的配置过程如图5所示。

本实施例中，配置交互的后端服务器为u，即图3中所示的u系统的后端服务器330。

然后，将静态资源数据库(文件夹形式)m放到同一服务器或不同服务器中启动。

本实施例中，还包括：m通过seajs模块化异步加载技术，查找静态资源与实际访问路径的映射文件，找到相应的页面静态资源后异步加载

综上可知，本发明实施例的基于b/s架构前后端分离技术的页面资源处理方案，通过提取某个或某些应用的页面静态资源，将这些静态资源部署在新建的可以公用的静态资源数据库中，然后当收到浏览器侧发送的访问请求时，将该公用的静态资源数据库中相应的静态资源直接加载到响应页面中返回给浏览器，从而在新应用开发时不需要再重复开发相同的静态资源而是直接使用公用的静态资源，从而极大缩短了开发周期，降低了开发成本。同时，由于前端内容是完全的静态内容，在初次获取以后的大部分时间内，浏览器可以使用本地缓存，这种情况下服务器的压力主要来自于承载数据的restful接口调用，大幅减轻了服务器的压力，优化了服务器性能。

与现有技术相比，本发明实施例的优点如下：

1、采用一个部署，多个调用设计方案，极大地提高了应用开发的效率，节省了开发成本。

2、采用模块化异步加载，提高了浏览器的访问速度，优化了用户体验，提高了服务器性能。

3、采用浏览器可选择的无缓存数据加载设计，这样用户可以根据实际使用需求进行选择，当用户选择无缓存数据加载时，可确保前端数据的安全性。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。