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

Question

我在不延迟客户端的情况下从后端加载数据时遇到问题..我使用 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 表的最快方法是什么

Answer 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 分页。