Реализация Spring Boot Pagination в react.js Часть 2

Создание страничного интерфейсного приложения с помощью response.js

Разбиение на страницы помогает отображать данные из источника данных в страничном формате. Давайте создадим одностраничное приложение Pageable для API статей, которое состоит из N статей, используя react.js.

Разработка этого одностраничного приложения для реагирования осуществляется следующим образом:

1. Создание формы приложения react react store.
2. Установка Bootstrap для поддержки адаптивного веб-приложения.
3. Выполнение Http-вызова с использованием axios для обращения к хранилищу данных статей и получения результатов.
4. Полученные результаты будут представлены пользователю в виде разбивки на страницы.

Если вы хотите создать RESTFul API с использованием Spring Boot framework, проверьте

Шаг 1. Начнем с начальной загрузки необходимых модулей и пакетов с помощью хранилища ответов.

На вашем компьютере должны быть Node ›= 6 и npm› = 5.2. Чтобы создать проект, запустите:

npx create-react-app news-api-server
cd news-api-server
npm start

Он загрузит основные компоненты проекта для запуска сервера npm start Запускает приложение в режиме разработки. Откройте http: // localhost: 3000, чтобы просмотреть его в браузере. Страница перезагрузится, если вы внесете правки.

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

Шаг 2. Установка Bootstrap для поддержки адаптивного веб-приложения

Bootstrap - это прежде всего мобильная и очень отзывчивая среда разработки интерфейсных веб-приложений. Мы установим bootstrap с помощью npm (диспетчера пакетов узлов).

npm install --save bootstrap

Затем добавьте следующий оператор импорта в файл index.js

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Шаг 3. Давайте сделаем Http-вызов с помощью axios, чтобы попасть в хранилище данных статей и получить результаты.

Чтобы сделать HTTP-запрос, мы установим axios, HTTP-клиент на основе Promise для браузера и node.js.

$ npm install axios

Шаг 4: Полученные результаты будут представлены пользователю в виде разбивки на страницы.

Пагинация проста и повторяема, давайте сделаем ее компонентом! Мы будем использовать npm для установки r eact-js-pagination

$ npm install react-js-pagination

Схема разбивки на страницы

Давайте запросим список статей. Наряду со статьями мы получаем несколько фрагментов данных для разбивки на страницы. Предположим, схема разбивки на страницы выглядит следующим образом:

С помощью этой схемы мы можем разработать компонент React, который ожидает эти данные и отображает кнопки Далее или Назад. Полученные результаты могут быть использованы для установки состояния текущей страницы. Мы будем использовать классы react-js-pagination, чтобы он выглядел хорошо!

"pageable": {
    "sort": {
      "sorted": false,
      "unsorted": true,
      "empty": true
    },
    "offset": 20,
    "pageSize": 20,
    "pageNumber": 1,
    "unpaged": false,
    "paged": true
  },
  "totalPages": 23,
  "last": false,
  "totalElements": 445,
  "size": 20,
  "number": 1,
  "numberOfElements": 20,
  "first": false,
  "sort": {
    "sorted": false,
    "unsorted": true,
    "empty": true
  },
  "empty": false
}

Давайте сделаем http-запрос к API-интерфейсу статей, получившийся объект json поможет нам установить состояние React DOM.

Вот код для компонента ArticlesFeed.js, который отображает статьи.

Спасибо за прочтение.

Если вы хотите узнать, как я создал серверную часть RESTful API, пожалуйста, проверьте

Если вам нужен доступ ко всему исходному коду, я загрузил его здесь:

Удачного кодирования.