Создание страничного интерфейсного приложения с помощью response.js
Разбиение на страницы помогает отображать данные из источника данных в страничном формате. Давайте создадим одностраничное приложение Pageable для API статей, которое состоит из N статей, используя react.js.
Разработка этого одностраничного приложения для реагирования осуществляется следующим образом:
- Создание формы приложения react react store.
- Установка Bootstrap для поддержки адаптивного веб-приложения.
- Выполнение Http-вызова с использованием axios для обращения к хранилищу данных статей и получения результатов.
- Полученные результаты будут представлены пользователю в виде разбивки на страницы.
Если вы хотите создать 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, пожалуйста, проверьте
Если вам нужен доступ ко всему исходному коду, я загрузил его здесь: