Primeng DataView懒加载与分页优化：实现客户端缓存以减少API请求

// src/app/interface/product/pagable-products.tsexport interface PageableProducts {  products: Product[];  total_pages: number;  total_products: number;}// src/app/interface/product/product.tsexport interface Product {  id?: string;  brand: string;  name: string;  price: number;  category: string;  subcategory: string;  stock: number;  description: string;  image_url: string;}// src/app/interface/search/search.tsexport interface Search {  size: number;  page: number;  category?: string;  subcategory?: string;  brands?: string[];  priceRange?: number[];  name?: string;}

// src/app/service/product.service.tsimport { Injectable } from '@angular/core';import { HttpClient, HttpHeaders, HttpParams } from "@angular/common/http";import { catchError, Observable, of, tap } from "rxjs";import { PageableProducts } from "../interface/product/pagable-products";import { Search } from "../interface/search/search";@Injectable({  providedIn: 'root'})export class ProductService {  private productUrl: string = 'http://localhost:8080/product/api';  httpOptions = {    headers: new HttpHeaders({'Content-Type': 'application/json'})  };  constructor(private http: HttpClient) { }  searchProducts(searchQuery: Search): Observable {    let queryParams = new HttpParams();    // 构建查询参数    if (searchQuery.name) queryParams = queryParams.append("name", searchQuery.name);    if (searchQuery.category) queryParams = queryParams.append("category", searchQuery.category);    if (searchQuery.subcategory) queryParams = queryParams.append("subcategory", searchQuery.subcategory);    if (searchQuery.brands && searchQuery.brands.length > 0) queryParams = queryParams.append("brands", searchQuery.brands.join(',')); // 假设后端接受逗号分隔    if (searchQuery.priceRange && searchQuery.priceRange.length === 2) {      queryParams = queryParams.append("pMin", searchQuery.priceRange[0]);      queryParams = queryParams.append("pMax", searchQuery.priceRange[1]);    }    if (searchQuery.page !== null && searchQuery.page >= 0) queryParams = queryParams.append("page", searchQuery.page);    if (searchQuery.size !== null && searchQuery.size > 0) queryParams = queryParams.append("size", searchQuery.size);    console.log(`Sending API request with params: ${queryParams.toString()}`);    return this.http.get(`${this.productUrl}/public/search`, { params: queryParams }).pipe(      tap(_ => console.log(`Fetched products for page ${searchQuery.page}`)),      catchError(this.handleError('searchProducts', { products: [], total_pages: 0, total_products: 0 }))    );  }  private handleError(operation = 'operation', result?: T) {    return (error: any): Observable => {      console.error(`${operation} failed: ${error.message}`);      return of(result as T);    };  }}

// src/app/search/search.component.tsimport { Component, OnInit } from '@angular/core';import { ActivatedRoute } from '@angular/router';import { Title } from '@angular/platform-browser';import { Product, PageableProducts } from '../interface/product/product'; // 假设Product和PageableProducts在同一个文件import { Search } from '../interface/search/search';import { ProductService } from '../service/product.service';import { CategoryService } from '../service/category.service'; // 假设存在import { BrandService } from '../service/brand.service';     // 假设存在import { CategoryDto } from '../interface/category/category-dto'; // 假设存在import { BrandDto } from '../interface/brand/brand-dto';     // 假设存在import { StorageService } from '../service/storage.service'; // 假设存在，用于购物车@Component({  selector: 'app-search',  templateUrl: './search.component.html',  styleUrls: ['./search.component.css']})export class SearchComponent implements OnInit {  virtualProducts: Product[] = []; // Primeng DataView实际显示的数据  selectedSize = 40; // 每页产品数量  totalRecords = 0; // 总产品数量  selectedPage = 0; // 当前页码 (0-indexed)  first = 0;        // Primeng DataView的first属性，表示当前页第一条记录的索引  // 搜索参数  name?: string;  category: string = '';  subcategory?: string;  selectedBrands: string[] = [];  priceRange: number[] = [0, 4000];  selectedPriceRange: number[] = [20, 1000];  // 过滤选项  subcategories: string[] = [];  brands: string[] = [];  sizeOptions: number[] = [5, 20, 40, 60, 80, 100, 200, 500];  loading: boolean = false; // DataView的加载状态  pagesItems: { [key: string]: any } = {}; // 客户端缓存，键为页码或'searchParams'/'size'等  constructor(    private categoryService: CategoryService,    private brandService: BrandService,    private productService: ProductService,    private route: ActivatedRoute,    private titleService: Title,    private storageService: StorageService // 用于购物车功能  ) { }  ngOnInit(): void {    this.route.params.subscribe(params => {      this.category = params['category'];      this.updateFilterValues(); // 获取分类和品牌选项      if (this.category) {        this.titleService.setTitle(this.category);      }      // 页面初始化时，根据当前路由参数构建初始搜索条件      const initialSearchParams: Search = {        size: this.selectedSize,        page: this.selectedPage,        category: this.category,        subcategory: this.subcategory,        brands: this.selectedBrands,        priceRange: this.selectedPriceRange,        name: this.name      };      // 发起初始搜索请求      this.search(initialSearchParams);      // 延迟更新virtualProducts，确保API响应已到达并缓存      setTimeout(() => {        if (this.pagesItems[this.selectedPage]) {          this.virtualProducts = [...this.pagesItems[this.selectedPage]];        }      }, 500); // 适当调整延迟时间    });  }  /**   * 向API发起产品搜索请求，并将结果缓存。   * @param searchParams 当前的搜索参数。   */  search(searchParams: Search): void {    this.loading = true;    this.productService.searchProducts(searchParams).subscribe({      next: (value: PageableProducts) => {        // 缓存当前的搜索参数和分页大小        this.pagesItems['searchParams'] = {          category: searchParams.category,          subcategory: searchParams.subcategory,          brands: searchParams.brands,          priceRange: searchParams.priceRange,          name: searchParams.name        };        this.pagesItems['size'] = searchParams.size;        this.pagesItems['page'] = searchParams.page; // 缓存当前请求的页码        // 缓存当前页的产品数据        this.pagesItems[searchParams.page] = [...value.products];        this.totalRecords = value.total_products;        this.loading = false;        console.log(`API fetched page ${searchParams.page}, total products: ${this.totalRecords}`);      },      error: (err) => {        console.error('Search API error:', err);        this.loading = false;      }    });  }  /**   * Primeng DataView的onLazyLoad事件处理函数。   * 根据分页或搜索条件变化，决定从缓存加载或发起API请求。   * @param event LazyLoadEvent对象，包含first、rows等信息。   * @param isButtonClicked 标记是否由搜索按钮点击触发，用于强制刷新缓存。   */  loadProducts(event: any, isButtonClicked: boolean): void {    this.loading = true;    this.first = event.first;    this.selectedSize = event.rows;    this.selectedPage = Math.floor(this.first / this.selectedSize); // 计算当前页码    const currentSearchParams: Search = {      size: this.selectedSize,      page: this.selectedPage,      category: this.category,      subcategory: this.subcategory,      brands: this.selectedBrands,      priceRange: this.selectedPriceRange,      name: this.name    };    // 如果是搜索按钮点击，或者搜索条件发生变化，则清空缓存并重新开始    if (isButtonClicked || (this.pagesItems && !this.isSameSearchParams(currentSearchParams))) {      this.pagesItems = {}; // 清空整个缓存      this.pagesItems['searchParams'] = { ...currentSearchParams }; // 更新为新的搜索参数      this.pagesItems['size'] = this.selectedSize;      this.pagesItems['page'] = this.selectedPage;    }    // 检查缓存中是否存在当前页的数据    if (this.pagesItems[this.selectedPage] === undefined) {      console.log(`Page ${this.selectedPage} not in cache. Fetching from API...`);      // 如果缓存中没有，则发起API请求      this.search(currentSearchParams);      // 延迟更新virtualProducts，等待API响应并缓存      setTimeout(() => {        if (this.pagesItems[this.selectedPage]) {          this.virtualProducts = [...this.pagesItems[this.selectedPage]];        }        this.loading = false;        event.forceUpdate = true; // 强制DataView更新      }, 500); // 适当调整延迟时间    } else {      console.log(`Page ${this.selectedPage} found in cache. Loading from cache...`);      // 如果缓存中有，则直接从缓存加载      this.virtualProducts = [...this.pagesItems[this.selectedPage]];      this.loading = false;      event.forceUpdate = true; // 强制DataView更新    }  }  /**   * 比较当前搜索参数与缓存中的搜索参数是否一致。   * 用于判断是否需要清空缓存并重新搜索。   * @param currentParams 当前的搜索参数。   * @returns 如果搜索参数一致则返回true，否则返回false。   */  isSameSearchParams(currentParams: Search): boolean {    const cachedParams = this.pagesItems['searchParams'];    if (!cachedParams) return false; // 缓存中没有搜索参数，视为不一致    // 比较各个搜索字段，注意数组和对象的深层比较    const areBrandsSame = JSON.stringify(currentParams.brands?.sort()) === JSON.stringify(cachedParams.brands?.sort());    const arePriceRangeSame = JSON.stringify(currentParams.priceRange) === JSON.stringify(cachedParams.priceRange);    return currentParams.name === cachedParams.name &&           currentParams.category === cachedParams.category &&           currentParams.subcategory === cachedParams.subcategory &&           areBrandsSame &&           arePriceRangeSame &&           currentParams.size === this.pagesItems['size']; // 也要比较每页大小  }  /**   * 搜索按钮点击事件，重置分页并强制刷新缓存。   */  OnSearchButtonClick(): void {    this.first = 0; // 重置到第一页    this.loadProducts({ first: this.first, rows: this.selectedSize, forceUpdate: true }, true);  }  // --- 其他辅助方法 ---  private fetchCategories(category: string): void {    this.categoryService.getSubcategoriesByCategoryName(category).subscribe((categories: CategoryDto[]) => {      this.subcategories = categories.map((c: CategoryDto) => c.name);    });  }  private fetchBrands(category: string): void {    this.brandService.getBrandsByCategoryName(category).subscribe((brands: BrandDto[]) => {      this.brands = brands.map((b: BrandDto) => b.name);    });  }  updateFilterValues(): void {    if (this.category) {      this.fetchCategories(this.category);      this.fetchBrands(this.category);    }  }  addToCart(productId: string | undefined): void {    if (productId) {      this.storageService.addToCart(productId);      console.log('Cart:', this.storageService.getCart());    }  }}

  
    
                
  
    
    Price Range: {{selectedPriceRange[0]}} - {{selectedPriceRange[1]}}

      
    
    
          
    
          
  
      
      
        
          
                          
{{ product.name }}
                        
                                              {{ product.subcategory }}