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

引言

Primeng的DataView组件提供了强大的数据展示能力，支持分页、排序和过滤等功能。当处理大量数据时，结合懒加载（Lazy Loading）模式可以显著提高前端应用的响应速度和用户体验，因为它只在需要时才从后端获取数据。然而，在实现懒加载和分页功能时，尤其是在用户频繁切换页面或应用搜索/过滤条件时，如果不进行适当的优化，可能会导致重复的API请求，从而增加服务器负担和降低客户端性能。

本文将详细探讨如何通过在客户端实现智能的页面数据缓存机制，来优化Primeng DataView的懒加载和分页行为，确保数据仅在首次加载或搜索条件发生变化时从API获取，而在用户访问已加载过的页面时直接从缓存中获取。

面临的挑战

在Primeng DataView中，当[lazy]="true"时，onLazyLoad事件会在组件初始化、分页、排序或过滤条件改变时触发。如果同时使用onPage事件，或者在onLazyLoad内部不加区分地进行API调用，可能会遇到以下问题：

1. 重复API请求： 用户在不同页面之间切换时，即使数据已经加载过，也可能再次触发API请求。
2. 数据不一致： 如果API请求频率过高，或者处理逻辑不当，可能导致DataView显示的数据与实际期望的数据不符。
3. 性能下降： 频繁的网络请求会增加延迟，消耗用户带宽，尤其是在移动网络环境下，用户体验会大打折扣。

初始的尝试可能包括在onPageChange和loadProducts中都进行API调用，但这会导致API请求的重复发送，并且由于异步操作，数据更新可能混乱。

解决方案：客户端页面缓存与智能请求

为了解决上述问题，我们引入一个客户端缓存机制，利用一个JavaScript对象来存储已加载的每一页数据。当用户请求某一页数据时，首先检查缓存中是否存在该页数据；如果存在且搜索条件未改变，则直接使用缓存数据；否则，才向API发起请求。

Lifetoon

免费的AI漫画创作平台

下载

核心思路

1. 缓存结构： 使用一个对象（例如 pagesItems），以页码作为键，存储对应页的产品列表作为值。
2. 搜索参数跟踪： 除了缓存产品数据，还需要存储当前的搜索参数（如 name, category, brands, priceRange, size），以便在用户切换页面时判断搜索条件是否发生变化。
3. 条件性API请求： 在onLazyLoad事件处理函数中，根据当前请求的页码和存储的搜索参数，决定是从缓存中读取数据还是发起新的API请求。
4. 强制刷新： 提供一个机制，例如搜索按钮点击，来强制清除缓存并重新发起API请求。

实现步骤

1. 定义数据接口

为了清晰地表示分页产品和搜索参数，我们定义以下接口：

// src/app/interface/product/pagable-products.ts
export interface PageableProducts {
  products: Product[];
  total_pages: number;
  total_products: number;
}

// src/app/interface/product/product.ts
export 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.ts
export interface Search {
  size: number;
  page: number;
  category?: string;
  subcategory?: string;
  brands?: string[];
  priceRange?: number[];
  name?: string;
}

2. 产品服务 (ProductService)

产品服务负责向后端API发起请求，根据搜索参数获取分页产品数据。

// src/app/service/product.service.ts
import { 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);
    };
  }
}

3. 搜索组件 (SearchComponent)

这是实现缓存逻辑的核心部分。

// src/app/search/search.component.ts
import { 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());
    }
  }
}

4. HTML模板 (search.component.html)

DataView组件的配置需要绑定到组件的属性和事件上。

  

    

      
      
    
  
  
  

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


    
  
  
  

    

      
    
    

      
    
  



  
    

      

        

          

            
              
{{ product.name }}
            
            

              
                
                {{ product.subcategory }}