建站
咨詢
售后
建站咨詢
新聞中心
緩存數(shù)據(jù)庫是現(xiàn)代Web應(yīng)用程序設(shè)計(jì)中的一種更佳實(shí)踐。它通過將頻繁使用的數(shù)據(jù)存儲在本地，從而大大提高了數(shù)據(jù)檢索速度和系統(tǒng)響應(yīng)時間。Angular技術(shù)帶來的好處之一就是它可以輕松地實(shí)現(xiàn)緩存數(shù)據(jù)庫。本文將討論Angular技術(shù)如何實(shí)現(xiàn)緩存數(shù)據(jù)庫，并介紹它的各種好處。
讓我們了解Angular中的緩存數(shù)據(jù)庫是如何工作的。Angular提供了兩種緩存數(shù)據(jù)庫構(gòu)建器：原生和HTTP。原生構(gòu)建器可以在客戶端使用任何類型的緩存數(shù)據(jù)庫進(jìn)行緩存，而HTTP構(gòu)建器則與Angular的HttpClient密切集成，可以在發(fā)送HTTP請求時通過HttpInterceptors向響應(yīng)添加緩存邏輯。下面我們將著重介紹HTTP構(gòu)建器。
為了開始使用緩存數(shù)據(jù)庫，我們需要創(chuàng)建一個適當(dāng)?shù)腍ttpInterceptor。這個攔截器是一個可復(fù)用的服務(wù)，我們可以在項(xiàng)目中的任何地方使用它。在這個攔截器中，我們定義了緩存數(shù)據(jù)庫的行為，包括緩存的存儲時間、緩存攔截請求、緩存到期時清除緩存等。下面是一個示例攔截器的代碼：
“`typescript
import { Injectable } from ‘@angular/core’;
import { HttpInterceptor, HttpRequest, HttpResponse, HttpHandler } from ‘@angular/common/http’;
import { Observable, of } from ‘rxjs’;
import { tap } from ‘rxjs/operators’;
@Injectable()
export class CacheInterceptor implements HttpInterceptor {
private cache = new Map();
intercept(req: HttpRequest, next: HttpHandler): Observable> {
const cachedResponse = this.cache.get(req.url);
if (cachedResponse) {
return of(cachedResponse);
}
return next.handle(req).pipe(
tap(event => {
if (event instanceof HttpResponse) {
this.cache.set(req.url, event);
}
})
);
}
}
“`
在這個攔截器中，我們創(chuàng)建了一個名為cache的Map，用于存儲與url相關(guān)聯(lián)的響應(yīng)。在攔截請求時，我們首先在cache中查找是否已經(jīng)緩存了該請求的響應(yīng)。如果已經(jīng)緩存了，則簡單地返回響應(yīng)。如果未緩存，則發(fā)送請求并攔截響應(yīng)。在攔截響應(yīng)時，我們將響應(yīng)存儲到cache中，以備將來使用。
有了這個攔截器，我們就可以通過向HttpClient中添加攔截器來實(shí)現(xiàn)應(yīng)用程序范圍的緩存。下面是一個示例方法，該方法使用HttpClinet從服務(wù)器獲取某些數(shù)據(jù)：
“`typescript
import { Component } from ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;
@Component({
selector: ‘a(chǎn)pp-root’,
templateUrl: ‘./app.component.html’
})
export class AppComponent {
data;
constructor(private http: HttpClient) {}
loadData() {
const url = ‘https://jsonplaceholder.typicode.com/todos/1’;
const options = { headers: { ‘Cache-Control’: ‘max-age=5’ } };
this.http.get(url, options).subscribe(response => this.data = response);
}
}
“`
在這個方法中，我們對請求添加了一個名為Cache-Control的標(biāo)頭，該標(biāo)頭指示緩存存儲時間為5秒。在調(diào)用get方法時，HttpClient會調(diào)用我們的攔截器，如果緩存中已經(jīng)存在響應(yīng)，則返回緩存的響應(yīng)，否則發(fā)送請求并存儲響應(yīng)。
現(xiàn)在，讓我們看看Angular緩存數(shù)據(jù)庫的各種好處：
1. 提高了應(yīng)用性能：通過使用緩存數(shù)據(jù)庫，我們可以避免每次請求都從服務(wù)器獲取數(shù)據(jù)。這可以大大提高數(shù)據(jù)檢索速度和系統(tǒng)響應(yīng)時間，從而提高了應(yīng)用整體性能。
2. 減少了服務(wù)器負(fù)載：由于客戶端緩存了大部分?jǐn)?shù)據(jù)，因此服務(wù)器不必承擔(dān)重復(fù)的請求。這將減輕服務(wù)器的負(fù)擔(dān)，使其更容易擴(kuò)展以支持更多的用戶。
3. 改善了用戶體驗(yàn)：由于數(shù)據(jù)在本地緩存，因此即使沒有網(wǎng)絡(luò)連接，應(yīng)用程序也可以繼續(xù)運(yùn)行。這大大改善了用戶的體驗(yàn)，使他們可以在沒有網(wǎng)絡(luò)連接的情況下繼續(xù)使用應(yīng)用程序。
4. 更好的離線體驗(yàn)：緩存數(shù)據(jù)庫使得應(yīng)用程序可以在離線模式下提供良好的用戶體驗(yàn)。如果用戶在沒有網(wǎng)絡(luò)連接的情況下使用應(yīng)用程序，緩存的數(shù)據(jù)將允許他們繼續(xù)查看先前查看過的數(shù)據(jù)，而不必?fù)?dān)心數(shù)據(jù)的缺失。
5. 降低了成本：緩存數(shù)據(jù)庫可以減少向服務(wù)器發(fā)出請求的數(shù)量。這將減少服務(wù)器資源的使用，因此減少了部署和維護(hù)應(yīng)用程序的成本。
成都網(wǎng)站建設(shè)公司-創(chuàng)新互聯(lián)為您提供網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù)！
PHP DUXCMS如何開啟頁面緩存
1.頁面緩存。頁面緩存指之前加載過的頁面以文件方式緩存在服務(wù)器中，在一段時間內(nèi)再次加載相同頁面時無需重新執(zhí)行頁面邏輯直接加載靜態(tài)頁面。rubyPHP的頁面緩存是自動進(jìn)行的，在config/tpl.php中可配置是否啟用緩存以及緩存文件的有效期。當(dāng)然這僅僅是全局設(shè)置，在調(diào)用視圖時可重新指定是否啟用緩存以及緩存有效期。
2.SQL緩存。sql緩存指之前執(zhí)行過的查詢sql語句以及他的結(jié)果緩存在內(nèi)存中，在一段時間內(nèi)用相同的sql語句執(zhí)行查詢操作時不經(jīng)過數(shù)據(jù)庫直接返回內(nèi)存中數(shù)據(jù)。rubyPHP使用Redis以鍵值方式緩存sql語句以及他的對應(yīng)結(jié)果。rubyPHP能夠在php7上完美運(yùn)行。（附：關(guān)于windows php7 redis 擴(kuò)展的下載參蠢笑照我的另一篇博客：
）。rubyPHP重寫了mysql_query以及mongo_query方法，在執(zhí)行查詢sql查詢語句時會優(yōu)先加載未過期的緩存數(shù)據(jù)。與頁面緩存類似，sql緩存的全局配置路徑為config/redis.php，在具體執(zhí)行sql語句前可重新執(zhí)行是否使用緩存以及緩存有效期。
3.讀寫分離。讀寫分離是建立在主從同步基礎(chǔ)上為了減輕服務(wù)器壓力，將查詢語句轉(zhuǎn)移到從服務(wù)器上執(zhí)行的解決方案。rubyPHP重寫了mysql_query，mongo_query函數(shù)，除了對查詢語句進(jìn)行內(nèi)存級緩存的優(yōu)化，同時也將查詢語句放到了從服務(wù)器上執(zhí)行。mysql的主從配置文件路徑為config/mysql.php。
4.html壓縮。html壓縮配合頁面緩存，前者降低了服務(wù)器端壓力，后者減少了輸出內(nèi)容所占空間，將html文件中的空格換行等進(jìn)行壓縮，減少了輸出文件的大小，在一定程度上保護(hù)了html的安全。
rubyPHP在代碼結(jié)構(gòu)上模仿CI，在功能上模仿thinkPHP。
rubyPHP的功能包含以下幾方面：
1.使用了thinkPHP的M方法操作數(shù)據(jù)庫。對于一些簡單的sql語句無需手工寫，用熟悉的M()->where()->limit()->find()這樣的語法即可完成。曾經(jīng)面試有人問我為什么thinkPHP的M方法能夠進(jìn)行連續(xù)操作，現(xiàn)在終于明白是使用了單利模式。
2.屏蔽了數(shù)據(jù)庫的差異。M方法的另一個優(yōu)點(diǎn)是用來組件sql語句，對高層屏蔽數(shù)據(jù)庫差異。當(dāng)然，對于復(fù)雜的查詢，M方法是做不到的，此時可以使用已被重寫過的mysql_query以及mongo_query執(zhí)行你的sql語句。
3.自定義路由。這一點(diǎn)模仿了CI的route.php，將url同咐核控制器的映射關(guān)系寫到一個配置文件里。
不足之處：
view文件不支持變量循環(huán)輸出。目前的解決方案是使用angularjs調(diào)用接口在頁面輸出內(nèi)容?？蚣苁纠绦虮闶且粋€使用angularjs的和bootstrap的界面帶簡含。
angular6.x–虛擬滾動
1.安裝@angular/material、@angular/cdk
cnpm install –save @angular/material @angular/cdk
2.app.module.ts導(dǎo)入模塊
3.在當(dāng)前組件引入
html
css
1.Context Variables
使用*cdkVirtualFor，我們有一些上下文變量:index, count, first, last, even, odd.
2.視圖回收
為了提高渲染性能， *cdkVirtualFor 會緩存那些曾經(jīng)創(chuàng)建過但不再需要的視圖。當(dāng)要創(chuàng)建一個新視圖時，會轉(zhuǎn)而復(fù)用一個已緩存的視圖?？梢酝ㄟ^ templateCacheSize 屬性來調(diào)整視圖緩存的大小。把這個大小設(shè)置為 0 會禁用緩存。如果你的模板在內(nèi)存方面很昂貴，你可能會希望減小這個數(shù)字，以免在模板緩存上花費(fèi)太多內(nèi)存。
3.固定超過滾動視圖的item個數(shù)
minBufferPx maxBufferPx
當(dāng)所有條目都是固定大小時，你可以使用 FixedSizeVirtualScrollStrategy?？梢杂?itemSize 指令輕松地將它添加到視口中。這種約束的優(yōu)點(diǎn)是它可以提供更好的性能，因?yàn)樵阡秩緱l桐襲滾目時不需要進(jìn)行測量。
固定大小的策略也支持設(shè)置一些緩沖區(qū)參數(shù)，用來決定渲染多少額外內(nèi)容，也就是視口可見內(nèi)容之外的部分。之一個參數(shù)是 minBufferPx。 minBufferPx 是視口必須渲染的最小內(nèi)容緩沖區(qū)數(shù)量（以像素為單位）。如果視口檢測到要緩沖的內(nèi)容小于這個數(shù)量（未填滿），就會立即渲染更多內(nèi)容。 第二個參數(shù)是 maxBufferPx。它會告訴視口當(dāng)檢測到需要更多緩沖區(qū)的時候要渲染多少個備用緩沖區(qū)空間。
這兩個緩沖區(qū)參數(shù)的作用可以用一個例子來說明。假設(shè)我們有以下參數(shù)：itemSize = 50、minBufferPx = 100、maxBufferPx = 250。當(dāng)用戶滾動瀏覽內(nèi)容時，視口就會檢測到只剩下 90px 的緩沖區(qū)。由于它小于 minBufferPx，所以視口必須渲染更多緩沖區(qū)。它必須渲染足夠數(shù)量的緩沖區(qū)，直到其大于等于 maxBufferPx。在這種情況下，它渲染了4個條目（額外的 200px），使緩沖區(qū)總大小達(dá)到290px，略高于maxBufferPx 。
4.視口方向
虛擬滾動視口默認(rèn)為垂直方向，也可局余以設(shè)置為 orientation=”horizontal”。在改變方向時，要確保該條目是用 CSS 進(jìn)行水平布局的。要做到這一點(diǎn)，你可能希望把 .cdk-virtual-scroll-content-wrapper 類作為 CSS 的目標(biāo)，它是包含待渲染內(nèi)容的包裝元素。
5.數(shù)據(jù)
*cdkVirtualFor 接受來自 Array、Observable 或 DataSource 的數(shù)據(jù)。
數(shù)據(jù)源是一個抽象類，有兩個方法：
– connect(): is called by the Viewport to receive a stream that emits the data array.
– disconnect(): will be invoked when the Viewport is destroyed.
例子：
6.trackBy
像 *ngFor 的 trackBy 一樣，這里也可以指定 trackBy 函數(shù)，工作方式也都一樣。傳給這個 trackBy 的 index 是在數(shù)據(jù)源中的索引，而不是在要渲染的這部分?jǐn)?shù)據(jù)中的索引。
用函數(shù)自己寫排序功能：
7.滾動策略禪頃
為了確定整個內(nèi)容的大小以及它在任何時刻需要實(shí)際渲染的內(nèi)容，視口依賴于所提供的一個 VirtualScrollStrategy。提供它的最簡單方式是在視口上使用 itemSize 指令（例如 ）。但是，也可以通過創(chuàng)建一個實(shí)現(xiàn) VirtualScrollStrategy 接口的類來提供自定義策略，并在包含此視口的組件上把它提供為 VIRTUAL_SCROLL_STRATEGY。
Angular提供Tree組件嗎？能綁定統(tǒng)計(jì)數(shù)據(jù)而非具體數(shù)據(jù)庫字段嗎
Angular UI Tree是一個Angular UI 組件，可渣者排序嵌套列表，提供拖放支持，不依賴于jQuery。
特性
使用原生Angular范圍數(shù)據(jù)綁定游梁碼
排序并通過整個樹移動神哪項(xiàng)目
Prevent elements from accepting child nodes
支持的瀏覽器
The Angular UI Tree is tested with the following browsers:
Chrome (stable)
Firefox
IE 8, 9 and 10
For IE8 support, make sure you do the following:
include an ES5 shim
make your Angular application compatible with Internet Explorer
use jQuery 1.x
angular 緩存數(shù)據(jù)庫的介紹就聊到這里吧，感謝你花時間閱讀本站內(nèi)容，更多關(guān)于angular 緩存數(shù)據(jù)庫,Angular技術(shù)帶來的好處：緩存數(shù)據(jù)庫,PHP DUXCMS如何開啟頁面緩存,angular6.x–虛擬滾動,Angular提供Tree組件嗎？能綁定統(tǒng)計(jì)數(shù)據(jù)而非具體數(shù)據(jù)庫字段嗎的信息別忘了在本站進(jìn)行查找喔。
香港服務(wù)器選創(chuàng)新互聯(lián)，香港虛擬主機(jī)被稱為香港虛擬空間/香港網(wǎng)站空間，或者簡稱香港主機(jī)/香港空間。香港虛擬主機(jī)特點(diǎn)是免備案空間開通就用， 創(chuàng)新互聯(lián)香港主機(jī)精選cn2+bgp線路訪問快、穩(wěn)定！
分享標(biāo)題：Angular技術(shù)帶來的好處：緩存數(shù)據(jù)庫(angular緩存數(shù)據(jù)庫)
文章路徑：http://www.fisionsoft.com.cn/article/ccdegjs.html
