Javascript 使用Spring引导响应延迟加载数据

我的解决方案基于前端应用程序React、redux和material-u以及后端Springboot应用程序

我有一个RESTAPI，可以从数据库中获取大量记录。这会在UI上造成延迟，我想防止这种情况发生

表格组件：

export default function Export(props) {
  return (
   <div>
  <MaterialTable
    title={<Typography variant="h6">{}</Typography>}
    data={props.data}
    options={{
      pageSize: 50,
      pageSizeOptions: [50, 100, 150],
      search: true,
      sorting: false,
      headerStyle: {
        fontWeight: "bold",
        padding: "4px",
      },
    }}
  ></MaterialTable>
</div>
 );
}


export const getExportByLastModifiedDate = (lastModifiedDate) => {
 return async (dispatch) => {
   dispatch({ type: EXPORT_BY_LASTMODIFEDDATE_START });
   await axios({
      method: "get",
      url: "/api/export?lastModifiedDate=" + lastModifiedDate,
  })
  .then(function(response) {
    dispatch({
      type: EXPORT_BY_LASTMODIFEDDATE_SUCCESS,
      payload: response.data,
    });
  })
  .catch(function(error) {
    dispatch({ type: EXPORT_BY_LASTMODIFEDDATE_ERROR, payload: error });
  });
 };
};

@GetMapping("/export")
public ResponseEntity<List<ExportDto>> getExportByLastModifiedDate(@RequestParam(value = "lastModifiedDate", required = true) String lastModifiedDate) {
    
    Optional<List<ExportDto>> optional = Optional.ofNullable(service.getExportByLastModifiedDate(lastModifiedDate));
    return optional.map(response -> ResponseEntity.ok().body(response)).orElse(new ResponseEntity<>(HttpStatus.NOT_FOUND));
}

导出默认函数导出（道具）{
返回(
);
}
导出常量getExportByLastModifiedDate=（lastModifiedDate）=>{
返回异步（调度）=>{
分派（{type:EXPORT_BY_LASTMODIFEDDATE_START}）；
等待axios({
方法：“获取”，
url:“/api/export？lastModifiedDate=“+lastModifiedDate，
})
.然后（功能（响应）{
派遣({
类型：按最后修改日期导出成功，
有效载荷：response.data，
});
})
.catch（函数（错误）{
分派（{type:EXPORT_BY_LASTMODIFEDDATE_ERROR，payload:ERROR}）；
});
};
};

后端API:

export default function Export(props) {
  return (
   <div>
  <MaterialTable
    title={<Typography variant="h6">{}</Typography>}
    data={props.data}
    options={{
      pageSize: 50,
      pageSizeOptions: [50, 100, 150],
      search: true,
      sorting: false,
      headerStyle: {
        fontWeight: "bold",
        padding: "4px",
      },
    }}
  ></MaterialTable>
</div>
 );
}


export const getExportByLastModifiedDate = (lastModifiedDate) => {
 return async (dispatch) => {
   dispatch({ type: EXPORT_BY_LASTMODIFEDDATE_START });
   await axios({
      method: "get",
      url: "/api/export?lastModifiedDate=" + lastModifiedDate,
  })
  .then(function(response) {
    dispatch({
      type: EXPORT_BY_LASTMODIFEDDATE_SUCCESS,
      payload: response.data,
    });
  })
  .catch(function(error) {
    dispatch({ type: EXPORT_BY_LASTMODIFEDDATE_ERROR, payload: error });
  });
 };
};

@GetMapping("/export")
public ResponseEntity<List<ExportDto>> getExportByLastModifiedDate(@RequestParam(value = "lastModifiedDate", required = true) String lastModifiedDate) {
    
    Optional<List<ExportDto>> optional = Optional.ofNullable(service.getExportByLastModifiedDate(lastModifiedDate));
    return optional.map(response -> ResponseEntity.ok().body(response)).orElse(new ResponseEntity<>(HttpStatus.NOT_FOUND));
}

@GetMapping（“/export”）
public ResponseEntity getExportByLastModifiedDate（@RequestParam（value=“lastModifiedDate”，required=true）字符串lastModifiedDate）{
Optional Optional=Optional.ofNullable（service.getExportByLastModifiedDate（lastModifiedDate））；
返回可选的.map（response->ResponseEntity.ok（）.body（response））.orElse（newresponseEntity（HttpStatus.NOT_FOUND））；
}

我试图做的是获取前1000条记录并将它们呈现到UI，而在后端，该过程将继续

我该怎么做

---

谢谢

一个可能的解决方案可能是在

查询

和

后端rest api

中添加分页支持。例如，首先使用

page=0&pageSize=1000

调用后端，这将返回前1000条记录，加载此记录后，您将使用

page=1&pageSize=1000

调用后端，这将返回下1000条记录

如果您使用的是

Spring-data-jpa

，则Spring-boot对分页具有良好的分页支持。如果您使用的是

本机查询

，那么大多数数据库都有支持这种分页的语法，您需要修改查询以进行分页