Сегодня мы собираемся разработать страницу с подробностями об игре, которая покажет, насколько игра ретро-совместима, и позволит пользователям поделиться своим опытом с игрой.
На прошлой неделе мы разработали список игр, как бэкэнд, так и интерфейс, который покажет все игры в соответствии с запросом пользователя. Если вы хотите это прочитать, я буду ждать вас.
На этой неделе мы разработаем страницу с описанием игры. На этой странице будут отображаться голоса и комментарии пользователей о ретро-совместимости игры. Если игра не заблокирована, пользователи смогут поделиться своим опытом.
Если вы хотите сразу перейти к коду, вы можете найти его здесь.
Страница сведений об игре
Чтобы создать внутренний маршрут, мы следуем той же процедуре, что и для списка: мы создаем файл с именем маршрута, в данном случае [id].json.ts в /game. [id] будет динамически заменен идентификатором игры. .json важен, потому что без него Sapper не смог бы отличить внешний /game/[id].svelte маршрут от внутреннего /game/[id].ts маршрута. Установив «маршрут», мы объявляем функцию GET и тестируем ее.
Поскольку мы находимся в мире TypeScript, мы определяем тип для нашего ответа серверной части.
На странице сведений об игре Sapper позволяет нам добавить скрипт, который сделает возможным предварительную выборку данных для маршрута, ускоряя загрузку и рендеринг страницы. Этот скрипт возвращает данные, используемые шаблоном.
Чтобы активировать предварительную выборку, нам нужно добавить rel=prefetch к ссылке, указывающей на наш маршрут. В нашем сценарии это укажет Sapper выполнить сценарий предварительной выборки, когда пользователь наводит курсор на игровую карту.
<a rel="prefetch" href="game/{game._id}">
<div class="card">
...
</div>
</a>
На странице сведений об игре у нас больше места для отображения результатов голосования пользователей; круговая диаграмма будет для них хорошим представлением. Я основал свой рендеринг, круговую диаграмму SVG, из этой статьи.
Следующим шагом будет отображение комментариев к игре. Для каждого комментария мы будем показывать дату его публикации. При форматировании даты возникает ошибка: comment.date не является объектом Date.
Оказывается, res.json fetch не анализирует строки даты на объекты Date. JSON.parse принимает функцию восстановления, функцию, которая детально обрабатывает синтаксический анализ строки JSON в объект JavaScript, но не res.json, и мы не можем выполнить JSON.parse после res.json, потому что мы не можем проанализировать объект. Существует обходной путь: используйте res.text, а затем JSON.parse с функцией оживления, которая занимается синтаксическим анализом строк даты.
Полезные источники для этого решения можно найти здесь и здесь.
Но в популярной игре может быть много комментариев, поэтому нам нужно реализовать для них какую-то разбивку на страницы. Мы будем использовать реактивные утверждения Svelte, чтобы решить, какой фрагмент списка комментариев показывать.
Область голосования будет состоять из двух кнопок, положительной или отрицательной оценки, текстовой области для необязательного комментария и кнопки отправки. Эта область будет скрыта, если игра заблокирована. Кнопка отправки останется неактивной до тех пор, пока не будет выбран тип голосования.
Голосование и комментирование
После реализации набора представлений и области голосования следующий шаг состоит в создании внутреннего маршрута для обновления игры и повторной визуализации представления с обновленными данными.
Мы можем использовать тот же маршрут для обновления, который мы использовали для получения деталей игры, /game/[id].json, поэтому нам нужно только определить функцию put или patch в [id].json.ts.
Mongoose предлагает findOneAndUpdate, который выполняет атомарное обновление. Чтобы использовать эту функцию, нам нужно обновить наше соединение с базой данных с помощью useFindAndModify: false.
const connectDb = (db: string) => {
return connect(db, { useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false });
};
После обновления соединения мы реализуем функцию patch, в которой мы обновляем счетчик голосов и добавляем комментарий, если он был отправлен.
На стороне клиента нам также необходимо проанализировать ответ PATCH с помощью восстановителя.
Кроме того, нам нужно изменить все комментарии, тексты голосований и данные круговой диаграммы, чтобы они были реактивными операторами, чтобы они обновлялись соответствующим образом.
И мы доходим до конца еще раз. В следующий раз мы создадим страницу контактов. Теперь, когда пользователь имеет возможность взаимодействовать с нашим веб-сайтом, у него может возникнуть какая-то проблема или идея.
Вы можете увидеть весь код до этого момента в https://github.com/omirobarcelo/retro-ps5/blob/part3.
Спасибо, что прошли со мной это путешествие! Надеюсь, вам понравился его сериал и увидимся на следующей неделе!
