Теперь, когда мы завершили разработку полноценного сервера API Rest с помощью LoopBack,
ближайший следующий вопрос, который возникнет в вашем уме, заключается в
том, как мы адаптируем приложение Angular, чтобы использовать этот сервер API Rest?
Как мы уже делали в предыдущих случаях,
нам также нужно будет перенастроить наше угловое приложение, чтобы специально использовать
конечные точки API Rest и
различные запросы API Rest, представленные нашим сервером LoopBack.
Теперь, это то, где мы будем использовать
LoopBack SDK, который может быть автоматически построен для нас с помощью модуля Node.
Мы рассмотрим наши серверы LoopBack,
различные конечные точки API Rest и автоматически построить SDK,
который мы затем можем включить в
наше угловое приложение, а затем иметь возможность общаться с нашим сервером LoopBack,
как для аутентификации, так и для обмена данными.
Чтобы начать работу с этим упражнением,
сначала клонируйте репозиторий git, содержащий
частично заполненное угловое приложение, которое взаимодействует с нашим сервером LoopBack.
Поэтому, чтобы сделать это, перейдите в удобное расположение на вашем компьютере.
Итак, вот я в моей папке Coursera Angular.
Я собираюсь клонировать репозиторий git,
введя git clone
https://github.com/jmuppala/conFusion-Angular6-LoopBack.git,
а затем клонировать этот репозиторий git.
После того, как репозиторий git клонирован,
мы перейдем в папку Shangular6 LoopBack, а затем
выполним установку NPM для установки
всех модулей узла для этого частично завершенного углового приложения.
Чтобы автоматически создать комплект разработки программного обеспечения LoopBack для нашего сервера LoopBack,
мы собираемся воспользоваться помощью этого модуля узла LoopBack SDK Builder.
Таким образом, этот LoopBack SDK Builder
является управляемым сообществом узловым модулем, который на самом деле разработан
из официального LoopBack SDK Angular, который разработчики LoopBack выпустили.
Loopback SDK Угловая поддерживаемая угловая JS.
Таким образом, это было изменено в этом Loopback SDK Builder
для поддержки угловых двух и приложений.
Таким образом, LoopBack SDK Builder,
сам модуль узла после его установки в папку проекта сервера,
вы можете использовать LoopBack SDK Builder для
автоматического прохождения через ваше приложение LoopBack, которое вы уже построили.
Это автоматически создаст все, что нам
нужно, чтобы начать работу в нашем угловом приложении.
Таким образом, он строит комплект разработки программного обеспечения.
Таким образом, в комплекте разработки программного обеспечения,
LoopBack SDK Builder экспортирует
все интерфейсы, все модели для различных данных, которые мы собираемся хранить на
нашем сервере LoopBack, а также
все службы API, которые могут быть использованы в вашем угловом приложении.
Таким образом, ваши модели и ваши сервисы автоматически приходят на поездку после того, как вы создаете SDK.
Теперь дело всего в том, чтобы включить этот SDK в наше угловое приложение,
а затем быстро начать работу.
Поскольку мы уже построили наше угловое приложение в предыдущем курсе,
я собираюсь модифицировать это приложение, чтобы использовать
LoopBack SDK, который мы будем экспортировать из этого LoopBack SDK Builder.
На предыдущем шаге
вы только что установили
частично завершенное угловое приложение, которое
уже было адаптировано для использования LoopBack SDK.
Итак, давайте продолжим и построим
LoopBack SDK, а затем развернем его в наше угловое приложение,
а затем перейдем и скомпилируем наше угловое приложение и начнем с ним.
Чтобы настроить пакет SDK LoopBack,
перейдите в папку сервера LoopBack на вкладке терминала или в окне команд.
Итак, я нахожусь в папке сервера LoopBack.
Итак, в этой папке
позвольте мне пойти дальше и установить этот LoopBack
SDK Builder.
Как только строитель будет установлен,
давайте продолжим и построим LoopBack SDK.
Чтобы построить LoopBack SDK,
мы собираемся воспользоваться помощью инструмента командной строки LB-SDK, который этот модуль LoopBack SDK
автоматически настраивает для нас.
Итак, чтобы получить доступ к этому, мы скажем: /node модули.
Таким образом, в модулях узла
есть папка a.bin, которая автоматически создается всякий раз, когда вы
устанавливаете различные модули узлов в папку там.
Итак, чтобы перейти в папку the.bin,
мы получим доступ к этой команде LB-SDK там,
которая автоматически устанавливается,
затем мы вызовем этот сервер ширины. /server.js,
и нам нужно указать путь к угловому приложению, которое мы только что настроили.
Итак, мое угловое приложение в настоящее время находится в
моих документах Coursera угловая папка LoopBack.
Так что, позвольте мне скопировать эту часть.
Затем позвольте мне перейти в мой терминал или окно команд,
где я пытаюсь настроить свой LoopBack SDK.
Итак, в подсказке,
поскольку он находится в папке Мои документы,
я собираюсь ввести полный путь к этому, начиная с моей корневой папки в моем mac.
Если вы используете их Windows,
убедитесь, что этот путь указывает полный путь, начиная с C двоеточия или D двоеточия,
независимо от того, какой диск вы устанавливаете на компьютере с Windows.
Итак, полный путь к вашей угловой папке LoopBack,
а затем мы скажем,
/SRC, исходная папка там, а затем приложение.
Затем мы собираемся развернуть SDK в
общей папке в подпапке SDK там.
Мы хотим, чтобы этот LoopBack SDK Builder
автоматически развернул веб-версию NG2 SDK.
Таким образом, это версия, которая будет поддерживать
веб-приложения и наше угловое приложение в этом случае.
Если вы создаете это для собственного приложения сценария, вы скажете,
NG2 родной для создания SDK для приложения Native Script.
Поскольку я создаю свое угловое приложение,
я просто скажу, NG2 web,
а затем позвольте Loopback SDK Builder автоматически
создавать набор для разработки программного обеспечения, а затем развертывать его
в моей папке с исходным приложением/shared/sdk.
Итак, через несколько секунд
SDK создается и развертывается в моем угловом приложении.
Теперь, прежде чем я запустим свое угловое приложение,
позвольте мне запустить мой сервер LoopBack,
и прежде чем я это сделаю, я перейду на другую вкладку терминала
здесь, а затем запустим мой сервер MongoDB,
так что я скажу:
Mongod —dbpath=data, а затем
запустим мой сервер MongoDB.
Во-первых, позвольте мне запустить сервер LoopBack.
Итак, при запуске NPM,
и мой сервер LoopBack должен быть запущен и запущен через короткое время.
Затем, теперь перейдя к моему приложению LoopBack,
позвольте мне открыть это приложение в
моем коде Visual Studio, чтобы мы могли посмотреть на исходный код.
Как только мое приложение будет открыто в коде Visual Studio,
позвольте мне взять это в новое окно рабочего стола.
Затем позвольте мне также начать развертывание приложения Angular,
набрав NGserve в подсказке и дождитесь компиляции моего приложения Angular.
После того, как мое угловое приложение будет скомпилировано и применено,
позвольте мне перейти в браузер,
а затем сначала проверить это угловое приложение.
Перейдя в браузер,
позвольте мне открыть новую вкладку здесь,
а затем введите localhost: 4200, и вы увидите
угловое приложение, развернутое в этом окне браузера,
и вы можете увидеть, что Главная,
страница о нас со всеми данными,
затем Меню, а также Мои избранные.
В настоящее время это ничего не показывает, потому что
ни один пользователь не вошел в систему и страница контактов, как и прежде.
Поэтому, чтобы войти в систему, позвольте мне войти в качестве пользователя, а затем я буду вводить
свое имя пользователя и пароль здесь,
а затем, как только я войду в систему, вы сможете увидеть, что когда я перехожу в Мои
избранные, избранные этого конкретного пользователя будут отображаться здесь.
Как и раньше, мы можем вводить комментарии, а затем отправлять комментарии,
а затем также добавлять элементы в избранное и так далее.
Все функциональные возможности, которые вы видели с более ранними
версиями приложения Angular также поддерживаются в этой версии приложения Angular.
Также для того, чтобы ваш сервер LoopBack мог обслуживать изображения,
все эти данные будут храниться в коде сервера в клиентской папке кода сервера.
Итак, в клиентской папке моего сервера LoopBack
обратите внимание, что я создал эту подпапку с
именем images, а затем сохранил все изображения в подпапку.
Теперь, чтобы эти изображения служили, а также для
клиентской папки, которая будет использоваться в качестве общей папки для моего сервера LoopBack,
затем в пару изменений, которые мне нужно сделать на моем сервере LoopBack.
Теперь, первое, что вам нужно сделать, это
перейти в папку загрузки и в папку загрузки,
вы увидите этот файл root.js здесь,
который содержит эту информацию здесь.
Теперь вы можете либо удалить файл root.js,
либо просто переименовать файл root.js в что-то другое.
Итак, здесь вы видите, что я переименовал этот файл в root.jsold с расширением jsold.
Теперь этот файл больше не должен содержать расширение the.js.
Таким образом, все, кроме расширения the.js, в порядке.
Итак, это означает, что в этом случае
мой сервер LoopBack, когда он запускается, не будет выполнять код в этой папке.
Теперь, когда вы посмотрите на код в файле root.js, который был настроен ранее,
вы увидели, что маршрутизатор был настроен таким образом, что,
когда вы получаете доступ к косой черты, которая является корневой папкой ваших серверов,
то он будет просто обслуживать серверы LoopBack статус и действительно,
это то, что мы видели наш сервер LoopBack, обслуживающий
время безотказной работы и время последнего перезапуска нашего сервера.
Мы не хотим, чтобы это делало,
вместо этого мы хотим, чтобы наш сервер LoopBack мог использовать все, что мы
помещаем в папку клиента в качестве общей папки, и поэтому
любое клиентское приложение может быть развернуто в
клиентской папке моего сервера LoopBack и должно быть
доступно, когда мы обращаемся к LoopBack в его стандартных конечных точках косой черты.
Таким образом, это корень папки сервера.
Итак, чтобы сделать это, первое, что вам нужно сделать,
это изменить имя файла root.js на root.
например, вы можете просто переименовать его в
root.jsold или вы можете просто удалить этот файл.
Этот файл не будет нужен в этой версии моего сервера LoopBack.
Теперь, не только это,
вторая часть, которую вам нужно перенастроить, - это войти в файл middleware.json здесь.
Файл middleware.json.
В файле middleware.json,
если
вы прокрутите вниз, вы увидите, что здесь
изначально это просто будет содержать файлы: а затем пустая скобка здесь.
Теперь, в эту пустую скобку здесь,
просто добавьте этот код здесь,
который говорит loopback #static, и он говорит param$!.. /клиент.
Таким образом, это укажет моему серверу LoopBack
, что доступная здесь клиентская папка
должна использоваться в качестве статической общей папки для моего сервера LoopBack.
Таким образом, все, что помещено в клиентскую папку, можно получить с моего сервера.
Итак, это дополнительное изменение, которое вам нужно сделать в файле middleware.json.
Итак, как только вы сделаете эти два изменения,
ваш сервер LoopBack будет настроен для обслуживания данных, включая
изображения, которые вы собираетесь поместить
в подпапку изображений в папке клиента здесь.
Итак, убедитесь, что скопировали изображения в клиентскую папку здесь, а второй -
перейти в файл middleware.json в папке сервера,
а затем обновить эту часть.
После того, как мы это сделаем, эти изображения могут быть доступны, просто доступ к
/images/ имя файла изображения, чтобы получить доступ к
этим изображениям, потому что наши блюда
, лидеры и акции потребуют эти файлы изображений и
так, что будут доступны для нас с
сервера LoopBack, а также что бы вы ни поместили в клиентскую папку.
Например, вы можете подготовить папку распространения
для вашего углового приложения и просто скопировать
все содержимое папки распространения в клиентскую папку здесь,
а затем, если вы получите доступ к серверу LoopBack в
его стандартной корневой конечной точке,
то ваше угловое приложение будет автоматически обслуживается сервером LoopBack.
Таким образом, это два изменения, которые вам нужно сделать на вашем сервере LoopBack.
Конечно, вам должно быть интересно, как именно этот SDK построен,
где именно этот SDK и как я на самом деле
собираюсь использовать его в моем угловом приложении.
Итак, чтобы сделать это, давайте перейдем к нашему угловому приложению и в исходной
папке, в папке исходного приложения,
теперь, когда вы открываете общую папку,
вы увидите, что здесь есть подпапка с именем SDK и внутри этой подпапки SDK,
вы найдете целую кучу файлов здесь,
lb.config.ts, index.ts и внутри сокетов хранения
, служб и внутри службы,
у вас есть пользовательские службы и основные службы здесь,
а также различные модели, которые развернуты здесь.
Модели на самом деле содержат структуры моделей
для наших различных моделей, которые мы реализуем.
Теперь это SDK LoopBack.
Этот код автоматически создается для вас, и если вы хотите,
вы можете просто войти, а затем
пройти через эти файлы, чтобы просто увидеть, что там доступно.
Убедитесь, что не изменяйте ни один из файлов в
этой подпапке SDK, потому что это
автоматически создается для вас Loopback SDK Builder,
и это будет содержать все настроенные таким образом, чтобы
ваш сервер LoopBack мог быть доступен из вашего углового приложения.
Услуги, которые я собираюсь использовать, доступны здесь.
Итак, как нам это использовать?
Итак, чтобы помочь вам понять, как мы используем это,
давайте посетите наш домашний компонент, а затем посмотрим, как теперь обновляется домашний компонент.
Итак, когда вы перейдете к домашнему компоненту,
вы заметите, что я теперь импортирую блюда из.. /shared/sdk/модели.
Итак, это модели, которые автоматически экспортируются в
SDK моим Loopback SDK Builder.
Так вот, здесь будет определена моя модель посуды.
Итак, я просто собираюсь использовать модель посуды.
Аналогично, сам сервис доступен как этот DishesAPI,
как вы можете видеть здесь и этот DishesAPI находится в.. /shared/sdk/services папка здесь.
Аналогичным образом, API промоакций и промоакций,
а также API лидеров и лидеров.
Итак, все они созданы автоматически для меня Loopback SDK Builder.
Теперь, когда вы войдете в код,
вы теперь заметите, что я объявлю блюдо как блюда,
продвижение как акции, и лидер как /лидеры.
Эти три модели экспортируются с помощью Loopback SDK Builder.
Также обратите внимание, как я перенастроил три службы здесь.
Теперь мой сервиз блюд относится к API блюд,
сервисам продвижения, ссылающимся на API рекламных акций,
и сервису лидеров для API лидеров,
а также замечаю, как я обращаюсь к сервису блюд здесь.
Итак, я скажу, что это блюдо службы найти один и где признакам равно true.
Итак, вот где вы помните, что в моем LoopBack rest API Explorer
я набрал это в фильтр там,
затем я попытался найти там блюда.
Итак, это именно то, что я делаю здесь также в моем коде здесь.
Итак, этот Findone, затем поставленный с этим,
найдет один элемент, а затем вернет его здесь,
а затем, что я присваиваю каждому этому блюду здесь, а
остальная часть моего углового приложения работает точно так же, как и раньше.
Теперь также обратите внимание, что в конструкторе
обратите внимание, как я сконфигурировал это, называемое конфигурацией LoopBack.
Теперь, чтобы сделать конфигурацию LoopBack в каждом компоненте, который вы используете,
вам нужно импортировать эту конфигурацию LoopBack из этой общей папки SDK здесь, а также
эту версию API, которую я объявляю.
Я обновил этот файл baseurl.ts.
Поэтому в базовой папке URL
я обновил это до моего имени моего компьютера двоеточия 3000.
Таким образом, этот убедитесь, что замените это
IP-адресом или именем вашего конкретного компьютера, на котором вы работаете.
Итак, убедитесь, что обновите базовый URL-адрес здесь, а версия API - это просто строка.
Говорить API здесь.
Таким образом, эти два будут использоваться в моем домашнем файле component.ts.
Поэтому я импортирую эту версию API здесь и LoopBackConfig.
BaseUrl, который я уже
вводил в мой конструктор здесь, так что он уже доступен здесь,
а затем в моем конструкторе моего компонента
мне нужно сделать эти два оператора здесь.
Итак, мы скажем: «LoopBack устанавливает базовый URL
в базовый URL», который совпадает с тем, что я только что
ввел туда, а затем оглядываюсь на установленную версию API для версии API здесь.
Поэтому эти два мне нужно настроить в моем домашнем компоненте,
а также в любом другом компоненте, где я обращаюсь к моему серверу LoopBack,
мне нужно настроить это.
Теперь конструктор LoopBack SDK предполагает, что нам нужно
сделать это в каждом из компонентов здесь.
Кроме того, вы заметите, что если вы перейдете в файл module.ts приложения в файле module.ts,
я удалил все входы всех других служб, и вместо этого я импортирую
это здесь называется модулем импорта SDK Browser из общего SDK.
SDK Browser модуль здесь,
и если вы войдете в входные данные здесь,
вы увидите, что я настроил этот SDK Browser Module.ForRoot здесь, во входах.
Таким образом, этот модуль SDK Browser автоматически настраивается, когда мы создаем наш LoopBack SDK, и
нам просто нужно импортировать его в наш
файл app module.ts, а также заметить, что поставщики,
где мы настроили наши услуги,
больше не содержат ни одного из сервисов, потому что
поставляется как часть моего LoopBack SDK,
поэтому единственное, что я предоставляю, - это базовый URL-адрес здесь.
Я удалил все остальные из моего файла приложения module.ts здесь.
Итак, это одно изменение, которое вы заметите.
Таким образом, если перейти к файлу About component.ts, файлу
DishDetail component.ts, файлу
favorites component.ts, а также файлу menu component.ts.
Итак, давайте посмотрим на файл component.ts.
Таким образом, вы увидите здесь снова, что я импортирую эти
четыре, а затем в моем компоненте меню я говорю:
API посуды служб Dish, а затем я
настраиваю версию набора LoopBackConfig BaseUrl SetaPi.
Я уже сделал это в угловом репозитории, который я предоставил
вам для моего углового приложения для сервера LoopBack,
а также вы увидите, что я только что сделал некоторые изменения здесь.
Так что, если вы хотите, чтобы найти все элементы из блюда службы, так что вы просто скажите
Dishservice.Find и что вернет
все блюда, которые есть в моем LoopBack сервере здесь.
Так вот, что я извлекаю здесь.
Так что остальная часть кода должна выглядеть знакомым здесь, за исключением того, что здесь я называю
блюда равны блюдам и массиву блюд здесь.
Таким образом, это изменение, которое вы увидите в компоненте меню.
Теперь вам должно быть интересно, как работает аутентификация пользователя в этом случае.
Для аутентификации пользователя позвольте мне обратить ваше внимание на
два места, где я использую аутентификацию пользователя.
Давайте сначала перейдем к компоненту входа.
Итак, в компоненте входа
вы увидите, что в компоненте входа я импортирую эти два здесь,
клиентский API, который является службами, которые позволяют мне
выполнять аутентификацию пользователя и входить в систему и выходить из системы,
а также я импортирую модель клиента и
модель токенов доступа и в компоненте входа,
вы увидите, что служба Auth теперь не что иное, как API клиента, а
также вы заметите, что в компоненте входа, когда форма входа будет отправлена,
я называю этот AuthService.Login.
Эта функция входа, которая доступна через API клиента.
Напомним, когда мы пытались войти в систему с помощью проводника LoopBack rest API,
мы использовали конечную точку клиента для входа в систему.
Так что это именно то, что я делаю в коде здесь.
Таким образом, мы скажем этот authService.login, и здесь вы видите, что
он принимает эти бесплатные параметры здесь,
имя пользователя и пароль в качестве первого объекта JavaScript здесь,
а затем я также указываю этот user.remember., .remember это флаг
из флажка запомнить меня, который мы имеем в нашем диалог компонентов входа там.
Таким образом, когда пользователь проверяет, что информация пользователя будет
автоматически сохраняться SDK.
Служба аутентификации, предоставляемая внутри SDK.
Итак, теперь вы видите, что мне не нужно
явно реализовывать любую службу авторизации, которая
автоматически доступна мне через
API клиента, который доступен как сервис здесь.
Итак, вот как я вхожу в систему пользователя здесь,
и когда пользователь войдет в это, вернет
объект JavaScript, а из объекта JavaScript я получаю
res.user.. пользователь предоставляет информацию пользователя для меня, и я
просто отправляю это в мой HeaderComponent здесь.
Так что зайдя в HeaderComponent.
Итак, давайте перейдем к компоненту заголовка,
а в файле HeaderComponent.ts
вы увидите, что снова здесь я импортирую клиентский API и
клиент, а также вы заметите, что в API клиента
я указываю здесь, что я говорю, что
этот клиент является этим AuthService GetCachedcurrent.
Поэтому, если пользователь заблокирован в текущей зарегистрированной
информации пользователей приводится в AuthService, который является не чем иным, как API клиента.
Итак, когда я вызываю этот getCachedCurrent, это вернет текущего пользователя, зарегистрированного в данный момент.
Если ни один пользователь не вошел в систему,
это вернет null.
Так что это один из способов, которые я могу проверить, вошел ли пользователь в данный момент или нет.
Таким образом, если пользователь в данный момент вошел в систему, то this.customer
получит информацию о клиенте, который загружен в.
Информация о клиенте, включая имя, имя последнего,
адрес электронной почты и профиль другого пользователя будут доступны для этого объекта this.customer.
Итак, здесь я проверяю, чтобы убедиться, что this.customer не является нулевым.
Если он не равен нулю, я сохраню имя пользователя в
this.customer.username, и таким образом, когда
имя пользователя установлено, мой заголовок
на панели инструментов в моем HeaderComponent будет отражать имя пользователя там.
Теперь, чтобы выйти из системы пользователя, все, что я делаю, я устанавливаю имя пользователя и
переменные клиента на null, а затем я просто назвал authService.log,
AuthServices - это customeRapi.Logout, и вот как я выхожу пользователя.
Когда пользователь выходит из системы,
его или ее учетные данные уничтожаются.
Теперь все это позаботится автоматически службой API клиента,
которая доступна в моем LoopBack SDK, который я только что создал там.
Итак, вы заметили, что, как LoopBack SDK Builder создает
службы и модели и все, что мне нужно, и в моем угловом приложении,
я просто импортирую их, а затем использую
их для настройки моего углового приложения.
Итак, как только я создаю
LoopBack SDK, используя LoopBack SDK Builder, все, что мне осталось,
реализует компоненты и их шаблоны представлений, которые сидят все остальное.
Службы автоматически создаются для меня LoopBack SDK Builder,
модели автоматически создаются для меня, и все, что мне нужно сделать, это
просто импортировать их во все компоненты, где мне нужно использовать их.
Итак, обратите внимание, как это угловое приложение было обновлено, чтобы использовать LoopBack SDK.
Теперь, если вам нужна дополнительная информация о том, как следует использовать LoopBack SDK,
вы также можете проверить документацию, предоставленную LoopBack SDK Builder.
Таким образом, если вы перейдете к LoopBack SDK Builder,
ссылка на это будет доступна в дополнительных ресурсах для этого урока,
а в LoopBack SDK Builder
у вас будет вся информация, необходимая
для использования SDK, созданного LoopBack SDK Builder.
Поэтому, если вы перейдете к документации вики.
В документации вики много объяснений того, как может
быть использован LoopBack SDK Builder или SDK, сгенерированный LoopBack SDK Builder, приведены здесь.
Итак, я просто просмотрел эту документацию, чтобы выяснить, как
использовать SDK, созданный LoopBack SDK Builder,
а затем перенастроил мое угловое приложение, чтобы использовать его
для взаимодействия с моим сервером LoopBack.
Таким образом, я быстро продемонстрировал вам, как
вы можете создать свое угловое приложение и
воспользоваться SDK, созданным LoopBack SDK Builder,
чтобы получить доступ к вашему серверу LoopBack из вашего углового приложения.
Аналогичный подход будет также уместен для вашего приложения Ionic.
Для приложения Native Script вы создаете SDK с NG2 родной
в командной строке вместо NG2 web, как мы использовали при создании этого SDK.
С этим быстрым введением о том, как мы можем использовать
LoopBack SDK Builder для создания SDK, а
затем использовать его в нашем угловом приложении,
они подойдут к концу этого упражнения.