使用 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.&nbsp;如果你正在使用native querythen，大多数数据库都有支持这种分页的语法，你需要修改你的分页查询。