Теперь, когда мы завершили обновление на стороне сервера.
Пришло время перейти к ответному клиенту.
Для вашего удобства я предоставил вам репозиторий GitHub,
который содержит окончательную версию клиента, который может общаться с
нашим сервером REST API, а затем отображать различные представления для нашего клиента.
Итак, я взял повторное приложение, которое мы разработали во
втором курсе специализации, а затем модифицировал его.
Мы проведем небольшую экскурсию по коду чуть позже.
Теперь вы клонируете репозиторий Git на свой компьютер,
а затем запустите свой клиент, а затем увидите, что он взаимодействует с нашим набором серверов.
Давайте посмотрим подробности дальше.
Чтобы начать с этого упражнения,
на вашем терминале или командном окне,
перейдите в удобное расположение, а затем в командной строке введите git clone
https://github.com/jmuppala/conFusion-React.git, а затем позвольте
приложению React быть клонировано на ваш компьютер.
После завершения клонирования
перейдите в папку Confusion-React, которая
только что была создана при клонировании этого репозитория Git.
Затем вы сразу заметите, что есть куча файлов уже там.
Теперь, в подсказке, введите install,
чтобы установить все модули узла, от
которых зависит это приложение React.
Итак, как только модули узла будут установлены,
тогда мы можем запустить наш запуск пряжи для компиляции и обслуживания нашего приложения React.
Как только все будет в,
убедитесь, что ваш сервер MongoDB
работает и работает, а также ваш сервер REST API также работает и работает.
В противном случае клиент не будет работать.
Итак, теперь, когда вы установили свой клиент на вашем компьютере,
добавьте запуск пряжи типа приглашения,
и ваше приложение будет перекомпилироваться и обслуживаться в течение короткого времени.
Как только ваше приложение будет успешно скомпилировано,
зайдите в браузер, и вы увидите, что
ваше приложение React запускается и отображается на экране здесь.
Вы сразу заметите, что ваше приложение
может извлекать данные с сервера, а затем отображать
различные части вашего приложения так же, как и то, что вы
сделали в конце вашего курса React.
Когда вы перейдете в папку «О программе»,
вы также увидите, что страница «О программе» также отображает информацию.
Таким образом, ранее в меню,
вы видите пункты в меню отображаются так же, как мы видели с приложением.
Теперь, кроме того, я добавил
еще одну страницу в одностраничное приложение под названием My Favorites, к
которому вы не можете перейти,
потому что ни один пользователь не вошел в их систему.
Итак, вы видите, что у меня нет ни одного пользователя, который вошел в систему.
Поэтому нет смысла указывать мои избранные, потому что вы не знаете,
какой пользователь в качестве избранного должен отображаться здесь и контактную страницу, как обычно.
Теперь, давайте войдем.
Чтобы войти в наше приложение,
мы нажмем на кнопку входа, а затем вы увидите, что появится диалоговое окно входа в систему.
Затем позвольте мне войти в систему как один из зарегистрированных пользователей,
которые мы зарегистрировали в рамках этого курса ранее.
Таким образом, после входа в систему
вы сразу заметите, что в правом углу
вы увидите, что кнопка входа теперь превратилась в
выход, и здесь указано имя пользователя.
Итак, тот, кто вошел в систему, указан здесь.
Вы также можете в принципе заменить это изображением пользователя.
Теперь, для этого вам нужно сделать больше изменений
как для клиента, так и для сервера, чтобы поддерживать отображение изображения здесь.
Но на данный момент, я просто показываю вам,
как мы можем легко отобразить здесь информацию о пользователе.
Таким образом, это потребовало незначительных изменений в голове компонента,
где я смогу получить имя пользователя.
Таким образом, как только пользователь войдет в систему,
то если вы теперь нажмете «Мои избранные», вы
заметите, что в «Мои избранные» для пользователя нет ничего.
Очевидно, что пользователь еще не выбрал ни одного избранного.
Итак, давайте перейдем к меню.
Затем, в меню,
позвольте мне выбрать один пункт, а затем мы добавим это блюдо в избранное.
Итак, спускаясь вниз,
вы увидите символ сердца там,
нажмите на него, и вы увидите, что это будет добавлено в избранное.
О том, что это было добавлено в
избранное, свидетельствует изменение иконки здесь от незаполненного сердца к наполненному сердцу.
Теперь, если вы идете к любому другому блюду,
вы заметите, что у этого есть незаполненное сердце, а
это значит, что это еще не среди наших фаворитов.
Итак, позвольте мне добавить еще один элемент в
мои избранные, а затем давайте добавим третий элемент в мои избранные.
Итак, теперь вы увидите, что если я теперь перейду к своим избранным,
вы увидите набор «Мои избранные», который отображается здесь.
Итак, вы видели, что я только что добавил эти три блюда в
свои любимые, и поэтому они отображаются здесь.
Таким образом, это отслеживается с помощью
того, что избранное конечную точку
на стороне сервера в зависимости от того, что реализовано как часть вашего последнего назначения.
Итак, если вы сделали это назначение правильно,
то эта часть должна работать так, как ожидалось.
Теперь мы также можем изменить My Favorite.
Итак, позвольте мне продолжить и удалить один из элементов из «Мои избранные».
Таким образом, когда я нажимаю на эту кнопку, вы сразу заметите,
что этот элемент удаляется из «Мои избранные» и немедленно исчезает, и
мои избранные обновляются, и вы увидите, что результирующее значение отображается здесь.
Таким образом, обратите внимание, что Мои избранные будут отображаться только
для пользователей, которые вошли в систему.
Таким образом, вы сразу заметили набор изменений, которые были
сделаны для клиента, чтобы поддержать
некоторые из этих дополнительных функций, которые вы видите здесь.
Вы также видели, как здесь поддерживается функция входа и выхода из системы.
Итак, когда я нажимаю кнопку выхода из системы,
вы сразу замечаете, что пользователь выходит из системы, и
имя пользователя исчезает оттуда, и
поэтому кнопка также превращается в кнопку входа.
Теперь, таким образом, вы заметили, как мой клиент был
обновлен, чтобы использовать новый сервер REST API,
чтобы поддерживать избранное, сохраняемое на стороне сервера, а
затем автоматически отражающееся в приложении My Client, как показано здесь.
Теперь, когда вы видели модифицированное приложение React в действии,
пришло время посетить исходный код, чтобы узнать, как
именно он реализован и какие изменения
мы внесли в соответствии с приложением Redux в конце курса Redux.
Теперь два основных изменения, которые вы заметите,
это поддержка избранного, а также поддержка аутентификации,
вход пользователя и выход из системы поддержки.
Теперь, как они реализуются?
Мы начнем наше путешествие в части Redux нашего приложения.
Итак, перейдя в часть Redux,
давайте посетим типы действий.
В типах действий вы увидите теперь, что у нас есть
три новых типа действий, связанных с их избранным.
Таким образом, вы увидите загрузку
Избранного, Избранное не удалось и добавить избранное,
которое, как вы ожидали, будет там.
Затем, также шесть различных типов действий, связанных с их логином и выходом из системы.
Теперь, чтобы вы могли видеть запрос входа в систему, успех входа в систему
, сбой входа, запрос выхода из
системы, успех выхода и сбой.
Итак, мы увидим, как эти типы действий фактически используются в нашем создании действий.
Итак, зайдя в действие создателей,
так вот где вы увидите поддержку фаворитов здесь.
Итак, сначала мы рассмотрим поддержку избранного, а затем
рассмотрим поддержку поддержки аутентификации.
Итак, здесь вы увидите, что у нас есть новые методы ниже
здесь называются FavoritesFailed, FavoritesFailed и addFavorites.
Теперь, из ваших предыдущих впечатлений
dishesLoading и dishesFailed и addDishiss и так далее.
Итак, эти вещи вам очень знакомы,
так что это точно такая же настройка для кода здесь.
Кроме того, вы увидите другой метод здесь, называемый FetchFavorites,
который снова, как я сказал, Redux tank
, который реализован здесь,
где мы будем использовать выборку для доступа к серверу, чтобы получить избранное.
Таким образом, это методы, которые вы увидите здесь, а затем вы также увидите
DeleteFavorite здесь, а также Redux танк для PostFavorite здесь.
Итак, в PostFavorite, как
вы ожидали, вы будете публиковать избранное на сервер здесь.
Итак, здесь обратите внимание, как мы используем авторизацию.
Будучи настроенным в нашем заголовке авторизации,
это то, на что я хотел бы обратить ваше внимание в этот момент,
мы вернемся к этому снова, когда мы посмотрим на аутентификацию пользователя и авторизацию.
Итак, мы настраиваем заголовок авторизации следующим образом, используя fetch здесь.
Итак, для извлечения, мы размещаем элемент в выборке
здесь, а затем вы заметите, что структура того, как делается выборка, приведена здесь.
Теперь всякий раз, когда вы размещаете избранное или удаляете избранное или извлекаете избранное,
мы всегда будем иметь сервер возвращен вам,
весь набор избранных, а затем мы просто добавим эти избранные
в наш магазин редукции здесь, так что это то, что мы делаем здесь.
Опять же, структура кода должна выглядеть очень знакома вам,
если вы просто посмотрите, как
реализованы фавориты поста, удалить фавориты и выборки избранного.
Таким образом, все это будет обрабатывать вопрос избранного.
Теперь, как именно реализованы сами фавориты?
Таким образом, функция редуктора реализована в любимой структуре здесь.
Итак, внутри этой уменьшенной функции,
вы увидите, как мы обрабатываем добавление
избранного, загрузку избранного, и избранное не удалось здесь.
Опять же код должен выглядеть очень знакомым вам, основываясь на
вашем опыте работы с функциями редуктора, которые вы видели для редукса раньше.
Итак, снова обратите немного внимания на то, как реализован код.
Это довольно просто, поэтому я не трачу
слишком много времени на объяснение того, как эти вещи реализованы.
Теперь, пользуясь этими преимуществами,
у нас есть в компонентах, которые мы теперь имеем
новый компонент избранного, чья работа заключается в том, чтобы отобразить весь список наших любимых.
Итак, здесь вы видите, что сам компонент Избранное,
структура компонента Избранное очень похожа на
структуру компонента меню, поэтому здесь у нас есть
компонент Избранное, который реализуется как функциональный компонент, и
там мы рендеринга избранного в здесь, как вы видите в коде здесь.
Опять же, очень просто, я думаю, вы должны быть в состоянии
легко понять, как
реализован компонент избранного, имея опыт работы с тем, как компонент меню реализован там.
Итак, опять же, я не трачу слишком много времени на объяснение кода здесь.
Теперь анализ кода также является
хорошим опытом для вас, чтобы узнать, как реализован код, поэтому
обработка этого кода в вашей голове поможет вам снова понять,
чтобы консолидировать ваше понимание реакции более подробно.
Итак, я оставлю это как упражнение для вас.
Теперь я указываю, где были
внесены изменения для реализации поддержки избранного.
Теперь любимый термин,
Избранное также рычаг в
компонент детали блюда и внутри компонента детали блюда,
вы увидите, что у нас есть дополнительной- Здесь,
в рендере блюдо функционального компонента,
мы будем оказывать кнопку, которая поддерживает
выбор или когда вы нажимаете на контур сердца,
он добавит этот конкретный пункт в ваш список любимых.
Итак, все это поддерживается здесь, используя эту кнопку здесь, которая
вызывает, как вы видите эту функцию, называемую post favorite, которая является redux.
Спасибо, что мы реализовали там и эта поддержка для этого
реализована в основных компонентах, поэтому, когда вы заходите в основной компонент,
вы увидите, как здесь реализован пост фаворита,
и вы также увидите, что это
включено в карту, отправленную на реквизит, и поэтому пост избранное реализовано.
Итак, вы видите, что структурирование очень похоже на
то, что вы видели для другого кода там.
Таким образом, я не собираюсь тратить слишком много времени на то, как реализована поддержка избранного,
вместо этого позвольте мне потратить немного больше времени на то, как
авторизация пользователя и аутентификация поддерживаются в коде здесь.
Теперь для аутентификации пользователя,
то, что мы делаем здесь, заключается в том, что когда вы идете в хранилище конфигурации здесь,
вы увидите, что у меня есть еще одна функция редуктора под названием Auth, которая реализована здесь.
Таким образом, это будет отслеживать часть авторизации.
Теперь как это реализовано?
Опять же, входя в действия создателей,
типов бездействия мы уже видели набор действий, связанных с логином и выходом из системы.
Итак, входя в действие создателей,
вы увидите, что здесь у нас есть
все функции, которые реализованы для входа в систему и выхода из системы.
Таким образом, вы увидите новую функцию под названием request login, получение регистрации,
и поэтому это когда логин успешно и так далее, но, в частности,
этот конкретный функт здесь пользователя входа в систему, где мы начинаем с процесса входа.
Таким образом, мы отправим логин запроса в точке, когда пользователь пытается войти,
после этого мы сделаем выборку в конечную точку входа пользователей с
сообщением, и это содержит в теле сообщения учетные данные для пользователя здесь.
Итак, как только мы сделаем выборку,
если ответ правильно возвращен,
тогда ответ должен содержать токен там.
Итак, мы будем обрабатывать этот ответ здесь, а затем, если логин был успешным,
тогда мы сохраним токен в локальном хранилище здесь.
Таким образом, вы можете видеть, что мы говорим, что
localStorage set маркер ответа маркера, а затем мы
также сохраним учетные данные пользователя в локальном хранилище здесь.
Таким образом, эти два помогут мне отслеживать процесс входа пользователя.
После этого мы отправим логин получения.
Теперь в этот момент, когда пользователь успешно вошел в систему,
мы также будем получать избранное для пользователя.
Теперь помните, что вы можете получить только избранное для пользователя, который вошел в систему.
Когда ни один пользователь не вошел в систему, нет избранного для извлечения,
но когда пользователь успешно входит в систему, вы хотите получить
избранное пользователя, чтобы он мог отобразить это в вашем приложении реагирования.
Поэтому я также делаю выборку избранного
здесь, а затем мы получим логин здесь.
Затем, если есть ошибка, мы отправим ошибку входа здесь.
Таким образом, все эти функции, ошибка входа в систему и входа в систему,
затем вызовет соответствующие функции Reducer, которые реализованы в файле Auth.Js.
Таким образом, перейдя в файл Auth.Js,
состояние здесь отслеживает статус входа пользователя здесь.
Таким образом, здесь мы также будем хранить в государстве,
государство включает в себя восточную загрузку Boolean, который
отслеживает, находитесь ли вы в процессе входа в систему. Простота authenticate-
будет указывать, является ли пользователь аутентифицирован и
поэтому пользователь вошел в систему, так что вы сможете разрешить пользователю.
Таким образом, этот флаг используется во многих случаях
для отображения статуса входа пользователя, а затем
свойство пользователя для состояния отслеживает учетные данные пользователя.
Таким образом, именно там мы получим имя пользователя для отображения в нашем компоненте заголовка.
Теперь, здесь вы увидите запрос на вход, и когда срабатывает успех входа,
вы сохраните значение токена здесь, а затем сбой входа.
Запрос выхода из системы, успешно выходящий из системы,
все это обрабатывается этими различными частями внутри этого редуктора auth.js редуктора здесь.
Итак, вот как здесь обрабатывается аутентификация пользователя.
Теперь, в компоненте заголовка,
идя в компонент заголовка,
так что здесь у нас есть функция входа в систему.
Итак, HandleLogin, вы помните, что мы
уже реализовали это в курсе реакции.
В HandleLogin они будут переключать модальный.
Итак, мы закроем модальный, а затем войдем в систему пользователя в этот момент.
Итак, мы скажем this.props LoginUser, а затем вы увидите, что учетные данные,
имя пользователя и пароль передаются в качестве параметров
LoginUser и так, что попадает в LoginUser func,
который затем заботится о регистрации в пользователе.
Теперь, как вы отображаете состояние входа пользователя.
Итак, это снова очень просто.
В навигационной панели здесь
вы увидите, что я добавил новый элемент здесь.
Итак, вот где мы скажем это.Props.auth.IsAuthenticated.
Итак, флаг IsAuthenticated используется здесь мной, и поэтому, если это установлено в true,
тогда я покажу
кнопку Logout здесь, и это то, что я покажу здесь.
В противном случае я покажу кнопку входа.
Таким образом, используя этот флаг IsAuthenticated,
я переворачиваю, какая конкретная кнопка будет отображаться в
заголовке, независимо от того, отображается ли вы кнопка выхода из системы или кнопка входа.
Вот тот момент, который мы показываем здесь.
Итак, логин или выход здесь.
Итак, вот как мы обрабатываем процесс входа и выхода из системы
здесь, а также мы будем отображать имя пользователя прямо там.
Таким образом, когда вы показываете кнопку выхода из системы,
вы также увидите, что мы показываем имя пользователя там.
Таким образом, ниже здесь,
мы также будем отображать кнопку HandleLogout, а
затем у нас есть кнопка выхода отображается здесь.
Кроме того, это конкретное заявление здесь,
вот как мы показываем имя пользователя здесь.
Таким образом, это использует это.props.auth.user.user.username.
Итак, свойство пользователя в состоянии auth содержит
учетные данные пользователя, и оттуда я извлек имя пользователя
, а затем использую его для отображения в строке заголовка.
Таким образом, компонент заголовка
обновляется для обработки процесса входа и выхода из системы.
Опять же, довольно простые способы реализации,
это довольно простой способ, который я реализовал здесь.
Теперь, очевидно, если вам нужен более сложный способ обработки процесса входа и выхода из системы,
вы, конечно, можете перейти к полноценному способу делать вещи,
но этого достаточно, чтобы удовлетворить требования для моего приложения.
Итак, я реализовал процесс входа и выхода из системы
очень простым способом здесь, используя помощь магазина Redux.
Таким образом, магазин Redux сам отслеживает
мой статус входа в систему, независимо от того, вошел ли я в систему и я аутентифицирован и вышел ли я из системы.
Таким образом, если пользователь вышел из системы,
то My Favorites здесь не отображается.
Итак, один важный момент, который вы спросите, -
как мы можем гарантировать, что мы не войдем в избранное здесь государство?
Итак, это происходит в том месте, где мы обрабатываем маршруты здесь.
Итак, вы заметите, что для избранного здесь
мы объявляем для избранного конечную точку вместо того, чтобы
называть это как маршрут, который мы называем его частным маршрутом.
Таким образом, частный маршрут позволяет вам убедиться, что вам будет
разрешено входить в эту часть только при обстоятельствах,
когда пользователь вошел в систему.
Таким образом, это предотвратит переход к конечной точке /избранного, если ни один пользователь не вошел в систему.
Итак, как реализуется этот частный маршрут?
Этот частный маршрут реализован прямо здесь.
Таким образом, вы можете видеть, что этот частный маршрут реализован, как показано здесь.
Таким образом, это не что иное, как маршрут здесь, а затем здесь,
мы будем реализовывать this.props.auth.isAuthenticated.
Итак, если пользователь аутентифицирован,
то я позволю перейти к
компоненту, который является компонентом избранного.
В противном случае я просто перенаправлю на домашний компонент.
Итак, если ни один пользователь не вошел в систему,
я просто перенаправлю на домашний компонент, и поэтому это
реализовано с использованием этого частного маршрута, который я разработал здесь.
Таким образом, частный маршрут - это то, что поддерживается маршрутизатором,
который мы используем React маршрутизатор Dom, который мы использовали в нашем приложении React.
Таким образом, очень простой способ обработки ситуаций,
когда вы не хотите, чтобы определенные маршруты перемещались, когда пользователь не вошел в систему.
Итак, еще раз несколько простых изменений, которые я сделал в
приложении, чтобы облегчить
все различные функции, которые вы видите в вашем приложении React.
Теперь, как вы и ожидали,
вы можете быть недооценены в этот момент
: «Это так просто реализовать», и действительно это
именно то, что было сделано для поддержки всех новых функций.
Как вы видите,
процесс аутентификации пользователя и входа в систему и выхода из системы, так как наш сервер имеет полную поддержку всего,
реализуя отслеживание на стороне клиента
процесса входа и выхода пользователя и все, что становится довольно простым, просто
изменив некоторые компоненты и добавление
в функцию редуктора auth и добавление в состояние auth в наш магазин Redux.
Весь процесс обработки аутентификации пользователя,
входа в систему и выхода из системы становится довольно простым в этом случае.
Итак, с этим быстрым обзором обновленного кода React,
давайте продолжим изучать
наше приложение React еще несколько функций нашего приложения React.
Так что снова, возвращаясь к нашему приложению,
мы можем теперь перейти в меню, а затем вытащить
любое блюдо здесь, и я могу опубликовать комментарии к блюду здесь,
так что я бы сразу установил рейтинг здесь и мой комментарий значение здесь.
Обратите внимание, что я не вводим свое имя пользователя или имя автора здесь, в форме здесь.
Теперь, конечно, для того, чтобы отправить комментарий, вам нужно войти в систему.
Итак, если вы не вошли в систему, этот комментарий не будет принят моим сервером.
Итак, позвольте мне сначала войти в систему.
Таким образом, я могу войти здесь,
и в тот момент, когда я войду в систему, вы сразу заметите, что
панель инструментов заголовка обновляется, чтобы указать мой статус.
Теперь я могу опубликовать этот комментарий, и вы заметите, что когда я отправлю комментарий,
комментарий добавляется в список комментариев,
а также обратите внимание, что поле автора
автоматически заполняется здесь, потому что именно так мы настраиваем нашу сторону сервера.
В поле комментариев
мы установили нашего пользователя как ссылку на пользовательскую
информацию, которую мы храним на
нашей стороне сервера, и так как мы используем заполнение Mongoose Populate на стороне сервера,
информация о пользователе автоматически заполняется
в входящие комментарии со стороны сервера.
Таким образом, вы замечаете, как я использую
то, что сервер уже предоставляет для меня, чтобы автоматически заполнять детали.
Таким образом, незначительные изменения снова даже
на странице детали блюда, чтобы отразить использование комментариев поддержки на сайте сервера.
С этим я завершу
быструю иллюстрацию клиента React, который мы реализовали в рамках
этого упражнения, и я надеюсь, что вы
также изучите детали кода в клиенте, а затем
вспомните, что вы узнали в курсе React и посмотрите, как
изменения позволяют нам реализовать в модифицированном,
[неразборчивом], который теперь может общаться с сервером, а затем поддерживать все функции, которые
мы изначально планировали реализовать как часть нашего клиента, так и сервера.