Теги: Frontend

Магазин на JavaScript, часть 17 из 19. Панель управления: список заказов, категорий и брендов

В панели управления тоже нужно показывать список всех заказов в магазине и отдельный заказ — так что создаем компоненты AdminOrders.js и AdminOrder.js + добавляем новые маршруты в AppRoutes.js. После этого создаем компоненты для показа списка категорий и брнедов + компонент модального окна для создания категории и бренда.
Теги: BackendExpress.jsFrontendJavaScriptNode.jsORMReact.js

Магазин на JavaScript, часть 16 из 19. Личный кабинет, список заказов и отдельный заказ

Теперь займемся личным кабинетом. Здесь много что можно сделать — история заказов в магазине, профили для удобного оформления, изменение пароля, избранные товары. Но мы ограничимся только историей заказов — а то конца и края не видно с этим магазином. Для начала добавим маршруты для просмотра списка заказов и отдельного заказа…
Теги: BackendExpress.jsFrontendJavaScriptNode.jsORMReact.js

Магазин на JavaScript, часть 15 из 19. Работа с заказами на сервере, оформление заказа

Как-то совсем упустил работу с заказами. Нам нужно на сервере создать две таблицы базы данных, создать маршруты и классы контроллера и модели. Потом протестировать все http-запросы — на создание заказа администратором и обычным пользователем, на получение списка всех заказов и одного заказа администратором и пользователем.
Теги: BackendExpress.jsFrontendJavaScriptNode.jsORMReact.js

Магазин на JavaScript, часть 14 из 19. Кнопка «Назад», страница товара, корзина покупателя

У первого способа есть существенный недостаток — нельзя поделиться ссылкой. То есть, пользователь зашел на наш сайт, выбрал категорию и бренд, перешел на вторую страницу, увидел что-то интересное — и решил поделиться ссылкой. Но эта ссылка будет иметь вид http://server.com — нет выбранной категории, выбранного бренда…
Теги: BackendExpress.jsFrontendJavaScriptNode.jsORMReact.js

Магазин на JavaScript, часть 13 из 19. Хранилище каталога, компонент витрины, кнопка «Назад»

Теперь самая главная часть магазина — каталог товаров на главной странице. Нам надо создать хранилище товаров с использованием MobX. Организовать загрузку с сервера списка категорий, брендов и товаров. Наконец, фильтровать список товаров при клике на категорию и/или бренд.
Теги: BackendExpress.jsFrontendJavaScriptNode.jsORMReact.js

Магазин на JavaScript, часть12 из 19. Запросы на сервер, состояние приложения, Signup и Login

Библиотека axios позволяет перехватывать все запросы и ответы и применять к ним определенную логику. Нам нужны два экземпляра axios — для запросов на сервер от любого посетителя сайта и для запросов от авторизованного пользователя. Создаем директорию src/http и внутри нее — файл index.js.
Теги: BackendExpress.jsFrontendJavaScriptNode.jsORMReact.js

Магазин на JavaScript, часть 11 из 19. Компоненты Signup и Login, компоненты Shop и Basket

Теперь будет немного верстки — нам нужно создать все страницы приложения. Для начала страницы ренистрации и авторизации, которые будут очень похожи. Потом главную страницу магазина со списком всех товаров каталога. Наконец, страницу просмотра одного товара и страницу корзины покупателя.
Теги: BackendExpress.jsFrontendJavaScriptNode.jsORMReact.js

React Router, версия 6. Часть 4 из 4

Хук useSearchParams предназначен для чтения и изменения строки запроса в URL для текущего маршрута. По аналогии с хуком useState возвращает значение и функцию для изменения этого значения. Значение — это объект URLSearchParams, у которого множество методов для работы с GET-параметрами (get, set, getAll, has, append, delete, …).

React Router, версия 6. Часть 3 из 4

Хук useHistory был удален из React Router 6, теперь вместо него useNavigate. В принципе, использование этих двух хуков мало чем отличается. Хук возвращает функцию, которая в качестве первого аргумента принимает строку URL или целое число. Целое число может быть положительным (движение вперед по истории)…

React Router, версия 6. Часть 2 из 4

Давайте вместо простого компонента Blog.js создадим в директории src/blog несколько других — BlogLayout.js, BlogIndex.js, BlogCategory.js и BlogArticle.js. Кроме того, создадим файл с данными BlogData.js, где будем хранить категории и статьи блога. Но для начала изменим компонент App.js…
Каталог оборудования
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Производители
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Функциональные группы
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.