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