Скачать "Build Next.js ECommerce Website Like Amazon [Nextjs, Mongodb, Tailwind]"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FzWEvbGdUhRg%252Fmaxresdefault.jpg&w=1139&q=75)
Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.
Оглавление
Похожие ролики из нашего каталога
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FV6Hq_EX2LLM%252Fmaxresdefault.jpg&w=1139&q=75)
Теги видео
Субтитры
Английский
00:00:00
добро пожаловать во вторую версию nextjs Amazona00:00:04
это курс кодирования, позволяющий создать полностью00:00:06
функциональный сайт электронной коммерции, например00:00:08
Амазонка от NEX00:00:11
js14 мы используем новейшую функцию nextjs00:00:15
включая серверные компоненты и действия00:00:18
маршрутизатор приложений и обработчик маршрутов для создания00:00:21
этот сайт электронной коммерции, не стесняйтесь добавлять00:00:24
этот проект в свое портфолио или продать00:00:28
ваши продукты или услуги, которые вы используете00:00:30
красивый и полностью функциональный00:00:32
сайт электронной коммерции, меня зовут Бассир и00:00:35
Я буду вашим инструктором на этом курсе.00:00:38
иметь 20-летний опыт программирования в00:00:41
международные компании, такие как R Vision в00:00:44
Монреаль, и теперь я инструктор по программированию.00:00:48
к концу на YouTube будет 50 тысяч студентов00:00:52
на этом курсе вы познакомитесь с высокими технологиями00:00:55
Технологии в веб-разработке00:00:57
включая сервер маршрутизатора приложений nextjs00:01:01
действия компонентов и обработчик маршрута00:01:04
Tailin Daisy UI иchartjs для пользовательского интерфейса00:01:07
Фреймворк mongodb и mongos orm для00:01:11
база данных PayPal и Stripe API для00:01:15
подключите свой сайт электронной коммерции к00:01:17
платежные шлюзы развернут ваш сайт на00:01:20
облако с использованием Versal и MongoDB Atlas00:01:24
Внедрить надежную систему аутентификации00:01:26
используя OJ и Google выключить загрузку изображений00:01:31
используя Cloud Inary, управляйте состоянием, используя00:01:34
зустан и внедрить соответствующие данные и00:01:37
кэширование с использованием S SWR, имея это00:01:41
технологии, посмотрим, что мы собираемся сделать00:01:43
построить вот веб-сайт, который мы создаем00:01:46
собираемся строить вместе в шапке мы00:01:48
есть панель поиска по бренду и Navar также00:01:53
здесь есть боковая панель, где можно делать покупки00:01:56
отдел на главном экране у нас есть00:01:59
карусель00:02:00
вот так и здесь у нас есть последние00:02:03
продукты, нажав на продукт, который мы00:02:06
будет перенаправлен на продукт00:02:08
Страница сведений здесь, у нас есть изображение продукта00:02:11
информацию о продукте и карту действий для00:02:15
добавьте товар в корзину мы здесь00:02:17
использование серверных компонентов и поиск00:02:20
параметры в URL, скажем, если я00:02:24
измените цвет на красный, будет00:02:26
появится в строке поиска, так что это00:02:29
будет индексироваться поисковыми системами00:02:33
как и Google, он дружелюбен к SE и это00:02:36
работает и для размеров, как вы видите, мы00:02:40
здесь красный цвет и средний размер00:02:44
у нас есть такой раздел отзывов, и вы00:02:47
можете добавить столько отзывов, сколько захотите,00:02:50
при нажатии на «Добавить в корзину» появляется тост00:02:53
здесь, и вы можете перейти к оформлению заказа или00:02:56
продолжить покупки, нажав на00:02:59
приступайте к выезду, мы будем00:03:01
перенаправляется на страницу корзины покупок и00:03:04
у нас есть список продуктов в00:03:07
корзина, давай добавим в нее еще один товар00:03:10
карта изменить вариант добавить ее в00:03:13
карта, и вот мы здесь, мы можем изменить00:03:16
количество и промежуточный итог будут00:03:20
обновляется автоматически при нажатии на00:03:23
приступайте к выезду, мы будем00:03:25
перенаправлены на страницу входа, и мы можем00:03:28
создать новый аккаунт00:03:30
как это, нажав на регистрацию00:03:33
ввод информации в форму и00:03:35
нажмите кнопку регистрации, тогда мы00:03:38
быть перенаправлен на страницу входа для входа в систему00:03:41
с зарегистрированным аккаунтом после подписания00:03:44
мы вернемся к мастеру оформления заказа00:03:47
после входа в систему мы приступаем к доставке00:03:50
форма адреса введите00:03:53
адрес нажмите «Далее» выберите платеж00:03:57
метод, нажмите «Далее»00:04:01
и здесь у нас есть предварительный просмотр заказа00:04:04
нажав на разместить заказ заказ будет00:04:08
создано и основано на способе оплаты00:04:12
у нас есть варианты оплаты, нажав00:04:15
на PayPal он будет перенаправлен на00:04:18
PayPal, чтобы завершить платеж, нажав00:04:21
по завершению00:04:23
покупка там, мы здесь, мы возвращаемся к00:04:27
веб-сайт, но на этот раз оплата00:04:29
выполнено, и статус был обновлен в00:04:34
точка зрения клиента у нас есть00:04:36
меню для клиента включает в себя00:04:39
профиль пользователя, мы можем обновить имя пользователя00:04:42
электронное письмо и обновите пароль, и мы00:04:46
иметь историю заказов, чтобы показать список00:04:49
предыдущие заказы для пользователя один из00:04:52
лучшая функция этого сайта - поиск00:04:55
вы можете искать по названию продукта, скажем00:04:58
рубашка и нажмите Enter, вы будете00:05:01
перенаправлен на страницу поиска, и вы00:05:04
возможен поиск по ценам отделов и00:05:08
отзыв клиента также вы можете отсортировать00:05:11
продукты по цене новейшие и00:05:14
рейтинг и VR вы можете очистить фильтр00:05:18
и снова выполните поиск по фильтрам слева00:05:22
сторона, давайте перейдем к панели администратора и00:05:25
проверьте точку зрения администратора на этот счет00:05:29
веб-сайт econ mer. Я просто выхожу из системы и00:05:32
войдите в систему с учетной записью администратора, затем перейдите в00:05:35
меню и нажмите на панель администратора00:05:38
вот и у нас есть красивый00:05:41
панель мониторинга, здесь есть раздел статистики00:05:44
отчет о продажах с использованием красивых диаграмм00:05:48
давайте рассмотрим возможности административной части00:05:51
у нас есть заказы здесь, у нас есть список всех00:05:54
заказы, скажем, на этот заказ мы просто00:05:58
создано прямо сейчас, я могу изменить00:06:02
статус этого заказа доставлен00:06:06
нажатие кнопки «Отметить» предоставило статус00:06:09
будет обновлено следующее меню в админке00:06:12
панель управления управляет продуктами, здесь мы00:06:15
есть список всех продуктов, которые я могу создать00:06:19
новый или я могу отредактировать предыдущий00:06:22
продукт в списке, давайте нажмем «Изменить»00:06:25
мы можем изменить ценности, изменить00:06:29
загрузить новое изображение изменить цену00:06:32
запас контента и другие особенности00:06:35
продукт также мы можем удалить продукты по00:06:39
нажав на кнопку удаления, приступим к00:06:41
последняя часть панели администратора, это00:06:43
пользователи, вы можете редактировать или удалять пользователей и00:06:48
изменить их разрешение, скажем, на00:06:51
последний пользователь, которого я нажимаю, изменить и изменить00:06:54
это разрешение пользователя на00:06:57
Админ, мы молодцы, пора переходить к делу00:07:00
написать код и реализовать этот потрясающий проект00:07:08
вместе на этом уроке мы собираемся00:07:10
установить инструменты разработки, включая Интернет00:07:14
редактор кода браузера. Контроль версий и00:07:17
JavaScript Runner, давайте сделаем это, давайте00:07:21
начните с редактора кода, это vs код, перейдите к00:07:25
эту ссылку и базу вашей операционной системы00:07:28
нажмите для меня синюю кнопку загрузки00:07:32
это Mac, поэтому я нажимаю на Mac и делаю это00:07:35
быть перенаправлен на другую страницу и новый00:07:38
файл будет загружен в мою загрузку00:07:41
папка после загрузки дважды щелкните по ней00:07:45
следуйте инструкциям по установке и установите vs00:07:48
код на вашем компьютере, давайте перейдем к00:07:51
следующий — Google Chrome в веб-версии00:07:54
браузере перейдите на google.com/chrome и сюда00:07:59
через некоторое время нажмите «Загрузить Chrome»00:08:02
Chrome начал загрузку и типа что00:08:05
мы сделали это в коде vs, просто дважды щелкнув по нему00:08:08
загруженный файл следуйте00:08:10
инструкция и у вас будет Google00:08:12
Chrome на вашем компьютере в следующий раз00:08:15
программное обеспечение дома, это пакет00:08:18
менеджер для Mac OS и Linux перейдите на00:08:23
заваривать. и скопируйте эту команду, затем откройте00:08:27
ваш код vs и из меню терминала00:08:30
нажмите на новый терминал, вставьте команду00:08:33
здесь и нажмите Enter, для этого нужен ваш администратор00:08:37
пароль введите его и он запустится00:08:40
установка хуру на ваш компьютер после00:08:43
установка хуру переходим к следующему пакету00:08:47
это мерзавец, зайди на gs cm.com00:08:51
скачать и на основе ваших операционных00:08:54
система выберите ту, которую я использую00:08:57
Mac OS, и вот ее очень легко запустить00:09:01
Заварить установку git Заварить установку git запустить его00:09:06
в вашем интегрированном терминале в коде vs00:09:09
и он начнет установку git на ваш00:09:12
компьютер, последний пакет — nodejs, это00:09:16
среда выполнения JavaScript, которую мы00:09:19
необходимо для создания бэкэнда и сборки00:09:22
фронт и проект у вас есть два варианта00:09:25
LTS и текущий. Я выбираю текущий для использования.00:09:28
последняя функция node.js, нажмите00:09:31
он и начинает установку nodejs, например00:09:35
Код KW и vs просто дважды щелкните значок00:09:37
скачанный файл следуйте инструкциям00:09:40
и у вас будет узел на вашем компьютере00:09:43
отлично, git установлен, давайте проверим00:09:46
установка других пакетов закрыть00:09:50
это и откроем его снова, давайте начнем с00:09:55
введите версию узла node DV и нажмите00:09:58
введите ах, здесь мы используем версию 1900:10:03
для npm DV это менеджер пакетов00:10:07
узел, это версия 9, давайте проверим git, мы00:10:11
используете версию00:10:14
2.39 вот и все необходимое мы установили00:10:17
пакеты и инструменты для развития электронной коммерции00:10:21
сайт машинописный Мир в следующем00:10:24
сеанс мы устанавливаем расширения для vs00:10:28
код и подготовьте его для разработки нашего00:10:35
проект, если вы используете Windows00:10:38
операционная система, посмотрите этот урок, чтобы00:10:41
посмотрите, как вы можете установить все требования00:10:44
инструменты для развития в этом курсе позволяют00:10:48
начнем с установки Google Chrome00:10:51
откройте свой по умолчанию00:10:53
браузер, в котором я использую Microsoft Edge00:10:56
Windows и введите Chrome скачать вниз00:10:59
загрузите в адресную строку, затем выберите это00:11:02
адрес00:11:04
google.com/chrome и нажмите00:11:07
скачать Chrome после загрузки Chrome00:11:10
нажмите «Настройка Chrome». EXA подтвердить нажмите00:11:14
да, а затем начинается загрузка Chrome00:11:18
на вашем компьютере после этого он установится00:11:21
Гугл Хром там мы есть нет00:11:24
нужно Microsoft Ed закрыть его и00:11:27
развернуть Google Chrome Chrome — это00:11:30
браузер по умолчанию для веб-разработки00:11:33
в этом курсе и пришло время установить00:11:36
закодированное сохранение в адресной строке типа VSS00:11:40
код и нажмите Enter, мы собираемся00:11:42
установите здесь код Visual Studio00:11:45
компьютерная потрясающая загрузка для Windows, если00:11:49
вы используете другую операционную систему00:11:52
вы можете скачать их здесь, используя00:11:54
стабильную загрузку для Windows вы будете00:11:57
будет перенаправлен на эту страницу, и она начнется00:12:01
загрузка кода VSS в ваших загрузках00:12:04
папка после загрузки нажмите на нее00:12:06
нажмите «Выполнить» и примите, выберите00:12:10
параметры по умолчанию и нажмите «Установить»00:12:15
нажмите кнопку «Готово», и вот мы здесь00:12:19
у нас есть код Visual Studio, открытый в нашем00:12:23
компьютер развернуть его и вернуться к00:12:27
Google Chrome и установить установить00:12:29
node.js введите node.js и нажмите Enter00:12:34
здесь нажмите на node.js, вы будете00:12:36
перенаправлен на00:12:52
nodejs.org00:12:57
выберите параметры по умолчанию и установите00:13:01
node.js на вашем компьютере и последний00:13:04
вещь, которую мы собираемся установить здесь00:13:06
это получить, введите get и нажмите Enter и00:13:11
выберите этот git Das cm.com, нажмите00:13:17
он выбирает загрузку и на основе вашего00:13:21
операционная система выберите правильную00:13:24
Я использую Windows, нажмите здесь, чтобы загрузить00:13:27
последнюю версию, а затем нажмите00:13:31
файл установщика, нажмите «да», и вот мы00:13:34
нажимаем «Далее» здесь, мы собираемся00:13:38
установите git bash и выберите git UI00:13:41
параметры по умолчанию следующий следующий выбор по умолчанию00:13:46
один щелчок далее далее снова по умолчанию00:13:50
опции по умолчанию телефон по умолчанию следующий следующий00:13:56
нажмите «Установить», поэтому я сделал это00:13:58
принять параметры по умолчанию для установки git00:14:03
Windows потрясающая, там написано, что завершено00:14:06
установка git и нажмите «Готово»00:14:10
нажмите escape и перейдем к коду vs и00:14:15
в меню терминала выберите новый терминал00:14:18
и вместо оболочки по умолчанию, которая00:14:22
Power Shell, я собираюсь использовать git bash00:14:25
но я собираюсь сделать это по умолчанию00:14:28
профиль, поэтому нажмите «Выбрать по умолчанию»00:14:30
профиль и, установив git bash, мы00:14:33
есть эта опция здесь, выберите git bash00:14:36
затем нажмите на плюс, и на этот раз у нас есть00:14:41
git bash в Windows, чтобы мы могли запускать Linux00:14:45
как команды в Windows и повсюду00:14:49
в этом уроке мы используем этот стиль команд в00:14:52
терминал Давайте проверим версию00:14:55
git git Дас Дас00:14:59
версию, поэтому мы используем версию 2.00:15:04
34.1, поэтому ваши версии могут быть выше00:15:07
все в порядке, давайте проверим версию узла00:15:10
узел Дас Дэш00:15:12
версия потрясающая, мы используем версию00:15:16
16.00:15:18
13.1 проверьте версию npm, которая нам нужна00:15:22
их для этого курса, и мы используем00:15:26
версия 8.1 вот и все00:15:30
установка Google Chrome Visual Studio00:15:33
напишите node.js и войдите в Windows00:15:37
операционную систему на следующем уроке мы00:15:41
настроить код Visual Studio для кода00:15:45
проще, умнее и лучше во всем00:15:49
этот00:15:53
Конечно, на этом уроке мы собираемся00:15:56
установить расширения для vs кода и00:16:00
настройка vs код для разработки, давайте00:16:03
сделайте это в своем коде VSS, нажмите00:16:06
значок расширения, и вот мы, только мы00:16:10
нужно три расширения, es7 реагирует00:16:14
фрагмент так напечатай00:16:18
es7 реагирует в поле поиска, выберите00:16:22
первый пункт и нажмите кнопку установки I00:16:25
уже установил его, так что я могу удалить00:16:28
кнопка, но после установки этого пакета00:16:31
переходи к следующему, это ссылка, мы00:16:35
нужна ссылка es, чтобы найти проблемы в нашем коде00:16:39
если у вас его нет, просто введите es Link00:16:42
в поле поиска выберите первое00:16:45
вариант и снова нажмите кнопку «Установить».00:16:48
и последнее расширение, которое нам нужно, это00:16:51
prer введите уровень PR в поиске расширения00:16:56
поле выберите первый элемент и там00:17:01
мы - это форматировщик нашего кода00:17:06
нажмите кнопку установки и после00:17:08
устанавливая эти три пакета, мы00:17:11
готовы к настройке, а не к коду, приступим00:17:14
это из меню справки в vs code, выберите шоу00:17:19
все команды и введите пользовательские настройки00:17:23
выберите Json, а не тот00:17:26
В пользовательском интерфейсе выберите это, и вот все00:17:31
настройку, которая нам нужна в нашем проекте из00:17:34
этих настроек всего пять настроек00:17:38
требуется, а другие не являются обязательными для00:17:41
введите настройку, просто введите эти параметры00:17:44
настройка, давай попробуем первую, которую я00:17:48
просто избавьтесь от первой настройки и00:17:50
попробуйте ввести его еще раз внутри двойного слоя00:17:53
введите цветовую тему, вы получите верстак00:17:58
цветовая тема, нажмите Enter и вот мы имеем00:18:02
список опций: выбрать «темный плюс по умолчанию»00:18:06
это тема, которую мы будем использовать в этом00:18:08
конечно, другие используют тот же метод00:18:12
текстовый редактор. форматировщик по умолчанию в00:18:15
preder DVS, поэтому мы используем00:18:18
расширение, которое мы установили ранее для00:18:22
форматирование нашего кода также позволяет форматировать00:18:26
при сохранении, поэтому, когда вы нажимаете contrl s00:18:29
автоматически ваш код будет сохранен00:18:31
следующие две настройки сначала для красивее00:18:35
удаляется точка с запятой в конце00:18:38
команды и последний использует00:18:42
одиночный код вместо двойного кода для00:18:45
перенос строк с помощью этого параметра00:18:47
наш код выглядит красивее и красивее00:18:51
Professional для дополнительной настройки I00:18:54
просто установите уровень масштабирования на четыре, чтобы сделать00:18:57
шрифт больше, следующий удаляется00:19:00
мини-карта справа тоже я00:19:04
удали строку состояния внизу00:19:06
vs code и следующие три настройки предназначены для00:19:10
включите интеллектуальную фиксацию автоматической выборки и00:19:13
подтвердите синхронизацию автоматически и последний00:19:16
один из них — машинописный текст, который автоматически00:19:20
обновить импорт при перемещении файла повсюду00:19:24
папки, вот и все о коде vs00:19:26
конфигурации сохраните этот файл и мы00:19:29
готов начать разработку в этом направлении00:19:35
Конечно, давайте начнем с создания следующего00:19:39
откройте приложение vs code и перейдите к00:19:44
терминал перейти к00:19:48
рабочий стол, затем запустите эту команду, скопируйте это00:19:53
и вставьте его сюда. npx создайте следующее приложение в00:19:57
подпишите последний, затем нажмите Enter, введите00:20:00
название проекта, которое я собираюсь установить00:20:03
Далее- Amazona dv2, нажмите Enter, не могли бы вы?00:20:09
хотел бы использовать машинописный текст, да, не могли бы вы00:20:11
хотелось бы использовать ссылку es да Tailin CSS да00:20:16
мы не собираемся использовать каталог SRC, нет00:20:19
маршрутизатор приложения да, настройка значения по умолчанию00:20:23
импортировать, увы, нет и подождать некоторое время, чтобы00:20:26
установить все пакеты00:20:29
вот и мы сделаем следующий шаг00:20:31
откройте проект из меню «Файл» в00:20:34
vs код открыть папку перейти на рабочий стол выбрать00:20:38
следующая Amazona V2 и откройте ее здесь, у нас есть00:20:42
папки проекта, и мы готовы00:20:45
запустите его из терминала, нажмите «Новый»00:20:47
терминал и запустите npm run def, затем нажмите00:20:52
введите отличный открытый столбец локального хоста 300000:20:56
в твоем браузере я собираюсь00:20:58
используйте Google Chrome и создайте это окно00:21:01
бок о бок с таким кодом vs00:21:05
следующий шаг — установка Daisy UI00:21:09
это самая популярная библиотека компонентов00:21:11
для хвостового компонента CSS, и мы собираемся использовать00:21:14
все его прекрасные возможности для нашего00:21:19
проект просто перейдите по этой ссылке и скопируйте это00:21:23
затем в коде vs откройте новый00:21:27
терминал p поместите команду npm install00:21:30
DD в разделе зависимостей Dev пакета00:21:34
Пользовательский интерфейс Json Daisy при последнем нажатии кнопки входа00:21:38
и вот мы делаем следующий шаг, основанный на00:21:42
как использовать, это добавить эту строку в00:21:47
модуль. экспорт хвоста. конфигурация, но в00:21:52
наш проект у нас открыт TS, а не JS00:21:56
Tailwind do config .ts найти плагин00:22:00
строку и замените ее на эту хорошую00:22:04
Следующий шаг создайте папку компонентов в00:22:08
корневая папка проекта, щелкните правой кнопкой мыши00:22:10
здесь новые компоненты папки и внутри00:22:15
компоненты создают папку заголовка, которую мы00:22:17
собираюсь сформировать заголовок сайта и00:22:21
внутри заголовка создать новый файл и установить его00:22:24
в заголовок. TSX внутри этого Type R00:22:30
Ace для создания функции реагирования Arrow00:22:35
при экспорте сделать первую букву00:22:37
капитал и экспортировать его сюда мы собираемся00:22:40
чтобы разместить заголовок веб-сайта, сохраните его как00:22:43
затем перейдите в каталог приложений и найдите00:22:48
макет. TSX и внутри кузова создаем00:22:53
div, подобный этому, устанавливает минимальное имя класса00:22:57
высота экрана, сделайте эту улицу полной высоты00:23:01
и установите для дисплея режим Flex и00:23:04
направление будет столбцом00:23:06
вертикально и переместите детей внутрь00:23:10
это St нравится00:23:13
затем используйте компонент заголовка, который00:23:16
мы определили в папке компонентов00:23:19
заголовок и нажмите Tab, чтобы импортировать его сюда00:23:23
это адрес на знаке/компонентах00:23:26
заголовок и заголовок, давайте добавим нижний колонтитул00:23:29
после детей здесь будет00:23:31
основное содержание нашего сайта у нас есть00:23:34
заголовок, и нам нужен нижний колонтитул для00:23:36
нижний колонтитул Я не собираюсь создавать новый00:23:37
компоненты, потому что это просто00:23:40
простой абзац, давайте создадим нижний колонтитул00:23:43
как этот набор классов, названный в нижнем колонтитуле, это00:23:46
класс из пользовательского интерфейса Daisy для формирования00:23:48
красивый нижний колонтитул для нас, создай нижний колонтитул00:23:51
по центру создайте отступы и установите00:23:54
фоновый цвет до 30% упаковки00:23:57
фон фон по умолчанию00:23:59
базовый фон и установите цвет шрифта00:24:04
для текстового базового содержимого внутри этого создания00:24:07
абзац и поместите внутри авторские права00:24:11
которые меняют название сайта на ваше00:24:16
бренд и описание вроде этого дальше00:24:19
шаг — создание группы дорог для00:24:23
интерфейс веб-сайта электронной коммерции в00:24:25
папка приложения создайте новую папку и00:24:30
внутри пары00:24:32
круглые скобки создают переднюю часть, поэтому это00:24:36
часть веб-сайта, которую увидят клиенты00:24:40
внутри этого переместите страницу. ТСХ внутри00:24:44
вперед, переместите его и перейдите на страницу. ТСХ00:24:49
и внутри передней группы щелкните правой кнопкой мыши и00:24:52
создать новый файл, установить имя файла00:24:56
макет00:24:58
TSX для макета внутри передней папки00:25:02
Я собираюсь скопировать макет из00:25:05
папку приложения, вставьте ее сюда и избавьтесь от00:25:09
Все импорты переименовывают корневой макет на передний план.00:25:13
макет и избавиться от всех возвратов и00:25:17
то, что я собираюсь вернуть, является главным00:25:19
HTML-элемент внутри основного рендеринга00:25:24
дети определяют класс для двоих основных00:25:29
Flex увеличивает границу контейнера по горизонтали00:25:32
Автоматически размещать материалы по центру и создавать00:25:37
горизонтальное отступы, сохраните его, затем перейдите к00:25:40
страница. TSX избавиться от всего контента в00:25:45
вернитесь до конца вниз и создайте00:25:48
фрагмент и переход к последним продуктам00:25:52
установите имя класса в текст размером x и00:25:56
создать вертикальное дополнение, избавиться от00:25:59
изображение, и вот у нас есть заголовок00:26:02
раздел последних продуктов и красивый00:26:05
нижний колонтитул, давайте откроем заголовок00:26:08
заголовок. TSX в заголовке компонентов00:26:11
папку избавьтесь от Dev и замените ее00:26:14
с заголовком внутри заголовка создать навигацию00:26:18
элемент и внутри элемента навигации создают00:26:22
Разработчику нравится это имя класса, заданное как Navar.00:26:25
это класс из пользовательского интерфейса Daisy, используйте justify00:26:28
bin, чтобы разместить бренд сайта слева00:26:32
и меню заголовка справа и00:26:35
измените цвет фона на базовый 30000:26:39
внутри этого Dev создайте импорт ссылки00:26:43
ссылка из следующей косой черты устанавливает00:26:47
адрес на домашнюю страницу и для занятий00:26:49
класс кнопки использования имени из пользовательского интерфейса Daisy00:26:54
BTN Порыв BTN создать кнопку типа00:26:58
это из пользовательского интерфейса Daisy, также сделайте шрифт00:27:01
размер немного больше, используя текст Dash Large00:27:06
сохраните код, ага, вот у нас есть бренд00:27:10
ссылка Я собираюсь разместить два меню на00:27:13
заголовок после ссылки создает класс набора UL00:27:17
имя, которое нужно сгибать, чтобы положить что-нибудь рядом с каждым00:27:20
другие внутри, которые создают Али и в00:27:24
на Али создай ссылку для набора ссылок00:27:28
HF SLC-карта, страница карты и установка00:27:31
имя класса для BTN Gust и используйте округленное значение00:27:35
кнопку, чтобы создать радиус вокруг00:27:38
кнопка установить подпись к корзине и00:27:42
продублируйте его для входа войдите в систему сохраните его00:27:47
и вот у нас есть заголовок типа00:27:50
это если тебе не нравятся заглавные буквы00:27:53
формат кнопок просто перейдите к00:27:57
жакетный бар. CSS и в самом конце добавьте00:28:00
этот класс для BTN устанавливает преобразование текста в00:28:05
нет, сохранив это, текст нормальный00:28:09
отлично, в этом уроке мы создали заголовок00:28:13
нижний колонтитул и раздел контента для размещения списка00:28:16
продуктов здесь вот и все об этом00:28:19
урок до следующего урока00:28:25
пока, на этом уроке мы собираемся00:28:28
опубликовать исходный код этого проекта00:28:31
на GitHub, чтобы сделать это, нажмите «Версия»00:28:35
Контроль00:28:36
значок введите сообщение для первого коммита00:28:40
его00:28:41
о00:28:43
01 создать следующее приложение00:28:48
макет и нажмите «Comit», затем нажмите «Comit».00:28:53
опубликовать ветку, здесь появляется всплывающее окно, и оно00:28:57
говорит имя репозитория на gethub, если00:29:02
у вас нет этого всплывающего окна, вам нужно00:29:05
войдите в свою учетную запись GitHub, а затем вы00:29:08
будет это00:29:10
коробка, у тебя есть два варианта, которые я собираюсь сделать00:29:13
сделать этот репозиторий общедоступным, поэтому я выбираю00:29:17
второй00:29:18
нужно подождать некоторое время, чтобы опубликовать на GitHub00:29:22
и загружаем файлы и в конце вы00:29:24
будет иметь кнопку открытия на gethub00:29:29
открытие там, где мы есть, у нас есть доступ к00:29:32
репозиторий GitHub этого00:29:36
проект, давайте откроем эту ссылку в новом00:29:39
Окно, вот и мы, у вас есть доступ к00:29:42
репозиторий этого проекта по адресу00:29:45
адрес для каждого видео я создам00:29:49
новая Comet, чтобы вы могли получить доступ к каждому00:29:51
Комета, идя к комете00:29:54
раздел, затем откройте номер видео на основе00:29:59
на моих уроках и тогда вы сможете сравнить00:30:03
ваш код с моим, вот и все об этом00:30:06
урок до следующего урока00:30:12
пока, на этом уроке мы собираемся00:30:15
список продуктов на главном экране, позвольте нам00:30:19
начните с создания типа продукта в00:30:23
корневая папка создать папку установить для нее значение00:30:28
live все служебные файлы будут добавлены в00:30:32
этот00:30:34
папка внутри Li создайте папку для00:30:38
модели и внутренняя модель создают продукт00:30:43
Модель продукта.00:30:46
TS, я собираюсь экспортировать тип продукта00:30:50
вот тип продукта, который у нас есть00:30:54
идентификатор продукта типа строковое имя00:30:59
slug image Баннер все типа A String00:31:04
цена типа00:31:06
номер бренда строка описания строка00:31:11
категория типа строки, и у нас есть00:31:13
рейтинг, количество просмотров и запас контента00:31:16
номер типа, также у нас есть цвета продукта00:31:20
и00:31:22
размеры массива типов, но они00:31:26
необязательный00:31:27
хорошо, пойдем дальше00:31:30
шаг перейти к00:31:33
компоненты и создайте папку внутри00:31:36
компоненты установили его в00:31:39
продукты и внутри, которые создают00:31:42
это первый компонент, связанный с продуктом00:31:46
товар, для которого мы используем этот компонент00:31:49
показать товар дома00:31:52
экранный элемент Pyon.00:31:55
TSX, я собираюсь визуализировать продукт00:31:58
элемент, давайте напечатаем00:32:01
RFC для создания функционала реагирования00:32:05
компонент и как00:32:08
параметр для этого00:32:11
компонент, у нас есть продукт, и он00:32:15
введите продукт в модели продукта00:32:19
импортировать тип продукта из моделей00:32:23
папка для разработчика установила имя класса на00:32:27
карточка, это класс из изменения пользовательского интерфейса Daisy00:32:31
цвет фона создает тень и00:32:35
установить кнопку поля на00:32:38
через четыре после создания Dev пришло время00:32:42
создать изображение продукта, я использую рисунок00:32:47
элемент рисунок HTML-элемент и внутри00:32:53
которые создают ссылку, установленную hre на SL00:32:58
продукт/продукт00:33:00
ссылка на импорт слага из следующего SL00:33:04
ссылку, затем поместите изображение внутри ссылки00:33:08
импортируйте его из следующего набора изображений SL в SRC00:33:14
продукт. альтернативный текст изображения00:33:16
продукт. имя устанавливает высоту и ширину00:33:20
300 пикселей и используйте имя этого класса00:33:23
обложка объекта, чтобы соответствовать изображению внутри Dev00:33:29
установите высоту на 16 Ram, используя00:33:33
h64 и сразу после этого сделайте его на всю ширину00:33:38
фигура, создающая еще один класс Dev Set Card00:33:42
имя в тело карты, чтобы создать отступ00:33:45
внутри карточки, затем Определите ссылку00:33:50
набор компонентов href для продукта00:33:54
URL-адрес и внутри него поместите класс набора H2.00:33:59
имя к названию карты и измените шрифт00:34:04
вес до нормального рядом со ссылкой создайте00:34:08
второй абзац, кнопка создания поля и00:34:12
установите его на продукт.00:34:15
бренд в самом конце я собираюсь00:34:18
создайте другое имя класса набора разработчиков для00:34:22
действие с корзиной, это будет нижний колонтитул00:34:24
тележки, сделай ее гибкой00:34:27
Центрировать элемент и выровнять между внутренними00:34:31
которые создают00:34:34
протянуть и сделать шрифт00:34:37
размер в текст - в XL, чтобы сделать продукт00:34:43
цена00:34:45
большой и поставь перед ним знак доллара00:34:49
круто, пора00:34:51
создать образец данных внутри живой папки00:34:57
щелкните правой кнопкой мыши новые данные файла. ТС, мы00:35:02
собираюсь использовать статические данные, но позже00:35:05
в этом курсе мы будем использовать mongodb в качестве00:35:09
база данных Определить данные как00:35:12
объект и экспорт данных theault, что я00:35:16
здесь я собираюсь сделать это создать00:35:20
продукт как файл данных и установите для него значение00:35:25
массив00:35:27
из00:35:29
объекты первый объект первый00:35:32
продукт, поэтому мне нужно указать поля продукта00:35:35
вот это00:35:37
изображение категории ярлыка названия продукта и00:35:41
другая информация о00:35:45
продукт будет определен00:35:48
здесь вы можете сделать это, вы можете дублировать00:35:52
это и делайте столько, сколько захотите, и00:35:55
измените значения здесь, я собираюсь00:35:57
определите второй продукт, используя это00:36:02
информация Фейт00:36:04
рубашка давай возьмем третью00:36:08
один тонкий00:36:10
рубашка четвертый гольф00:36:14
брюки00:36:16
пятый фут00:36:18
брюки и последний — классические брюки00:36:22
круто, мне нужно00:36:25
создайте папку с изображениями в публичном доступе и00:36:28
размещать изображения с00:36:32
назовите и поместите несколько изображений с ними00:36:38
имена идут в00:36:40
публика00:36:42
папка щелкните правой кнопкой мыши новую папку изображения вы00:36:47
можно загружать изображения из Интернета00:36:50
имя Шар один Баннер один доля 200:36:54
И т. д. и поместите их в изображения.00:36:57
но если вы хотите использовать мои изображения, вы можете00:37:00
зайди в репозиторий по ссылке00:37:02
описание, затем перейдите в общую папку00:37:07
папку с изображениями и загрузите их, затем поместите00:37:11
вставь их сюда, я просто вставлю00:37:15
изображения вот изображения00:37:19
и у нас есть три штана, три рубашки и00:37:23
два00:37:24
баннеры хорошо, давайте перейдем к следующему шагу00:37:27
страница. TSX перейти на страницу. TXS в приложении00:37:34
спереди и справа после заголовка два создайте00:37:37
разработчик установил имя класса на Greed и что00:37:41
Я собираюсь сделать здесь, чтобы разместить продукт00:37:43
миниатюры рядом друг с другом для среднего размера00:37:48
устройство использует сетку, звонит три, так что я пойду00:37:51
иметь три продукта подряд, но для00:37:55
экран большего размера у нас будет четыре продукта00:37:59
подряд для мобильных устройств с маленьким экраном00:38:04
у нас тоже есть один товар подряд00:38:07
Разрыв до четырех, чтобы создать разрыв между00:38:10
продукт00:38:12
миниатюры внутри, в которых используются импортированные данные00:38:16
от Ли00:38:18
/данные делают00:38:20
точечную карту продуктов и конвертируйте каждую00:38:25
продукт00:38:30
к продукту00:38:33
позиция продукта позиция из компонента SL00:38:37
импорт папки с продуктами00:38:41
вот и все, что нам нужно установить набор ключей00:38:45
ключ к товару. Вытяните и установите продукт на00:38:49
продукт из папки продуктов, сохраните его00:38:54
здесь мы получаем эту ошибку, в которой говорится00:38:56
Идентификатор свойства отсутствует, перейдите к продукту00:38:59
модель поставила вопросительный знак Сделай это00:39:05
необязательно и сделайте баннер необязательным00:39:09
тоже, тогда иди00:39:13
вернуться на страницу. TXS и нет ESL00:39:18
введите ошибку сценария вот вы и мы00:39:21
иметь00:39:23
список продуктов на главном экране, например00:39:26
это на самом большом экране будет00:39:29
быть похожим на эти четыре продукта в00:39:32
отлично, мы успешно реализовали00:39:36
список продуктов в этом уроке данные00:39:40
исходя из статического data.js00:39:43
файл, но мы сделаем динамический, используя00:39:46
mongodb позже в этом00:39:48
конечно, это все об этом уроке, пока00:39:51
следующий урок00:39:55
пока-пока00:39:57
в этом уроке я собираюсь создать00:39:59
Страница сведений о продукте: первый шаг00:40:03
создание файла подкачки внутри приложения00:40:08
щелкните правой кнопкой мыши, чтобы создать папку для продукта00:40:12
поэтому конечный URL страницы будет00:40:14
Продукт SL/часть продукта после00:40:19
создание папки продукта внутри нее00:40:21
создайте новую папку, но на этот раз оберните00:40:24
это внутри ES00:40:27
скобка, внутри должна быть завернута заготовка00:40:30
квадратная скобка, поэтому слизень - это00:40:33
параметр, который будет передан в00:40:36
файл на страницу.00:40:38
TSX, поэтому создайте новый файл набора файлов.00:40:42
имя на страницу.00:40:44
TSX и вот пришло время определиться с реакцией00:40:48
функциональный00:40:50
тип компонента RFC и нажмите Tab, чтобы00:40:53
создавать00:40:54
нам не нужна реакция импорта здесь из00:40:59
функция страницы переименовывает ее в продукт00:41:02
детали и внутри этого Определите00:41:06
параметр и как параметр Определить параметры00:41:10
внутри скобки Cur давайте определим тип00:41:13
параметра, как объект, имеющий параметры00:41:19
внутри него и00:41:21
params состоит из пули типа a00:41:25
нить00:41:28
Следующий шаг — получение продукта от00:41:31
данные.00:41:33
продукты минус продукт равен данным00:41:37
импортировано из живого00:41:39
папка00:41:40
продукты вызывают функцию поиска по продуктам00:41:45
массив и поиск пули внутри элементов00:41:51
в массиве продуктов сравните их с00:41:55
парсы делают00:41:59
замок, сохрани00:42:01
код, давайте создадим условие if if00:42:05
продукт не00:42:07
существует рендеринг разработчика, чтобы показать продукт не00:42:12
обнаружено иное, визуализируйте продукт00:42:16
создать пустой00:42:17
контейнер внутри этого места — набор разработчиков00:42:22
отступ по вертикали к нему и внутри него00:42:26
создать ссылку, импортированную из Nexus SL00:42:29
связать и перенаправить пользователя на домашнюю страницу00:42:33
заголовок ссылки вернется00:42:35
к00:42:36
продукты следующим шагом является создание00:42:40
столбцы, давайте определим00:42:44
Разработчик установил имя класса на Жадность00:42:48
для00:42:50
средние экраны, я собираюсь определить четыре00:42:54
столбцы и00:42:56
такой разрыв между столбцами00:43:01
Первый столбец будет для изображения, поэтому00:43:05
создать имя класса набора div для среды00:43:09
промежуток экрана два из четырех00:43:14
столбцы и в этом div создайте изображение00:43:18
импортировать изображение из ширины набора изображений Nex SL00:43:22
и высота и источник альтернатива00:43:25
текст00:43:27
также я собираюсь установить этот стиль на00:43:30
ширину 100% и высоту сделайте Auto и установите00:43:35
размеры до 100 видового экрана, имея00:43:42
эти классы изображение расширится до00:43:47
родитель00:43:49
компонент, перейдем к следующему00:43:52
Разработчик сразу после изображения. Разработчик создает другой.00:43:56
div для продукта00:43:59
информация для этой цели00:44:02
создайте ul и определите пространство00:44:07
горизонтально, чтобы00:44:10
четыре внутри, которые создают первый список00:44:15
предмет типа00:44:18
это я собираюсь показать продукт00:44:22
имя, давайте нажмем на продукт, чтобы увидеть00:44:25
то, что мы уже сделали, потрясающе, здесь мы00:44:28
вернусь к товару, когда нажму на него00:44:30
это работает, когда я нажимаю на продукт, который могу00:44:33
посмотреть товар, перейдем на домашнюю страницу00:44:35
выбрать другой продукт пока у меня есть00:44:39
продукт у меня есть название продукта, пойдем00:44:43
следующий00:44:44
шаг, мы можем проверить это в большем00:44:48
экран, это будет такая половина00:44:51
ширины изображения составляет четверть00:44:57
для получения информации о продукте и других00:45:01
доля экрана будет предназначена для00:45:04
действие продукта, чтобы добавить продукт в00:45:07
открытка, пойдем дальше00:45:10
Ли, здесь я покажу рейтинг00:45:13
не обзор00:45:15
обзоры, следующий элемент списка относится к продукту00:45:20
бренд00:45:22
Затем Adidas создает разделитель, используя Li.00:45:27
и создал имя класса набора Dev для00:45:30
разделитель для создания пространства между товарами00:45:33
информация и продукт00:45:35
описание после разделителя создайте00:45:39
последний элемент списка внутри этого элемента00:45:43
описание и в абзаце рендеринг00:45:46
описание продукта сохраните код, чтобы получить00:45:49
результат такой потрясающий, мы такие00:45:52
готов к00:45:54
последний делитель00:45:56
это действие по товару, добавление товара00:45:59
в корзину, и что я буду здесь делать00:46:03
состоит в том, чтобы создать карту, используя набор00:46:07
цвет фона по базе BG от 300 до00:46:12
отличать тележку от00:46:14
фон и создайте00:46:17
тень вокруг00:46:20
корзина внутри Dev создать еще один набор Dev00:46:24
имя класса в тело карты для заполнения00:46:27
вокруг00:46:30
карту и идите к первой колонне00:46:34
карта здесь первая00:46:37
Столбец создает кнопку поля установки разработчика00:46:41
два набора гибких дисплеев и использование00:46:45
немного оправдать, я собираюсь создать таблицу00:46:48
вид искусства это00:46:51
строка слева у меня есть цена и в00:46:55
правая сторона у меня есть значение цены00:47:00
нравиться00:47:01
для этого будет следующая строка00:47:05
статус продукта, как в предыдущем наборе строк00:47:10
Кнопка поля. Гибкое выравнивание между00:47:13
первый Dev показывает статус, а второй Dev00:47:16
проверьте наличие товара на складе, если00:47:19
это больше нуля, покажите на складе00:47:22
в противном случае показать недоступность, сохраните код00:47:25
чтобы получить такой результат, давайте двигаться00:47:30
его внутри корпуса карты, чтобы придать ему форму00:47:36
это также я могу установить верхний край на00:47:42
три, но для среднего устройства сделайте его нулевым00:47:47
Сохраните код, ах, гораздо лучше в большем размере00:47:51
экран, это будет вот так00:47:53
карточка и на меньшем экране у нас есть00:47:56
пространство между описанием и карточкой00:48:00
как00:48:01
последний раздел, который я собираюсь показать, добавить в корзину00:48:05
кнопка создать00:48:07
Разработчик установил имя класса для действия корзины на00:48:11
оформите нижний колонтитул карточки и обоснуйте00:48:14
Центр, чтобы поместить кнопку в центр00:48:17
принадлежащий00:48:20
карту, затем создайте00:48:23
кнопка, подобная этой, устанавливает имя класса в BTN00:48:27
BTN основной и сделайте его на всю ширину00:48:31
тип – это кнопка, а заголовок добавляется к00:48:34
корзина товара мы успешно создали00:48:38
Экран сведений о продукте на большом экране00:48:43
у нас вот так и поменьше00:48:45
экран, он полностью00:48:48
такой отзывчивый, вот и все00:48:52
этот урок до следующего урока00:48:54
пока-пока00:48:57
[Музыка]00:48:58
в этом уроке я собираюсь реализовать00:49:01
добавить функциональность карты в00:49:03
сайт электронной коммерции, давайте начнем с00:49:06
создание утилиты00:49:08
функция с именем round two для преобразования00:49:12
числа с точностью до двух десятичных знаков ложь00:49:16
папку и создайте00:49:19
.ts здесь, внутри этого файла. Определите раунд.00:49:24
две функции доступа00:49:26
n номера типа и используйте math.round для00:49:30
преобразовать число в две десятичные точки00:49:33
мы используем его для округления цен в00:49:37
Корзина, второй шаг — создание заказа00:49:42
Типы предметов перейдите к моделям лжи, щелкните правой кнопкой мыши00:49:46
новая модель порядка файлов. ТС в этом файле00:49:51
создайте тип с именем позиции заказа и00:49:54
Определите следующее имя свойства00:49:58
Количество товаров в корзине00:50:03
Цена продукта, цвет и размер, которые мы используем00:50:07
цвет и размер для следующего урока00:50:11
название слота количество изображение и цена00:50:13
достаточно в этом уроке, сохраните его и продолжайте00:50:17
следующий шаг на этом этапе мы собираемся00:50:19
установить zustand zustand — это состояние00:50:24
менеджер на основе хуков ему не нужен00:50:27
любая котельная плита и она проста в использовании00:50:32
просто откройте новый терминал установки npm00:50:36
занд00:50:37
затем перейдите к следующему шагу и создайте использование00:50:41
крючок для хранения карточек в живой папке00:50:45
создайте новую папку для хуков, потому что00:50:48
zand — это база-крючок, я собираюсь создать00:50:51
новый крючок и создайте новый файл набора файлов00:50:54
имя для использования корзины магазина. ТС, начнем00:50:58
импортировав создать из zustand round00:51:02
два из утилит и заказ товара из заказа00:51:06
Следующим шагом модели является определение типа карты.00:51:11
имеет элементы типа массив элементов заказа и00:51:15
цены на товары, налог на доставку и общая сумма00:51:20
после создания типа карты пришло время00:51:23
создать новый экземпляр этого типа00:51:26
это начальное состояние типа тележка и00:51:30
здесь установите значения по умолчанию для элементов00:51:33
это налог на цену пустого массива00:51:36
цена цена доставки и общая стоимость00:51:39
они равны нулю, тогда экспортируйте константное хранилище C00:51:44
и установите для него возвращаемое значение create00:51:47
функция со стенда Z и в качестве параметра00:51:52
чтобы создать функцию, передайте стрелку00:51:55
функция функция, которая ничего не принимает00:51:57
и вернуть исходное состояние последнего шага00:52:01
вот00:52:02
определение сервисного крючка использования карты и00:52:06
Экспортировать данные00:52:08
дисфункция внутри извлекаемых предметов00:52:12
и цены из магазина C, как мы определили00:52:17
выше здесь сохраните его в конце, нам нужно00:52:22
возврат товара цена товара цена налога00:52:25
доставка и общая стоимость также возвращают00:52:30
функция с именем увеличения, мы используем это00:52:33
функция добавления или увеличения элемента в00:52:36
корзина принимает товары типа заказа00:52:40
элемент, и внутри него мы собираемся00:52:43
обновить товары в карточке и цены00:52:47
чтобы сделать это, сначала найдите предметы00:52:52
в параметре функции внутри00:52:55
массив элементов на основе слота и put00:52:59
это внутри существующей переменной, а затем на основе00:53:04
существующее значение вычисляет обновленную карту00:53:09
предметы, если предмет, который мы собираемся00:53:12
добавить в карту уже есть в00:53:15
Массив элементов использует функцию карты для элемента00:53:20
чтобы найти этот элемент в массиве и выше00:53:25
указать или увеличить количество этого00:53:29
товар в корзине, в противном случае оставьте его как есть00:53:33
если существование равно нулю, это означает, что00:53:37
это новый элемент, и нам нужно добавить его в00:53:40
в корзине используется синтаксис объединения массивов00:53:45
чтобы добавить новый элемент, используйте конструкцию или D00:53:49
структурировать свойства элемента и набора00:53:54
Количество QT этого товара на карте до00:53:57
один, потому что мы впервые00:54:00
добавление этого товара в корзину00:54:04
Следующим шагом является расчет цены на основе00:54:08
обновленный элемент корзины, давайте определим это00:54:12
функция вне обслуживания карты использования00:54:15
крючок вот расчет цены00:54:18
функция, которая принимает элементы как массив00:54:22
предметы заказывают предмет, затем он использует второй раунд00:54:27
преобразовать число в две десятичные точки00:54:31
внутри этого мы используем функцию уменьшения и00:54:34
массив товаров и суммирование цен на товары00:54:39
умножить количество товаров в следующей строке, мы00:54:45
рассчитать стоимость доставки на основе товаров00:54:48
цена, если она больше 100 баксов00:54:51
бесплатная доставка в противном случае доставка00:54:54
цена 100, вы можете добавить свою логику00:54:58
здесь вы также можете изменить эту логику на основе00:55:01
на ваше00:55:02
предпочтение для расчета налоговой цены00:55:05
Я использую налог в размере 15 %, вы можете это сделать.00:55:09
Динамический тоже, и за общую стоимость просто сумма00:55:14
вверх по всем трем ценам, которые мы рассчитали выше00:55:19
и для получения общей стоимости просто просуммируйте товары00:55:23
цена цена доставки и цена налога на00:55:26
конец вернет их как объект, который мы00:55:30
извлеките результат расчета цены здесь, так что00:55:34
на данный момент у нас есть обновленные элементы00:55:36
цена и другие цены, давайте перейдем к следующему00:55:40
Шаг увеличения функции использования карты00:55:44
сервисный перехват, последний шаг - вызов00:55:48
установите состояние в магазине корзины и обновите00:55:53
товары и цены основаны на обновленной00:55:58
значения сохраняют код, и вот использование00:56:03
перехватчик обслуживания карт, перейдем к следующему шагу00:56:07
он создает новый компонент внутри00:56:10
компоненты продукты SL переходят в компоненты00:56:14
перейдите к продуктам, щелкните правой кнопкой мыши новый файл по адресу00:56:19
карта. TSX — это клиентский компонент00:56:23
нам нужно определить нас00:56:25
клиент в самой первой строке этого00:56:29
компонент, затем импортируйте услугу использования карты00:56:33
элементы заказа используют эффект использования маршрутизатора и00:56:38
используйте такое состояние, затем экспортируйте и добавьте в00:56:42
функция карты, это компонент реагирования00:56:46
которые принимают предметы в качестве реквизита, поэтому определите00:56:51
тип реквизита здесь и внутри этого00:56:54
функцию, и мы собираемся визуализировать00:56:57
кнопка для добавления в корзину, сначала получите00:57:01
маршрутизатор от использования маршрутизатора, потому что мы хотим00:57:03
перенаправить пользователя после добавления элемента в00:57:07
страница «Корзина в корзину» для получения товаров и00:57:12
функция увеличения от использования услуги карты00:57:15
перехватите и определите существование00:57:18
Товар как указано, это либо товар заказа, либо00:57:24
на00:57:25
по умолчанию оно неопределенно, затем определено00:57:29
используйте такой эффект внутри этого набора00:57:34
существует элемент на основе массива элементов, если00:57:40
у нас есть этот продукт в наборе карточек00:57:44
этот элемент существует элемент последний00:57:47
функция в этом компоненте добавляется к00:57:50
Обработчик карточек, давайте поместим место00:57:54
между ними только что обработчик карты00:57:58
вызов00:57:59
функция увеличения от использования услуги карты00:58:03
зацепить и передать предмет с at на карту00:58:08
Реквизит компонента, приступим к рендерингу00:58:11
этого компонента с использованием возврата и проверки00:58:16
существующий элемент, если существующий элемент существует, мы00:58:20
нужно показать минус плюс и00:58:25
количество, но если у нас нет этого товара00:58:29
в корзине нам нужно показать добавить00:58:31
Кнопка в корзину для первого условия00:58:34
Я собираюсь визуализировать div и для00:58:37
иначе условие я собираюсь визуализировать00:58:39
кнопка для кнопки, для которой задано имя класса00:58:42
BTN BTN первично и установите мы на полную мощность00:58:48
установите тип кнопки и отмените щелчок00:58:51
позвонить добавить в карточку Обработчик подпись такая00:58:54
добавить в корзину, давайте выберем существующий товар00:58:59
В данном случае я собираюсь отобразить кнопку00:59:02
это кнопка минус, я не собираюсь00:59:04
реализовать для него функцию разблокировки00:59:08
мы реализуем это в следующем00:59:11
урок, затем Определите диапазон, чтобы показать00:59:15
количество текущего товара в00:59:18
карточка и кнопка рендеринга плюс для увеличения00:59:22
количество этого товара в корзине по00:59:25
вызов функции увеличения и передача00:59:28
существует элемент в качестве параметра этой функции00:59:33
отлично, давайте воспользуемся добавлением в корзину, переходом на страницу.00:59:37
TSX найти кнопку «Добавить в корзину» и избавиться00:59:41
контейнера div замените его на00:59:45
это jsx00:59:47
выражение, если запасы конусов не равны00:59:50
до нуля, это означает, что у нас есть это00:59:52
товар в наличии, поэтому отобразите его00:59:56
выражение создает div внутри этого использования01:00:00
добавить в корзину компонент, импортированный из01:00:06
папку продуктов и передайте элемент, например01:00:11
это структура структура01:00:14
продукт и установите количество на ноль цвета01:00:19
и размер для очистки строки, мы исправим01:00:23
это в следующих уроках сохраните код01:00:27
и вот мы добавили на карту01:00:29
кнопка, но на этот раз, если я нажму на нее01:00:33
аха, там показано один, минус и плюс01:00:37
рядом с номером товара в карточке I01:00:41
могу увеличить его вот так, чтобы у меня было шесть01:00:44
этого продукта на карточке, если я нажму01:00:47
на минус не работает, реализуем01:00:49
на следующем уроке пока что мы сделали01:00:53
стоит реализовать и добавить в корзину01:00:56
функциональность, давайте покажем это значение здесь01:00:59
в корзине в качестве значка вернитесь к01:01:03
урок и определить компонент меню, например01:01:07
этот внутренний заголовок переходит к компоненту01:01:10
заголовок щелкните правой кнопкой мыши меню нового файла. ТСХ01:01:16
это клиентский компонент, использующий клиент01:01:20
импортировать ссылку на службу использования карт и пользователя01:01:25
Состояние и эффект использования от реакции Определить01:01:28
меню как функцию стрелки и экспортировать его01:01:32
внутри которого можно получить предметы с карты использования01:01:35
сервис, мы собираемся показать количество01:01:37
элементы на карте и использовать состояние и01:01:40
хук эффекта, подобный этому. Определить установленный01:01:44
Состояние и эффект использования устанавливают01:01:47
значение mount равно true, мы используем это01:01:49
трюк, чтобы избавиться от ошибки на сервере и01:01:53
проблемы с рендерингом на стороне клиента в конце01:01:58
вернуть Dev внутри этого визуализированного Dev01:02:03
ul и установите имя класса для гибких элементов01:02:07
растяни первую ли, это будет01:02:12
ссылка, буква H этой ссылки — страница карточки.01:02:16
мы реализуем эту страницу позже, заголовок01:02:19
по этой ссылке есть карточка, и здесь у меня есть01:02:22
проверьте, установлено ли это, это означает, что если я01:02:26
на клиентском сайте и номер элемента в01:02:30
тележка больше нуля, это значит01:02:33
что у меня есть хотя бы один элемент в01:02:35
card, затем отобразите имя класса набора разработчиков в01:02:39
значок значок второстепенный, чтобы сделать его похожим на01:02:42
красный цвет и используйте функцию уменьшения на01:02:46
предметы для подсчета количества некоторых из01:02:50
количества в корзине, сохраните01:02:54
а затем визуализировать второй элемент списка01:02:58
вот так это просто кнопка входа в систему01:03:01
используйте компонент меню, перейдите в заголовок01:03:05
компонент избавьтесь от UL здесь и замените01:03:10
это с01:03:12
компонент меню, импортированный таким образом, сохраните01:03:16
код и вот у нас есть семь01:03:19
товар в карточке и если я увеличу01:03:22
это шоу показывает количество элементов в01:03:26
карта в пакете, перейдем на домашнюю страницу01:03:29
выберите другой продукт, добавьте элемент в01:03:32
карточка и, как вы видите, она показывает сумму01:03:36
количество всех позиций заказа в01:03:40
открытка отличная, вот и все об этом уроке01:03:44
мы успешно реализовали добавление на карту01:03:47
функционал и на следующем уроке мы01:03:49
улучшить это01:03:53
особенность01:03:55
в этом уроке мы собираемся реализовать01:03:57
удалить товар из корзины в предыдущем01:04:01
урок, который мы реализовали, добавил элемент в01:04:03
карту, и здесь мы собираемся реализовать01:04:05
кнопка минус здесь, когда я нажимаю на нее01:04:08
Я собираюсь уменьшить количество этого01:04:11
товар в карточке, чтобы сделать то, что нам нужно01:04:14
добавить новую функцию в карту использования01:04:17
сервисный крючок перейти к использованию сервисного крючка карты01:04:21
прокрутите вниз, чтобы найти конец увеличения01:04:25
функция прямо здесь и определите уменьшение01:04:29
например, увеличить, принять товар как01:04:32
параметр в теле этой функции01:04:35
найди предмет по слизню и поставь01:04:40
оно существует постоянно, если оно не существует01:04:45
вернуть это означает, что нет необходимости01:04:47
изменить состояние, иначе рассчитать01:04:51
обновлять элементы карты на основе01:04:54
существующий товар, если количество существующего товара01:04:59
нам нужно удалить этот элемент из01:05:03
тележку, иначе мы уменьшим01:05:06
количество этого товара в корзине01:05:09
отдых очень похож на увеличение здесь я01:05:13
просто позвоните в Calc Price, чтобы рассчитать цену01:05:17
обновленные цены и в конце обновите01:05:22
состояние на основе новых значений следующий шаг01:05:27
находится в добавлении в корзину. TXS и получить снижение01:05:32
функция из сервисного крючка использования карты01:05:37
используйте его в кнопке минус для отмены уничтожения01:05:42
Обработчик вроде этого, сохраним код, давайте01:05:45
проверить результат добавить в01:05:48
карта01:05:50
увеличиваться и уменьшаться, если мы проверим01:05:54
заголовок, он обновляется на основе01:05:59
изменить здесь, когда я уменьшу, когда01:06:02
количество одно, товар будет удален01:06:05
из корзины и я добавил в корзину01:06:08
кнопка классно мы01:06:11
реализован пункт уменьшения из01:06:13
Покупка01:06:14
тележку и на следующем уроке мы отправимся за01:06:18
Проектирование тележки01:06:23
страница01:06:24
в этом уроке мы собираемся создать01:06:26
карта01:06:28
страница, прежде чем перейти к странице карточки, давайте01:06:33
сохранять01:06:34
товары в корзине в01:06:37
локальное хранилище, мы используем функцию persist01:06:40
из середины zustand перейдите на C01:06:45
магазин в самом01:06:48
начало и импорт сохраняются с01:06:51
затем установите промежуточное программное обеспечение SL01:06:54
найдите функцию создания из zustan и01:06:59
замени это на это01:07:02
версия здесь у нас есть функция создания как01:07:05
параметр, который мы передаем функции persist и01:07:09
мы называем01:07:11
сохранить два параметра: первый01:07:14
параметры — это начальное состояние в виде стрелки01:07:17
функция, а вторая01:07:20
параметры в опции, которую мы установили для имени01:07:24
магазин корзин, так что внутри локального хранилища01:07:27
имя ключа будет «Сохранить в магазине корзины»01:07:33
тот01:07:34
код и давайте проверим результат, вот я01:07:37
собираюсь добавить товар на карту и01:07:41
обновите страницу по мере необходимости01:07:44
см., что он сохраняется в локальном хранилище01:07:49
и обновив страницу не пропустим01:07:53
это элементы в01:07:55
тележка, пойдем за01:07:59
создание страницы корзины перейти в приложения01:08:03
вперед и щелкните правой кнопкой мыши новую папку01:08:08
корзина внутри карты создает новую страницу файла.01:08:14
TSX и тип R A01:08:19
fce это означает функцию реагирования на ошибку01:08:23
с компонентом EXP Port и нажмите01:08:26
Tab и задайте имя01:08:29
картировать01:08:31
скопируйте и вставьте страницу, поэтому, если я нажму01:08:36
карточка, я буду перенаправлен на эту01:08:41
Следующий шаг компонента — создание корзины01:08:44
Компонент сведений внутри папки карты01:08:48
в папку с карточками вправо01:08:51
нажмите новый файл01:08:54
Детали карты.01:08:56
TSX причина, по которой я использую карту01:09:00
Компонент сведений создает карту01:09:05
серверная часть страниц и вся клиентская часть01:09:09
часть будет добавлена к реквизитам карты01:09:14
поэтому мне нужно настроить использование01:09:17
клиент в самом начале этого01:09:20
компонент, затем экспортируйте данные карты01:09:24
функция экспорта данных карты по умолчанию01:09:28
функция, это основной компонент, получите01:09:31
маршрутизатор импортирован из следующего SL01:09:35
маршрутизатор, затем получите цену товара01:09:39
уменьшение и увеличение функции от использования01:09:41
карта01:09:42
услуга импортирована из магазина карточек использования01:09:45
следующий шаг — убедиться, что01:09:50
этот компонент отображается только в клиенте01:09:55
Сторона, используя эту часть кода, что я01:09:59
здесь делается определение определения штата с именем01:10:04
установлен и в эффекте использования установлен01:10:07
смонтированное значение от false до true, и если01:10:12
это ложь, возвращает пустое значение, имея01:10:16
в этом трюке я не получу ни одной ошибки01:10:22
сравнение рендеринга на стороне сервера с клиентом01:10:27
сторона01:10:28
визуализировать импорт пользователя01:10:32
Состояние и использование01:10:34
эффект на данный момент я собираюсь придать форму01:10:38
данные карты01:10:40
компонент создать пустой01:10:44
контейнер и внутри него Определить01:10:48
корзина как01:10:50
это установило стиль p, добавляющий вертикально к01:10:54
четыре и текст в 2 раза больше в The Next01:10:59
Шаг. Я использую условный рендеринг, если01:11:03
элемент. длина равна нулю показать корзину01:11:08
пусто в Dev01:11:11
и оказать01:11:14
ссылка на01:11:16
Домашняя страница с надписью «Иди за покупками»01:11:20
в противном случае создайте Dev, закройте отверстие01:11:24
скобка Quy сохраните01:11:27
ссылка на импорт кода из косой черты Nex и01:11:32
на этом этапе я использую01:11:35
сетка для разделения экрана на четыре01:11:41
столбцы и определите пять промежутков между ними01:11:46
в01:11:48
средний экран01:11:50
и большие экраны01:11:54
внутри этого разработчика создайте еще одного разработчика01:11:57
Дев01:11:59
занимают три доли Форера01:12:02
экран, и я использую более чем полный X Auto01:12:06
потому что я собираюсь создать здесь таблицу01:12:09
показать корзину Определить набор столов01:12:12
имя класса в таблице создать заголовок таблицы01:12:16
и строка таблицы с тремя столбцами01:12:22
положить товар в корзину01:12:26
количество данного товара и цена01:12:28
тот01:12:30
продукт внутри этого01:12:33
стол формы Т01:12:36
body закройте его, сохраните код в формате01:12:40
это и внутри него я собираюсь отрендерить01:12:43
товары в корзине для этого Определить01:12:48
предметы и функция карты вызова для предмета01:12:51
чтобы преобразовать каждый элемент в items в01:12:55
строка таблицы устанавливает ключевой атрибут элемента.01:13:01
стараться сделать каждую строку01:13:05
уникальный первый столбец — это элемент создания01:13:09
набор ссылок h/продукт SL номер продукта01:13:14
установить имя класса, чтобы сгибать элементы по центру01:13:18
поместите предмет в центр и внутрь01:13:21
ссылка создать изображение01:13:24
импортировать изображение из следующего набора изображений SL01:13:28
источник к элементу. альтернативный текст изображения01:13:32
к пункту. имя и установка ширины и высоты01:13:35
до 5001:13:37
пиксель рядом с изображением. Определите диапазон и01:13:41
показать название предмета, его цвет и размер01:13:45
потому что я не реализовал цвет элемента01:13:48
и размер, я собираюсь избавиться от него и01:13:50
на следующих уроках мы реализуем размер и01:13:53
цвет цвет для сохранения товаров в корзине01:13:57
код, перейдем к следующему столбцу01:14:01
это количество в этой таблице01:14:05
ячейку я определил две кнопки и охватываю01:14:11
первая кнопка - минус, чтобы уменьшить элемент01:14:15
в01:14:16
карта01:14:17
затем сформируйте диапазон, чтобы показать01:14:22
n, чтобы показать количество этого товара в01:14:26
карточка, а следующая — это кнопка для01:14:30
увеличить этот пункт в01:14:32
корзина, последняя колонка, это очень просто01:14:35
это предмет. цена, поставь доллар перед этим01:14:39
показать цену товара сохранить01:14:43
код и используйте этот компонент внутри страницы.01:14:49
TSX в папке корзины вместо01:14:54
div вернуть данные карты и импортировать их01:14:58
с карты01:15:00
детали меняют01:15:02
заголовок этой страницы в корзину по01:15:06
использование mea путем экспорта данных метода01:15:12
константа и определение объекта, который имеет01:15:16
заголовок заполнен, сохраните его, давайте исправим проблему01:15:20
в реквизитах карты должен использоваться используемый роутер01:15:23
быть импортирован из следующей навигационной системы SL, не01:15:27
следующий SL01:15:28
обновите маршрутизатор и сохраните отличный код01:15:32
здесь у меня есть товары в корзине покупок, и я01:15:35
может01:15:37
уменьшать и увеличивать, если я уменьшаю его01:15:40
от одного да, тележка пуста и она01:15:46
удаляет из корзины перейти01:15:49
Покупка01:15:51
выберите добавить в корзину01:15:54
и переходим на страницу карты давайте реализуем01:15:57
часть действия, чтобы показать01:16:00
промежуточный итог и перенаправить пользователя на01:16:04
следующий шаг при оформлении заказа01:16:08
мастер перехода к реквизитам карты в самом01:16:12
конец01:16:14
найдите этого разработчика и создайте еще один div01:16:19
рядом с ним внутри этого создайте еще один01:16:22
Дев01:16:24
установите класс на карту, чтобы сформировать карту и01:16:30
измените цвет фона на базовый BG01:16:34
300 сохранить код, чтобы отформатировать его создать01:16:38
другой разработчик установил имя класса в корзину01:16:41
body для создания отступов в корзине и01:16:46
theine Ура, закрой это и внутри этого01:16:52
UR, я покажу саб01:16:55
итоговый список01:16:58
элемент внутри этого набора Define a Dev01:17:02
заполнение кнопки до трех и установка шрифта01:17:06
размер до x большой, покажите здесь промежуточный итог и01:17:12
в скобках мы покажем01:17:15
количество предметов в01:17:18
корзина с предметами.01:17:22
уменьшить, чтобы суммировать количество продуктов в01:17:26
покупки01:17:27
затем в корзину поставьте знак доллара и покажите товары01:17:32
цена, которую мы уже рассчитали в01:17:35
магазин подержанных карточек01:17:37
крючок классный, вот у меня есть промежуточный итог01:17:41
предмет на 70 долларов, если я увеличу, он будет01:17:46
изменить форму последнего ли01:17:50
вот аха, это кнопка01:17:54
подпись - это интересно, чтобы проверить01:17:57
класс BTN BTM первичный W полный полный01:18:00
с основным цветом и для использования без щелчка01:18:05
маршрутизатор. нажмите, чтобы перенаправить пользователя на01:18:08
перевозки01:18:10
экран, давайте проверим результат здесь, я01:18:13
нажмите на proed, чтобы оформить заказ, и я сделаю01:18:16
быть перенаправлен на экран доставки01:18:20
потрясающе, быть успешно реализованным01:18:23
Страница корзины Я могу добавить столько товаров, сколько01:18:28
я01:18:30
хочу как01:18:32
это и перейти на карточку01:18:35
страницу и перейдите к следующему шагу01:18:39
страницу доставки на следующем уроке мы01:18:42
продолжайте проверять страницы Visaard до тех пор, пока01:18:47
этот урок01:18:51
пока, на этом уроке мы собираемся01:18:53
данные образца семян в mongodb, давайте01:18:57
начните с настройки базы данных mongodb01:19:00
у нас есть два варианта установки01:19:03
mongodb локально на компьютере или с помощью01:19:07
База данных Cloud mongodb по этому адресу01:19:11
Я выберу этот, потому что01:19:12
проще зайти на mongod be.com atlas SL01:19:17
база данных нажмите попробовать01:19:20
бесплатно, затем войдите сейчас и войдите в свой01:19:24
учетная запись mongodb, с которой я собираюсь войти в систему01:19:27
мой аккаунт Google там, где мы, если ты01:19:30
нет кластера, нажмите «Создать»01:19:33
кластер и здесь, когда у вас есть01:19:36
нулевой кластер, нажмите на коллекции бровей01:19:41
затем создайте новую базу данных, установите01:19:44
имя базы данных, скажем, следующий Amazon01:19:49
Название коллекции V2 для тестирования и и01:19:53
следующий шаг создания — создание базы данных01:19:57
получить доступ к пользователю базы данных, нажать «Добавить нового»01:20:01
пользователь базы данных выбирает режим аутентификации01:20:04
для пароля введите имя пользователя, я использую01:20:09
имя базы данных в качестве имени пользователя и введите свое01:20:12
пароль прокрутите вниз во встроенном правиле01:20:16
выберите чтение и запись любого01:20:19
базы данных, затем прокручиваю вниз и нажимаю01:20:23
при добавлении пользователя следующий шаг в сети01:20:27
доступ нажмите «ДОБАВИТЬ IP-адрес» и сделайте01:20:32
он открыт для всех адресов, используя01:20:38
0.0.0.0 sl0 поставил имя как у всех и01:20:42
нажмите «Подтвердить», что мы здесь, вам следует01:20:45
сделать эту строку активной, имея это01:20:50
нажмите на базу данных и получите соединение01:20:54
Строка Str здесь, нажмите «Подключиться»01:20:59
драйверы SC прокрутите вниз и найдите01:21:03
скопируйте строку подключения и вернитесь к01:21:07
тот01:21:08
проект в корневой папке01:21:12
проект создать файл EnV, щелкните правой кнопкой мыши01:21:16
mty Space новый01:21:19
файл EnV и нажмите Enter, введите mono DP01:21:26
подчеркните URI, равный, и вставьте01:21:31
значение здесь заменяет угол имени пользователя01:21:36
скобки с01:21:39
для меня твое имя пользователя, это была следующая Амазона01:21:47
dv2 введите свой01:21:50
пароль для меня это этот, но я сделаю01:21:53
измените его позже, поэтому вам нужно будет использовать свой01:21:56
собственный пароль и после косой черты и01:22:01
перед знаком вопроса войти в базу данных01:22:03
имя следующего Das amazona01:22:08
dv2 сохраните его, и вот у нас есть01:22:12
Mongo DP в файле EnV, поэтому мне нужно добавить01:22:18
EnV в список игнорирования GE, потому что я01:22:21
не собираюсь делиться01:22:23
это значение в моем репозитории GitHub перейдите по адресу01:22:27
Система управления версиями щелкните правой кнопкой мыши файл EnV.01:22:31
и нажмите «Добавить», чтобы игнорировать, пойдем01:22:35
следующим шагом нам нужно создать соединение с БД01:22:39
функция в живой папке создать01:22:43
dbconnect01:22:44
Живая папка TTS щелкните правой кнопкой мыши новый файл БД01:22:50
соединять. ТС первый шаг это импорт01:22:56
mongos mongos — это объект mongodb01:23:00
моделирование для node.js01:23:02
и имея это, мы можем иметь mongod01:23:06
Кастинг и бизнес по валидации Deb01:23:09
логика легко через наш nextjs01:23:13
приложение, поэтому первый шаг01:23:15
установка mongos открывает новый терминал01:23:20
npm install mongos готово, и у меня есть01:23:24
импортирован Mongo успешно, следующий шаг —01:23:28
определение функции подключения к БД как асинхронной01:23:32
функция здесь, я определяю соединение с БД01:23:35
функция в TR catch call mongod db.01:23:41
подключитесь как асинхронная функция и передайте01:23:45
URI mongodb из среды01:23:49
переменные с использованием процесса.env01:23:52
URI mongodb, и я использую восклицательный знак01:23:56
отметьте, чтобы nextjs подтвердил, что это значение01:24:01
не является нулевым в улове через новый01:24:04
ошибка и сообщение о сбое соединения01:24:10
в конце мне нужно экспортировать соединение с БД01:24:13
прямо здесь экспортируйте подключение к базе данных theault01:24:15
сохраните код, перейдем к следующему шагу01:24:19
следующий шаг — модель продукта, которая мне нужна01:24:23
создать схему продукта es с помощью mos.01:24:27
схема, давайте пойдем, откроем продукт01:24:30
модель в папке моделей в папке live01:24:34
и в самый01:24:36
начинаем импортировать монго, затем определяем01:24:40
схема продукта равна новому экземпляру01:24:45
Функция mongos esema как передача параметра01:24:50
объект, первым параметром которого является01:24:53
объект, содержащий все файлы продукта01:24:58
модель, первый файл — это имя типа a01:25:03
веревка и требуется второй фетр01:25:07
пуля, это строка типа А, это01:25:10
требуется, но он тоже уникален, я использую01:25:13
уникальный индекс в mongodb, чтобы убедиться01:25:17
что в файле нет дубликатов01:25:21
продукт01:25:23
Следующая модель - это категория типа01:25:26
строковое изображение товара, цена01:25:31
типа номер марки типа А Струна01:25:36
рейтинг и отсутствие превью типа номера01:25:39
запас содержимого — значение по умолчанию для01:25:42
Запас контента равен нулю описания01:25:44
введите строку и появится01:25:48
Логическое значение для отображения этого продукта в01:25:51
домашняя страница, над которой мы будем работать дальше01:25:54
уроки также, если продукт представлен I01:25:57
нужно показать изображение баннера, вот почему01:26:00
Я определяю строку, баннер которой01:26:03
введите строку A, но это не требуется для01:26:06
функция схемы, второй параметр01:26:09
это параметры схемы как вариант, который я установил01:26:14
временные метки в True, имея это, когда01:26:18
новый01:26:19
запись будет создана в базе данных01:26:22
время01:26:24
время создания и последнего обновления01:26:28
эта запись будет сохранена как новые поля01:26:32
в базе данных сохраните его и в следующем01:26:36
строку из схемы продукта получить01:26:39
модель продукта, используя этот код, если вы01:26:42
внутри уже есть модель продукта01:26:46
Модель Mongo, используйте ее, иначе вызовите модель01:26:51
функция от mongos и передача имени01:26:55
этой модели в базе есть01:26:58
продукт и его схема SCH как01:27:01
второй параметр модели и это01:27:04
схему продукта SCH, которую мы уже01:27:06
определено здесь в конце экспорта по умолчанию01:27:11
модель продукта, чтобы мы могли использовать ее в других01:27:15
файлы здесь, я собираюсь создать образец01:27:18
пользователи, потому что нам это нужно в01:27:20
мастер оформления заказа, подобный тому, что мы сделали для01:27:23
модель продукта, я собираюсь создать новую01:27:25
модель для пользователей в четырехуровневой модели01:27:28
щелкните правой кнопкой мыши модель пользователя. TS импортирует монго01:27:35
Определите схему пользователя, у нас есть имя пользователя01:27:40
типа A String, требуется адрес электронной почты01:27:43
пользователю типа A String требуется и01:27:45
оно должно быть уникальным, для которого не должно быть01:27:47
есть дубликаты адресов электронной почты, пароль01:27:51
введите строку и являетесь администратором типа01:27:54
Логическое значение требуется и по умолчанию01:27:57
это неверно, также установите отметку времени01:28:00
иметь созданные данные, время и последний01:28:04
обновлено количество пользователей, получена модель пользователя01:28:09
на основе пользовательской схемы и экспорта01:28:12
пользовательская модель theault отлично, поехали01:28:16
последний шаг — вставка образца01:28:20
данные в базу данных01:28:22
Я собираюсь реализовать эту функцию в01:28:25
API продуктов переходит в приложения, щелкните правой кнопкой мыши01:28:30
новая папка для API внутри, в которой создается01:28:36
новая папка для продуктов внутри нее01:28:40
создайте новую папку для семян и внутри01:28:44
семя создает новый файл для маршрута. ТС от01:28:50
имея этот файл01:28:52
мы можем создать образец данных, перейдя в01:28:56
этот адрес SL API продукта/SE, который мы используем01:29:01
Обработчик маршрута из nextjs 13, определив01:29:06
маршрут. TS в папке API, давайте определим01:29:11
Метод G здесь использует экспорт этой функции01:29:16
const получите асинхронную функцию, которая01:29:20
принять запрос как параметр его типа01:29:23
следующий запрос импортировать следующий запрос из01:29:27
следующий SLS-сервер, внутри которого будут получать пользователи01:29:32
и продукты из данных данные скоро появятся01:29:36
из li/dat здесь у нас нет пользователей01:29:42
перейти к данным. ТС и прямо перед этим01:29:46
продукты Определить пользователей как массив Определить01:29:51
первый пользователь user как объект, который у него есть01:29:54
имя электронной почты, пароль и администратор, вы можете01:29:58
установите все, что захотите, но для01:30:01
пароль нам нужен, чтобы зашифровать пароль01:30:04
используя пакет bcrypt, поэтому мне нужно01:30:08
установите bcrypt JS, это пакет для01:30:13
зашифровать данные, установить их и импортировать по адресу01:30:18
очень01:30:19
начало точек01:30:22
импортировать bcrypt01:30:24
JS, как вы видите, я01:30:27
получение не смогло найти файл декларации01:30:31
поэтому мне нужно скопировать это и установить типы01:30:36
bpjs, чтобы избавиться от этого01:30:40
предупреждение об установке npm в зависимости01:30:45
Зависимость разработчиков от типов знаков01:30:48
sljs, здесь нет ошибки, поэтому первое01:30:52
пользователь — Джон, адрес электронной почты — admin, Signex01:30:56
example.com пароль: 1 2 301:30:59
456 он зашифрован в базе данных и01:31:03
является ли администратор правдой, поэтому этот пользователь является администратором01:31:06
давайте после этого определим обычного пользователя01:31:10
создать обычного пользователя Jane по адресу01:31:15
подпишите пароль example.com таким же и01:31:17
это admin - ложь, вернитесь к маршруту. ТС01:31:21
и здесь нет ошибки для пользователя01:31:25
после получения образцов данных пришло время01:31:27
подключиться к базе данных с помощью DB Connect01:31:31
функция импорта БД, подключение из li/DB01:31:34
подключиться, мы уже определили эту функцию01:31:39
после подключения к вызову базы данных01:31:42
удалить меню модели пользователя, импортировать пользователя01:31:47
модель из папки Models, что она делает:01:31:50
удалить все все записи у пользователя01:31:54
сбор, затем вызовите вставку маню на01:31:58
модель пользователя и передавать пользователей из данных.01:32:03
TS, что он делает, так это создает два новых01:32:06
пользователи в базе данных делают то же самое для01:32:10
модель продукта, импортируйте ее из моделей01:32:13
папку, а затем отправьте результат Json, используя01:32:19
следующий ответ. Импорт функции Json следующий01:32:23
ответ от следующего сервера SL в формате Json01:32:27
объект, мы передаем сообщение, это семя01:32:31
успешно, а пользователи и продукты01:32:35
сохраните код, проверим результат01:32:38
открыть новую вкладку перейти к столбцу местного дома01:32:42
3000 SL01:32:44
API01:32:46
Продукты SL разрезают семена и нажимают Enter01:32:52
круто, мы получаем это сообщение, смотри01:32:54
что пользователи и продукты успешно01:32:58
давайте проверим результат в базе данных01:33:01
установить mongodb Campus по этой ссылке, открыть01:33:06
mongodb Campus перейдите в свой файл и скопируйте01:33:11
URI mongodb вставьте его сюда и нажмите01:33:15
при подключении подождите некоторое время, чтобы подключиться к01:33:19
база данных и где мы находимся, у нас есть01:33:23
следующий Amazon V2, и у него есть образец01:33:28
продукты вот мы и примеры пользователей01:33:33
отлично, мы успешно подключились к01:33:36
базу данных и данные образца, размещенные в01:33:39
на следующем уроке мы сделаем исходники01:33:42
вместо этого данные динамические из базы данных mongod01:33:45
статических данных.01:33:50
ТС01:33:53
в этом уроке мы собираемся загрузить01:33:55
продукты из базы данных, находящейся в данный момент01:33:58
домашняя страница, с которой мы загружаем товары01:34:01
данные. продукты в данных. ТС они такие01:34:04
статический, и мы собираемся это сделать01:34:07
Динамический из базы данных mongodb, которая01:34:10
мы создали на предыдущем уроке, давайте01:34:13
начните с создания сервиса по продуктам здесь01:34:16
мы собираемся определить некоторые функции для01:34:18
загрузить данные из базы данных и начать жить в течение01:34:21
папка создать новую папку для сервисов01:34:25
внутри этого создайте новый файл, установите01:34:28
имя продукта service.ts в этом файле01:34:33
импортировать кэш из пакета реагирования, который мы используем01:34:36
кэш для кэширования результата запроса к базе данных01:34:39
и предотвратить множественное попадание в базу данных01:34:43
затем экспортируйте минусы, повторно проверив их на01:34:47
3600, установив повторную проверку денежных средств01:34:51
значение Val будет обновляться не чаще каждого раза.01:34:54
час, затем определите первую функцию01:34:58
получить последнюю версию и обернуть функцию ace01:35:02
в функции кэша из реакции01:35:05
Возвращаемое значение внутри этого Асинга01:35:08
функция будет кэширована реакцией в этом01:35:11
функция подключения к базе данных с помощью01:35:13
DB Connect импортирует его из активной папки01:35:17
вот так, затем вызовите метод find01:35:21
такая модель продукта и на основе сортировки01:35:25
по убыванию идентификатора, поэтому мы собираемся01:35:28
получайте новейшие продукты первыми и01:35:32
вызывая лимит четыре, мы получаем первые четыре01:35:35
документы в коллекции продукции и01:35:39
используйте Lean, чтобы преобразовать результат в простой01:35:43
Объект JavaScript в конце возврата01:35:46
продукты как импорт массива продуктов01:35:50
товар из активной папки сохраните код01:35:53
в конце Определите продукт Сервис как01:35:56
объект, содержащий функцию получения последней версии01:36:00
затем экспортируйте сервис продукта theault и сохраните.01:36:03
код возвращается к плану и здесь01:36:06
пришло время определить избранный продукт01:36:10
сразу после получения последней версии Define get01:36:13
по характеристикам они очень похожи друг на друга01:36:15
другое, но дело в находке01:36:19
метод, который мы передаем01:36:22
критерии указаны для того, чтобы он возвращал01:36:27
для нас только рекомендуемый продукт, потому что01:36:30
мы собираемся показать только три элемента в01:36:32
карусель избранных товаров «Я могу»01:36:36
колл-лимит три и колл-линк01:36:39
преобразовать результат в простой JavaScript01:36:42
объект, сохраните код, поместите его в список01:36:45
список услуг по продукту последний01:36:49
функция в обслуживании продукции.01:36:52
слизень, мы собираемся получать продукты с помощью слизняка01:36:55
Мне нужно определить пулю как параметр01:36:58
введите строку подключения к базе данных и01:37:01
позвони, найди одного из монго и передай01:37:06
slog в качестве параметра этой функции, затем01:37:09
называть бережливым и возвращать продукт как продукт01:37:13
объект здесь, я могу вернуть это как товар01:37:16
возражайте против публикации в избранном, не забудьте01:37:19
экспортировать, добыть продукт с небольшими порциями01:37:23
сервис, сохраните код и приступим к делу01:37:26
следующий шаг — на главной странице в01:37:29
плита slf на первой странице. TSX перед поездкой01:37:35
для создания динамических данных я собираюсь установить01:37:39
данные Neta и измените заголовок и01:37:43
описание на основе значения в01:37:47
EnV-файл, чтобы мы могли придумать название веб-сайта.01:37:53
и01:37:54
описание Динамическое в зависимости от значения01:37:57
в файле EnV импортируйте метаданные из01:38:01
далее, а затем в файле EnV Определить01:38:06
название следующего общедоступного приложения, какое бы вы ни выбрали01:38:09
как здесь, в моем случае это следующий Amazon01:38:13
V2 вы можете установить сайт электронной коммерции01:38:16
имя, если вы не установили эти значения01:38:20
будет использовано значение по умолчанию, пришло время01:38:23
получить новейший продукт и рекомендуемый продукт01:38:26
из обслуживания продукта сделать01:38:29
функция асинхронная и внутри этой функции01:38:33
под названием «Сервис продукта» становится представленным и01:38:36
обслуживание продуктов, получайте последние версии и ставьте01:38:39
результат внутри рекомендуемых продуктов и01:38:42
новейшие продукты, импорт продуктов, обслуживание01:38:47
из папки «Службы», а затем пришло время01:38:50
использовать, использовать результат в возврате01:38:54
раздел Рекомендуемый продукт. Определите01:38:57
Разработчик использует Карла из пользовательского интерфейса Daisy, чтобы сделать это01:39:01
закруглено, установите поле сверху на четыре и сделайте01:39:05
это полная ширина внутри, создайте jsx01:39:09
подобное выражение для функционального продукта01:39:12
вызовите функцию карты и получите товар01:39:15
и индекс, затем Определите Dev, установите ключ01:39:19
к идентификатору продукта, чтобы сделать его уникальным01:39:22
и установите идентификатор этого div на слайд01:39:26
Штриховой индекс для первого продукта равен01:39:29
будет нулевой слайд, второй продукт01:39:31
второй слайд и т. д. установите имя класса на01:39:34
Элемент карусели сделайте его относительным и полным01:39:37
ширина внутри этого Определить импортированную ссылку01:39:41
по ссылке Nexus SL и установите для HRI значение/01:39:46
продукт / фрагмент продукта поместите изображение01:39:50
элемент здесь устанавливает источник изображения на01:39:53
продукт. Баннер и установите имя класса на01:39:57
с полным, чтобы сделать его полным и01:39:59
альтернативный текст к товару. имя, чтобы получить01:40:02
избавьтесь от этого далекого имени, нажмите «Быстрое исправление»01:40:05
и отключите элемент изображения для01:40:09
весь файл, имея это нет01:40:12
предупреждение в этой строке, сохраните код, ахах01:40:15
здесь у нас есть карусель, но ее нет01:40:18
иметь стрелки для переключения между изображениями01:40:21
создать кнопку со стрелкой для навигации между01:40:25
слайд-изображения Определите Dev и установите класс01:40:28
назовите это, а затем внутри этого. Определите два01:40:33
якорь, первый якорь слева01:40:36
кнопка и вторая для правой кнопки01:40:40
установите hre на слайд и значение01:40:44
после слайда Dash основан на индексе01:40:47
если мы на первом изображении, когда ты01:40:50
пользователь нажимает на стрелку влево, нам нужно01:40:54
покажи последнее изображение, иначе нам придется01:40:58
уменьшить индекс на один очень похожий01:41:01
логика применима к правой кнопке и01:41:04
вот результат, между которым мы можем переключаться01:41:06
изображения отличные, вот и все01:41:09
карусель, давай закроем ее и перейдем к01:41:12
новейший продукт вместо того, чтобы получать от01:41:15
статические данные, которые я собираюсь получить последние01:41:18
товар из базы сохранить код01:41:21
и вот мы продукты вот01:41:25
Динамический из базы данных Клик-коннект01:41:28
на этой странице данные не являются динамическими01:41:30
давайте сделаем так, чтобы этот Dynamic тоже перешел на страницу.01:41:33
TSX в приложении slf, передняя часть продукта SL/Slug01:41:38
и WR перед функцией сведений о продукте01:41:41
Определите функцию генерации метаданных и01:41:45
Экспортируйте его, мы собираемся изменить01:41:47
название страницы сведений о продукте на основе01:41:51
название продукта, чтобы мы получили параметры01:41:56
и из параметров получить пулю, а затем из01:41:59
продукт, услуга, импортированный звонок, получи01:42:02
slug и передайте его в качестве параметра01:42:06
эта функция затем получает продукт и01:42:09
если оно равно нулю, покажите сообщение об ошибке01:42:13
в противном случае установите заголовок и описание01:42:16
на основе названия и описания продукта01:42:19
сохраните код и вот оно01:42:22
классические ручки в деталях продукта01:42:25
вместо того, чтобы получать продукт с производства01:42:28
делать продукты, из которых мы собираемся их получить01:42:30
функция изменения обслуживания продукта, чтобы01:42:34
async и замените эту строку на эту01:42:38
позвоните в службу поддержки продуктов Aade, получите Slug01:42:41
и передайте фрагмент из URL-адреса как01:42:45
параметр, который нужно получить с помощью функции сохранения пула01:42:47
код и вот мы, вот данные01:42:52
подробности поступают из базы данных01:42:56
прежде чем закончить этот урок, давайте исправим01:42:59
у нас есть проблема на слабой странице01:43:04
добавить в компонент карты, это клиентская часть01:43:09
компонент, который мне нужен для преобразования продукта01:43:12
с сервера на простой JavaScript01:43:16
объект, чтобы избавиться только от этого предупреждения01:43:20
простой объект может быть передан клиенту01:43:22
компонент из серверных компонентов сделать01:43:25
что я собираюсь определить помощника01:43:28
функция для преобразования документа doc mongodb в01:43:33
Объект JavaScript перейдет в живые утилиты и01:43:38
Определите новую функцию с именем Convert Doc.01:43:41
чтобы возразить, получите документ любого типа и01:43:45
преобразовать идентификатор здесь идентификатор имеет тип01:43:49
Идентификатор объекта mongodb в строку, а затем01:43:53
вернуть документ сохранить его вернуться к01:43:57
страницу и здесь вызовите конвертацию дока в01:44:00
возражать против импорта товара импорт01:44:04
преобразовать док в объект из сохранения утилит01:44:08
его и перезапустите проект, затем обновите01:44:13
страница сведений о продукте на этот раз там01:44:16
это не ошибка, мы можем сделать то же самое для01:44:20
домашнюю страницу, когда мы передаем продукт на01:44:24
товар, который мы можем обернуть внутрь01:44:28
преобразовать документ в объект, подобный этому обновлению01:44:33
страница и домашняя страница и подробности01:44:36
страница работает как мы хотим и нет01:44:39
ошибка или предупреждение в консоли отлично подходит для01:44:42
в этом уроке мы меняем источник данных01:44:45
из статических данных. TS в динамический mongodb01:44:50
база данных данных и мы меняем продукт01:44:52
название на основе названия продукта, которое01:44:56
это об этом уроке до следующего урока01:45:02
[Музыка]01:45:03
пока, на этом уроке мы собираемся01:45:06
реализовать аутентификацию пользователя для этого01:45:09
цель, которую мы собираемся установить последнюю версию01:45:12
версию NEX o с помощью этой команды вы01:45:15
если хотите, можете использовать pnpm вместо npm01:45:20
для этого вам нужно установить pnpm01:45:23
во-первых, это менеджер пакетов для npm и01:45:27
это намного быстрее и лучше, чем npm для01:45:30
установка пакетов открывает новый терминал01:45:33
и установите pnpm во время01:45:36
записываю это видео, версия пятая01:45:39
должен быть установлен с использованием бета-версии знака01:45:42
поэтому я просто устанавливаю его вот так:01:45:46
время просмотра этого видео у вас может быть01:45:48
пятая версия стабильна, поэтому вы можете использовать01:45:51
это без знака бета, вот и все01:45:54
установлено, давайте установим форму реагирования01:45:58
с использованием01:45:59
pnpm установите или добавьте все, что захотите01:46:02
работает хорошо, у нас есть форма реагирования на01:46:06
создайте форму входа, и пришло время установить01:46:11
переменные среды для следующего раза они01:46:14
отключены URL и O secret, открытый файл EnV01:46:20
и установите URL-адрес в столбце «Локальный хост»01:46:23
3000 и не по секрету что-то секретное01:46:27
Следующий шаг — создание офф. ТС для создания01:46:30
конфигурация для следующего запуска в эксплуатацию01:46:34
папку щелкните правой кнопкой мыши, выключите новый файл. ТС01:46:40
первый шаг — экспорт константы конфигурации01:46:45
как объект в этом объекте мы собираемся01:46:48
настроить следующую аутентификацию01:46:53
первый шаг – определить поставщика, который это01:46:56
массив, поэтому у нас есть возможность определить01:46:59
Google GitHub и другие01:47:03
поставщики аутентификации, но вот мы здесь01:47:07
собираюсь использовать поставщика учетных данных для01:47:10
аутентифицироваться по электронной почте пользователя и паролю01:47:14
Итак, что нам нужно сделать, это позвонить01:47:16
поставщик учетных данных, импортированный из Nex01:47:20
выключенный01:47:21
и в качестве параметра этой функции передайте01:47:24
объект, содержащий учетные данные и01:47:27
в учетных данных Определите адрес электронной почты и01:47:30
следующий шаг – определение пароля01:47:33
авторизованная функция в учетных данных01:47:35
провайдер принимает учетные данные как01:47:38
параметр и когда пользователь вводит адрес электронной почты и01:47:41
пароль и нажмите «Войти»01:47:44
функция обрабатывает запрос, поэтому он01:47:48
ясно, что нам нужно сделать здесь в первую очередь01:47:50
Прежде всего нам нужно подключиться к01:47:52
импорт базы данных, подключение к базе данных, если есть01:47:55
нет возврата полезной нагрузки, ноль, не аутентифицирован01:48:00
затем импортируйте модель пользователя и позвоните, чтобы найти ее01:48:04
найти электронное письмо по электронной почте01:48:07
со страницы входа и получить пользователя, если01:48:11
пользователь существует, проверьте пароль, используя01:48:13
пакет bcrypt импортирован следующим образом и01:48:18
затем, если он соответствует true, верните пользователя01:48:21
это успешная аутентификация, и если01:48:24
есть ошибка, верните ноль, чтобы показать01:48:26
сообщение об ошибке перейдите к модели пользователя и01:48:30
поставь вопросительный знак сразу после модели, чтобы01:48:34
избавиться от ошибки в средней версии сохранить01:48:38
код и перейдем к следующему шагу01:48:42
это сразу после определения провайдера01:48:46
Страницы, потому что у нас будет каст01:48:50
персонализированные страницы для входа и01:48:52
зарегистрируйтесь после Pages Define обратных вызовов01:48:56
в следующем офф конфиге и первом01:49:00
обратный звонок разрешен вот01:49:04
уполномоченный01:49:05
функция, она будет запущена пользователем01:49:09
аутентификация мы принимаем запрос и выключаем01:49:13
в качестве параметра внутри у нас есть01:49:15
защищенный путь, поэтому пользователь должен быть01:49:19
авторизованный доступ оплата доставки01:49:22
Администратор профиля размещения заказа и слайд заказа01:49:25
в порядке, я использую регулярное выражение для01:49:29
обложка Динамические значения для идентификатора заказа, если01:49:34
URL-адрес находится в этом списке, затем проверьте01:49:39
аутентификация, если выключено, возвращает значение null01:49:42
ложный пользователь не может получить доступ к этой странице01:49:45
и если у нас есть значение для аутентификации01:49:48
используя двойной восклицательный знак, отметьте его01:49:50
возвращает true, в противном случае возвращает true01:49:53
означает, что все остальные страницы будут01:49:56
общедоступно для всех пользователей, сохраните код и приступайте01:50:01
для следующей функции обратного вызова это JWT01:50:05
функция в этой функции мы принимаем пользователя01:50:08
запускать сеанс и токен, если пользователь существует01:50:12
мы заполняем токен. пользователь с пользователем01:50:17
информация из базы данных01:50:20
если триггер — обновление, это означает, что01:50:23
мы обновляем профиль пользователя, и если01:50:26
сеанс существует, затем обновите пользователя с помощью01:50:30
обновленный адрес электронной почты и имя, пойдем01:50:33
последняя функция обратного вызова, это сеанс01:50:37
и то, что мы здесь сделали, это заполнить01:50:40
сессия. пользователь с токеном. пользователь из01:50:44
предыдущий шаг, когда мы вызываем use01:50:47
сессия, эта функция возвращает пользователя01:50:50
информация для нас на стороне клиента01:50:53
аутентификация, сохраните код и переходите к01:50:56
следующий шаг нам просто нужно01:51:00
экспортировать константу этого объекта из Nex выкл.01:51:05
функция импорта будет отключена по умолчанию01:51:09
импортировать из следующего пакета и пройти01:51:12
конфигурация как параметр NEX01:51:15
выключена функция, затем они структурируют01:51:18
результат и и Экспортировать получение и публикацию из01:51:22
Функция отключения объекта обработчика, мы используем ее01:51:26
многое в этом курсе: войдите и выйдите01:51:29
для обработки подписи пользователя и подписи пользователя01:51:33
сохраняем код, переходим к следующему шагу01:51:37
Следующий шаг – определение середины. ТС в01:51:40
корень проекта перейти в корень по адресу01:51:42
пустое место, щелкните правой кнопкой мыши новый файл01:51:46
середина. Первая строка кода TS в01:51:50
средняя версия. TS — это экспорт этого кода01:51:53
отключена как средняя версия с самого начала. Это это01:51:58
мы определили здесь, имея эту строку01:52:01
кода все URL будут переданы в01:52:04
средняя версия и аутентификация пользователя01:52:07
будут проверены на основании уполномоченного01:52:11
функция, которая у нас здесь есть, я собираюсь01:52:14
избавиться от некоторых URL-адресов, включая изображения01:52:17
API, поэтому мне нужно добавить01:52:20
config экспортируйте его и в сопоставлении получите01:52:24
избавиться от статических изображений API и значка избранного01:52:29
Следующий шаг — создание маршрута. ТС в выключенном состоянии/01:52:35
следующий01:52:36
папка off/ перейдите в папку API и создайте01:52:41
выключить API папки, выключить новую папку внутри01:52:46
что01:52:47
создать точку, сделать следующее внутри эскара01:52:51
скобки, щелкните правой кнопкой мыши новую папку и01:52:54
внутри этого маршрута Define. ТС щелкните правой кнопкой мыши01:52:59
новый маршрут файла. TS в этом файле экспорта01:53:03
получить и опубликовать от li/off, чтобы бывший01:53:07
экспорт get и post будет использоваться в01:53:12
этот файл для аутентификации пользователя для получения01:53:15
и размещать запросы, следующим шагом будет создание01:53:19
компонент поставщика для обертывания всего01:53:23
приложение перейти в папку компонентов новое01:53:26
файловый провайдер. TSX вот код для01:53:30
компонент поставщика Определить асинхронную функцию01:53:34
провайдер это серверный компонент сайта01:53:36
серверный компонент и отключить импорт из01:53:40
выключенный. Поставщик TS и сеансов из следующего01:53:44
выключить/реагировать на этот компонент принять01:53:47
дети в качестве реакции и отзовитесь как01:53:53
функцию Асинга и вернуть результат01:53:56
на сеансе, затем оберните детей в01:54:01
поставщик сеансов и передать сеанс как01:54:05
реквизит для компонента провайдера сеанса01:54:08
так что дети будут макет и01:54:11
у нас есть доступ к сеансу использования01:54:15
сессия в ближайшее время на протяжении всего01:54:17
клиентские компоненты, чтобы сделать это, перейдите в раздел01:54:21
макет. TSX в папке приложения и справа01:54:24
после тела Определить поставщика переместить разработчика01:54:29
внутри провайдера и импортируйте его из01:54:32
папку компонентов, сохраните код и01:54:35
давайте перейдем к следующему шагу, здесь мне нужно01:54:39
прежде всего создать форму входа01:54:43
создать папку для входа и создать форму01:54:46
Компонент в приложении, щелкните правой кнопкой мыши по значку01:54:50
внутри этой новой файловой формы. TSX первый01:54:56
шаг - определение компонента формы и01:55:00
Экспортируйте его, а затем получите этот сеанс, используя01:55:04
использовать сеанс, импортированный из Nex, выключить/реагировать01:55:09
и переименуйте данные в использование сеансового вызова01:55:13
поиск паров из следующей навигации SL и01:55:17
извлеките URL-адрес обратного вызова в запросе01:55:20
строку и поместите ее в URL обратного вызова01:55:24
также нам нужно перенаправить пользователя в этом01:55:27
страница, поэтому мне нужно использовать Router Hook01:55:31
от Nex SL01:55:33
навигация прямо перед формой Определить тип01:55:37
входы и как объект, который содержит01:55:43
адрес электронной почты и пароль, а затем сразу после использования01:55:47
маршрутизатор Определить форму использования01:55:50
Крюк из формы реагирования, импортированной из01:55:53
Форма реагирования на крючок передает значение по умолчанию01:55:57
для этой формы адрес электронной почты и пароль01:56:00
равно строке МТС и получить регистр01:56:04
обрабатывать отправку и формировать состояние после использования01:56:08
сформировать хук после этого Определить эффект использования01:56:12
и если сеанс существует, перенаправить пользователя на01:56:16
URL обратного вызова, потому что если пользователь01:56:19
уже авторизован, нет необходимости01:56:22
на этой странице, и нам нужно перенаправить01:56:24
пользователь к использованию импорта URL обратного вызова01:56:28
эффект от реакции, после этого пора01:56:31
Определить функцию отправки формы01:56:36
тип возвращаемого значения для отправки — submit01:56:39
Обработчик из формы реагирования с входами01:56:43
как общий тип, это асинхронная функция01:56:47
которые принимают форму и в той форме, в которой мы01:56:50
извлеките адрес электронной почты и пароль и позвоните01:56:53
функция входа из следующего SL реагирует01:56:59
первый параметр — это поставщик, который это01:57:01
учетные данные, а второй параметр — это01:57:03
полезная нагрузка, которая включает в себя электронную почту и01:57:06
пароль, давайте перейдем к части «Возвращение»01:57:10
то, что я собираюсь вернуть, это разработчик01:57:13
максимальное значение составляет01:57:16
24 R с использованием Max и небольшими предметами.01:57:21
центр использует тележку для создания набора границ01:57:25
цвет фона и создание полей01:57:28
вертикально внутри, что создает тело тележки01:57:32
и установите шрифт заголовка для входа в систему, сохраните01:57:35
файл выбрать товар добавить в корзину перейти01:57:40
страницу корзины и перейдите к оформлению заказа, как01:57:43
видишь, страницы входа нет, поехали01:57:48
для этого в входе щелкните правой кнопкой мыши новый01:57:51
страница файла. TSX в импорте страницы входа01:57:57
метаданные и форма из папки входа01:58:01
и установите заголовок этой страницы для подписи01:58:04
затем экспортируйте функцию Asing и войдите в систему.01:58:09
это серверный компонент и форма возврата01:58:14
компонент из той же папки сохраните01:58:17
файл вернуться к форме в самом01:58:21
начинаем делать это клиентским компонентом01:58:25
избавься от этой ошибки офигенно хорошо мы01:58:29
готовы приступить к формированию полей ввода01:58:32
для электронной почты и пароля сразу после01:58:34
заголовок fun, проверьте строку quer на наличие01:58:39
ошибка в URL-адресе, если есть01:58:42
ошибка покажите сообщение об ошибке убедитесь01:58:45
что ошибка равна учетным данным01:58:48
войдите в систему и, если он отображается, отобразите неверный адрес электронной почты01:58:52
пароль, в противном случае покажите ошибку01:58:54
сообщение в том виде, в котором оно есть, используйте текстовое сообщение об ошибке, чтобы01:58:58
показать ошибку красным цветом после этой проверки01:59:03
успешный, если все будет01:59:06
успешно, если у нас есть успешный запрос01:59:09
строка показывает ее значение зеленым цветом01:59:14
цвет, после этого пришло время создать01:59:16
форма, установленная при отправке, для обработки формы отправки01:59:20
функция отправки с использованием формы реагирования01:59:24
и в качестве первого файла электронной почты формы поля ввода01:59:29
в div создайте метку и поле ввода01:59:33
вызов01:59:34
зарегистрироваться и поле ввода для регистрации01:59:37
электронная почта, сделайте это обязательным и используйте это01:59:41
шаблон, чтобы убедиться, что электронное письмо01:59:44
действительно, если есть ошибка, покажите01:59:47
сообщение об ошибке для этого поля ввода секунда01:59:51
Поле ввода предназначено для ввода метки пароля01:59:55
окно сообщения об ошибке вот результат и01:59:59
последняя - это кнопка в создании div02:00:04
кнопка типа БТН первичная полная с02:00:09
отключить, если отправка верна, покажите02:00:13
spinner, заголовок этой кнопки02:00:17
войдите в систему Давайте проверим введите неправильную информацию02:00:21
войдите в систему, адрес электронной почты недействителен, войдите в систему02:00:24
неверный адрес электронной почты или пароль и данные.02:00:29
TS введите правильный адрес электронной почты и пароль и02:00:34
войдите в систему, круто, мы успешно подписались02:00:38
и мы будем перенаправлены на домашнюю страницу02:00:41
поэтому нам нужно вместо этого показать имя пользователя02:00:44
кнопки входа в меню. TSX на02:00:48
самое начало компонента меню справа02:00:51
перед возвратом Определить обработчик выхода02:00:55
и позвоните, выйдите, импортируйте его из следующего02:00:58
выключить/отреагировать и передать URL обратного вызова02:01:03
страницу входа и в части «Возвращение» получите02:01:06
избавиться от Ли для входа в систему и заменить его02:01:10
с помощью этого кода, если сеанс существует, получите02:01:14
сеанс от использования сеанса от следующего-выкл.02:01:19
из/реагировать вот так и переименовывать данные02:01:23
к сеансу, если сеанс существует и02:01:25
сессия. пользователь существует, это означает, что пользователь02:01:28
аутентифицирован, поэтому мне нужно отобразить02:01:31
этот Ли в LI создает раскрывающийся список02:01:35
с помощью пользовательского интерфейса Daisy создайте метку и внутри02:01:40
которые показывают имя пользователя на этикетке и02:01:44
используйте этот SVG, чтобы создать морковку под ним02:01:47
должно быть похоже на02:01:49
раскрывающийся список, а затем, когда пользователь нажимает02:01:54
на имени пользователя этот Ур появляется в этом02:01:58
UL У меня есть элемент списка, и это только знак02:02:02
на следующем уроке мы добавим профиль02:02:04
историю заказов и другие пункты меню, чтобы02:02:08
этот UL, в противном случае просто покажите вход02:02:11
кнопка, но на этот раз мне нужен позывной02:02:14
в следующий раз SL отреагирует вот так02:02:19
вот и у нас есть Джон, если я нажму I02:02:22
нужно выйти из системы, когда я нажимаю кнопку «Выйти»02:02:25
будет выполнен выход и перенаправлен на02:02:28
страница входа, попробуем еще раз, введите02:02:32
знак администратора example.com, вход здесь02:02:37
Джон, выходим, отлично, мы успешно02:02:41
реализована аутентификация пользователя в этом02:02:44
урок до следующего урока02:02:47
пока-пока02:02:49
[Музыка]02:02:51
в этом уроке мы собираемся реализовать02:02:53
Пользователь02:02:54
регистрация, давайте начнем с создания02:02:57
маршрут02:02:58
Обработчик по этому поводу02:03:00
адрес02:03:02
API выключен, щелкните правой кнопкой мыши новую папку02:03:08
зарегистрируйтесь внутри этого щелкните правой кнопкой мыши новый02:03:11
маршрут файла.02:03:15
ТС, я собираюсь создать API02:03:19
чтобы получить информацию о пользователе и создать02:03:23
новый пользователь в02:03:25
база данных, это почтовый API, поэтому я экспортирую02:03:28
константа02:03:30
post равен асинхронной функции, которая02:03:33
принять запрос типа следующий запрос02:03:37
импортировано из следующего02:03:40
сервер получает адрес электронной почты с именем пользователя и02:03:44
пароль из полезных данных запроса с использованием02:03:47
запрос. Функция Json, это Asing02:03:51
функция подключения к импорту базы данных02:03:55
DP-соединение в прямом эфире02:03:58
папку, затем создайте хеш-пароль, используя02:04:02
пакет bcrypt02:04:06
импортировано сохранить код переместить этот импорт02:04:11
в самом конце сразу после упаковки02:04:16
Импорт и вот мы имеем02:04:19
хешированный пароль, мы передаем пароль02:04:23
простой текстовый пароль от пользователя и02:04:27
создать хеш02:04:30
пароль, затем используя объект модели пользователя02:04:34
из папки «Модели»02:04:39
импортированный пропуск с именем пользователя по электронной почте и02:04:43
пароль, затем получите нового пользователя mongos02:04:48
объект02:04:49
здесь мы готовы создать этого пользователя в02:04:52
тот02:04:53
база данных, чтобы сделать это, создайте TR-ловушку02:04:56
блок, чтобы отловить любую ошибку, если есть02:05:00
ошибка при создании пользователя в базе данных02:05:04
вот код для создания TR02:05:07
ловить02:05:09
заблокировать вызов02:05:11
Функция сохранения на новом02:05:14
пользователь02:05:16
объект, и если все в порядке, К.02:05:20
верните этот ответ02:05:23
цвет02:05:26
Пользователь сообщения API создан и02:05:30
тот02:05:31
статус 2011, потому что мы создали новый02:05:36
ресурс на основе restful API02:05:40
Код ответа должен быть 2011, если есть02:05:43
ошибка, код состояния 500 сервер02:05:47
ошибку и вернуть02:05:50
сообщение великолепное, мы успешно создали02:05:54
серверный API для создания нового пользователя02:05:57
и пришло время приступить к созданию02:05:59
часть интерфейса, которая нам нужна для создания формы.02:06:03
TSX добавить этот адрес идти02:06:07
в приложение02:06:10
передний правый клик новый02:06:13
папка02:06:16
зарегистрировать папку внутри этого нового файла02:06:20
форма. TSX это клиентская часть02:06:26
компонент, который создает форму для02:06:29
регистр02:06:30
пользователь в самом начале02:06:33
Определите входные данные, введите их02:06:37
включает все поля в электронном письме с именем пользовательского интерфейса02:06:42
пароль и подтвердите02:06:45
пароль, затем создайте форму02:06:49
компонент и экспортировать Thea this02:06:53
компонент внутри этого02:06:55
компонент, который нам нужен, чтобы получить доступ к02:06:59
следующий сеанс после сеанса с использованием использования02:07:03
сеанс, импортированный из следующего SL, реагирует02:07:07
Следующее, что нам здесь нужно, это02:07:11
параметры запрашиваемой строки02:07:13
параметры, к которым мы получаем доступ, используя поиск02:07:16
параметры из следующей косой черты02:07:20
навигация также нам нужно перенаправить пользователя02:07:23
после успешного входа в систему или02:07:26
регистрация, поэтому нам нужен доступ к использованию02:07:30
роутер из следующего SL02:07:33
навигация получить URL-адрес обратного вызова от02:07:36
строка quer в02:07:39
URL-адрес и форма использования звонка.02:07:43
из реагирующего крючка02:07:46
входные данные формы этой формы02:07:49
имеет тип input и значение по умолчанию02:07:53
для02:07:55
имя электронной почты и02:07:58
пароль и подтверждение пароля пусты02:08:02
извлечение строки, дескриптор регистра, отправка02:08:05
и получить значения и сформировать состояние от использования02:08:09
сформировать хук из реактивного хука02:08:12
форма, сохраните код, перейдите к следующему02:08:16
Шаг Определите пользовательскую функцию из реакции02:08:21
проверьте сеанс, если сеанс и02:08:24
сессия. пользователь существует, это означает, что мы02:08:28
уже вошедший пользователь нет02:08:31
необходимо создать нового пользователя для входа в систему02:08:34
пользователя, поэтому мы перенаправляем пользователя на02:08:37
URL обратного вызова, следующий шаг02:08:41
создание формы отправки при нажатии пользователем02:08:45
кнопку регистрации после ввода своего02:08:48
информация, которая нам нужна, чтобы справиться с этим02:08:51
запросить это02:08:53
функция, имя функции - форма02:08:55
отправьте его типа Semimit Handler02:08:58
импортируйте этот тип из формы реагирования02:09:02
и данные поступают в эту функцию02:09:05
введите ввод, это асинхронная функция, которая02:09:08
принять форму структуры и получить02:09:12
имя электронная почта02:09:14
пароль от02:09:17
это и и при попытке поймать вызов этого02:09:21
API SL API SL выключить/зарегистрировать, это точно02:09:27
маршрут, который мы определили02:09:30
вот метод02:09:33
опубликовать тип контента02:09:37
Json и в тело передаем полезную нагрузку02:09:41
используя json.02:09:44
тяжко, проверь результат, если он в порядке02:09:47
красный направляет пользователя на страницу входа и02:09:51
передайте URL обратного вызова и покажите это02:09:54
аккаунт сообщения был02:09:56
создано в противном случае получить02:10:00
результат и шоу и02:10:04
через сообщение об ошибке на основе02:10:08
результат, если есть ошибка, покажите02:10:11
ошибка при использовании02:10:14
тост, давайте установим реакцию горячего тоста02:10:19
вот сайт этого02:10:22
пакет перейти к02:10:24
документация, которую нам нужно установить, реагирует02:10:27
горячий тост перейти к терминалу открыть новый02:10:30
установка терминала pnpm, горячая реакция02:10:34
тост, вот и все, следующий шаг будет02:10:39
компоненты02:10:42
папка рядом с приложением, перейдите к компонентам02:10:46
папку и создайте новый новый файл с именем02:10:51
клиентские провайдеры.02:10:53
TSX в этом файле создайте02:10:57
компонент реагирования, например02:11:00
это имя этого компонента02:11:03
функция экспорта поставщика клиента по умолчанию02:11:07
клиент-провайдер принимает детей как02:11:10
реквизит типа02:11:13
реагирующий узел, и я возвращаю здесь02:11:17
пустой контейнер с тостером02:11:20
и детский тостер является компонентом из02:11:23
отреагировать на пакет с горячими тостами, взяв этот I02:11:27
может показывать всплывающее сообщение в02:11:31
приложение, это компонент на стороне клиента02:11:35
поэтому я использую клиент use в самом02:11:38
начало этого файла пора использовать02:11:42
этот компонент02:11:45
внутри провайдера. ТСХ02:11:48
так в провайдере. ТСХ02:11:51
заворачивать детей02:11:55
импорт внутреннего поставщика клиента02:11:59
вот так сохраните код и вернитесь к02:12:03
форма.02:12:06
Команда TSX I или контрольное пространство на02:12:12
Windows и импортировать тост из React Hot02:12:17
тост02:12:18
если есть ошибка, вы получите02:12:20
сообщение об ошибке в виде всплывающего уведомления02:12:24
сохранение экрана02:12:26
это, и давайте перейдем к следующему шагу, здесь мы02:12:29
собираются02:12:30
форма пользовательского интерфейса реестра02:12:35
форма сразу после отправки02:12:38
Обработчик возвращает div с тем же классом02:12:42
имя в качестве формы входа внутри этого создания02:12:46
еще один ди с телом карточки с именем класса02:12:50
заголовок один02:12:52
зарегистрируйтесь и пришло время создать02:12:54
первое поле ввода, его имя пользователя, сохраните02:12:59
код02:13:01
и заходим в папку регистрации02:13:05
новая страница файла02:13:08
сделай TSX, я покажу форму02:13:14
компонент внутри страницы.02:13:16
TSX вот это02:13:19
код, что я сделал, это02:13:22
для создания компонента реестра это02:13:27
серверный компонент, установив параметр Sync It02:13:30
сервер02:13:31
компонент, и я возвращаю компонент формы02:13:35
это клиентский компонент из того же02:13:37
папка это02:13:40
также можно установить количество экспорта метаданных02:13:46
метаданные для установки установите заголовок этого02:13:49
страница для регистрации сохранить02:13:54
это и здесь нажмите на знак02:13:58
в я собираюсь создать ссылку для02:14:02
зарегистрироваться перейти войти02:14:06
форма в самом начале сразу после02:14:10
тот02:14:11
форма создания разработчика, нужна учетная запись, рендеринг02:14:16
ссылка из02:14:18
н/02:14:20
имя класса ссылки02:14:23
ссылка и адрес - страница регистрации02:14:27
но мне нужно передать URL обратного вызова02:14:30
страница регистрации с использованием строки запроса02:14:34
сохраните код, круто, нужна учетная запись02:14:37
зарегистрированный нажмите на02:14:39
если мы получим эту ошибку при импорте02:14:43
компонент, который требует эффекта от использования в02:14:45
форма. TSX в реестре02:14:49
папка, которую нам нужно определить как клиент02:14:54
компонент02:14:56
классный регистр и имя подано02:14:59
давайте создадим пароль электронной почты на02:15:03
и подтверди пароль иди02:15:08
обратно в форму. TSX — это прокрутка02:15:13
вниз сразу после того, как этот разработчик создаст еще один02:15:17
Разработчик для02:15:19
электронная почта вот электронная почта02:15:21
метка поля02:15:24
электронная почта зарегистрировать электронную почту в ответном крючке02:15:27
форма требуется и следующая02:15:32
валидация — это проверка шаблона02:15:35
электронная почта, если есть ошибка, покажите02:15:37
ошибка02:15:38
сообщение сохраните код, чтобы получить02:15:42
электронная почта в пользовательском интерфейсе, следующий файл — пароль02:15:47
из того, что у меня есть02:15:49
пароль и последнее слово здесь — подтверждение02:15:54
пароль это разница в реестре02:15:59
функция этого поля I02:16:04
вызовите, я определяю функцию проверки, которую она получает02:16:08
значение этого поля ввода и проверьте его02:16:12
с паролем заполнил это02:16:15
один, если они не равны друг другу02:16:19
Я возвращаю этот пароль сообщения об ошибке02:16:22
должен02:16:23
соответствие последнему элементу в этой форме является02:16:26
кнопка, давайте придадим форму регистру кнопки02:16:31
кнопка установить имя класса на основное отключение02:16:36
если мы отправляем форму и02:16:39
если он отправляет, поставьте лайк Spiner02:16:45
это и если подача будет доведена до конца02:16:48
покажи спиннер типа02:16:51
это после этого St создайте02:16:54
разделитель и визуализировать02:16:59
У такого div уже есть учетная запись02:17:02
импортировать ссылку из02:17:05
nexlink и если у пользователя есть учетная запись02:17:09
должен быть перенаправлен на страницу входа02:17:12
сохраните код, ах, вот это02:17:16
разделитель хорошо, формируем регистр02:17:19
экран, давайте нажмем на регистрацию без02:17:22
передача каких-либо данных или мне нужно обернуть их02:17:26
а02:17:27
форма сразу после H102:17:31
создайте форму и установите отправку в02:17:35
обработать функцию отправки из хука реакции02:17:38
форма и передача формы отправки, которую мы создали02:17:42
здесь как параметр для обработки отправки02:17:45
функцию, затем переместите02:17:48
целиком, затем переместите все глубины внутрь02:17:53
четыре свитка02:17:57
вниз, выберите всех разработчиков, пока не зарегистрируетесь02:18:01
кнопка вырезать их и переместить внутрь02:18:05
сформировать окончательную форму02:18:09
этого jsx должна быть такой формы02:18:14
и все входные данные02:18:16
diff вот форма регистрации, давайте02:18:20
нажмите на регистрацию, как вы увидите02:18:22
проверка работает введите имя02:18:27
пароль электронной почты, давайте введем другой02:18:31
пароль пароль должен совпадать и02:18:34
такой же02:18:35
работает и нажмите02:18:38
регистр02:18:40
был создан потрясающий аккаунт, я в нем02:18:43
страницу входа и введя02:18:48
пароль и адрес электронной почты и нажмите «подписать»02:18:51
в Я войду в систему и у меня есть02:18:55
пользователь Джейн здесь, прежде чем закончить это02:18:59
урок, давайте выйдем из системы и пойдем регистрироваться02:19:02
страницу и попробуйте создать дубликата пользователя02:19:05
и нажмите «Зарегистрироваться», вот ошибка02:19:08
сообщение об ошибке дублирования ключа для пользователей02:19:13
индексный адрес электронной почты Джейн дублируется02:19:18
мы можем совершить эту ошибку гораздо чаще02:19:20
лучше пойти в форму. TSX и зарегистрируйтесь02:19:24
папка и в подвохе02:19:26
блокировать02:19:28
Определить ошибку, равную02:19:31
если02:19:33
ошибка.02:19:37
сообщение существует и02:19:42
ошибка02:19:44
сообщение сделать индекс02:19:50
e1100 это дубликат02:19:54
ключ равен нулю, это означает, что если02:19:58
сообщения начинаются с этого02:20:04
нить02:20:07
затем02:20:11
затем напишите письмо02:20:14
является02:20:16
дублировать, иначе показать ошибку02:20:19
сообщение02:20:21
как это02:20:23
использует этот код и02:20:26
тогда, если ошибка покажет ошибку, в противном случае02:20:31
сообщение об ошибке сохраните код и нажмите02:20:34
зарегистрируйтесь, круто, это сообщение очень важно02:20:38
лучше отлично мы успешно реализовали02:20:41
регистрация пользователя в этом02:20:43
урок до следующего урока02:20:46
пока-пока02:20:48
[Музыка]02:20:50
в этом уроке мы собираемся создать02:20:52
Мастер оформления заказа и реализация доставки02:20:56
страница адреса и способа оплаты, позвольте нам02:20:59
начните с добавления типа адреса доставки в02:21:03
модель заказа. Модель открытого ордера TS. ТС в02:21:07
папку моделей и добавьте адрес доставки02:21:12
введите и экспортируйте его для адреса доставки02:21:15
у нас есть полное имя, добавьте адрес, улицу02:21:18
адрес Почтовый индекс города и страны все02:21:22
типа А02:21:23
Строка следующего шага указана в карточке использования.02:21:28
сохранить крючок, открыть этот файл в хуках02:21:31
папка в02:21:33
live и для корзины нам нужно добавить два новых02:21:39
Поля способ оплаты типа строки02:21:43
и адрес доставки типа доставки02:21:46
адрес, импортируйте его из заказа02:21:52
смоделируйте и приступайте к первоначальному02:21:54
укажите сразу после общей цены в первоначальной02:21:58
Государство установило значение метода оплаты для PayPal02:22:02
метод оплаты M по умолчанию — PayPal.02:22:05
и адрес доставки в пустые строки02:22:08
для всех02:22:10
затем перейдите в службу использования карт и02:22:15
Добавить новое02:22:17
функции02:22:19
для02:22:21
сохранение адреса доставки и оплаты02:22:24
метод, который я прокручиваю вниз сразу после02:22:27
функция уменьшения создать новую функцию02:22:31
установите имя для сохранения адреса доставки как02:22:35
параметр получить адрес доставки типа02:22:37
адрес доставки и позвонить, чтобы установить состояние02:22:41
объект магазина карт, затем передайте доставку02:22:45
значение адреса в качестве параметра для установки02:22:49
состояние, поэтому мы здесь обновили02:22:53
адрес доставки в зависимости от стоимости02:22:56
мы переходим к этой функции, мы используем это02:22:59
функция в адресе доставки для сделать02:23:03
то же самое для сохранения способа оплаты с использованием02:23:07
этот02:23:08
функция и перейдите к созданию оформления заказа02:23:11
bizard, мы собираемся создать пользовательский интерфейс02:23:15
компонент, показывающий шаги оформления заказа02:23:19
это идет в папку компонентов, щелкните правой кнопкой мыши02:23:23
новый02:23:24
получение файла02:23:26
шаги.02:23:28
TSX, вот код для этапов оформления заказа02:23:31
Компонент Определите этапы оформления заказа и02:23:34
Экспортировать по умолчанию это02:23:38
компонент входных реквизитов для этого02:23:40
компонент является текущим ток показывает02:23:43
текущее состояние или текущий шаг по умолчанию02:23:47
внутри ноль, что мы сформировали UL02:23:51
неупорядоченный список и используйте класс шагов02:23:56
из пользовательского интерфейса Daisy, внутри которого определяется02:24:01
массив элементов списка для отображения в виде шагов02:24:05
первый шаг — вход в систему, второй02:24:07
адрес доставки третий платеж02:24:10
метод и последний заказ02:24:14
преобразовать каждое строковое значение в набор An Li02:24:20
ключ к тому, чтобы сделать их уникальными и02:24:23
установите имя класса на шаг, но если оно актуально02:24:28
состояние больше, чем индекс, сделайте это02:24:33
основной, поэтому он будет активным02:24:36
в противном случае сделайте это как02:24:40
деактивирован как обычно, это означает, что мы02:24:43
не дошел до этого шага02:24:45
но в качестве значения отображается строковое значение02:24:50
внутри элемента списка, и вот мы здесь, мы02:24:53
можно использовать этапы оформления заказа как компонент02:24:57
на других страницах перейдем к следующему шагу02:25:01
и создайте форму адреса доставки, перейдите по ссылке02:25:06
щелкните правой кнопкой мыши на новой папке и доставке02:25:12
внутри этого создайте новую форму файла02:25:18
TSX в этом файле создает компонент формы02:25:22
и02:25:24
Экспортируйте компонент внутри этого02:25:29
импортировать использование маршрутизатора из следующего SL02:25:32
навигация, нам нужно перенаправить пользователя так02:25:35
нам нужно получить доступ к объекту маршрутизатора02:25:38
от использования крюка маршрутизатора, а затем вызова использования карты02:25:45
обслуживание и получите02:25:47
метод безопасного адреса доставки и02:25:50
перевозки02:25:51
состояние адреса от02:25:55
zustand затем вызовите форму использования из реакции02:25:59
Форма крючка и тип адреса доставки02:26:03
из заказа02:26:05
модель как тип данных этой формы для02:26:09
значение по умолчанию делает все из них пустыми02:26:13
строка во всех полях адреса доставки02:26:17
Следующий шаг — заполнение значения по умолчанию для02:26:22
такие адреса, как02:26:24
это в эффекте использования, импортированном из02:26:28
Реагировать на заданное значение из формы реагирования02:26:33
заполните полное имя fi на основе значения02:26:38
адреса доставки в карточке использования02:26:41
сервисный крючок сделайте то же самое для других02:26:45
поля, давайте перейдем к следующему шагу и создадим02:26:49
функция отправки формы, это тип submit02:26:53
Обработчик, импортированный из формы реагирования02:26:56
передать общий тип в службу доставки02:27:00
адрес и внутри него мы называем Safe02:27:03
адрес доставки и вставьте значения в02:27:07
форма как параметр этой функции02:27:10
затем перенаправить пользователя на следующую страницу02:27:13
что такое оплата02:27:14
здесь я собираюсь создать новый02:27:18
компонент внутри компонента формы, это02:27:22
сформировать входной компонент, это реакция02:27:24
компонент принимает идентификатор входного имени02:27:29
требуется ввод и шаблон для02:27:33
проверьте, что идентификатор типа данных является ключом02:27:37
адрес доставки, имя, строка обязательна02:27:41
является необязательным логическим значением и шаблоном02:27:44
необязательное правило проверки значения типа02:27:47
из формы реагирования на форму реагирования на форму и02:27:54
настроить регулярное выражение как02:27:57
интерфейс как общий тип02:28:01
для этого02:28:03
введите то, что я собираюсь вернуть сюда, это02:28:06
div, содержащий метку поля ввода02:28:10
и сообщение об ошибке на основе02:28:14
значения, переданные мимо02:28:17
реквизит для ввода формы02:28:20
компонент, прокрутите вниз, давайте перейдем к02:28:23
возвращение02:28:25
тот02:28:27
компонент, давайте перейдем к части «Возвращение»02:28:30
для формирования пользовательского интерфейса этого компонента в The02:28:33
Возвратная часть создать02:28:35
Мастер оформления визуализации Dev внутри Dev02:28:40
импортирован из папки компонентов02:28:43
текущее состояние таково, это означает, что мы02:28:46
находятся в02:28:47
адрес доставки Состояние создания разработчика02:28:52
мастер после оформления заказа, как и другие разработчики02:28:56
для входа и регистрации мы делаем разработку02:29:01
Выравнивание по центру и небольшая ширина тогда02:29:06
создать еще один div, установить имя класса на02:29:08
тело карты для создания02:29:10
отступы добавить первый заголовок к доставке02:29:14
адрес и создайте такую форму02:29:18
внутри формы использовать компонент ввода формы02:29:22
что мы определили02:29:24
здесь02:29:25
и установите идентификатор имени и правила проверки.02:29:32
это очень просто создать для ввода02:29:35
используя это02:29:36
компонент в конце концов создаст div для02:29:41
сформируем кнопку для следующего шага, давайте воспользуемся02:29:47
компонент формы внутри страницы. ТСХ02:29:51
Внутри папки доставки щелкните правой кнопкой мыши страницу.02:29:55
TSX, этот код очень прост, как знак02:29:58
на странице и зарегистрируйтесь, установите заголовок страницы02:30:01
использование метаданных экспорта констант для доставки02:30:05
адрес и сделать это02:30:08
Компонент и экспортная доставка по умолчанию02:30:12
адресная функция как асинхронная функция02:30:14
потому что это серверный компонент и02:30:16
компонент формы возврата, который является клиентом02:30:20
компонент сохранить02:30:22
код Давайте проверим02:30:25
результат перейти к02:30:28
домашняя страница выбрать товар добавить в корзину02:30:32
проверять02:30:33
выход администратора в примере входа с 1 по 6 вход02:30:38
в том виде, в котором TSX в доставке02:30:42
папку нам нужно сделать клиентом02:30:45
компонент02:30:47
в карточке использования02:30:48
сервис, чтобы избавиться от этой ошибки, перейдите к02:30:51
воспользоваться карточным обслуживанием и02:30:54
добавить платеж02:30:56
способ и доставка02:30:58
адрес, который нам нужен02:31:00
извлечь их из C для хранения02:31:04
функционировать как02:31:07
все в порядке, мы не передали никакой ошибки02:31:11
вход пользователя и мы приступаем к доставке02:31:13
адрес, мы готовы получить доставку02:31:16
адрес здесь отлично, давайте проверим, введите02:31:20
адрес и нажмите02:31:23
далее мы находимся на странице оплаты мы02:31:26
не реализовал эту страницу, поэтому мы получаем 40402:31:30
ошибка, но если я вернусь и обновлю как02:31:34
ты видишь02:31:36
данные были сохранены в доставке02:31:39
адрес для оформления оплаты02:31:44
страница метода02:31:47
вот план создания формы в02:31:49
оплата02:31:51
папка перейти вперед справа02:31:54
нажмите новую папку оплата новая02:31:59
форма файла.02:32:02
TSX в форме. TSX создать реакцию02:32:05
компонент и экспортировать файл02:32:08
этот02:32:09
компонент и внутри него получите02:32:12
доступ к маршрутизатору с помощью использования маршрутизатора в02:32:16
следующий /02:32:18
навигация получить доступ для сохранения платежа02:32:22
способ оплаты и доставка02:32:24
адрес от службы использования карт02:32:27
перехват создания состояния для выбранного платежа02:32:32
метод, использующий состояние пользователя из02:32:36
реагировать и определять функцию отправки дескриптора02:32:39
это основная функция и дескриптор определения02:32:43
представлять на рассмотрение02:32:45
функция предотвращает обновление страницы с помощью02:32:47
звоню эл. предотвратить ошибку, сохранить02:32:51
способ оплаты, выбранный пользователем в02:32:54
Пользовательский интерфейс и перенаправление пользователя на «Следующий шаг»02:32:57
который размещается заказ также в использовании02:33:00
эффект, импортированный из реакции, если у нас есть02:33:04
адреса нет02:33:06
нужно, если в списке нет адреса02:33:09
объект адреса доставки, который нам нужен02:33:12
перенаправить пользователя на предыдущий шаг02:33:15
в противном случае установите выбранный платеж02:33:18
метод, основанный на значении в используемом02:33:21
перехватчик обслуживания карты, если нет значения02:33:24
использовать PayPal как02:33:26
по умолчанию хорошо, давайте перейдем к «Возвращению»02:33:29
часть этого02:33:31
компонент создает Dev внутри этого02:33:35
визуализировать оформление заказа, импортированное из02:33:39
мастер оформления заказа. TSX в компонентах02:33:44
папка после этого02:33:47
создать02:33:48
Центр разработки02:33:51
выровнен маленький02:33:53
мы внутри этого создаем корзину02:33:56
тело и в теле корзины отображают заголовок02:34:02
один на способ оплаты сразу после02:34:06
заголовок один: создайте форму для отмены отправки02:34:10
вызвать функцию отправки дескриптора и выполнить рендеринг02:34:15
три02:34:17
div с использованием функции карты в этом массиве02:34:22
за полосу PayPal и наложенный платеж02:34:25
мы собираемся сформировать по три разработчика для каждого разработчика02:34:28
имеет ключ, равный платежу, чтобы сделать это02:34:31
уникальный ярлык, чтобы показать ярлык и02:34:35
переключатель ввода, чтобы получить выбранный02:34:39
ценность пользователя, если это так, если02:34:44
выбранный способ оплаты равен02:34:46
метод оплаты в этом массиве сделайте его как02:34:49
выбирается путем установки проверенного значения02:34:53
вход02:34:55
элементы, когда пользователь02:34:57
изменено на неизмененное, мы обновляем02:35:01
выбранный способ оплаты выбранным02:35:03
значение в списке после этого создайте02:35:08
div в div отображает тип кнопки02:35:12
отправить, чтобы отправить, выберите это значение02:35:17
к02:35:18
сервер также освобождает место для пользователя02:35:22
к предыдущему шагу с помощью кнопки для02:35:26
снимите кнопку вызова r. вернуться, чтобы пойти в02:35:30
Доставка Государственная доставка02:35:33
страница отличная, давайте воспользуемся этой формой в02:35:37
Страница создания папки со способами оплаты. ТСХ02:35:41
и, как и импорт других компонентов страницы02:35:44
сформировать из той же папки метаданные02:35:47
из следующего установите заголовок страницы для оплаты02:35:50
метод и отобразить форму оплаты02:35:54
компонент страницы сохраните код, нажмите02:36:00
следующий ага, нам нужно сделать этот компонент02:36:04
клиентский компонент02:36:06
используйте клиент, и вот мы здесь, мы находимся02:36:10
выбранный способ оплаты оплата02:36:13
метод - Paypal, давайте сделаем это стра02:36:16
нажмите «Далее», страницы размещения заказа нет02:36:20
нажмите назад еще раз дальше и как вы02:36:24
увидите, что он сохраняет выбранный способ оплаты02:36:29
даже если я обновлю выбранную страницу02:36:33
ценность, сэкономленная в виде отличного мы02:36:37
реализован мастер оформления заказа, и у нас есть02:36:40
две страницы, чтобы получить адрес доставки и02:36:43
способ оплаты от пользователя, мы готовы02:36:46
для следующего шага - размещения заказа02:36:49
пока не станет меньше солнца02:36:53
пока, на этом уроке мы собираемся02:36:56
осуществить размещение заказа, прежде всего мы02:36:59
нужно создать модель заказа в моделях02:37:02
папка у нас уже есть модель заказа. ТС02:37:06
здесь нам нужно определить порядок esema02:37:10
схема mongos es прежде всего импортируется02:37:13
mongos, а затем Определить схему порядка, например02:37:17
это новый объект схемы Монго02:37:21
в качестве параметра функции схемы мы передаем02:37:24
объект, содержащий поля порядка02:37:29
схема, первое поле — пользователь, и это02:37:32
как внешний ключ к пользовательской модели02:37:36
тип — это идентификатор объекта, он ссылается на пользователя02:37:40
модель, и это необходимо, чтобы, когда пользователь02:37:43
создать новый заказ, который мы заполняем пользователем02:37:47
идентификатор пользователя в следующей модели заказа02:37:50
это элементы, это массив элементов заказа02:37:54
для каждой позиции заказа мы сохраняем товар02:37:58
Идентификатор этого элемента — это ссылка на02:38:01
название модели продукта, номер продукта02:38:05
количество продукта этого продукта в02:38:08
Заказать изображение товара и цену02:38:12
продукт следующий fi — это адрес доставки, это02:38:15
как тип данных, который мы уже создали в02:38:18
предыдущий урок мы сохраняем полный адрес02:38:22
полное имя, почтовый адрес, почтовый адрес города02:38:25
код и страна адреса доставки02:38:29
для заказа следующее поле — оплата02:38:32
метод это строковый платеж типа A02:38:35
в результате это объект, содержащий идентификатор02:38:38
статус и адрес электронной почты плательщика мы02:38:41
заполните это при платеже и далее02:38:45
заполнить информацию о ценах, включить цену товаров02:38:48
налог на стоимость доставки и общая стоимость всех02:38:51
номера типа, и они необходимы02:38:54
следующий - оплачен, статус - это ложь02:38:58
и по умолчанию ему присваивается статус02:39:01
false также нам нужно сохранить платеж02:39:05
дата с использованием этой даты заполнения и доставки02:39:08
используя доставленное в fi в опциях02:39:12
В этой схеме у нас есть отметка времени, равная true, так что02:39:15
сохраняем создание и последнее обновление02:39:19
дата каждой записи в модели заказа02:39:24
после создания схемы заказа пришло время02:39:27
создать модель заказа, если у нас уже есть02:39:30
модель заказа, используйте ее, иначе создайте эту02:39:34
Объектные монго сначала проходят модель02:39:38
параметр имя модели и второй02:39:41
параметр эс схемы нужной нам модели02:39:44
для экспорта модели заказа по умолчанию в02:39:47
вариант последнее, что есть в этом файле02:39:51
создание типа для модели заказа, это02:39:54
нравится этот порядок типа экспорта, и мы используем02:39:58
это для проверки типа данных заказа в02:40:01
другие файлы, первый файл — это идентификатор, это02:40:06
mongos — идентификатор mongodb типа A String02:40:10
пользователь и в пользователе у нас есть имя02:40:12
введите A String items, это массив02:40:16
заказ товаров адрес доставки оплата02:40:18
результат способа оплаты не является обязательным и02:40:22
цены, статус доставки и оплаты02:40:26
давайте перейдем к следующему шагу, который он создает02:40:29
API-обработчик дороги для сохранения заказа02:40:34
для создания заказа в базе перейдите по ссылке02:40:38
API приложения щелкните правой кнопкой мыши новые заказы на папку02:40:43
внутри этого нового файлового маршрута. ТС, что мы02:40:48
нужно сделать здесь, это создать пост02:40:51
функцию и экспортируйте ее в эту функцию02:40:55
должен быть обернут в off Let’s Import02:40:58
выключить из папки live и в выключенном состоянии мы02:41:03
передайте такую асинхронную функцию, которая02:41:06
принять запрос в качестве параметра, имея02:41:10
это мы можем проверить запись. пошел посмотреть, если02:41:14
пользователь отключен или нет, потому что02:41:17
этот API должен запускаться авторизованными02:41:21
пользователь для проверки аутентификации использует это02:41:24
код, если запись. выключено — ошибка возврата null02:41:28
сообщение при авторизации установило статус 40102:41:33
в противном случае получите пользователя из записи. мимо02:41:37
имея пользователя, мы готовы создать заказ02:41:40
используя этот код, создатель, я блокирую блок02:41:44
внутри этого получите доступ к запросу02:41:48
полезная нагрузка путем вызова Rec. Json вставил это02:41:52
полезная нагрузка подключается к базе данных, использует БД02:41:56
подключитесь из активной папки, затем позвоните и найдите02:42:01
метод импорта продукта модели продукта02:42:05
модель из папки Models что мы02:42:07
собираюсь сделать здесь, чтобы узнать цену02:42:11
товары в позициях заполнить заказ02:42:15
товары, которые пользователь добавил в покупки02:42:18
корзину и убедитесь, что цены не02:42:22
манипулируется пользователем в клиенте, поэтому мы02:42:26
получить истинную цену в базе данных и02:42:29
затем поместите их в цены на продукты БД02:42:33
в следующей строке обновляем цены02:42:38
исходя из цены в базе нет02:42:41
цена, переданная пользователем от клиента02:42:44
потому что пользователь02:42:45
может ли хакер также изменить цены02:42:49
мы устанавливаем продукт, указанный в идентификаторе02:42:53
потому что идентификатор содержит идентификатор продукта02:42:56
и у нас нет идентификатора в модели заказа02:43:01
у нас есть продукт, основанный на этой области, и02:43:04
удалить идентификатор из позиции заказа, следующий шаг02:43:08
является02:43:09
расчет цен на основе заказа БД02:43:14
элементы, давайте определим эту функцию в02:43:17
в самом начале я определил цены Cal02:43:21
принять позицию заказа типа позиция заказа02:43:24
массив, импортированный из модели заказа, и вызов02:43:28
второй раунд из02:43:31
.ts для расчета стоимости товара, который мы называем02:43:35
Функция сокращения для позиции заказа и суммирования02:43:39
Цена товара умножается на товар. количество02:43:43
затем рассчитайте стоимость доставки, стоимость налога02:43:45
и общую стоимость, а затем верните их, которые мы используем02:43:49
эта функция здесь и расчет цен02:43:53
на следующем этапе нам нужно создать новый02:43:56
модель заказа с использованием модели заказа из02:44:01
mongos импортирует модель заказа из заказа02:44:04
модель. TS передает данные полезной нагрузки02:44:08
содержит данные от службы доставки02:44:11
адрес, который пользователь ввел в форму02:44:13
способ оплаты, выбранный пользователем в02:44:15
переключатель здесь и передайте идентификатор пользователя02:44:21
для пользователя модели заказа мы02:44:24
готов создать новый заказ по телефону02:44:26
сохраните метод в New Order, и вот мы02:44:31
есть ли у нас созданный порядок, который нам нужен?02:44:34
верните его обратно во внешний интерфейс, и если02:44:37
есть ошибка02:44:39
показать сообщение об ошибке возврата, вот и все02:44:42
о создании обработчика маршрута для размещения02:44:47
Следующий шаг заказа — установка SWR02:44:51
это крючок для получения данных02:44:55
мы собираемся использовать этот пакет для получения02:44:58
данные из серверной части в клиенте, откройте02:45:02
новый запуск терминала pnpm install s SWR02:45:06
вот и все, перейдем к следующему шагу и02:45:09
изменить поставщика клиентов, к которому нам нужно обратиться02:45:13
поставщик клиента и оберните компонент02:45:16
конфигурация inwr для доступа02:45:20
башня во всех местах проекта02:45:24
заменить пустой контейнер на SWR02:45:28
настроить и переместить тостер и детей02:45:32
внутри s SWR удалите это и сохраните02:45:36
код и импортировать конфигурацию Sr из SWR для02:45:42
реквизит для этого компонента у нас есть ценность02:45:46
значение содержит объект, у нас есть два02:45:49
функции в этом объекте при ошибке, если02:45:52
произошла ошибка, поднимите сообщение об ошибке02:45:54
Тост об импорте сообщения из React Hot02:45:57
тост и я пойду на вечеринку02:46:01
вызвать метод выборки из nextjs и02:46:06
передать ресурс в качестве первого параметра02:46:09
и инициализируем второй параметр для выборки02:46:13
функция получает ответ, и если это02:46:17
не в порядке из-за ошибки в противном случае02:46:20
вернуть результат, сохранить код и02:46:24
прямо перед возвратом. Определите эффект использования.02:46:28
и добавьте в прослушиватель для видимости02:46:32
внесите изменения в документ и сосредоточьтесь на02:46:35
окно вкладки браузера, если есть02:46:38
изменить магазин обновлений вызова, что нам делать02:46:41
здесь нужно перезагрузить или восстановить данные02:46:46
в корзине магазина давайте импортируем использование02:46:49
эффект от реакции и магазина корзин от02:46:52
используйте хранилище карточек, имея этот крючок, когда02:46:57
ориентируемся на окно стоимости корзины02:47:01
будет обновлен, скажем, у меня есть два02:47:04
окно проекта в браузере и02:47:08
в одном окне увеличиваю количество позиций02:47:13
когда я подхожу к другому окну02:47:15
автоматически значение на карте будет02:47:18
обновиться, вызвав эту функцию так02:47:22
мы всегда синхронизируемся во вкладках браузера02:47:26
проект отличный, мы готовы к02:47:29
Следующий шаг — создание компонента формы02:47:33
навести порядок во внешнем интерфейсе, давайте02:47:36
создать заказ на размещение во внешнем интерфейсе02:47:39
щелкните правой кнопкой мыши новую папку, разместите заказ02:47:42
внутри этой новой формы файла. TSX нравится02:47:46
всегда создавайте форму как функцию стрелки02:47:50
и экспортируйте полную форму внутри этого02:47:53
получить доступ к роутеру с помощью use02:47:56
маршрутизатор из следующей навигации получить доступ02:47:59
к информации о корзине02:48:02
импортировано из сервисного крючка карты использования и02:48:06
Определите четкую функцию внутри карты использования02:48:09
сервис H после увеличения уменьшить безопасно02:48:12
доставка и безопасная оплата02:48:15
ясно, что он делает, это очищает02:48:17
товары в корзине покупок Определите это так02:48:21
что мы сделали, так это установили пустые элементы02:48:25
массив, поэтому мы удаляем все элементы в02:48:28
корзина, чтобы здесь не было ошибки02:48:31
сохраните код и вызовите использование мутации SWR02:48:35
импортирован из мутации SWR SL вот так02:48:41
использовать мутацию S SWR — это ловушка для мутации02:48:46
данные на серверной стороне, вызвав триггер02:48:49
функцию, которую мы переименовываем триггер, чтобы разместить02:48:52
порядок и мы имеем доступ к состоянию02:48:56
вызов этого API с использованием мутирует, мы02:48:59
переименуйте его, поместив в этот крючок02:49:03
первый параметр — это адрес API, который он использует.02:49:07
/ API SL заказывает SL Mine, имея это02:49:11
API, когда у нас есть новый заказ на этот API02:49:16
будет повторно проверен и добавлен новый02:49:19
Порядок для этого второго параметра API является02:49:24
асинхронная функция, которая принимает URL как02:49:27
параметр нам не нужен этот URL какой02:49:30
мы собираемся позвонить в Fitch02:49:33
функцию по этому адресу мы уже02:49:36
создал этот API в маршруте. ТС в02:49:40
папка заказов второй параметр02:49:43
fch — это параметры метода этого API02:49:46
вызов — это приложение для установки заголовка сообщения02:49:50
Json и как тело передают всю информацию02:49:54
корзина покупок, затем получите результат Json02:49:58
поместите это в данные, если есть, если02:50:01
все в порядке, очисти карту02:50:04
потому что мы создали мы создали заказ02:50:07
на основе предметов и нет необходимости02:50:09
чтобы эти товары были в корзине02:50:12
и тост, импортированный из горячего тоста, это02:50:17
сообщение, затем перенаправить пользователя на заказ02:50:20
Подробности02:50:21
страница, если есть ошибка, покажите ошибку02:50:25
сообщение хорошее, мы готовы использовать их в02:50:28
следующие шаги после этого крючка нам нужны02:50:32
вызвать эффект использования из реакции в02:50:35
функция эффекта использования, если способ оплаты02:50:38
не указанный пользователь перенаправления на02:50:40
страница оплаты, если количество позиций в02:50:43
Корзина покупок — это нулевое перенаправление пользователя02:50:46
на домашнюю страницу этот компонент является клиентом02:50:50
компонент, и я не собираюсь получать02:50:52
ошибка отображения клиента и сервера. Я02:50:56
определение смонтированного состояния с использованием состояния пользователя02:50:59
по умолчанию это ложь и используется02:51:02
эффект, я установил для него значение true, если это не так02:51:05
установлен возврат пустого контейнера, имея02:51:10
этот код, этот компонент будет02:51:12
отображаются только на клиенте и02:51:15
сервер и клиент на начальном этапе02:51:18
рендеринг получает то же значение, поэтому я не02:51:22
получите ошибку не соответствующего клиента и02:51:26
результат сервера, не забудьте добавить использование02:51:29
клиент в самом начале этого02:51:32
компонент и давайте продолжим после этого02:51:37
здесь я собираюсь вернуть div внутрь02:51:40
который отображает мастер оформления заказа, и мы02:51:44
на четвертом этапе после оформления заказа02:51:48
Мастер рендеринга Dev и создания четырех02:51:53
столбцы с использованием среднего устройства GED четыре02:51:56
столбцы G четыре и поля по вертикали02:51:59
четыре внутри этого Dev создают еще одного Dev02:52:02
и занимают три из четырех долей02:52:06
столбцы вставьте сюда первую карту02:52:10
создать разработчика с карточкой имени класса02:52:13
Название карты тела-это адрес доставки и02:52:16
здесь мы собираемся просмотреть доставку02:52:19
адрес в корзине после этого02:52:22
создать ссылку, импортировать ее из следующего /link02:52:25
и перенаправить пользователя на страницу доставки02:52:28
изменить адрес доставки после этого02:52:32
div создать еще один div для оплаты02:52:36
метод после создания метода оплаты02:52:38
еще один разработчик для рендеринга товаров для покупок02:52:42
table установите имя имени класса в table02:52:45
в заголовке Т создайте элементы из трех столбцов02:52:49
количество и цена и в теле таблицы02:52:52
вызовите функцию карты для элементов из02:52:55
корзину покупок и отображать каждый товар в02:52:58
импорт ввода строк таблицы02:53:02
изображение с Nexus, вот такое изображение02:53:07
позвольте мне закрыть этого разработчика и после этого02:53:10
столбец создайте еще один столбец, подобный этому02:53:13
создать Dev внутри, который создаст еще один02:53:16
Разработчик установил имя класса для карты и базы PG.02:53:19
300 внутри, которые создают тело карты, чтобы сделать02:53:23
отступы и добавьте второй заголовок для заказа02:53:27
сводная форма UL сделать пространство вертикально02:53:31
до трех для показа первого элемента списка02:53:35
цена товара, цена второго налога02:53:37
стоимость доставки и общая стоимость в02:53:40
последний элемент списка создает кнопку и когда02:53:44
пользователь нажимает кнопку под названием02:53:46
разместить заказ разместить заказ — это триггер02:53:51
функция от использования мутации SWR и путем02:53:54
вызывая эту функцию, этот API будет02:53:57
вызывается и будет создан новый заказ02:54:00
на сервере также, если размещение верно02:54:04
покажи спиннер и подпись к этому02:54:07
кнопка - разместить заказ, давайте воспользуемся этим02:54:11
то, что нам нужно сделать, это создать новые02:54:13
страница файла. DSX и, как всегда, устанавливаю02:54:19
заголовок страницы, чтобы разместить заказ и экспортировать02:54:22
error Разместить упорядоченный компонент страницы как02:54:26
асинхронная функция внутри которой просто возвращает02:54:29
для сохранения кода заходим на карту02:54:33
процесс проверки адреса доставки02:54:36
способ оплаты и вот мы здесь02:54:38
В месте заказа адрес доставки может02:54:42
редактируется порядок размещения может быть изменен и02:54:44
Позиции заказа можно обновить, я просто нажимаю02:54:49
на редактировании, чтобы я мог изменить его,02:54:53
проверьте адрес доставки на следующем шаге и02:54:57
оно обновлено, здесь есть сводка заказов02:55:01
и когда я нажимаю на него, заказываю место02:55:05
успешно, и я буду перенаправлен на02:55:08
на странице заказа я получаю ошибку 404, потому что я02:55:13
еще не реализовал это в следующем02:55:15
урок мы реализуем страницу сведений о заказе02:55:19
но то, что мы сделали, это навели порядок в02:55:23
сервер до этого урока02:55:29
пока-пока на этом уроке мы собираемся02:55:31
создать страницу сведений о заказе, начнем с02:55:35
создание обработчика дороги для возврата02:55:39
данные заказа на основе идентификатора заказа, поэтому, когда02:55:44
когда пользователь уходит, когда пользователь вызывает заказ SL API02:55:48
слайд заказа мы возвращаем заказ02:55:52
подробности, если пользователь прошел аутентификацию для выполнения действия02:55:56
что нам нужно перейти в папку заказов API02:55:59
Заказы API и создание динамического маршрута здесь02:56:05
новая папка внутри квадратной скобки, поместите идентификатор02:56:10
и в папке ID создайте r. ТС для02:56:14
создать обработчик маршрута, код для02:56:17
вернуть данные заказа на основе идентификатора заказа02:56:21
это очень просто, вам нужно импортировать БД02:56:24
подключите заказную модель и прочь от вранья02:56:28
минусы экспорта папок получаются, потому что API02:56:33
метод - получить и обернуть вашу функцию API02:56:39
наизнанку, завернув внутрь02:56:43
аутентифицировать02:56:44
функция, использующая это условие, если r.02:56:50
выключено — ноль, возврат неавторизован02:56:54
в противном случае подключитесь к идентификатору базы данных в02:56:57
URL-адрес и верните этот заказ в02:57:01
то, что мы сделали, это схватили все02:57:04
параметры и структура rre и02:57:08
параметры из параметров в async02:57:12
функция сохранить код02:57:14
перейдите к следующему шагу, это создание заказа02:57:19
Компонент сведений внутри папки с идентификатором заказа02:57:24
перейти вперед, щелкните правой кнопкой мыши новый порядок папок02:57:30
внутри этого создайте динамический маршрут для02:57:33
идентификатор заказа новый идентификатор папки квадратная скобка02:57:38
и здесь создайте компонент сведений о заказе02:57:41
подробности. ТСХ здесь02:57:44
мы экспортируем функцию деталей заказа theault02:57:47
он принимает идентификатор заказа и идентификатор клиента PayPal02:57:51
все они вводят строку в это02:57:54
вызов компонента использует сеанс для доступа к02:57:58
сеанс и вызов используют перехватчик S SWR02:58:03
импортирован из SWR и передайте этот URL/02:58:07
API SL заказывает идентификатор заказа, делая это, мы02:58:12
иметь данные02:58:14
и если при получении произошла ошибка02:58:17
в этом API ошибку не забудьте установить02:58:21
компонент как клиент02:58:24
компонент и перейдем к следующему шагу, если02:58:27
есть ошибка, покажите сообщение об ошибке, если02:58:30
нет данных, показывающих статус загрузки, поэтому02:58:35
в этой строчке у меня все в порядке02:58:38
данные и нет ошибок в структуре02:58:41
информация о заказе, давайте оформим заказ02:58:46
данные возвращают Dev в рендере dev02:58:51
идентификатор заказа в первом заголовке сразу после этого02:58:55
создайте столбцы сетки Dev, используя 4, чтобы02:58:59
создайте четыре столбца и внутри них02:59:02
создать Dev, занимающий три столбца02:59:06
внутри этого Dev создайте еще один набор Dev02:59:10
имя класса в корзину для формирования корзины02:59:13
внутри этого создайте еще один класс набора разработчиков02:59:16
имя в тело карты, чтобы создать дополнение02:59:20
этот Дев в этом Деве добавляет второй заголовок к02:59:23
адрес доставки и показать доставку02:59:25
адрес, если доставлено, верно показать02:59:29
это сообщение зеленого цвета доставлено по адресу02:59:34
это эта дата и время, если не показывать в02:59:39
красный нет02:59:41
доставлено отлично после создания этой карты02:59:44
другая карта для способа оплаты, например02:59:49
это и после этого пора рендерить02:59:52
заказать предметы, создать карту набора разработчиков и BG02:59:57
base 300 установить верхнюю границу до четырех внутри03:00:01
которые создают другое имя класса набора разработчиков03:00:05
к телу карты и переходу к элементам03:00:10
это позиции заказа. Создайте таблицу с03:00:14
количество и цена товаров в трех столбцах03:00:17
и в функции карты вызова тела таблицы включена03:00:21
элементы и преобразовать каждый элемент в таблицу03:00:24
элемент заказа на импорт строк из li/Models03:00:29
ссылка на импорт модели заказа из следующего SL03:00:33
связать и импортировать изображение из следующего изображения SL03:00:38
вот тело таблицы, сохраните код и03:00:43
прокрутить вверх03:00:45
найдите третий цветовой диапазон и закройте его03:00:51
прежде чем закрыть контейнер, я03:00:54
собираюсь создать еще одного такого разработчика в03:00:57
этот Dev создает имя класса Dev, установленное на03:01:02
корзина внутри, создающая еще один набор разработчиков03:01:06
имя класса для тела корзины и в этом St03:01:11
добавьте второй заголовок в сводку заказа, сделайте это03:01:14
Бол, установив имя класса в заголовок карты03:01:18
здесь мы собираемся показать налог на товары03:01:20
форма доставки и общей цены не упорядочена03:01:24
list для отображения первого элемента списка03:01:28
цена товара цена налога цена доставки и03:01:33
общая цена все отлично вот это03:01:37
разница в сводке заказа, с которой мы закончили03:01:41
показаны данные, которые нам не нужны03:01:44
занятие в этом уроке в следующем03:01:46
сеанс, нам нужно оплатить заказ, установите его03:01:51
чтобы доставить, поэтому мы используем их в следующем03:01:55
уроки, следующий шаг — создание страницы03:01:58
компонент внутри папки ID в приложении03:02:04
карта в идентификаторе заказа приложения, щелкните правой кнопкой мыши новый03:02:09
страница файла. TSX импортирует детали заказа из03:02:14
та же функция экспорта папки генерирует03:02:18
метаданные получают параметр и из03:02:21
параметр получить идентификатор и установить страницу03:02:24
название заказа ID03:02:27
закажите, затем экспортируйте порядок функций theault03:02:32
историю, затем экспортируйте функцию theault03:02:36
Страница сведений о заказе, входные данные для этого03:02:41
компонент - это параметры и и в03:02:44
params у нас есть идентификатор типа A String, что03:02:47
мы собираемся сделать это просто вернуться03:02:51
компонент деталей заказа мы уже03:02:55
определено здесь и передает порядок двух значений03:02:59
Идентификатор получается из URL-адреса и PayPal03:03:03
идентификатор клиента, он исходит из среды03:03:07
переменные, если они не существуют, используйте03:03:10
песочница по умолчанию, мы будем использовать ее03:03:15
оцените этот идентификатор клиента на следующем уроке03:03:19
реализовать оплату заказа через PayPal03:03:22
сохраните код, проверим результат03:03:25
что мы собираемся сделать, это выбрать03:03:29
товар добавить в корзину перейти к деталям корзины03:03:33
перейдите на страницу корзины, чтобы оформить заказ03:03:37
введите адрес доставки способ оплаты03:03:41
и, наконец, нажмите на место или03:03:44
заказ потрясающий вот подробности заказа03:03:48
страница в первом заголовке у нас есть порядок IDE03:03:52
заказать карту для адреса доставки03:03:55
статус не доставлен следующая карта03:03:58
способ оплаты типа стремиться нет03:04:01
оплачено, а следующим является список03:04:05
товары в конце у нас есть сводка заказа03:04:09
отлично, мы реализовали страницу с подробностями заказа03:04:13
на этом уроке и на следующем уроке мы03:04:15
Осуществить оплату через03:04:21
PayPal в этом уроке мы собираемся03:04:24
сначала внедрить платежное поручение через PayPal03:04:28
все, что нам нужно, чтобы получить учетные данные от03:04:32
PayPal обратиться к разработчику.03:04:35
PayPal.com и03:04:37
войдите в систему и нажмите «Получить учетные данные API».03:04:41
войдите в свою учетную запись03:04:43
если у вас нет учетной записи PayPal, нажмите03:04:46
при регистрации и создании своего PayPal03:04:48
аккаунт, на который вы будете перенаправлены03:04:51
разработчик.03:04:53
PayPal.com03:04:55
панель управления, нажмите на приложения и03:05:00
учетные данные, мы в песочнице03:05:03
режим, если вы хотите создать живую03:05:05
сменить учетные данные, чтобы пережить это03:05:10
кнопка, давайте начнем с создания приложения03:05:13
приложение введите здесь название приложения, которое я устанавливаю03:05:18
следующий амазон03:05:21
Выбор V203:05:24
Продавец выбирает песочницу по умолчанию03:05:27
учетную запись и создайте03:05:29
приложение, здесь у нас есть идентификатор клиента и03:05:33
Секретный ключ03:05:35
скопировать, перейти к коду vs, открыть файл EnV03:05:44
и добавьте три переменные, первая из которых03:05:49
URL-адрес API Paypal это03:05:53
Песочница API-MS. paypal.com, если вы03:05:57
используя живой удалить03:06:01
Идентификатор клиента PayPal в песочнице, вставьте03:06:05
идентификатор клиента здесь вставьте идентификатор клиента03:06:09
здесь и для приложения Secret03:06:14
скопировать приложение03:06:17
секрет и вставьте сюда, не используйте эти03:06:20
значения, потому что я собираюсь удалить это03:06:22
приложение после этого03:06:25
видео, сохрани его и пойдем дальше03:06:30
шаги Следующий шаг — создание PayPal.03:06:34
TS в живой папке, которую мы собираемся определить03:06:38
некоторые служебные функции для доступа к PayPal03:06:41
открыть папку Live, новый файл03:06:45
PayPal.03:06:46
ТС первым делом установил03:06:50
base это базовый URL, с которого он прочитан03:06:54
URL-адрес API PayPal для этой переменной среды03:07:00
если оно равно нулю, далее используйте значение по умолчанию03:07:04
шаг — экспортировать константу PayPal в виде03:07:09
объект, и здесь мы собираемся определить03:07:11
некоторые служебные функции03:07:14
первая функция находится за пределами PayPal03:07:18
это создание доступа03:07:21
токен в этой асинхронной функции, которую мы читаем03:07:25
Идентификатор клиента и секрет приложения от03:07:29
среда03:07:30
переменные, затем вызовите03:07:33
Буфер из node.js03:07:36
и преобразовать столбец идентификатора клиента PayPal03:07:41
Секрет PayPal для хеширования строки на основе03:07:46
база03:07:48
64 вот у нас есть03:07:50
выключаем как хеш-значение и передаем его03:07:56
к этому API это API в PayPal для03:08:02
сгенерировать токен доступа, варианты для03:08:06
этот API03:08:07
вызов метода здесь03:08:11
опубликовать как payLo03:08:13
установите тип Grand для учетных данных клиента и03:08:17
в03:08:18
базовая авторизация прохода заголовка03:08:23
хеш-значение, которое мы сгенерировали в предыдущем03:08:26
шаг в ответе, который я вызываю handle03:08:31
ответ, чтобы преобразовать ответ из03:08:34
PayPal в Json03:08:37
данные, давайте определим ответ на дескриптор03:08:40
функция, это асинхронная функция, получите03:08:43
ответ в качестве входного параметра, если03:08:47
статус03:08:49
ответ нормальный, я имею в виду, если это 200 или03:08:57
2011 вернуть ответ. Json иначе03:09:02
сгенерировать сообщение об ошибке и через03:09:06
ошибка. Я вызываю эту функцию здесь, получаю03:09:09
ответ и возврат токена доступа из03:09:12
данные Json03:09:14
объект Сохранить код, сгенерировав03:09:18
токен доступа, который мы готовы создать03:09:20
служебные функции в PayPal03:09:24
объект, первая функция — create03:09:27
порядок, в котором мы вызываем эту функцию, когда хотим03:09:30
перенаправить пользователя на сайт PayPal03:09:33
сделать03:09:35
оплата, это асинхронно, это асинхронно03:09:38
функция, которая принимает общую цену как03:09:41
номер, затем мы вызываем создание токена из03:09:46
эту функцию и получить токен доступа03:09:50
от03:09:51
затем он формирует URL-адрес для создания заказа03:09:57
по этому адресу базовый URL я имею в виду вот это03:10:00
один SL slv2 для оформления заказа SL03:10:04
заказы, получив этот URL и передав03:10:08
этими опциями мы создаем заказ в03:10:11
PayPal03:10:14
и это делает возможным03:10:19
оплатить заказ через PayPal в03:10:24
варианты у нас есть метод, равный сообщению в03:10:27
заголовок нам нужен для установки авторизации03:10:30
to brr токен доступа и тип контента03:10:33
типа Json в теле нам нужен EST03:10:38
преобразовать этот объект в строку, намерение03:10:41
захватывать03:10:43
единица покупки — это массив, содержащий03:10:47
а03:10:48
объект в этом объекте у нас есть сумма в03:10:51
сумма, которая нам нужна, чтобы определить03:10:53
код валюты это доллар США и03:10:56
ценность в том, что это03:11:00
цена, а ценность - это цена03:11:05
Следующая функция в объекте PayPal:03:11:07
захватить платеж, мы называем эту функцию03:11:10
когда мы собираемся завершить оплату03:11:15
принять идентификатор заказа, это идентификатор заказа03:11:17
от PayPal, а не от нашего03:11:21
приложение, как и раньше, получить доступ к03:11:25
токен доступа и новый URL-адрес для03:11:29
получение платежа.03:11:32
вроде slv2 SL checkout заказ SL заказ03:11:38
id/ capture, затем позвоните в Fitch по этому URL-адресу.03:11:44
и установите метод публикации и заголовка03:11:48
токен авторизации V, чтобы мы авторизовались03:11:51
этот запрос с использованием токена доступа из03:11:54
сгенерировать токен доступа и вызвав03:11:56
этот03:11:58
API, оплата будет произведена в03:12:04
Хороший следующий шаг PayPal — создание03:12:11
API заказа PayPal с использованием App Router в03:12:16
nextjs перейти к заказам API приложения03:12:21
ID и создайте новую папку с именем create03:12:26
PayPal03:12:27
порядок внутри этого нового маршрута файла. ТС для03:12:32
сгенерировать API для ответа на создание03:12:36
заказ03:12:38
API вот это03:12:40
код при создании PayPal или заказе03:12:44
Минусы экспорта API, опубликуйте это сообщение03:12:48
Функция отключения API из активной папки03:12:53
и оберните асинхронную функцию, которая принимает03:12:57
все03:13:00
параметры как03:13:02
запросы и в этой функции03:13:06
извлеките первый параметр, это03:13:10
запрос, а второй параметр — это03:13:12
объект, содержащий параметры в03:13:16
URL, если есть03:13:19
нет03:13:21
аутентификация, если пользователь не авторизован03:13:25
отправить ошибку03:13:26
сообщение, затем подключитесь к базе данных03:13:30
использование подключения к БД из живого03:13:33
папка и после этого модель заказа вызова03:13:39
импортировано из моделей03:13:41
папку, затем вызовите поиск по03:13:45
ID на ID в03:13:50
URL из папки «Модели», импортируйте его03:13:56
от моделей03:13:58
папка проверьте порядок, если она у нас есть03:14:01
заказать в03:14:03
база данных создает внутри блок catch TR03:14:07
которые импортируют PayPal из активной папки, которую мы03:14:11
уже создан здесь03:14:13
здесь и позвоните, создайте заказ из этого03:14:16
объект в качестве параметра передает общую цену03:14:20
мы собираемся получить это значение от пользователя03:14:24
через03:14:25
PayPal получает заказ PayPal и возвращает его03:14:30
это как Json вперед, если есть03:14:34
ошибка вернуть ошибку03:14:36
сообщение, если заказ не существует03:14:39
заказ на возврат не найден и установите статус03:14:41
до 403:14:43
четвертый следующий шаг — создание еще одного API03:14:47
чтобы захватить заказ PayPal и завершить03:14:51
платеж в идентификаторе щелкните правой кнопкой мыши новый03:14:54
папка для захвата заказа PayPal внутри нее03:14:58
щелкните правой кнопкой мыши маршрут.03:15:02
TS нравится то, что мы сделали при создании PayPal03:15:05
для того, чтобы нам нужно определить пост03:15:10
функция обернуть функцию в off03:15:13
импортирован из оф. ТС получить параметры03:15:19
извлеките первый параметр и переименуйте03:15:22
это03:15:23
для запроса, а второй параметр содержит03:15:27
значения в URL-адресе, идентификатор в URL-адресе03:15:32
если есть ошибка, покажи ошибку03:15:33
сообщение закройте открывающиеся скобки03:15:38
и приступим к подключению к03:15:41
БД подключиться к03:15:44
база данных импортирует ее из БД, затем подключаемся03:15:48
шаг - получение заказа из заказа03:15:51
модель импортирована из модели заказа. ТС, если03:15:56
заказ03:15:57
существует вызов re.03:16:00
Json, чтобы получить полезную нагрузку от этого API.03:16:05
и из полезной нагрузки доступ к заказу03:16:09
идентификатор, затем импортируйте03:16:12
PayPal. ТС из папки live и звонок03:16:17
зафиксировать оплату по идентификатору заказа, это03:16:20
идентификатор заказа03:16:23
PayPal поместил результат в данные захвата03:16:27
и обновляет03:16:29
заказ, подобный этому, оплачивается через03:16:33
платный добавить к текущему03:16:35
время и результат платежа содержат идентификатор03:16:39
платежа во время обновления PayPal в03:16:43
PayPal и адрес электронной почты содержат03:16:46
адрес электронной почты пользователя03:16:49
адрес перейти к заказу03:16:51
модель добавить обновление03:16:54
время и результат платежа проходят03:16:58
захват данных из PayPal в платеж03:17:02
результат в нашей базе данных, например03:17:06
это в конце нам нужно вызвать Save on03:17:09
порядок сохранения этой информации в03:17:12
базу данных и вернуть обновленную03:17:15
заказ вперед, если есть ошибка03:17:19
вернуть сообщение об ошибке, если заказ03:17:21
не существует возврат03:17:24
Сообщение об ошибке 404, сохраните03:17:29
код, следующий шаг в деталях заказа03:17:33
Детали открытого заказа на компонент.03:17:37
TSX и сразу после использования сеанса Define03:17:41
создать заказ PayPal03:17:45
функция здесь мы называем это03:17:49
Метод установки API для публикации заголовка03:17:53
приложение SL03:17:56
Json, и то, что мы здесь сделали, это получить03:18:00
ответ и вернуть идентификатор заказа для03:18:05
PayPal03:18:08
компонент после этой функции определяет03:18:11
несанкционированный03:18:14
by Определить несанкционированный PayPal, заказать его03:18:18
принимаем данные и здесь мы вызываем захват03:18:23
Заказ PayPal, который мы создали ранее03:18:28
шаги передают данные как03:18:32
параметр в качестве полезной нагрузки для этого03:18:36
AP и в тогдашней части возврата03:18:43
тот03:18:44
Json-данные ответа и в03:18:48
в последний раз поднимите тост за это прекрасное послание03:18:52
импортировано из реакции горячего тоста03:18:54
сообщение заказ оплачен03:18:56
успешно мы используем создание заказа PayPal03:18:59
и03:19:00
отменить одобрение в PayPal03:19:04
компонент открыт03:19:06
Терминал03:19:08
установка pnpm при знаке реакции PayPal SL03:19:13
PayPal JS — это официальный пакет от03:19:16
PayPal для доступа к PayPal API в03:19:22
реакция после установки прокрутки03:19:26
вниз и сразу за Ли03:19:30
Total Render это условный рендеринг03:19:34
если заказ не оплачен и оплата03:19:37
метод — Paypal, затем визуализируйте lii.03:19:40
внутри этого звонка03:19:43
Скрипт PayPal03:19:45
провайдер внутри этого рендеринга PayPal03:19:48
поставщик скриптов03:19:50
из PayPal03:19:52
пакет в самом начале этого03:19:55
файл03:19:56
импортировать кнопку PayPal и скрипт PayPal03:19:59
Провайдер из at подписывает реакцию PayPal03:20:02
Прокрутка PayPal JS03:20:05
вниз установить параметры в параметрах получить03:20:09
Идентификатор клиента PayPal из реквизитов этого03:20:14
компонент и03:20:16
внутри провайдера отображается кнопка PayPal03:20:21
мы передаем два свойства, первое из которых03:20:25
создать функцию заказа и отменить одобрение03:20:29
уже создал эти функции на03:20:32
начало этого03:20:34
компонент Давайте проверим результат, выберите03:20:38
товар добавить в корзину перейти в корзину03:20:42
хотел проверить03:20:44
вне03:20:45
входить03:20:47
доставка выберите PayPal в PayPal03:20:50
следующий метод и поместите03:20:54
закажи тогда ага, у нас есть PayPal03:20:58
кнопка, давайте откроем и увеличим03:21:03
нравится это и нажмите PayPal03:21:08
кнопку, вы будете перенаправлены на03:21:10
PayPal для завершения платежа введите свой03:21:15
тест03:21:16
Укажите свой тестовый адрес электронной почты, который у вас уже есть.03:21:20
в вашей учетной записи песочницы при создании03:21:24
ваши учетные данные для учетной записи песочницы и03:21:28
затем завершите03:21:31
купи через некоторое время, ага, ты будешь03:21:35
перенаправлен на страницу заказа, но это03:21:37
время оплаты03:21:40
информация03:21:42
статус платежа оплачен при этом03:21:46
штат и нет кнопки PayPal03:21:49
вот хорошо, мы успешно03:21:52
реализована оплата заказа через PayPal в03:21:56
этот урок до следующего урока03:22:02
пока-пока на этом уроке мы будем03:22:05
создание страницы истории заказов, давайте начнем03:22:09
создав API для03:22:12
возврат заказов клиентов из серверной части go03:22:16
для приложения заказов API и создания нового03:22:20
папка задайте имя для меня, она собирается03:22:22
к03:22:23
вернуть текущего пользователя03:22:27
заказы внутри этого маршрута Define. ТС здесь03:22:31
это код этого маршрута. Export Conss03:22:36
получите это, когда пользователь перейдет по этому адресу /03:22:39
API SL заказы slm03:22:42
этот03:22:45
возврат функции03:22:48
заказы в условии if мы проверяем03:22:51
пользователь03:22:52
аутентификация, если это нулевой возврат03:22:56
несанкционированный ответ, в противном случае получите03:22:59
пользователь из записи. выкл. Подключитесь к03:23:02
база данных и03:23:05
найти в модели заказа все заказы, которые03:23:10
пользователь, равный текущему пользователю03:23:14
ID, затем позвоните в ответ. Json для возврата03:23:18
приказы на защиту03:23:19
FR мы будем использовать его позже в этом уроке.03:23:23
мы будем использовать этот API позже в этом03:23:26
урок, следующий шаг - в карточке использования03:23:30
магазин03:23:31
зацепить в самом конце после очистки Define03:23:36
новый03:23:37
функция, в которой он находится03:23:39
здесь мы сделали сброс03:23:44
корзину магазина в исходное состояние03:23:48
исходное состояние берется отсюда, и это03:23:53
значение по умолчанию для всех карт03:23:58
статус следующий шаг в меню03:24:02
Компонент внутри компонентов заголовков03:24:06
меню заголовков.03:24:08
TSX в самом03:24:10
начало03:24:12
извлечь его из карты использования03:24:15
службе и в03:24:18
подпишите и при выходе вызов обработчика03:24:22
эту функцию, вызвав ее, когда мы03:24:24
перенаправить пользователя на экран входа, который мы03:24:27
удалить всех пользователей03:24:30
информация03:24:32
включая способ оплаты в корзине03:24:35
и адрес доставки из03:24:37
карта03:24:40
магазин, следующий шаг — добавление меню03:24:44
внутреннее раскрывающееся меню здесь перед знаком03:24:50
создайте Li и внутри этого определите03:24:54
ссылка на страницу истории заказов, если я нажму03:24:59
на свое имя я могу получить страницу истории заказов03:25:04
если я нажму на него, я буду перенаправлен на03:25:06
404, давайте создадим эту страницу на лицевой стороне приложения03:25:12
щелкните правой кнопкой мыши в новой папке, упорядочите тире03:25:19
история внутри этого права03:25:22
нажмите новый файл мои заказы. ТСХ это03:25:28
компонент, который я собираюсь использовать для03:25:31
визуализировать заказы пользователей, сделать его клиентом03:25:36
компонент, установив использование экспорта клиента03:25:40
мои заказы по умолчанию03:25:43
функция, на которую это реагирующий компонент03:25:46
визуализировать пользователя03:25:47
заказывает доступ к маршрутизатору с помощью use03:25:51
Роутер Крюк от Nex SL03:25:55
навигация и вот пришло время звонить03:25:59
API, который у нас есть в начале03:26:02
этот урок с использованием импортированного S SWR03:26:07
от s SWR и установите UR L на/API SL03:26:13
заказы SL03:26:15
помоему из этого крючка мы получаем данные03:26:19
переименуйте его вorders и получите03:26:21
ошибки, чтобы показать ошибку, если есть03:26:24
ошибка при получении этих данных, потому что я03:26:28
собираюсь визуализировать этот компонент только на03:26:30
клиентская сторона, я использую это03:26:33
код Определить пользователя03:26:38
Состояние Определить подключенное состояние03:26:42
в эффекте использования, импортированном из preact03:26:46
установите значение true, если компонент03:26:50
не смонтировано, возвращает пустую строку с помощью03:26:53
имея этот код, мы не получим ничего03:26:56
ошибка в несовпадении клиента и сервера03:27:01
рендеринг03:27:02
результат следующего F03:27:06
условия касаются отображения ошибки03:27:10
сообщение и если заказа нет, покажите03:27:14
загружаю сообщение здесь, мы готовы03:27:17
форма03:27:18
интерфейс моих заказов03:27:22
компонент03:27:25
вернуться, вернуть03:27:28
стол в столе03:27:31
столбцы отображения заголовков для03:27:35
ID дата заказа общая стоимость оплатить03:27:39
статус доставить статус и действие действия03:27:42
к03:27:43
удалить, чтобы получить подробную информацию03:27:47
порядок в теле таблицы, называемой картой03:27:51
функция по заказам из бэкэнда и для03:27:55
каждый заказ03:27:57
введите заказ, импортированный из03:28:00
//m Модели SL-ордера03:28:03
модель отображает строку таблицы, подобную этому набору03:28:08
ключ к идентификатору заказа первая строка03:28:12
отображает идентификатор только последних четырех03:28:16
персонажи03:28:18
Идентификатор для создания столбца03:28:21
маленькая дата создания, только часть даты, а не03:28:26
часть времени, ты можешь избавиться от этого, если ты03:28:30
хочу показать всю часть общей даты03:28:35
цена, укажите доллар или вашу валюту раньше03:28:39
это если заказ03:28:42
оплачено и оплачено в имеет ценность в оплаченном03:28:50
отображение столбца оплачено, если оно не оплачено03:28:55
отображать нет03:28:56
оплачено, сделай то же самое для доставки03:29:00
статус, последний столбец предназначен для отображения03:29:04
ссылка подробнее импортировать ссылку из Nex SL03:29:08
ссылка для установки слайда заказа hft SL03:29:13
и пройти03:29:14
H, правда, подпись такая03:29:19
подробности здесь03:29:22
код для части «Возвращение», и мы03:29:25
готов использовать его на странице. ТСХ внутри03:29:30
история заказов, щелкните правой кнопкой мыши страницу нового файла03:29:34
делать03:29:36
ТСХ в этом03:29:38
Метаданные минусов экспорта компонента03:29:42
и установите заголовок для заказа03:29:45
Порядок функций экспорта истории по умолчанию03:29:47
история, это компонент реагирования на03:29:52
отображать историю заказов03:29:54
страница внутри, которая создает пустую03:29:59
набор контейнеров H1 для истории заказов и03:30:04
затем визуализируйте компонент моих заказов, сохраните03:30:08
код и вот результат создания03:30:11
горизонтальная прокрутка для доступа ко всем03:30:15
столбцы на меньшем экране в The03:30:18
Вернуть часть компонента моих заказов03:30:22
создать имя класса набора разработчиков для более гриппа03:30:26
X Авто и вырежьте03:30:29
table полностью поместила ее внутри div и03:30:34
Сохраните код, имея его, вы можете03:30:36
иметь03:30:38
красивый03:30:40
горизонтальная скрутка для доступа ко всем столбцам03:30:44
для доступа ко всем столбцам03:30:47
заказ03:30:50
история, давай попробуем03:30:52
Подробности истории повторного заказа здесь03:30:57
у вас есть03:30:58
доступ к03:31:00
заказать как03:31:02
этот03:31:04
отлично, мы успешно выполнили заказ03:31:07
история в этом уроке до следующего урока03:31:15
пока, на этом уроке мы собираемся03:31:17
создайте страницу профиля пользователя, давайте начнем с03:31:22
создание обработчика API для обновления пользовательского интерфейса для03:31:28
обновление пользователя03:31:31
профиль, в который нам нужно зайти/03:31:35
API SL03:31:37
выключите и создайте папку для03:31:42
профиль внутри этого создания03:31:46
маршрут.03:31:48
TS и импортировать o из o.03:31:52
Форма TS поместила обработчик API с помощью экспорта03:31:58
consp поставить и03:32:00
оберните свою функцию03:32:03
выключите, а затем проверьте03:32:06
выключено, если значение равно нулю, возврат не разрешен03:32:11
Следующий шаг — импорт пользователя подключения к БД03:32:15
модель и bcrypt как03:32:19
тогда это в дело03:32:22
функция получения пользователя из записи. получить имя03:32:28
электронная почта и03:32:29
пароль из полезных данных API, которые вы вводите03:32:34
эта информация в профиле обновления03:32:39
сформировать и подключиться к03:32:42
после этого создайте базу данных TR catch03:32:46
заблокировать лайк03:32:48
это и в тройке03:32:52
поиск части вызова по идентификатору модели пользователя03:32:57
идентификатор пользователя находится в объекте пользователя в03:33:02
запись. офф мы уже заливаем офф.03:33:09
ТС в этот момент03:33:12
мы исправим ошибку типа здесь.03:33:15
вопросительный знак перейти к корню03:33:19
проект в пустом пространстве справа03:33:22
щелкните новые типы папок внутри типов03:33:27
создать новый файл, установить имя файла следующим образом:03:33:31
выключенный.03:33:33
DTS здесь импортирует следующий сеанс по умолчанию03:33:38
и пользователь по умолчанию из следующего пакета03:33:41
затем объявите модуль следующим и внутри03:33:45
что я собираюсь обновить03:33:48
такой сеанс в объекте пользователя добавить03:33:52
ID не является обязательным и может быть строкой03:33:56
или ноль03:33:59
Админ, это необязательно и может03:34:03
быть03:34:04
Boolean и объединить его со значением по умолчанию.03:34:08
пользовательский объект сеанса03:34:11
также для03:34:15
интерфейс расширить пользователя по умолчанию и добавить03:34:19
admin и есть и ID и является администратором вроде03:34:23
это, имея это в коде, который мы делаем03:34:26
не получу никаких ошибок, и если я избавлюсь от03:34:28
вопросительный знак нет ошибки03:34:31
тоже сохраните код, проверьте пользователя в03:34:36
база данных, если пользователь не существует, мы03:34:38
не могу обновить этого пользователя, поэтому мне нужно03:34:41
вернуть пользователя нет03:34:43
найден, затем обновите пользователя на основе имени03:34:47
адрес электронной почты и пароль от03:34:51
фрин не забудь хешировать пароль03:34:55
перед сохранением в03:34:57
база данных, если пароль от03:35:01
frend имеет значение null, тогда используйте предыдущий03:35:06
пароля в базе у нас нет03:35:08
обновите его, затем вызовите метод сохранения в БД03:35:12
пользовательский объект и вернуть это сообщение03:35:18
интерфейс, если есть ошибка a03:35:20
ошибка возврата03:35:23
сообщение, давайте перейдем к следующему шагу, оно уже в03:35:26
меню.03:35:30
TSX заходим в меню.03:35:34
ТСХ03:35:36
напишите после истории заказов добавьте новую03:35:41
Ли разместила ссылку на страницу профиля, так что если я03:35:45
нажмите здесь, у меня есть профиль в раскрывающемся списке-03:35:48
меню вниз, когда я нажимаю на профиль I03:35:52
должно получиться 404, пойдем и построим03:35:54
Страница профиля в приложении, щелкните правой кнопкой мыши спереди, создайте03:36:01
папка03:36:03
профиль внутри этого нового03:36:06
страница файла выполняет TSX в этом импорте файла03:36:12
метаданные из следующих и минусов экспорта03:36:15
метаданные устанавливают заголовок на03:36:20
профиль, затем визуализируйте компонент реагирования03:36:24
это серверный компонент, я использую синхронизацию03:36:27
функция устанавливает имя компонента в03:36:30
профиль и то, что я собираюсь вернуть, это03:36:33
а03:36:34
сформируйте вот такую форму и давайте создадим вот эту03:36:38
форма в профиле новый файл03:36:42
форма.03:36:46
ТСХ03:36:49
rafc для создания компонента реагирования и03:36:54
Экспорт03:36:56
код сохранения по умолчанию вернуться назад импорт03:37:01
формируем из Dot sl4 и сохраняем код сюда03:37:06
у нас есть03:37:08
форма вернуться в форму. ТСА вот и мы03:37:11
сначала собираюсь обновить форму профиля03:37:16
шаг — определение входных данных03:37:18
введите в эту форму, мы получим03:37:21
назовите пароль электронной почты и подтвердите03:37:24
пароль, затем в компоненте формы получите03:37:28
доступ к пользовательскому сеансу с помощью use03:37:32
сессия, импортированная из следующего SL, реагирует03:37:36
получить доступ к маршрутизатору с помощью маршрутизатора03:37:39
крючок х/03:37:42
Форма использования навигационного вызова из хука реакции03:37:46
form установите тип ввода на входы и03:37:51
для имени набора значений по умолчанию адрес электронной почты и03:37:54
пароль для пустой строки, следующий шаг:03:37:58
определение эффекта использования, импортируйте его из реакции03:38:02
в самом03:38:03
начало избавляться от реакции и заменять03:38:06
это с эффектом использования в Quy03:38:08
Скобки Определите использование клиента в самом03:38:13
начинаю прокручивать вниз в использовании03:38:16
эффект я проверяю сессию и сессию.03:38:20
пользователь, если у нас есть03:38:22
значение устанавливает поле ввода имени и адреса электронной почты03:38:28
со значениями в сеансе03:38:32
объект, который я использую заданное значение из хука реакции03:38:36
форма для заполнения полей ввода, следующий шаг03:38:41
формирование формы Обработчик формы, когда пользователь03:38:45
нажмите кнопку «Отправить», мне нужно определить03:38:49
отправить форму03:38:50
функция типа submit Handler в03:38:53
реагируйте на форму перехвата и принимайте ввод как03:38:57
общий тип этого03:39:00
функция, это асинхронная функция, которая03:39:02
принять форму03:39:04
в качестве параметра и внутри него я извлекаю03:39:08
имя электронной почты и пароль из формы03:39:11
объект, это значения, которые пользователь03:39:15
введенные в поля ввода, затем создайте03:39:18
ТР улов03:39:20
заблокировать такой вызов /API SL выключен/03:39:25
профиль мы уже03:39:27
создал этот API03:39:31
Обработчик установил метод публикации заголовка03:39:35
приложение типа контента Json и в03:39:39
тело вернуть имя адрес электронной почты и пароль от03:39:43
вход03:39:45
коробки, если результат нормальный, тост03:39:49
красивый профиль успешно обновлен03:39:54
сообщение, импортированное из реакции, горячее03:39:57
тост, затем создайте новый сеанс из03:40:01
предыдущий сеанс, но в пользовательском хранилище03:40:05
всю предыдущую информацию пользователя, кроме03:40:08
обновить только имя и адрес электронной почты03:40:12
затем позвони в обновление03:40:15
метод и передать новый сеанс в качестве параметра03:40:18
к обновлению, откуда оно берется03:40:21
обновление03:40:23
метод, который возникает в результате использования03:40:26
сеанс со следующего выезда/03:40:30
реагировать, если результат неудовлетворительный, получить03:40:35
ответ и показать сообщение в03:40:39
результат в данные, если нет сообщения03:40:43
показать всплывающее сообщение об ошибке в03:40:47
блок catch получить улов, используя это03:40:51
код03:40:53
и покажи ошибку03:40:56
сообщение, давайте перейдем к последней части03:41:00
этот компонент находится в возврате03:41:02
раздел избавиться от03:41:04
это и заменить его03:41:07
с помощью этого St установите максимальную ширину на наименьшую03:41:11
карточка выравнивания экрана по центру для создания03:41:15
такая граница внутри создаёт03:41:18
другой разработчик установил имя класса на карту03:41:21
body для создания отступов вокруг03:41:25
карточка добавить заголовок в одно имя класса03:41:29
название карты, чтобы сделать это03:41:31
жирный шрифт создать форму для отмены отправки звонка03:41:35
обработать отправку из формы реагирования и03:41:38
передать функцию отправки формы, которую мы создаем03:41:41
здесь следующий шаг создайте первый вход03:41:46
коробка как03:41:49
это добавит имя класса набора разработчиков в поле03:41:53
вертикально03:41:55
два создают метку и вводят03:42:00
поле зарегистрировать ввод03:42:04
окно с использованием регистра формы реагирования03:42:08
функция, и этот V требуется, установите03:42:12
имя класса для ввода границы ввода03:42:14
создайте это красивое поле ввода, если оно есть03:42:17
это ошибка, покажите сообщение об ошибке в03:42:20
этот03:42:21
поле, пойдем к следующему полю03:42:25
такое поле ввода электронной почты, как это, я добавил03:42:31
новый шаблон для проверки электронной почты03:42:36
действителен следующий новый03:42:41
пароль и последний фи подтверждают новый03:42:45
пароль в поле ввода внутри03:42:48
зарегистрировать функцию из формы реагирования I03:42:51
добавил03:42:52
проверить функцию и получить пароль03:42:56
в этом вводе03:42:58
коробке и в части «Возвращение» я сравниваю03:43:02
пароль со значением в подтверждении03:43:06
новый пароль, если они равны друг03:43:09
иначе это окажется правдой, поэтому я вернусь03:43:11
правда все в порядке03:43:15
в противном случае, если это ложный пароль, следует03:43:18
не совпадение будет03:43:21
вернулись и им не требуется03:43:24
поле в пароле и подтвердите03:43:27
пароль, потому что смена пароля03:43:31
не обязательно в форме обновления профиля03:43:35
если есть ошибка, покажи ошибку03:43:37
сообщение, последний шаг — отправить03:43:41
кнопка создать подпись кнопки Dev03:43:46
обновить, если отправляется, сделайте это03:43:50
отключено и показать03:43:53
спиннер все окей давай нажимай03:43:56
при обновлении пароля, как вы видите пароль03:43:59
должно совпадать, я не собираюсь обновлять03:44:02
только пароль, я собираюсь изменить03:44:05
имя пользователя и адрес электронной почты03:44:08
пользователь нажимает на03:44:11
обновить профиль успешно обновлен и03:44:15
если вы проверите здесь имя пользователя03:44:18
обновлено в шапке03:44:22
меню перейти на другую страницу вернуться к03:44:26
страница профиля на этот раз у меня есть Джон03:44:29
и админ, давайте сделаем им лайк03:44:32
раньше и нажмите «Обновить»03:44:36
круто, работает идеально03:44:40
и мы сделали этот урок03:44:42
внедрение страницы обновления профиля до тех пор, пока03:44:46
следующий урок03:44:50
пока, на этом уроке мы собираемся03:44:53
развернуть наше приложение на Versal, мы03:44:57
уже опубликовал наш код на GitHub03:45:01
следующий шаг — переход на вирусный.com и03:45:05
создайте новую учетную запись, нажмите «Зарегистрироваться», если03:45:08
у вас нет учетной записи, выберите03:45:10
тип плана введите свое имя и нажмите03:45:15
продолжить, затем продолжить с помощью keop и03:45:18
подключите свою учетную запись GitHub к Versal03:45:21
то вы будете перенаправлены на вирусный.com03:45:24
панель управления на этой странице нажмите «Добавить новую»03:45:28
проект импортирует git-репозиторий, если вы03:45:31
не вижу здесь своей учетной записи GitHub03:45:34
нужно подключить его снова, и если вам03:45:36
не вижу здесь вашего проекта, вам нужно03:45:39
зайти на github.com03:45:41
настройка нажмите на значок настройки03:45:45
интеграционные приложения находят универсальные03:45:48
нажмите «Настроить» и убедитесь, что03:45:51
доступ к репозиторию - ко всему репозиторию03:45:55
затем выберите свой проект, мое название проекта03:45:58
следующий Amazon V2, имя репозитория на03:46:02
GitHub и нажмите «Импортировать» в следующем03:46:05
экран нам нужно настроить проект03:46:08
название проекта в следующем — amazon2 вы03:46:11
можешь переименовать его как хочешь03:46:13
все в порядке только в03:46:16
переменные среды, нам нужно добавить03:46:19
переменная в файле EnV в нашем проекте03:46:23
давайте начнем с добавления URI mongodb03:46:27
это здесь и вставьте свой mongodb из03:46:30
Atlas mongodb не ваш местный, если вы03:46:33
оно должно начинаться с mongodb plus03:46:36
SRC сервер должен быть mongod DB в CL03:46:40
вставьте сюда полный URL-адрес и нажмите «ДОБАВИТЬ».03:46:43
следующий URL не по адресу, я собираюсь03:46:47
введите этот адрес, название моего проекта, это03:46:51
должно быть так03:46:53
столбец https SL косая черта названия проекта do03:46:58
Weel DoApp убедитесь, что этот URL-адрес03:47:02
уникальный, иначе вы получите ошибку03:47:04
добавь, угу, давай на следующий раз03:47:08
секрет, это должно быть что-то03:47:10
секрет, что хочешь, сделай это секретом03:47:13
добавить следующее поле: вставить URL-адрес Paypal API03:47:17
значение здесь, если вы хотите использовать03:47:20
жить один заменить его избавиться от песочницы03:47:23
и оживите его, нажмите «ДОБАВИТЬ идентификатор клиента»03:47:27
вставьте свой идентификатор клиента PayPal и последний03:47:30
одно из них — приложение PayPal. Секретное платежное приложение.03:47:34
секрет и вставь секрет сюда так сюда03:47:37
это мое окружение03:47:40
переменные нажмите на развертывание, чтобы увидеть, что мы03:47:45
начать, развертывание началось03:47:48
первый шаг - создание проекта, затем03:47:51
развертывание, выполнение проверок и назначение03:47:55
пользовательские домены вот имя моего03:47:58
последний комментарий на GitHub, если я открою03:48:02
часть здания, я вижу, что это такое03:48:06
здесь происходит, как вы видите, это говорит о провале03:48:09
для компиляции и исправления этой ошибки нам нужно03:48:13
иди в середину. ТС и03:48:18
удалить импорт из живой папки03:48:22
потому что внутри. ТС, мы импортируем монго03:48:28
и причина ошибки исходит из03:48:31
mongos, если мы запустим mpm, запустим buildt, мы получим03:48:36
та же ошибка, что и в версале03:48:39
л03:48:40
Вот так, чтобы удалить зависимость середины. ТС03:48:45
к03:48:47
mongos, нам нужно удалить эту строку и03:48:51
сначала замените его этим кодом03:48:54
импортировать следующую и следующую конфигурацию из03:48:58
следующий пакет, затем создайте следующий03:49:03
объект конфигурации, который удовлетворяет следующему из03:49:07
конфигурация внутри этого03:49:10
Определите поставщиков как пустой массив и03:49:13
перезвонить как пустой03:49:15
возражать против того, что я собираюсь сделать в03:49:18
Обратный вызов — для получения авторизованной функции03:49:22
вырезать это из03:49:23
здесь в auth TS и переместите его в03:49:28
середина. ТС сохрани код сохрани код03:49:32
поэтому мы проверили все URL-адреса03:49:37
средняя версия с использованием авторизованной функции03:49:41
если они равны оплате доставки03:49:44
разместить заказ в профиле заказа и администрировать нас03:49:47
проверьте аутентификацию пользователя, если она есть03:49:50
null, мы возвращаем false, и пользователь получит03:49:54
быть перенаправлен на вход03:49:56
проверить причину этого03:50:00
Обходной путь — избавиться от ошибки в03:50:04
Подключение к базе данных и импорт модели пользователя, потому что03:50:08
в этих функциях мы получаем доступ к03:50:10
монго и монго нельзя использовать или03:50:16
импортирован посередине в промежуточном программном обеспечении03:50:19
точки, потому что функция промежуточного программного обеспечения работает03:50:23
время работы по краю, и в краю мы03:50:26
не могу получить доступ к03:50:28
монго, давай побежим03:50:31
npm run build, мы избавимся от03:50:36
ошибка в средней версии, на этот раз мы03:50:38
получаю еще одну ошибку, о которой говорится в03:50:42
маршрут. TS внутри папки профиля у нас есть03:50:46
неверный экспорт, давайте перейдем к этому файлу в03:50:50
внешнюю оболочку, которую нам нужно экспортировать как03:50:55
любой, чтобы избавиться от этого03:50:58
ошибка: следующая ошибка не реализовала типы03:51:01
для03:51:02
возвращающее значение вне оболочки, так что до тех пор, пока03:51:06
это обновление мы используем как любое03:51:10
давайте сделаем то же самое для других мест, где03:51:12
у нас есть обертка, просто найдите это03:51:16
в поиске03:51:19
коробка для первого, мы сделали это для следующего03:51:22
is/ API SL заказывает в самый03:51:26
закончиться как03:51:29
любой следующий03:51:31
один в удостоверении личности03:51:34
папка следующая03:51:36
это захват заказа через PayPal03:51:42
как03:51:44
любое создание PayPal03:51:46
заказывайте в самом конце, как03:51:50
любой и последний - закажите SL mine как03:51:56
любой, сохранить все03:51:59
файлы типа03:52:01
это здесь и здесь и запустите npm run построенный03:52:07
в03:52:08
Терминал03:52:10
снова все готово и сборка03:52:14
команда успешно03:52:17
выполнено великолепно, мы готовы к развертыванию03:52:21
наш проект, поэтому нам нужно перейти к03:52:24
система контроля версий введите03:52:27
веб-сайт публикации сообщений на Versal и03:52:30
вот все изменения03:52:34
файлы хорошие, просто зафиксируйте и синхронизируйте изменения03:52:40
зайти на vero.com03:52:42
найти проект03:52:46
развертывание и вот мы строим03:52:49
начал нажимать на него и вот мы можем03:52:57
проверьте детали развертывания, откройте03:53:00
строим и вот мы отличный проект03:53:04
успешно построена средняя версия здесь03:53:08
тот03:53:10
развертывание03:53:12
завершено вот это03:53:14
подробности и в самом конце у нас NEX03:53:18
Амон v2. Веральное приложение, давай откроем его03:53:23
круто, вот и у нас работает наш сайт03:53:27
здесь у нас есть список продуктов, давайте попробуем03:53:30
войдите в систему нажмите «войти» войдите в админку03:53:34
адрес электронной почты и пароль, нажмите и войдите в систему03:53:37
хорошо, мы успешно вошли в систему и давайте03:53:41
добавить товар в корзину выбрать03:53:45
товар добавить в корзину перейти на главную страницу03:53:48
выбрать еще один добавить к увеличению карты03:53:51
перейти в корзину Про это, чтобы проверить03:53:54
out введите адрес доставки Следующий шаг03:53:58
выберите PayPal Следующий шаг, разместите заказ03:54:03
а потом, ага, у нас есть PayPal и03:54:07
следуя за PayPal03:54:09
оплата мы можем осуществить оплату и03:54:14
сайт работает идеально, на следующем уроке мы03:54:17
собираемся добавить темную и светлую боковую панельОписание:
👉 Code : https://github.com/basir/next-amazona-v2 👉 Demo : https://next-amazona-v2-final.vercel.app/ 👉 Q/A : https://github.com/basir/next-amazona-v2/issues TABLE OF CONTENT 00:00 1 Introduction 00:07:08 2.1 Install Tools On Mac 00:10:36 2.2 Install Tools On Windows 00:15:54 2.3 VS Code Configuration and Extensions 00:19:36 3 Create Next App 00:28:26 4 Create Github Repo 00:30:13 5 Create List Products Page 00:39:56 6 Create Details Product Page 00:48:58 7 Add Items To Shopping Cart 01:03:55 8 Remove Items From Cart 01:06:24 9 Create Shopping Cart Page 01:18:52 10 Connect To DB and Seed Data 01:33:52 11 Load Products From DB 01:45:03 12 Authenticate Users 02:02:50 13 Register New Users 02:20:49 14 Create Checkout Wizard 02:36:54 15 Place Order 02:55:29 16 Create Order Details Page 03:04:22 17 Pay Order By PayPal 03:22:03 18 Create Order History Page 03:31:15 19 Create User Profile Page 03:44:51 20 Publish Website On Vercel 🔥 Get Complete Course for $9.99 By Joining Pro Membership Here: https://www.youtube.com/watch?v=vcoOt329K8g&list=PLeh2GWv22bmTz4krWd371xqg9cCupvGxI&index=23 👉 You'll get Admin Dashboard, Search Products, Product Carousel and much more features in Pro Membership. #Nextjs #ecommerce #mongodb --- Follow me on: 👉 Website: https://codingwithbasir.com 👉 Twitter: https://twitter.com/basrijd 👉 Linkedin: https://www.linkedin.com/in/basir-j 👉 Github: https://github.com/basir
Готовим варианты загрузки
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах
Вопросы о скачивании видео
Как можно скачать видео "Build Next.js ECommerce Website Like Amazon [Nextjs, Mongodb, Tailwind]"?
Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.
Какой формат видео "Build Next.js ECommerce Website Like Amazon [Nextjs, Mongodb, Tailwind]" выбрать?
Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.
Почему компьютер зависает при загрузке видео "Build Next.js ECommerce Website Like Amazon [Nextjs, Mongodb, Tailwind]"?
Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.
Как скачать видео "Build Next.js ECommerce Website Like Amazon [Nextjs, Mongodb, Tailwind]" на телефон?
Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.
Как скачать аудиодорожку (музыку) в MP3 "Build Next.js ECommerce Website Like Amazon [Nextjs, Mongodb, Tailwind]"?
Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.
Как сохранить кадр из видео "Build Next.js ECommerce Website Like Amazon [Nextjs, Mongodb, Tailwind]"?
Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.
Сколько это всё стоит?
Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.