Теперь, когда мы завершили обновление серверной части,
пришло время перейти к Angular Client.
Для вашего удобства я предоставил вам
репозиторий GitHub, который содержит окончательную версию
Angular Client, который может взаимодействовать с
нашим сервером REST API, а затем отображать различные представления для нашего клиента.
Итак, я взял угловое приложение, которое мы
разработали во втором курсе этой специализации,
а затем модифицировал его.
Мы проведем краткую экскурсию по коду чуть позже.
Теперь вы клонируете репозиторий Git на свой компьютер,
а затем запустите свой Angular Client,
а затем увидите, что он взаимодействует с нашим сервером.
Посмотрим подробности дальше.
Чтобы начать работу с этим упражнением,
в терминале или командном окне
перейдите в удобное местоположение, а затем в
командной строке введите git clone
https://github.com/jmuppala/conFusion-Angular6.git.
Затем, пусть угловое приложение клонируется на ваш компьютер.
После завершения клонирования
перейдите в папку Confusion-Angular6,
которая была только что создана при клонировании этого репозитория git.
Тогда вы сразу заметите, что есть куча файлов уже там.
Теперь в командной строке введите npm install,
чтобы установить все модули узла, от
которых зависит это угловое приложение.
Итак, как только модули узла или все установлены,
тогда мы можем запустить наш NG служить для компиляции и обслуживания нашего углового приложения.
После того, как все будет установлено с помощью установки npm,
убедитесь, что ваш сервер MongoDB
запущен и работает, а также ваш сервер REST API также работает и работает.
В противном случае ваш угловой клиент не будет работать.
Итак, теперь, когда вы установили свой Angular Client на вашем компьютере,
в командной строке введите ng serve, и
ваше угловое приложение будет скомпилировано и обслуживается ng serve в течение короткого времени.
Как только ваше угловое приложение успешно скомпилировано,
перейдите в браузер и откройте свое угловое приложение в браузере.
Перейдя в браузер,
в адресной строке,
позвольте мне ввести localhost:4200, и
вы увидите, что ваше угловое приложение
запускается и отображается на экране здесь.
Вы сразу заметите, что ваше
угловое приложение может извлекать данные с сервера, а затем отображать
различные части вашего углового приложения так же, как и то, что вы
сделали в конце вашего углового курса.
Когда вы переходите говорить о папке,
вы также увидите, что страница «О программе» также отображает информацию как таковую.
В меню, вы видите пункты в меню
отображаются так же, как мы видели с угловым приложением.
Теперь, кроме того, я добавил
еще одну страницу в одностраничное приложение под названием My Favorites, к
которому вы не можете перейти, потому что ни один пользователь не вошел в систему.
Итак, вы видите, что у меня нет ни одного пользователя, зарегистрированного в системе.
Поэтому нет смысла указывать мои избранные,
потому что вы не знаете, какой пользователь,
как избранное, должен быть показан здесь.
Контактная страница, как обычно.
Теперь, давайте войдем.
Чтобы войти в наше приложение,
мы нажмем на кнопку Login, а затем вы увидите, что появится диалоговое окно Login.
Затем позвольте мне войти в систему как один из зарегистрированных пользователей,
которые мы зарегистрировали в рамках этого курса ранее.
Таким образом, после входа в систему
вы сразу заметите, что
в правом углу
вы увидите, что кнопка «Вход» теперь превратилась в «
Выход», и здесь указано имя пользователя.
Итак, тот, кто вошел в систему, указан здесь.
Вы также можете, в принципе,
заменить это изображением пользователя.
Теперь, для этого вам нужно сделать больше изменений
как для клиента, так и для сервера, чтобы поддерживать отображение изображения здесь.
Но, на данный момент, я просто показываю вам, как мы
можем легко отобразить здесь информацию о пользователе.
Таким образом, это требует незначительной модификации главы
компонента, где я смогу получить
имя пользователя из службы,
называемой как служба OAuth, о которой мы поговорим в ближайшее время.
Итак, как только пользователь войдет в систему,
тогда если вы теперь нажмете «Мои избранные»,
вы заметите, что в моем избранном для пользователя нет ничего.
Очевидно, потому что пользователь еще не выбрал ни одного избранного.
Итак, давайте теперь перейдем в Меню, а затем в Меню,
позвольте мне выбрать один пункт, а затем они добавят это блюдо в наши избранные.
Итак, спускаясь вниз,
вы увидите символ сердца там,
нажмите на него, и вы увидите, что это будет добавлено в Избранное.
Тот факт, что это было добавлено в Избранное, указывает
на изменение иконки здесь от незаполненного сердца к заполненному сердцу.
Теперь, если вы идете к другому блюду,
вы заметите, что у этого есть незаполненное сердце, а
это значит, что его еще нет среди наших фаворитов.
Итак, позвольте мне добавить еще один элемент в
мои избранные, а затем давайте добавим третий элемент в мои избранные.
Итак, теперь вы увидите, что если я теперь перейду в «Мои избранные»,
вы увидите набор «Мои избранные», который отображается здесь.
Итак, вы видели, что я только что добавил эти три блюда в «Мои избранные».
Таким образом, они отображаются здесь.
Таким образом, это отслеживается с помощью конечной точки избранного на стороне сервера,
которую я реализовал как часть вашего последнего назначения.
Итак, если вы сделали это назначение правильно, тогда эта часть должна работать так, как ожидалось.
Теперь мы также можем изменить My Favorite.
Так, например, в правом углу здесь
вы видите этот переключатель Delete.
Так что, позвольте мне включить это.
Таким образом, когда вы включите его,
вы сразу увидите три красных креста
в нижней части этих трех элементов в разделе «Мои избранные».
Когда я нажимаю его, они исчезают.
Таким образом, это один из способов включения кнопок удаления в меню «Мои избранные», а затем.
Итак, позвольте мне продолжить и удалить один из элементов из «Мои избранные».
Таким образом, когда я нажимаю на эту кнопку,
вы сразу заметите, что этот элемент удаляется из «Мои избранные»,
и немедленно исчезает, и «Мои избранные»
обновляются, и вы увидите полученное значение, отображаемое здесь.
В то же время
этот переключатель Delete отключен,
так что кнопки удаления больше не видны.
Я всегда могу снова включить кнопки удаления, нажав на кнопку включения и выключения здесь.
Таким образом, обратите внимание, что Мои избранные будут отображаться только
для пользователей, которые вошли в систему.
Таким образом, вы сразу заметили набор изменений, которые были
сделаны для Angular Client, чтобы
поддержать некоторые из этих дополнительных функций, которые вы видите здесь.
Вы также видели, как здесь поддерживается функция входа и выхода из системы.
Итак, когда я нажимаю на кнопку Logout,
вы сразу замечаете, что пользователь выходит из системы,
и имя пользователя исчезает оттуда,
и поэтому кнопка также превращается в кнопку Login.
Итак, с этим вы заметили, как мой Angular клиент был
обновлен, чтобы использовать новый сервер REST API,
чтобы поддерживать сохраненные избранные и на стороне сервера,
а затем автоматически отражаться в моем клиентском приложении, как показано здесь.
Давайте проведем краткий тур по
угловому коду, который я предоставил вам в репозитории GitHub,
а также посмотрим, как мы изменили части кода,
чтобы реализовать обновленное приложение Angular.
Вы заметите, что есть новый сервис
, который я представил здесь, называется auth service.
Служба auth заботится обо
всех действиях, связанных с аутентификацией для приложения Angular.
Итак, в службе auth
вы сразу заметите, что у меня
есть набор информации, которую я настроил здесь.
Поскольку вы уже знаете Angular,
вы должны иметь возможность легко обрабатывать все, что написано здесь.
Обратите внимание, в частности, что внутри самой службы auth
я храню информацию, такую как,
например, TokenKey,
который является ключом для локального хранилища, где я храню JSON Web Token,
а также некоторые дополнительные переменные
здесь, где я отслеживаю имя пользователя и где я нахожусь ,
а также отслеживать веб-токен JSON здесь.
Теперь давайте начнем с просмотра, когда пользователь входит в систему.
Таким образом, когда пользователь входит в систему,
то эта функция под названием login будет вызываться в нашем сервисе auth здесь,
и когда логин вызывается в сервисе auth,
это будет передаваться в параметре под названием user, который содержит
имя пользователя и пароль как часть объекта JavaScript пользователя.
Итак, на данный момент я делаю сообщение HTTP в BaseUrl плюс пользователи/логин.
Обратите внимание также, что здесь
я предоставляю authResponse в качестве квалификатора здесь.
AuthResponse - это не что иное, как интерфейс, который я реализовал здесь,
вверху здесь.
Таким образом, этот интерфейс по существу указывает
информацию, которая вернется в качестве
моего ответа аутентификации со стороны сервера,
структуру данных JSON,
возвращающихся со стороны сервера, и соответствующие объекты JavaScript.
Итак, вы заметили, что когда мы обновили сервер,
мы убедились, что сервер отправляет обратно статус,
успех, флаг и токен в строковом индексе.
Таким образом, эта информация получена здесь.
Теперь, когда я делаю сообщение об этом,
я передаю имя пользователя и пароль к сообщению на этой конечной точке /users/login.
Когда ответ возвращается из ответа,
само сообщение ответа будет содержать, как мы видели,
успех, поле маркера,
а также сообщение о состоянии здесь.
Итак, из сообщения ответа
я извлекаю токен, а затем передаю его в эту функцию, которую я реализую здесь,
локальную функцию здесь, называемую StoreUserCredentials.
Таким образом, это будет возвращено в мое приложение и будет храниться на моей стороне клиента,
в локальное хранилище.
Затем, из этой функции,
я возвращаю эту информацию обратно в
вызывающую функцию, откуда я инициировал процесс входа в систему.
Таким образом, я буду указывать моему компоненту входа, что логин был успешным,
а затем я также передам имя пользователя моему компоненту входа,
который затем передаст эту информацию компоненту заголовка,
а компонент заголовка использует это, чтобы отразить имя пользователя
на в верхней части,
а также мы поймаем ошибку здесь.
Таким образом, это очень простая реализация того, как мы выполнили логин.
Когда вы выполняете выход,
обратите внимание, что я делаю, когда пользователь вызывает выход из системы.
Когда пользователь вызывает выход из системы,
я просто уничтожаю учетные данные пользователя, что
включает в себя выброс
JSON Web Token, который я получил, когда я вошел в свое приложение.
Затем, некоторые дополнительные вспомогательные функции, которые я реализовал здесь под названием
GetUsername, вошли в систему и GetToken,
которые будут полезны из моих других приложений,
других компонентов и сервисов.
Итак, теперь давайте посмотрим на некоторые из вспомогательных функций, которые мы реализовали здесь.
Таким образом, LoadUserCredentials извлечет учетные данные из локального хранилища.
Итак, вы заметили, что здесь я вызываю LocalStorage, а затем говорю GetItem.
Итак, LocalStorage здесь использует
локальное хранилище веб-браузера, которое поддерживается стандартными веб-браузерами,
и хранит информацию там,
а затем извлекает эту информацию там.
Затем, оттуда, учетные данные,
если они действительны,
то эти учетные данные будут установлены здесь.
Таким образом, все эти переменные, которые я определил здесь, будут инициализированы
соответствующей информацией после получения из LocalStorage.
Теперь, аналогичным образом, функция StoreUserCredentials
, которую я реализовал здесь, вызывается из метода входа.
Когда эта информация передается,
учетные данные передаются,
эта информация хранится в LocalStorage на данный момент с этим ключом.
Затем UseCredentials в основном
устанавливает все переменные, которые у меня есть в службе auth.
Таким образом, он устанавливает токен,
он устанавливает имя пользователя,
а затем устанавливает функцию IsAuthenticated здесь.
Итак, обратите внимание, что само имя пользователя здесь,
я объявил его как субъект,
который не что иное, как наблюдаемый здесь.
Поэтому, когда я говорю,
sendUserName здесь, я говорю имя пользователя учетных данных.
Итак, этот SendUsername реализован прямо в верхней части здесь,
обратите внимание, что здесь возвращается наблюдаемое значение.
Поэтому я говорю следующее имя пользователя.
Итак, наблюдаемый.
Отправит обратно имя, которое поставляется
в качестве параметра тому, кто зарегистрировался, чтобы наблюдать это наблюдаемое.
Таким образом, это наблюдаемое, я буду наблюдать это из
моего компонента заголовка и таким образом, всякий раз, когда имя пользователя изменяется,
либо от неопределенного до данного имени пользователя, либо наоборот,
тогда я могу обновить свою панель инструментов в
компоненте заголовка, чтобы отразить, вошел ли пользователь в систему или вышел из системы.
Таким образом, это настраивается с помощью этого UseCredentials.
Теперь DestroyUserCredentials в основном устанавливает токен аутентификации неопределенным.
Он очищает имя пользователя, а затем устанавливает IsAuthenticated на false, а затем
удаляет эту информацию из моего локального магазина, поэтому
он в основном выбрасывает jsonwebtoken в этой части.
Так вот как вы любите пользователя.
Таким образом, как только jsonwebtoken потерян, пользователь больше не может
аутентифицировать себя
на стороне сервера, потому что токен больше не доступен для нас.
Так вот как мы реализуем функцию выхода из системы в нашем приложении.
Поэтому найдите некоторое время, чтобы пройти через
auth.service здесь, чтобы увидеть, как я реализовал различные функциональные возможности.
Теперь, к этому времени,
я уверен, что вы хорошо знакомы с тем, как реализованы Angular приложения,
поэтому вам не должно быть так сложно понять, как реализован этот код.
Теперь еще одна функция, на которую я хотел бы обратить ваше внимание, - это токен проверки JWT, здесь.
Эта функция может быть вызвана в любой момент, чтобы проверить и
убедиться, что наш веб-токен JSON по-прежнему действителен.
Таким образом, здесь я отправляю запрос get пользователям для проверки косой черты JWT токен.
Напомним, что мы реализовали этот маршрут на стороне сервера в user's.js и.
Таким образом, оттуда мы сможем проверить, остается ли jsonwebtoken действительным или нет.
Если jsonwebtoken недействителен,
то мы собираемся уничтожить
учетные данные пользователя, а затем ожидать, что пользователь снова войдет в систему.
Если jsonwebtoken действителен, то все в порядке, и
мы можем продолжить, позволяя пользователю
распознавать, что мы вошли в.So, даже если вы закроете
свой браузер, а затем повторно открыли браузер, а затем снова открыли ваше угловое приложение,
если вы вошли в систему раньше, и jsonwebtoken был сохранен в локальном хранилище,
его можно получить оттуда, а затем
ваш статус входа будет восстановлен в вашем угловом приложении.
Если истек срок действия веб-токена json,
то нам не будет разрешено войти в систему.
Таким образом, каждый раз, когда вы обновляете свое угловое приложение в
вашем браузере или перезагружаете свое угловое приложение в вашем браузере, вы будете
проверять jsonwebtoken, чтобы убедиться, что оно по-прежнему действует.
Если он недействителен, то пользователь будет
очищен, и поэтому вам придется снова войти в систему.
Если нет, то информация зарегистрированного пользователя извлекается
из LocalStorage, а затем инициализируется в моем угловом приложении.
Периодически, если в любой момент времени ваш сервер
отвечает 401 Несанкционированное сообщение,
даже в этот момент,
мы снова проверим, что jsonwebtoken действителен, а затем разрешим это.
Мы сделаем это, используя что-то, называемое Http перехватчиками.
Позвольте мне осмотреть эту часть кода,
а затем объяснить вам, как работают перехватчики за короткое время.
Итак, теперь в дополнение к AuthService,
в самой папке служб вы увидите этот файл под названием AuthInterceptors.ts файл.
Итак, откройте это, и вы увидите, что здесь я реализовал Http перехватчики.
Теперь, что делают эти перехватчики Http,
это поддерживается клиентом Http, который поставляется как часть Angular 4.4.
То, что делают перехватчики http, это они могут перехватывать
исходящие сообщения запросов
, вносить изменения в сообщение запроса до его отправки.
Аналогичным образом, они могут перехватывать входящие ответные сообщения, а затем изменять
входящее ответное сообщение до передачи ответа угловому приложению.
Итак, через перехват, так как работает этот перехватчик?
Таким образом, чтобы заставить этот перехватчик работать,
мы реализуем, как вы видите,
класс, называемый как HttpInterceptor, расширяя HttpInterceptor.
Поэтому здесь я реализовал AuthInterceptor.
Итак, что делает этот AuthInterceptor?
Этот AuthInterceptor в основном захватывает исходящие запросы.
Таким образом, чтобы захватить исходящий запрос, вы вызываете эту функцию, называемую перехватом,
а затем это даст вам доступ к запросу и следующему.
Таким образом, вы могли бы цепочки в
куче перехватчиков один за другим, если вы так решите,
чтобы они могли обрабатывать исходящие запросы один за другим, если вы так решите.
То, что делает этот перехват, это дает вам доступ к сообщению запроса Http.
Поэтому, когда я получаю доступ к сообщению запроса Http,
вы заметите, что здесь я внедряю службу auth.
В отличие от того, как мы вводили услуги в компоненты,
здесь я показываю использование инжектора.
Инжектор является частью углового кода.
Таким образом, используя инжектор, вы можете вводить службы или
другие компоненты в другие службы или компоненты.
Итак, здесь вы видите, что я вводим сервис auth здесь, используя это.
Теперь еще одна причина заключается в том, что если я напрямую введу службу в свой конструктор,
он разработает круговую зависимость между перехватчиком и AuthService,
и это приведет к тому, что ваш код не будет работать.
Так что это работа вокруг проблем.
Таким образом, ваш перехватчик - потому что мне нужен
AuthService, чтобы получить токен из
AuthService и AuthService, в свою очередь, зависит от этого перехватчика, поэтому для того,
чтобы разорвать цикл, я явно впрыскиваю AuthService в этом случае.
Теперь это то, что я понял с помощью проб
и ошибок, я сначала пошел вперед и просто ввел
нечетные службы в конструктор, а затем обнаружил, что
Angular не компилировал код, тогда я понял, что
там была ошибка, а затем после выполнения поиска Google затем
выяснили, что это альтернативный способ обработки одного и
того же, и это работает намного лучше для нашего приложения.
Поэтому, как только я введу AuthService из службы, я
получаю токен, а затем замечаю, что я здесь делаю.
Здесь я говорю клон const auth req клон.
Таким образом, мы будем клонировать запрос, а затем мы будем настраивать в заголовках.
Таким образом, мы скажем, заголовки req устанавливают
авторизацию, а затем заметим, что я
настраиваю заголовок авторизации, чтобы быть носителем.
Плюс AuthToken.
Поэтому в заголовке авторизации я настраиваю носителя и AuthToken здесь.
Так вот как я настраиваю
заголовок авторизации в
исходящем сообщении запроса в моем угловом приложении. Так вот, прямо там.
И вот как я гарантировал, что все исходящие запросы будут
иметь заголовок авторизации, настроенный до того, как они будут переданы на сторону сервера.
И после этого мы просто передадим его следующему перехватчику, если он существует,
или в исходящую очередь,
так что сообщение запроса будет отправлено на сторону сервера.
Аналогично, у меня есть еще один перехватчик, который я реализовал здесь.
Этот перехватчик перехватывает любые несанкционированные
ответные сообщения, возвращающиеся со стороны сервера.
Таким образом, если сервер отвечает 401 Неавторизованный ответ сообщение.
Поэтому в этот момент снова, то же самое,
я создал AuthService здесь,
а затем, внутри здесь, я скажу, что
обрабатывайте ошибку.
Так вот, где я получу HttpEvent здесь.
HttpEvent является объектом более низкого уровня, чем запрос,
но это позволяет нам получить доступ к входящему ответному сообщению,
а затем мы проверим, есть ли ошибка,
а затем если ошибка является экземпляром ответа HTTP ошибки,
и если статус ошибки 401.
Таким образом, это означает, что я только что обнаружил, что сервер отправил сообщение об ошибке 401.
Таким образом, это означает, что на стороне сервера была проблема авторизации.
Затем в этот момент я проверю
веб-токен json, чтобы убедиться, что веб-токен json по-прежнему действителен.
Если он недействителен,
я отброшу свои учетные данные и ожидаю, что пользователь снова войдет в систему.
Таким образом, я гарантирую, что если мой веб-токен json
истекает в процессе попытки получить данные,
которые все равно будут перехвачены здесь, потому что если сервер отвечает 401,
я перехвачу это, а затем очищу
мой веб-токен json, и я ожидаю, что пользователь снова войдет в систему.
Мы также можем перенаправить пользователя на страницу входа, если вы хотите,
но с приложением Angular это немного сложнее
сделать, и я не хотел путать вас, делая все это.
Вместо этого я просто выхожу из системы
пользователя в этот момент, а затем уничтожаю учетные данные пользователя,
так что пользователь будет ожидать входа в систему в этот момент.
Итак, простая обработка того, как мы вводим заголовок авторизации в исходящий запрос,
а также перехватываем любые 401 несанкционированные сообщения
, которые возвращаются со стороны сервера.
Итак, вы видите, как эти дополнительные изменения должны быть
внесены в ваше угловое приложение, чтобы заставить его работать с вашей серверной стороной.
С установленной частью аутентификации,
если у вас не было аутентификации, и если вы просто собирались
получить доступ к остальным конечным точкам API и выполнять операции,
вам даже не нужно беспокоиться об этих вещах.
Проверка подлинности не требуется.
Данные могут быть извлечены очень легко.
Но для любых
операций post, put и delete,
мы должны поддерживать все эти функции.
Поэтому я реализовал часть аутентификации в своем приложении.
Также, как я иллюстрировал ранее
, когда ни один пользователь
не вошел в систему, мы не сможем перейти к моей конечной точке
избранного, но когда пользователь вошел в систему,
то мы сможем увидеть мои избранные для конкретного пользователя.
Это реализовано с помощью охранников маршрутов в Angular.
Теперь, чтобы реализовать эти охранники маршрутов,
я реализовал другую службу здесь под названием AuthGuardService.
Таким образом, в этом AuthGuardService
мы реализовали этот метод под названием canActivate метод, который
мы будем подкласс, чтобы реализовать это.
И в методе CanActivate
реализация вернет логическое значение,
и в этом случае
мы проверяем, если этот пользователь вошел в систему,
то мы позволим пользователю перемещаться.
В противном случае пользователь переместится на домашнюю конечную точку.
Таким образом, в этом случае реализована защита маршрута.
Теперь, чтобы использовать этот маршрут охранник,
мы пойдем, чтобы посмотреть, как маршруты обновляются, чтобы использовать охранники маршрута.
Таким образом, в файле routes.ts,
вы можете видеть, что для компонента Избранное,
мы видим, что мы указываем путь как избранное и компонент как
FavoritesComponent, а затем мы указываем это другое поле
под названием CanActivate, для которого мы указали authGuard в качестве параметра здесь,
и это AuthGuard - это не что иное, как сервис AuthGuard, который мы реализовали,
который импортируется здесь.
Таким образом, когда AuthGuard оценивает false,
то вам не будет разрешено перейти к компоненту избранного
, вместо этого вы будете перенаправлены на дом,
но когда пользователь войдет в систему, то, очевидно, AuthGuard будет оценивать true
, и в этом случае
вы сможете , чтобы перейти к выбранному маршруту.
Теперь также есть незначительные изменения в остальных компонентах,
которые позволяют разобраться с
тонкостями того, как ваш клиент и сервер будут общаться друг с другом.
В частности, обратите внимание, как компонент заголовка был обновлен
, чтобы отразить состояние входа пользователя на панели инструментов вверху.
Это еще одно интересное изменение, которое я
сделал в компоненте заголовка в нашем приложении.
Поэтому я оставлю это как упражнение для вас, чтобы выяснить, как это было реализовано.
Там очень простой код.
Тебе будет легко понять это.
Таким образом, со всеми этими изменениями, теперь
мой угловой клиент может взаимодействовать с моим сервером.
Позвольте мне еще раз показать вам, как мы можем разместить некоторые комментарии на сервере,
а затем увидеть комментарий сразу отраженный в блюде.
Итак, снова возвращаясь к нашему приложению,
мы можем теперь перейти в меню, а затем вытащить любое блюдо здесь,
и я могу отправлять комментарии к блюду здесь,
так что я бы сразу установил рейтинг здесь,
и мой комментарий значение здесь.
Обратите внимание, что я не вводим
свое имя пользователя или имя автора здесь, в форме здесь.
Теперь, конечно, для того, чтобы отправить комментарий,
вам нужно войти в систему.
Поэтому, если вы не вошли в систему, этот комментарий не будет принят моим сервером.
Так что позвольте мне сначала войти в систему.
Поэтому я могу войти здесь.
И как только я войду в систему,
вы сразу заметите, что панель инструментов заголовка обновляется, чтобы указать мой статус.
Теперь я могу опубликовать этот комментарий.
И вы заметили, что когда я размещаю
комментарий, комментарий добавляется в список комментариев,
а также заметили, что поле автора автоматически заполняется здесь.
Потому что именно так мы настроили нашу серверную сторону.
В поле комментариев
мы создали нашего пользователя как
ссылку на пользовательскую информацию,
которую мы храним на нашей стороне сервера, и так как мы используем заполнение,
Mongoose Populate на стороне сервера,
информация о пользователе автоматически заполняется
в входящие комментарии с сервера сторона.
Таким образом, вы замечаете, как я использую то, что
сервер уже предоставляет для меня, чтобы автоматически заполнить детали.
Таким образом, незначительные изменения снова даже
на странице сведений о блюде, чтобы отразить использование поддержки комментариев на стороне сервера.
С этим я завершу быструю
иллюстрацию углового клиента, который мы реализовали в рамках этого упражнения.
И я надеюсь, что вы также изучите детали кода в Angular клиенте,
а затем подумайте о том, что вы узнали в угловом курсе, и посмотрите,
как изменения позволяют нам реализовать
в модифицированном угловом клиенте, который теперь
может общаться с сервером и затем поддерживают все функции
, которые мы изначально планировали реализовать как часть как клиента, так и сервера.