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

Question

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

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

Table分量：

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 });
  });
 };
};

后端API:

@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));
}

我想要做的是获取前 1000 条记录并将它们呈现给 UI，而在后端过程将继续。

我该怎么做？

谢谢

Answer 1

一种可能的解决方案是在 query 和 backend rest api 中添加分页支持。例如，首先你用 page=0&pageSize=1000 调用你的后端，这将 return 你的前 1000 条记录，在加载这些记录后，你将用 page=1&pageSize=1000 调用后端，这将 return接下来的1000条记录。

Spring 如果您使用 spring data jpa，boot 对分页有很好的分页支持。如果您正在使用 native query，那么大多数数据库都有支持这种分页的语法，您需要修改分页查询。

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

React lazy loading data with Spring boot

javascript

reactjs

spring-boot

async-await

material-table