Теперь, когда мы завершили разработку полноценного сервера REST API с помощью Loopback,
ближайший следующий вопрос, который возникнет у вас в голове, заключается в
том, как мы адаптируем приложение React для использования этого сервера REST API?
Как мы уже делали в предыдущих случаях,
нам также нужно перенастроить наше приложение React, чтобы специально использовать
конечные точки REST API и
различные запросы REST API, предоставляемые нашим сервером Loopback.
Чтобы начать работу с этим упражнением, сначала
клонируйте репозиторий git, содержащий
завершенное повторное приложение, которое взаимодействует с нашим сервером Loopback.
Поэтому, чтобы сделать это, перейдите в удобное расположение на своих компьютерах.
Я собираюсь клонировать репозиторий git,
введя git clone
https://github.com/jmuppala/conFusion-React-Loopback.git,
а затем клонировать этот репозиторий git.
После того, как репозиторий git клонирован,
мы перейдем в папку Confusion-React-Loopback, а
затем выполним установку пряжи, чтобы установить все модули узла для этого приложения.
Перед запуском приложения React
убедитесь, что сервер Loopback настроен правильно.
На сервере Loopback,
в папке клиента,
переместите изображения, которые мы дали как файл images.zip,
распакуйте его, а затем переместите изображения в
папку изображений под папкой клиента, как показано здесь.
Кроме того, переименуйте файл root.js как root.jsold или удалите файл root.js.
Нам это больше не нужно в нашем приложении, потому что мы хотим убедиться, что
наш сервер сохраняет содержимое из клиентской папки.
Итак, чтобы добиться этого,
давайте откроем файл middleware.json,
а в файле middleware.json,
в части файлов,
добавьте это в часть файлов вашего middleware.json файла.
Итак, скажем, Loopback static и params: клиент dot dot dot dot slash»,
указывая, что ваш сервер Loopback будет сохранять
статический контент из клиентской папки здесь.
После внесения этих изменений
вы можете запустить свой сервер.
Убедитесь, что ваш сервер MongoDB
также работает и работает, прежде чем запускать ваш сервер Loopback.
Затем, после этого, мы затем скомпилируем и запустим наш клиент React.
Теперь, снова убедившись, что ваш сервер MongoDB и ваш сервер Loopback работают и работают,
перейдите на терминал и добавьте терминал.
Введите начало пряжи, чтобы запустить наше приложение Loopback, приложение React.
Таким образом, когда приложение запускается в браузере,
вы заметите, что приложение Loopback на основе React ведет себя
точно так же, как предыдущие версии приложения React.
Итак, здесь у нас есть Главная страница,
затем у нас есть страница О нас, как мы видим здесь,
затем страница Меню, где пункты меню перечислены здесь,
страница Контакты, как ожидалось.
Затем позвольте мне вернуться на домашнюю страницу, а затем войти в систему в качестве администратора.
Итак, давайте войдем в качестве администратора,
и тогда вы сможете увидеть Мои избранные.
Я ранее вошел в систему, а затем добавил один элемент в «Избранное».
Давайте теперь перейдите в меню, а затем добавить второй пункт в Мои избранные.
Итак, здесь мы добавим этот элемент в избранное,
и тогда вы сможете увидеть, что оба эти элемента теперь находятся в Мои избранные.
Аналогичным образом, вы можете удалить элементы из избранного.
Итак, давайте продолжим и удалим это из нашего Избранного.
Возвращаясь к пункту Меню,
добавим комментарий к одному из блюд.
Итак, позвольте мне нажать на это блюдо,
а затем мы отправим комментарий.
Таким образом, когда мы отправляем комментарий,
как вы можете видеть, комментарий добавляется на
наш сервер там, как
и ожидалось, и результат отображается на странице Dish Detail здесь.
Снова возвращаясь к домашней странице,
мы обнаруживаем, что наше приложение React теперь может взаимодействовать с
сервером Loopback, а затем получать
данные с сервера и взаимодействовать с сервером, как ожидалось.
Теперь, конечно, вопрос, который возникнет у вас в голове, заключается в
том, как это приложение Loopback взаимодействует с сервером Loopback?
Теперь, здесь мы хотели бы отметить, что для Loopback,
поскольку сервер Loopback предоставляет конечные точки REST API,
мое приложение React может получить доступ к серверу Loopback в
соответствующих конечных точках REST API, а затем общаться с сервером,
как мы это сделали с нашим собственным сервером REST API , которые мы реализовали ранее.
Итак, давайте посмотрим на код для модифицированного приложения React.
Переходя к коду нашего приложения,
основные изменения, которые вы заметите, будут в файле ActionCreators.js.
Здесь вы заметите, что теперь мы общаемся с сервером
Loopback вместо сервера REST API, который у нас был ранее.
Таким образом, выборка теперь будет получать доступ к серверу Loopback в конечной точке
api/comments или конечной точке api/diss и так далее.
Таким образом, все эти запросы на выборку обновляются для мгновенного доступа к нашему серверу Loopback.
Таким образом, вы заметите подобные изменения там.
Теперь, помимо входа на наш сервер Loopback,
давайте перейдем к коду входа здесь.
Итак, в пользователе входа
мы отправляем выборку в конечную точку BaseUrl и API/Customers/Login,
а затем мы предоставим учетные данные в теле сообщения запроса, которое выходит.
В ответ
на это сервер отправит ответ.
Затем ответ содержит информацию о токене.
Информация о токене отправляется обратно в виде
идентификатора ответного сообщения.
Таким образом, идентификатор сам служит маркером.
Итак, само ответное сообщение,
я собираюсь сохранить это в моем локальном хранилище, как показано здесь.
Мы строим ответное сообщение, а затем храним его там.
Это ответное сообщение, Response.ID, содержит маркер.
Таким образом, response.id служит JSON Web Token для доступа к серверу Loopback.
Итак, вот почему вы заметите, что в
ситуациях, когда мне нужно получить доступ к серверу, так что, например,
мы заметим, что когда мы получаем или размещаем ваш любимый на сервере,
вы заметите, что я получаю токен, говоря:
пусть токен, JSON синтаксический анализ,
localStorage, getItem, токен здесь,
а затем в поле заголовка авторизации
я сказал, что поле авторизации будет token.id здесь, как показано здесь.
Таким образом, мы сможем аутентифицироваться на сервере Loopback.
Итак, здесь вы видите, что он говорит: baseUrl, api/favorites,
а затем получить список избранного с сервера,
а затем сохранить его в нашем магазине redux.
Итак, большая часть кода остается прежней,
за исключением обновлений, которые мы сделали для
доступа к конечным точкам REST API Loopbacks.
Теперь, для Angular, у нас есть Loopback SDK, который может быть построен для нашего углового приложения.
Но для React нет такой поддержки, доступной из Loopback,
и поэтому мы должны прибегнуть к прямому доступу к
конечным точкам REST API Loopback, как показано здесь, используя fetch,
а затем мы можем общаться с сервером Loopback.
Благодаря этому быстрому пониманию того, как
наше приложение React было обновлено для доступа к нашему серверу Loopback,
мы завершаем проверку сервера Loopback.
Проведите еще некоторое время на изучение некоторых компонентов и посмотрите,
как они используют информацию, полученную с сервера Loopback.
Вы заметите, что большинство компонентов остаются точно такими же, как и раньше,
за исключением некоторых незначительных изменений в избранном компоненте, чтобы получить
информацию с сервера Loopback,
а затем использовать его для отображения списка избранных элементов.
Кроме того, большая часть изменений ограничивается файлом ActionCreators.js,
где мы обновили выборку, чтобы использовать URL для
нашего сервера Loopback, чтобы иметь доступ к различным конечным точкам REST API.
Таким образом, с этим я быстро продемонстрировал вам, как вы можете создать свое приложение.
С этим быстрым введением в том, как мы можем
использовать Loopback в нашем приложении,
мы подошли к концу этого упражнения.