Блог

Мое решение основано на интерфейсном приложении React, redux и material-u и внутреннем приложении Springboot.

У меня есть Rest 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 });
  });
 };
};
  

Серверный 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 записей и отобразить их в пользовательском интерфейсе, пока в серверной части процесс будет продолжаться.

Как я могу это сделать?

Спасибо

Одним из возможных решений может быть добавление поддержки разбивки на страницы в вашем query и backend rest api . Например, сначала вы вызываете свой серверный сервер с page=0amp;pageSize=1000 помощью, это вернет вам первые 1000 записей, после того, как эти записи будут загружены, затем вы вызываете серверный сервер с page=1amp;pageSize=1000 помощью , это вернет следующие 1000 записей.

Spring boot имеет хорошую поддержку разбивки на страницы для разбивки на страницы, если вы используете spring data jpa . Если вы используете native query then, большинство баз данных имеют синтаксис, поддерживающий такой тип разбивки на страницы, и вам нужно изменить свой запрос для разбивки на страницы.