Angular2-Datentabelle mit hoher Datenmenge

Question

Ich möchte große Datenmengen auf einer Datentabelle zeigen. Ich verwende Angular2 für meine UI und Spring REST API für das Backend. Wie kann ich meine Daten mit Paginierung und Filtern gestalten, um ein hohes Datenvolumen problemlos bewältigen zu können? Wie gestalte ich mein Backend für diese Anforderung?

Answer 1

Sie können einen paginierten REST-Service implementieren.

Sagen wir, wir möchten in einer Datentabelle alle Benutzer in unserer Datenbank zeigen.

Wir werden ein Verfahren mit der folgenden Signatur haben:

public ResponseEntity<PaginatedResponse<User>> getUsers(
      @RequestParam("page") int page, @RequestParam("size") int size) 

Hier haben wir die Seitenzahl und die Größe jeder Seite in der Anforderung senden.

Wir definieren die Antwort:

public class PaginatedResponse<T> { 

    private List<T> responseList; 

    private int pageNumber; 

    private int pageSize; 

    private int totalPageNumber; 
} 

In der Antwort werden wir die Gesamtzahl der Seiten haben und die Größe der aktuellen Seite, zusammen mit seinem Index.

Für die Datenschicht Sie Feder Daten verwenden können:

public interface UserRepository extends JpaRepository<User, Long>, QueryDslPredicateExecutor<User> 

und erklären die Methode, um die seitenwechselbar Daten zu extrahieren:

@Query("select u, from User u") 
    Page<User> findUsers(final Pageable pageable); 

Beachten Sie, dass Sie Parameter hinzufügen können Ihre Federdatenabfrage filtern mit @Param Annotation.

Was den Winkelteil, müssen Sie iterieren http ruft die Daten zu erhalten, und jedes Mal überprüfen, ob die Seite Index im Bereich (dh < totalPageNumber)