Создание приложения на Htmlix с роутером на серверной и клиентской стороне

Лучшие публикации за сутки.
В данной статье будет описано как сделать фронтенд на Htmlix для фильтра по категориям и карточки товара, а также создадим роутер, на клиентской части, чтобы при клике по истории в броузере, у нас появлялась актуальная данному адресу страница. Приложение будет состоять из двух частей:

  • первая это список из 6 товаров найденный в поиске по категориям;
  • вторая это сам товар по которому кликнули, товар будет состоять из основного шаблона и трех вариантов дополнительных шаблонов, которые будут выбираться в зависимости от категории и id карточки.

Код всего приложения можно скачать: здесь, все что в папке router,
а также файл app.js относится к нашему приложению.

Покликать похожий вариант (без серверной части) можно здесь: здесь.

Для тех кто не знаком с Htmlix, можно почитать более легкий для понимания материал здесь,

Файлы index.pug, card.pug и папка includes это то что сервер отдаст в первом запросе к нему
если localhost:3000/ или localhost:3000/categories/category(num) — отдаст index.pug, если запрос будет localhost:3000/cards/card?id=(num) — отдаст card.pug с одним файлом в папке includes в качестве под шаблона, который он выберет исходя из category_id (номера категории).

Далее уже из клиентской части приложение «догрузит» в fetch запросе один вариант шаблонов из папки template, если адрес был localhost:3000/categories/category(num) загрузит файл card.html, если запрос был localhost:3000/cards/card?id=(num) загрузит cards.html, а также в любом случае загрузит один вариант из папки json, в зависимости от того какая категория у нас сейчас выделена (на которой стоит класс «.hover-category»)
Читать дальше →

Добавить комментарий