Практика работы с API. Научиться разделять приложение на несколько страниц с параметрами

@Zaouza · Регистрация: 09.03.2021

Студворк — интернет-сервис помощи студентам

На основе https://gorest.co.in/ создайте блог, который состоит из 2-х видов страниц (2-х html файлов):

Список статей блога, который можно получить запросом GET https://gorest.co.in/public-api/posts?page=10, где page - номер страницы для постраничной навигации. Номер страницы должен браться из URL страницы из параметра page. На странице должны выводиться:
Список статей, где каждый элемент должен быть ссылкой на статью вида post.html?id=10 (вместо 10 - id соответствующей статьи). Сам список находится в свойстве data в ответе на список статей.
Постраничная навигация, построенная на основе свойства из ответа на список статей meta.pagination с информацией о кол-ве статей и страниц. Каждая ссылка должна вести на index.html?page=10 (вместо 10 - номер соответствующей страницы). При этом ссылка на первую страницу не должна иметь параметров, то есть должна просто вести на страницу index.html без параметров, так как 1 - это значение по умолчанию и его необязательно явно проставлять.
Детальная страница статьи, которую можно получить запросом https://gorest.co.in/public-api/posts/{id статьи}. При этом id статьи должен браться из URL страницы из параметра id. На странице должны выводиться:
Заголовок (в тэге h1, свойство title из ответа на запрос) загруженной статьи.
Содержимое (в тэге p, свойство body из ответа на запрос).
Комментарии к статье в виде списка с именем автора и содержимым к каждому комментарию. Получить список комментариев к конкретной статье можно запросом GET https://gorest.co.in/public-api/comments?post_id=4 (вместо 4 - id статьи).

Прошу помощи с заданием. Что-то я даже не знаю с чего начать.

@Balanaar · 02.08.2021, 22:50

Сообщение от Zaouza

Что-то я даже не знаю с чего начать.

Начните с чтения лекций хотя бы.

@Zaouza · 03.08.2021, 07:30 **[ТС]**

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

@Balanaar · 03.08.2021, 09:22

Сообщение от Zaouza

возникло непонимание

Что конкретно вам оказалось непонятным? Спрашивайте, подскажем.

@Zaouza · 04.08.2021, 08:38 **[ТС]**

Сообщение от Balanaar

Спрашивайте, подскажем.

Я не пойму, как мне сделать запрос при нажатии на ссылку. Через обработчик событий? Если не сложно, мне бы пример. Я как-то с ним лучше разбираюсь.
Вот мой html главной страницы:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Список статей</title>
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>
<body>
  <h1 style="text-align: center;">Список статей</h1>
  <div class="swiper-container">
    <div class="swiper-wrapper" style="height: 500px;">
      <div class="swiper-slide">
        <h2 style="display: flex; justify-content: center; align-items: center; height: 100%;"><a href="?id=1">Статья 1</a></h2>
      </div>
      <div class="swiper-slide">
        <h2 style="display: flex; justify-content: center; align-items: center; height: 100%;"><a href="?id=2">Статья 2</a></h2>
      </div>
      <div class="swiper-slide">
        <h2 style="display: flex; justify-content: center; align-items: center; height: 100%;"><a href="?id=3">Статья 3</a></h2>
      </div>
      <div class="swiper-slide">
        <h2 style="display: flex; justify-content: center; align-items: center; height: 100%;"><a href="?id=4">Статья 4</a></h2>
      </div>
      <div class="swiper-slide">
        <h2 style="display: flex; justify-content: center; align-items: center; height: 100%;"><a href="?id=5">Статья 5</a></h2>
      </div>
      <div class="swiper-slide">
        <h2 style="display: flex; justify-content: center; align-items: center; height: 100%;"><a href="?id=6">Статья 6</a></h2>
      </div>
      <div class="swiper-slide">
        <h2 style="display: flex; justify-content: center; align-items: center; height: 100%;"><a href="?id=7">Статья 7</a></h2>
      </div>
      <div class="swiper-slide">
        <h2 style="display: flex; justify-content: center; align-items: center; height: 100%;"><a href="?id=8">Статья 8</a></h2>
      </div>
      <div class="swiper-slide">
        <h2 style="display: flex; justify-content: center; align-items: center; height: 100%;"><a href="?id=9">Статья 9</a></h2>
      </div>
      <div class="swiper-slide">
        <h2 style="display: flex; justify-content: center; align-items: center; height: 100%;"><a href="?id=10">Статья 10</a></h2>
      </div>
    </div>
    <div class="swiper-pagination"></div>
 
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
 
  </div>
  <script>
    const swiper = new Swiper('.swiper-container', {
      loop: true,
      pagination: {
        el: '.swiper-pagination',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      scrollbar: {
        el: '.swiper-scrollbar',
      },
  });
  </script>
</body>
</html>

@Balanaar · 04.08.2021, 09:35

Сообщение от Zaouza

как мне сделать запрос при нажатии на ссылку. Через обработчик событий? Если не сложно, мне бы пример.

Тут есть несколько примеров.

@Zaouza · 23.08.2021, 09:44 **[ТС]**

Сообщение от Balanaar

Тут есть несколько примеров.

Спасибо! Чуть начал разбираться. Подскажите еще пожалуйста по последнему пункту задания "Комментарии к статье в виде списка с именем автора и содержимым к каждому комментарию. Получить список комментариев к конкретной статье можно запросом GET https://gorest.co.in/public-api/comments?post_id=4 (вместо 4 - id статьи)."
Где мне нужно добавить новую переменную с запросом данных сервера?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let drawView = (resp) => {
  let {data} = resp
 
  $$.append($$.rootNode, 'post', (postNode) => {
    $$.append(postNode, 'title', (titleNode) => {
      titleNode.textContent = data.title
    })
    $$.append(postNode, 'body', (bodyNode) => {
      bodyNode.textContent = data.body
    })
    $$.append(postNode, 'more', (backNode) => {
      backNode.textContent = "Назад"
      backNode.setAttribute("href", `javascript:history.back();`)
    }, 'a')
  })
}
 
let apiUrl = "https://gorest.co.in/public-api"
let id = $$.readParams().id || 1
$$.fetchData(apiUrl, `/posts/${id}`).then(drawView)

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@Zaouza 0 / 0 / 0 Регистрация: 09.03.2021 Сообщений: 27

	Практика работы с API. Научиться разделять приложение на несколько страниц с параметрами 02.08.2021, 21:00. Показов 9415. Ответов 6 Метки нет (Все метки) На основе https://gorest.co.in/ создайте блог, который состоит из 2-х видов страниц (2-х html файлов): Список статей блога, который можно получить запросом GET https://gorest.co.in/public-api/posts?page=10, где page - номер страницы для постраничной навигации. Номер страницы должен браться из URL страницы из параметра page. На странице должны выводиться: Список статей, где каждый элемент должен быть ссылкой на статью вида post.html?id=10 (вместо 10 - id соответствующей статьи). Сам список находится в свойстве data в ответе на список статей. Постраничная навигация, построенная на основе свойства из ответа на список статей meta.pagination с информацией о кол-ве статей и страниц. Каждая ссылка должна вести на index.html?page=10 (вместо 10 - номер соответствующей страницы). При этом ссылка на первую страницу не должна иметь параметров, то есть должна просто вести на страницу index.html без параметров, так как 1 - это значение по умолчанию и его необязательно явно проставлять. Детальная страница статьи, которую можно получить запросом https://gorest.co.in/public-api/posts/{id статьи}. При этом id статьи должен браться из URL страницы из параметра id. На странице должны выводиться: Заголовок (в тэге h1, свойство title из ответа на запрос) загруженной статьи. Содержимое (в тэге p, свойство body из ответа на запрос). Комментарии к статье в виде списка с именем автора и содержимым к каждому комментарию. Получить список комментариев к конкретной статье можно запросом GET https://gorest.co.in/public-api/comments?post_id=4 (вместо 4 - id статьи). Прошу помощи с заданием. Что-то я даже не знаю с чего начать. 0

@Zaouza 0 / 0 / 0 Регистрация: 09.03.2021 Сообщений: 27
	03.08.2021, 07:30 [ТС]
	Спасибо за совет! Но лекции по данной теме были прочитаны. Но возникло непонимание, т.к. не было примера выполнения именно данной задачи, хотя бы примерный порядок действий. Я всё таки нахожусь на стадии изучения и могу что-то не понять. Поэтому прошу помощи здесь. 0