如何使用 Spring Boot（服务器端）和 Angular（前端）将 100K 数据加载到表中

Posted 2023-02-26

【中文标题】如何使用 Spring Boot（服务器端）和 Angular（前端）将 100K 数据加载到表中

【英文标题】：How to load 100K data to a table with spring boot( server side) and Angular (front end)

【发布时间】：2019-09-01 18:22:54

【问题描述】：

我在不延迟客户端的情况下从后端加载数据时遇到问题..我使用 spring boot 作为后端，使用 angular 7 作为前端..问题是当我从前端提交请求时从后端加载所有数据加载数据需要 55 秒。等待太久了..我想知道有什么想法可以更快地完成这个过程..

我已经完成了从后端到前端加载数据的所有编码。从后端到前端加载数据没有任何错误或任何问题。但问题是加载时间太长了想要加快这个过程

这是 application.properties 文件

spring.datasource.url = jdbc:mysql://localhost:3306/siri?createDatabaseIfNotExist=true
spring.datasource.username = root
spring.datasource.password =sanu
spring.datasource.testWhileIdle = true
spring.datasource.validationQuery = SELECT 1
spring.jpa.show-sql = true
spring.jpa.hibernate.ddl-auto = update
spring.jpa.hibernate.naming-strategy = org.hibernate.cfg.ImprovedNamingStrategy
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL57Dialect
spring.servlet.multipart.enabled=true
spring.servlet.multipart.file-size-threshold=2KB
spring.servlet.multipart.max-file-size=200MB
spring.servlet.multipart.max-request-size=215MB

这是我的实体

@Entity
@Table(name = "Parts")
public class Parts implements SuperEntity 
    @Id
    @GeneratedValue(strategy = GenerationType.TABLE, generator = "map")
    @TableGenerator(name = "map", table = "Id_Gen", pkColumnName = 
   "Tables_Names", valueColumnName = "Gen_keys", pkColumnValue = 
   "PartsDTO", initialValue = 1, allocationSize = 1)
    private int id;
    private String partName;
    private String partNumber;
    private String barCode;
    private String brand;
    private String partType;
    private String country;
    private String vehicleModel;
    private String packSize;
    private String location;
    private String rackNo;
    private String roq;
    private String rql;
    @Column(name = "imageUrl1")
    private String imageUrl1;
    @Column(name = "imageUrl2")
    private String imageUrl2;
    @Column(name = "imageUrl3")
    private String imageUrl3;
    @Column(name = "imageUrl4")
    private String imageUrl4;
    private Blob image;
    private Blob image1;
    private Blob image2;
    private Blob image3;
    private String warranty;
    private Date adedDate;
    @Enumerated(value = EnumType.STRING)
    private Catogary catogary;
    @ManyToMany(cascade = CascadeType.DETACH, fetch = FetchType.LAZY)
    @JoinTable(name = "Parts_FuelType",
            joinColumns = @JoinColumn(name = "part_ID", 
    referencedColumnName = "id"),
            inverseJoinColumns = @JoinColumn(name = "fuel_Type", 
    referencedColumnName = "id"))
    private List<FuelType> fuelTypes = new ArrayList<>();
    @OneToMany(mappedBy = "parts", cascade = CascadeType.DETACH, fetch = 
    FetchType.LAZY)
    private List<OrderDetails> orderDetail = new ArrayList<>();
    @OneToMany(mappedBy = "parts", cascade = CascadeType.DETACH, fetch = 
    FetchType.LAZY)
    @OrderBy("date DESC")
    private List<Bulk> bulks = new ArrayList<>();

这是 Crud 回购

public interface PartsRepo extends CrudRepository<Parts, Integer> 
    Parts findPartsByBarCode(String barCode) throws Exception;
    List<Parts> findPartsByPartNameContaining(String partName) throws Exception;
    List<Parts> findPartsByPartNumberContaining(String partNumber) throws Exception;
    Long countByBarCodeAndFuelTypes(String barCode, FuelType t) throws Exception;
    Parts findPartsByPartNumber(String partNumber) throws Exception;

这是控制器

@GetMapping(value = "/getAll")
public List<PartsDTO> getAllParts() 
    try 
        return partsService.getAllParts();
     catch (Exception e) 
        e.printStackTrace();
        return null;
    

从这里将所有数据加载到前端 html 表需要将近 1 分钟我想知道将所有数据 (100K) 数据快速加载到 html 表的最快方法是什么

【问题讨论】：

您必须为您的数据添加分页，不应一次请求全部加载

当你有很多数据要显示时，你需要使用分页。您已经是，但这是客户端分页，这意味着 Angular 需要处理 所有记录 并将它们分页，这非常慢。你应该做分页服务器端。

那么请解释一下如何在spring boot中进行服务器端分页

【参考方案1】：

如果您需要加载 10 万条记录，您确实应该添加服务器端分页。

Spring-Boot 允许您开箱即用地创建分页。

您的repository 应该扩展PagingAndSortingRepository：

public interface PartsRepo extends PagingAndSortingRepository<Parts, Integer> 
    Page<Parts> getAllPartsPage(Pageable pageable, //whatever @Param you need here);

你的controller 应该接受Pageable 参数：

@GetMapping(value = "/getAll")
public Page<PartsDTO> getAllPartsPageable(@SortDefault("id (or whatever field you need)") Pageable pageable) 
    try 
        return partsService.getAllPartsPage();
     catch (Exception e) 
        e.printStackTrace();
        return null;
    

结帐Pageable接口description。

另外，这里有一个很好的 article 关于 spring-boot 分页。