CN112417343B

CN112417343B - 一种基于前端Angular框架缓存数据的方法

Info

Publication number: CN112417343B
Application number: CN202011592133.4A
Authority: CN
Inventors: 杨绍军; 冯凯; 王元卓
Original assignee: Big Data Research Institute Institute Of Computing Technology Chinese Academy Of Sciences
Current assignee: Big Data Research Institute Institute Of Computing Technology Chinese Academy Of Sciences
Priority date: 2020-12-29
Filing date: 2020-12-29
Publication date: 2021-08-31
Anticipated expiration: 2040-12-29
Also published as: CN112417343A

Abstract

本发明属于互联网技术领域，具体涉及一种基于前端Angular框架缓存数据的方法，利用框架内的Service中间件，将其巧妙的封装成为一个缓存容器，借助其天然单例对象的特性，将其作为缓存容器来缓存数据，使其能在不同网页间缓存数据，不同于现有的需要利用ID来从数据库内获取数据源，提高表单的回显速度，因为缓存数据存储在本地，随用随取，降低了接口请求次数，并且在获取数据的时间上使用缓存优于接口请求，这对于用户体验来说至关重要。

Description

一种基于前端Angular框架缓存数据的方法

技术领域

本发明属于互联网技术领域，具体涉及一种基于前端Angular框架缓存数据的方法。

背景技术

Angular是目前前端开发框架中的翘楚，在企业级开发中首屈一指，特别是在后台管理系统的单页面开发中应用广泛。

近年来随着大数据的普及，企业级应用开发中数据传输量非常巨大，当前网站前端技术发展迅速，前端业务量逐渐增大，前端需要处理的数据也就越来越多。

现有的前端浏览器只能存储字符串数据，不能存储其他类型的数据，网站开发人员每次都必须手动将从服务器获取的其他类型数据转换成字符串数据，然后存入浏览器缓存，用的时候再取出来，转换成需要的数据类型。

因此，现有的网站前端的数据缓存方法操作繁琐，且效率低下，网页页面彼此之间跳转频繁，在不同网页中直接频繁的查询接口，无法最大限度的达到相同数据的复用，导致每次从服务器获取数据都存在延迟，用户体验较差，影响了客户留存率，同时大大的增加了服务器处理数据的压力。

发明内容

针对现有设备存在的缺陷和问题，本发明提供一种基于前端Angular框架缓存数据的方法，有效的解决了现有设备中存在的网页页面彼此之间跳转频繁，在不同网页中直接频繁的查询接口，从服务器获取数据，无法达到相同数据的复用，大大的增加了服务器处理数据的压力的问题。

本发明解决其技术问题所采用的方案是：一种基于前端Angular框架缓存数据的方法，包括如下步骤：

步骤1：定义Service服务类；在Angular框架提供的Service中创建Service服务类；根据Service服务类的单例对象的特性，将Service服务类封装为缓存容器，并把要加载的数据存入缓存容器中；

封装Service的具体步骤如下：

1）、在命令行使用Angular自带的命令 ng g service product生成一个Service，Angular的ng命令会自动根据参数新建service并命名为ProductService；

2）、在ProductService类中定义变量属性currentEditProduct，用于存储要缓存的商品数据；

3）、在ProductService类中定义setProductCache ，并用于缓存商品数据，把传进来的参数赋值给变量属性currentEditProduct；

4）、在ProductService类定义getProductCache，用于返回缓存的商品数据；

步骤2：进入商品列表页面，先请求API接口从服务器获取N条商品数据展示在页面上；

步骤3：用户点击一条商品的编辑按钮；

步骤4：前端获取该条商品数据，首先调用ProductService的 setProductCache，把商品数据作为参数传入setProductCache，并将商品数据赋值缓存在变量属性currentEditProduct中，此时ProductService中已经缓存了一条商品数据；

步骤5：然后再控制页面跳转到商品编辑页面，在编辑页面首次加载时，在编辑页面代码里先调用ProductService中间件的getProductCache，从缓存中查到该商品数据，并由getProductCache将已经有缓存数据的变量属性currentEditProduct 返回给调用者；

步骤6：如果用户是从商品列表点击编辑按钮跳转到编辑商品页面，在缓存中查到数据，然后直接把从缓存中取到的商品数据展示在商品编辑的编辑输入框内；

步骤7；对编辑输入框内的商品信息进行编辑；

步骤8：点击保存按钮，保存商品信息，即完成了商品数据的编辑。

进一步的，步骤1中定义Service服务类的具体代码如下；

class ProductService{

// 定义变量属性用于存储要缓存的商品数据，初始化为空

currentEditProduct = {}

// 缓存的商品数据方法

setProductCache(product){

// 把传进来的商品参数赋值给属性currentEditProduct,数据就缓存起来了

this.currentEditProduct = product；

}

// 获取缓存中的商品方法

getProductCache(){

// 直接返回缓存中的商品

return this.currentEditProduct；

}

}。

本发明的有益效果：本发明基于一种基于前端Angular框架，利用框架内的Service中间件，将其巧妙的封装成为一个缓存容器，借助其天然单例对象的特性，将其作为缓存容器来缓存数据，使其能在不同网页间缓存数据，不同于现有的需要利用ID来从数据库内获取数据源，提高表单的回显速度。

最大限度的利用了缓存数据，这不但大大的减轻了客户端与服务器之间通信的次数，达到了相同数据的复用，有效的节省了带宽，大大减轻了服务器处理数据的压力，为企业节省了开支，最重要的是提升了用户体验，因为缓存数据存储在本地，随用随取，降低了接口请求次数，并且在获取数据的时间上使用缓存优于接口请求，这对于用户体验来说至关重要。

附图说明

图1为本发明的操作流程示意图。

具体实施方式

下面结合附图和实施例对本发明进一步说明。

实施例1：本实施例旨在提供一种基于前端Angular框架缓存数据的方法，主要针对现有的电商商品管理后台界面在调用商品时，网页页面彼此之间跳转频繁，在不同网页中直接频繁的查询接口，从服务器获取数据，客户端与服务器之间通信的次数高的问题，为此，本实施例将Service封装为一个缓存容器，在程序执行过程中，会把将要加载的数据存入缓存容器中，减轻了客户端与服务器之间通信的次数，达到了相同数据的复用，有效的节省了带宽，大大减轻了服务器的压力。

本实施例中的一些名词解释如下：

前端：即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。

Angular：一个功能非常完备的前端框架，横跨了所有平台，通过Angular构建的应用，能在Web、移动Web、移动应用、原生应用和桌面原生应用等多种平台上运行；Angular的速度与性能也是绝佳的，通过Web Worker和服务端渲染，达到在如今(以及未来)的Web平台上所能达到的最高速度；

类：（英语：class）在面向对象编程中是一种面向对象计算机编程语言的构造，是创建对象的蓝图，描述了所创建的对象共同的属性和方法。

单例类：（Singleton 类）：是计算机编程设计中最简单的设计模式之一。其最大的特点是单例类只能有一个实例，即它的所有的实例对象都指向同一个内存引用地址，也就是说Singleton 类中所有的实例化对象内的属性都是共用的，在页面A和页面B分别调用获取Singleton 类中的属性，其数据值是一致的。反之同理，在页面A改变了Singleton 类中的属性，在页面B获取Singleton 类中的属性也是实时最新的，除非强制刷新页面，否则Singleton 类中的属性值数据不会丢失。

Service中间件：Angular框架的服务中间件，是Angular框架提供的天然的开箱即用的单例类（Singleton 类），主要用户封装网络请求，Service对象都是单例的。本实用新型发明利用其单例的特性，将其用作缓存容器；

单页面应用：简称 SPA，它是一种网站应用的模型，它可以动态重写当前的页面来与用户交互，而不需要重新加载整个页面。单页应用做到了前后端分离，后端只负责处理数据提供接口，页面逻辑和页面渲染都交给了前端。单页应用的使用在电商后台、ERP、SASS等系统总已经很广泛；

API：应用程序编程接口。是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

本实施例具体包括如下步骤：

步骤1：定义Service服务类；在Angular框架提供的Service中创建Service服务类；在程序执行过程中，会把将要加载的数据存入缓存容器中；

封装Service的具体步骤如下：

2）、在ProductService类中定义一个变量属性currentEditProduct用于存储要缓存的商品数据；

3）、在ProductService类中定义一个setProductCache 用于缓存商品数据，setProductCache 的参数是需要缓存的商品数据，把传进来的参数赋值给变量属性currentEditProduct，这时已经有一个商品数据被缓存到了变量属性currentEditProduct中；

4）、在ProductService类再定义一个getProductCache的方法用于返回缓存的商品数据，直接返回变量属性currentEditProduct 即可；

本步骤中定义Service服务类的具体代码如下；

class ProductService{

// 定义变量属性用于存储要缓存的商品数据，初始化为空

currentEditProduct = {}

// 缓存的商品数据方法

setProductCache(product){

this.currentEditProduct = product；

}

// 获取缓存中的商品方法

getProductCache(){

// 直接返回缓存中的商品

return this.currentEditProduct；

}

}；

步骤3：用户点击一条商品的编辑按钮；

步骤4：前端此时可以直接拿到该条商品数据，调用ProductService的setProductCache，把商品数据作为参数传入 setProductCache，setProductCache会将商品数据赋值缓存在变量属性currentEditProduct中，此时ProductService中已经缓存了一条商品数据；

步骤6：如果用户是从商品列表调点击编辑按钮跳转到编辑商品页面，在缓存中查到数据，然后直接把从缓存中取到的商品数据展示在商品编辑的编辑输入框内；

步骤7；通过步骤6已经拿到商品信息，并展示在商品编辑输入框内，此时可以在输入框内修改商品名称等基本信息；

由此，本实施例利用Service的单例性，当用户从商品列表界面点击编辑时，利用ProductService类中定义的setProductCache 主动获取并缓冲该商品数据，将该编辑的商品中信息缓冲在currentEditProduct中，并由ProductService类定义的getProductCache将商品数据返回至商品详情页面，从而商品详情页面无须经用ID访问数据库，能直接从缓存容器中可直接获取商品数据，现有的直接采用ID访问所需时间3-10s，而本实施例中从缓存容器中获取数据所需时间仅为20ms，大大的提高了表单的出显速度，达到了相同数据的复用，有效的节省了带宽，大大减轻了服务器处理数据的压力，为企业节省了开支，提升了用户体验。

实施例2：本实施例与实施例1基本相同，其不同在于：本实施例中对于步骤6中，由于用户强制刷新了浏览器致使缓冲中没有数据。

本实施例如果在缓存中没有获取到数据，即用户在编辑页面强制刷新了浏览器，此时Service缓存中的属性数据会丢失，实际使用过程中这种情况的概率极低，这也是本实用新型发明可以节省大量性能的原因，则调用查询商品详情的API接口，从服务器获取商品详情数据，然后把商品详情数据展示在商品编辑的编辑输入框内。

Claims

1.一种基于前端Angular框架缓存数据的方法，其特征在于：包括如下步骤：

封装Service的具体步骤如下：

步骤3：用户点击一条商品的编辑按钮；

步骤7；对编辑输入框内的商品信息进行编辑；

步骤8：点击保存按钮，保存商品信息，即完成了商品数据的编辑；

2.根据权利要求1所述的基于前端Angular框架缓存数据的方法，其特征在于：在步骤6中，如果在缓存中没有获取到数据，则调用查询商品详情的API接口，从服务器获取商品详情数据，然后把商品详情数据展示在商品编辑的编辑输入框内。