使用 Spring Boot 响应延迟加载数据

Question

我的解决方案基于前端应用程序 React、redux 和 material-u 以及后端 Springboot 应用程序。我有一个 Rest API，可以从数据库中获取大量记录。这会在 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 });  }); };};后端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，这将返回前 1000 条记录，加载这些记录后，你将调用后端page=1&pageSize=1000，这将返回接下来的 1000 条记录。

如果您使用spring data jpa. 如果你正在使用native querythen，大多数数据库都有支持这种分页的语法，你需要修改你的分页查询。