1
00:00:03,650 --> 00:00:10,755
Теперь, когда мы завершили разработку полноценного сервера REST API с помощью Loopback,

2
00:00:10,755 --> 00:00:14,639
ближайший следующий вопрос, который возникнет у вас в голове, заключается в

3
00:00:14,639 --> 00:00:20,090
том, как мы адаптируем приложение React для использования этого сервера REST API?

4
00:00:20,090 --> 00:00:23,140
Как мы уже делали в предыдущих случаях,

5
00:00:23,140 --> 00:00:29,190
нам также нужно перенастроить наше приложение React, чтобы специально использовать

6
00:00:29,190 --> 00:00:31,410
конечные точки REST API и

7
00:00:31,410 --> 00:00:37,960
различные запросы REST API, предоставляемые нашим сервером Loopback.

8
00:00:38,150 --> 00:00:42,075
Чтобы начать работу с этим упражнением, сначала

9
00:00:42,075 --> 00:00:45,275
клонируйте репозиторий git, содержащий

10
00:00:45,275 --> 00:00:51,140
завершенное повторное приложение, которое взаимодействует с нашим сервером Loopback.

11
00:00:51,140 --> 00:00:54,760
Поэтому, чтобы сделать это, перейдите в удобное расположение на своих компьютерах.

12
00:00:54,760 --> 00:00:58,370
Я собираюсь клонировать репозиторий git,

13
00:00:58,370 --> 00:01:00,640
введя git clone

14
00:01:06,440 --> 00:01:15,270
https://github.com/jmuppala/conFusion-React-Loopback.git,

15
00:01:15,270 --> 00:01:18,130
а затем клонировать этот репозиторий git.

16
00:01:19,430 --> 00:01:22,665
После того, как репозиторий git клонирован,

17
00:01:22,665 --> 00:01:30,780
мы перейдем в папку Confusion-React-Loopback, а

18
00:01:30,780 --> 00:01:39,355
затем выполним установку пряжи, чтобы установить все модули узла для этого приложения.

19
00:01:39,355 --> 00:01:42,315
Перед запуском приложения React

20
00:01:42,315 --> 00:01:46,300
убедитесь, что сервер Loopback настроен правильно.

21
00:01:46,300 --> 00:01:47,705
На сервере Loopback,

22
00:01:47,705 --> 00:01:49,410
в папке клиента,

23
00:01:49,410 --> 00:01:54,425
переместите изображения, которые мы дали как файл images.zip,

24
00:01:54,425 --> 00:01:56,780
распакуйте его, а затем переместите изображения в

25
00:01:56,780 --> 00:02:00,540
папку изображений под папкой клиента, как показано здесь.

26
00:02:00,540 --> 00:02:08,660
Кроме того, переименуйте файл root.js как root.jsold или удалите файл root.js.

27
00:02:08,660 --> 00:02:13,310
Нам это больше не нужно в нашем приложении, потому что мы хотим убедиться, что

28
00:02:13,310 --> 00:02:21,050
наш сервер сохраняет содержимое из клиентской папки.

29
00:02:21,050 --> 00:02:22,740
Итак, чтобы добиться этого,

30
00:02:22,740 --> 00:02:25,265
давайте откроем файл middleware.json,

31
00:02:25,265 --> 00:02:27,845
а в файле middleware.json,

32
00:02:27,845 --> 00:02:32,980
в части файлов,

33
00:02:32,980 --> 00:02:38,435
добавьте это в часть файлов вашего middleware.json файла.

34
00:02:38,435 --> 00:02:46,320
Итак, скажем, Loopback static и params: клиент dot dot dot dot slash»,

35
00:02:46,320 --> 00:02:49,595
указывая, что ваш сервер Loopback будет сохранять

36
00:02:49,595 --> 00:02:53,555
статический контент из клиентской папки здесь.

37
00:02:53,555 --> 00:02:55,890
После внесения этих изменений

38
00:02:55,890 --> 00:03:00,080
вы можете запустить свой сервер.

39
00:03:00,360 --> 00:03:04,100
Убедитесь, что ваш сервер MongoDB

40
00:03:04,100 --> 00:03:07,860
также работает и работает, прежде чем запускать ваш сервер Loopback.

41
00:03:07,860 --> 00:03:14,690
Затем, после этого, мы затем скомпилируем и запустим наш клиент React.

42
00:03:14,690 --> 00:03:20,345
Теперь, снова убедившись, что ваш сервер MongoDB и ваш сервер Loopback работают и работают,

43
00:03:20,345 --> 00:03:22,810
перейдите на терминал и добавьте терминал.

44
00:03:22,810 --> 00:03:31,405
Введите начало пряжи, чтобы запустить наше приложение Loopback, приложение React.

45
00:03:31,405 --> 00:03:34,980
Таким образом, когда приложение запускается в браузере,

46
00:03:34,980 --> 00:03:40,750
вы заметите, что приложение Loopback на основе React ведет себя

47
00:03:40,750 --> 00:03:46,670
точно так же, как предыдущие версии приложения React.

48
00:03:46,670 --> 00:03:48,670
Итак, здесь у нас есть Главная страница,

49
00:03:48,670 --> 00:03:52,725
затем у нас есть страница О нас, как мы видим здесь,

50
00:03:52,725 --> 00:03:56,770
затем страница Меню, где пункты меню перечислены здесь,

51
00:03:56,770 --> 00:04:00,260
страница Контакты, как ожидалось.

52
00:04:00,260 --> 00:04:04,535
Затем позвольте мне вернуться на домашнюю страницу, а затем войти в систему в качестве администратора.

53
00:04:04,535 --> 00:04:11,000
Итак, давайте войдем в качестве администратора,

54
00:04:11,000 --> 00:04:14,480
и тогда вы сможете увидеть Мои избранные.

55
00:04:14,480 --> 00:04:19,075
Я ранее вошел в систему, а затем добавил один элемент в «Избранное».

56
00:04:19,075 --> 00:04:24,290
Давайте теперь перейдите в меню, а затем добавить второй пункт в Мои избранные.

57
00:04:24,290 --> 00:04:27,930
Итак, здесь мы добавим этот элемент в избранное,

58
00:04:27,930 --> 00:04:34,850
и тогда вы сможете увидеть, что оба эти элемента теперь находятся в Мои избранные.

59
00:04:34,850 --> 00:04:38,194
Аналогичным образом, вы можете удалить элементы из избранного.

60
00:04:38,194 --> 00:04:42,020
Итак, давайте продолжим и удалим это из нашего Избранного.

61
00:04:42,020 --> 00:04:43,490
Возвращаясь к пункту Меню,

62
00:04:43,490 --> 00:04:47,550
добавим комментарий к одному из блюд.

63
00:04:47,550 --> 00:04:49,560
Итак, позвольте мне нажать на это блюдо,

64
00:04:49,560 --> 00:04:51,855
а затем мы отправим комментарий.

65
00:04:51,855 --> 00:05:01,980
Таким образом, когда мы отправляем комментарий,

66
00:05:01,980 --> 00:05:05,175
как вы можете видеть, комментарий добавляется на

67
00:05:05,175 --> 00:05:09,710
наш сервер там, как

68
00:05:09,710 --> 00:05:15,690
и ожидалось, и результат отображается на странице Dish Detail здесь.

69
00:05:15,690 --> 00:05:18,660
Снова возвращаясь к домашней странице,

70
00:05:19,260 --> 00:05:24,650
мы обнаруживаем, что наше приложение React теперь может взаимодействовать с

71
00:05:24,650 --> 00:05:27,740
сервером Loopback, а затем получать

72
00:05:27,740 --> 00:05:31,465
данные с сервера и взаимодействовать с сервером, как ожидалось.

73
00:05:31,465 --> 00:05:35,160
Теперь, конечно, вопрос, который возникнет у вас в голове, заключается в

74
00:05:35,160 --> 00:05:41,455
том, как это приложение Loopback взаимодействует с сервером Loopback?

75
00:05:41,455 --> 00:05:47,610
Теперь, здесь мы хотели бы отметить, что для Loopback,

76
00:05:47,610 --> 00:05:51,495
поскольку сервер Loopback предоставляет конечные точки REST API,

77
00:05:51,495 --> 00:05:55,575
мое приложение React может получить доступ к серверу Loopback в

78
00:05:55,575 --> 00:05:59,860
соответствующих конечных точках REST API, а затем общаться с сервером,

79
00:05:59,860 --> 00:06:07,845
как мы это сделали с нашим собственным сервером REST API , которые мы реализовали ранее.

80
00:06:07,845 --> 00:06:15,020
Итак, давайте посмотрим на код для модифицированного приложения React.

81
00:06:15,020 --> 00:06:17,690
Переходя к коду нашего приложения,

82
00:06:17,690 --> 00:06:23,200
основные изменения, которые вы заметите, будут в файле ActionCreators.js.

83
00:06:23,200 --> 00:06:27,620
Здесь вы заметите, что теперь мы общаемся с сервером

84
00:06:27,620 --> 00:06:33,930
Loopback вместо сервера REST API, который у нас был ранее.

85
00:06:33,930 --> 00:06:37,550
Таким образом, выборка теперь будет получать доступ к серверу Loopback в конечной точке

86
00:06:37,550 --> 00:06:43,800
api/comments или конечной точке api/diss и так далее.

87
00:06:43,800 --> 00:06:52,350
Таким образом, все эти запросы на выборку обновляются для мгновенного доступа к нашему серверу Loopback.

88
00:06:52,700 --> 00:06:56,215
Таким образом, вы заметите подобные изменения там.

89
00:06:56,215 --> 00:07:00,095
Теперь, помимо входа на наш сервер Loopback,

90
00:07:00,095 --> 00:07:08,190
давайте перейдем к коду входа здесь.

91
00:07:08,190 --> 00:07:09,750
Итак, в пользователе входа

92
00:07:09,750 --> 00:07:18,035
мы отправляем выборку в конечную точку BaseUrl и API/Customers/Login,

93
00:07:18,035 --> 00:07:25,260
а затем мы предоставим учетные данные в теле сообщения запроса, которое выходит.

94
00:07:25,260 --> 00:07:27,215
В ответ

95
00:07:27,215 --> 00:07:29,830
на это сервер отправит ответ.

96
00:07:29,830 --> 00:07:33,950
Затем ответ содержит информацию о токене.

97
00:07:33,950 --> 00:07:38,905
Информация о токене отправляется обратно в виде

98
00:07:38,905 --> 00:07:44,790
идентификатора ответного сообщения.

99
00:07:44,790 --> 00:07:47,325
Таким образом, идентификатор сам служит маркером.

100
00:07:47,325 --> 00:07:49,545
Итак, само ответное сообщение,

101
00:07:49,545 --> 00:07:55,200
я собираюсь сохранить это в моем локальном хранилище, как показано здесь.

102
00:07:55,200 --> 00:07:59,320
Мы строим ответное сообщение, а затем храним его там.

103
00:07:59,320 --> 00:08:06,945
Это ответное сообщение, Response.ID, содержит маркер.

104
00:08:06,945 --> 00:08:12,815
Таким образом, response.id служит JSON Web Token для доступа к серверу Loopback.

105
00:08:12,815 --> 00:08:15,650
Итак, вот почему вы заметите, что в

106
00:08:15,650 --> 00:08:19,235
ситуациях, когда мне нужно получить доступ к серверу, так что, например,

107
00:08:19,235 --> 00:08:25,520
мы заметим, что когда мы получаем или размещаем ваш любимый на сервере,

108
00:08:25,520 --> 00:08:28,550
вы заметите, что я получаю токен, говоря:

109
00:08:28,550 --> 00:08:30,420
пусть токен, JSON синтаксический анализ,

110
00:08:30,420 --> 00:08:33,990
localStorage, getItem, токен здесь,

111
00:08:33,990 --> 00:08:38,890
а затем в поле заголовка авторизации

112
00:08:38,890 --> 00:08:44,300
я сказал, что поле авторизации будет token.id здесь, как показано здесь.

113
00:08:44,300 --> 00:08:51,380
Таким образом, мы сможем аутентифицироваться на сервере Loopback.

114
00:08:51,380 --> 00:08:55,450
Итак, здесь вы видите, что он говорит: baseUrl, api/favorites,

115
00:08:55,450 --> 00:08:59,440
а затем получить список избранного с сервера,

116
00:08:59,440 --> 00:09:03,430
а затем сохранить его в нашем магазине redux.

117
00:09:03,430 --> 00:09:06,710
Итак, большая часть кода остается прежней,

118
00:09:06,710 --> 00:09:09,740
за исключением обновлений, которые мы сделали для

119
00:09:09,740 --> 00:09:13,455
доступа к конечным точкам REST API Loopbacks.

120
00:09:13,455 --> 00:09:22,665
Теперь, для Angular, у нас есть Loopback SDK, который может быть построен для нашего углового приложения.

121
00:09:22,665 --> 00:09:27,070
Но для React нет такой поддержки, доступной из Loopback,

122
00:09:27,070 --> 00:09:30,460
и поэтому мы должны прибегнуть к прямому доступу к

123
00:09:30,460 --> 00:09:34,840
конечным точкам REST API Loopback, как показано здесь, используя fetch,

124
00:09:34,840 --> 00:09:38,860
а затем мы можем общаться с сервером Loopback.

125
00:09:38,860 --> 00:09:42,115
Благодаря этому быстрому пониманию того, как

126
00:09:42,115 --> 00:09:48,360
наше приложение React было обновлено для доступа к нашему серверу Loopback,

127
00:09:48,360 --> 00:09:51,795
мы завершаем проверку сервера Loopback.

128
00:09:51,795 --> 00:09:56,980
Проведите еще некоторое время на изучение некоторых компонентов и посмотрите,

129
00:09:56,980 --> 00:10:02,340
как они используют информацию, полученную с сервера Loopback.

130
00:10:02,340 --> 00:10:06,530
Вы заметите, что большинство компонентов остаются точно такими же, как и раньше,

131
00:10:06,530 --> 00:10:13,650
за исключением некоторых незначительных изменений в избранном компоненте, чтобы получить

132
00:10:13,650 --> 00:10:18,495
информацию с сервера Loopback,

133
00:10:18,495 --> 00:10:22,700
а затем использовать его для отображения списка избранных элементов.

134
00:10:22,700 --> 00:10:29,545
Кроме того, большая часть изменений ограничивается файлом ActionCreators.js,

135
00:10:29,545 --> 00:10:34,260
где мы обновили выборку, чтобы использовать URL для

136
00:10:34,260 --> 00:10:41,125
нашего сервера Loopback, чтобы иметь доступ к различным конечным точкам REST API.

137
00:10:41,125 --> 00:10:48,460
Таким образом, с этим я быстро продемонстрировал вам, как вы можете создать свое приложение.

138
00:10:48,460 --> 00:10:51,590
С этим быстрым введением в том, как мы можем

139
00:10:51,590 --> 00:10:54,755
использовать Loopback в нашем приложении,

140
00:10:54,755 --> 00:10:59,110
мы подошли к концу этого упражнения.