1
00:00:03,740 --> 00:00:11,475
Мы уже видели использование HTTP get операций в предыдущих двух упражнениях,

2
00:00:11,475 --> 00:00:14,310
, где мы сможем пойти и получить данные с

3
00:00:14,310 --> 00:00:17,505
сервера и использовать его в нашем угловом приложении.

4
00:00:17,505 --> 00:00:23,159
Но бывают ситуации, когда вы хотите иметь возможность публиковать новые данные на сервере

5
00:00:23,159 --> 00:00:26,160
или изменять существующие данные на сервере

6
00:00:26,160 --> 00:00:27,950
или даже удалять данные.

7
00:00:27,950 --> 00:00:30,480
Так вот где пост,

8
00:00:30,480 --> 00:00:35,895
положить, и удалить операции HTTP позволяют нам выполнить это.

9
00:00:35,895 --> 00:00:41,540
В этом упражнении мы рассмотрим использование операции пут из клиента

10
00:00:41,540 --> 00:00:48,735
HTTP, которая позволяет нам изменять существующее блюдо на стороне сервера.

11
00:00:48,735 --> 00:00:50,715
Итак, зачем нам это делать?

12
00:00:50,715 --> 00:00:53,500
Вы видели, что в одном из предыдущих упражнений

13
00:00:53,500 --> 00:00:57,230
мы позволили пользователю опубликовать комментарий к блюду,

14
00:00:57,230 --> 00:01:01,825
, а затем мы смогли вставить комментарий в объект Блюда.

15
00:01:01,825 --> 00:01:08,160
Теперь мы хотим сохранить эту информацию блюдо на сервере,

16
00:01:08,160 --> 00:01:10,570
измененное блюдо на сервере.

17
00:01:10,570 --> 00:01:15,955
Это где использование HTTP PUT операции приходит на нашу помощь.

18
00:01:15,955 --> 00:01:18,345
Таким образом, используя операцию HTTP PUT,

19
00:01:18,345 --> 00:01:23,360
мы можем отправить измененное блюдо обратно на сервер, а затем изменить

20
00:01:23,360 --> 00:01:26,750
существующую информацию Блюда на сервере, так что

21
00:01:26,750 --> 00:01:31,460
вновь добавленный комментарий может быть сохранен на стороне сервера.

22
00:01:31,460 --> 00:01:35,899
Таким образом, когда информация будет получена позднее,

23
00:01:35,899 --> 00:01:41,770
вновь добавленный комментарий будет там как часть информации о блюде.

24
00:01:41,770 --> 00:01:44,770
Итак, вот что мы рассмотрим в этом упражнении

25
00:01:44,770 --> 00:01:48,225
, где мы рассмотрим сохранение изменений на сервере.

26
00:01:48,225 --> 00:01:50,280
Итак, как нам это сделать?

27
00:01:50,280 --> 00:01:53,625
Давайте рассмотрим это в упражнении.

28
00:01:53,625 --> 00:01:58,730
Чтобы мы могли сохранить изменения в блюде на сервере,

29
00:01:58,730 --> 00:02:02,765
позвольте мне ввести новый метод в сервисе Блюда здесь.

30
00:02:02,765 --> 00:02:09,040
Теперь мы добавим новый метод под названием putDish на сервер.

31
00:02:09,040 --> 00:02:11,335
Итак, как работает метод putDish?

32
00:02:11,335 --> 00:02:17,920
Итак, позвольте мне представить здесь метод putDish, который, очевидно, получает модифицированное блюдо

33
00:02:17,920 --> 00:02:25,370
в качестве своего параметра, а затем он вернет наблюдаемый тип Блюда.

34
00:02:25,370 --> 00:02:29,980
Таким образом, это вернет блюдо, которое было помещено на стороне сервера.

35
00:02:29,980 --> 00:02:33,690
Теперь, как только блюдо будет изменено на стороне сервера,

36
00:02:33,690 --> 00:02:36,735
измененная информация Блюда будет отправлена обратно сервером,

37
00:02:36,735 --> 00:02:39,275
, а затем это измененное блюдо будет доставлено

38
00:02:39,275 --> 00:02:42,330
обратно клиенту, чтобы клиент мог интегрировать это,

39
00:02:42,330 --> 00:02:48,605
, а затем обновить пользовательский интерфейс, чтобы отразить изменения в Блюдо.

40
00:02:48,605 --> 00:02:52,010
Теперь, очевидно, мы не хотим отражать изменение на

41
00:02:52,010 --> 00:02:57,300
пользовательского интерфейса до тех пор, пока информация о блюде не будет сохранена на стороне сервера.

42
00:02:57,300 --> 00:03:00,245
Итак, вот где мы собираемся использовать

43
00:03:00,245 --> 00:03:05,265
метод putDish, который мы вводим в сервис Dish.

44
00:03:05,265 --> 00:03:07,730
Итак, как мы проектируем метод putDish?

45
00:03:07,730 --> 00:03:15,785
Итак, первое, что нам нужно сделать, это настроить некоторые параметры HTTP, чтобы мы проинформировали

46
00:03:15,785 --> 00:03:21,975
сервер о том, что

47
00:03:21,975 --> 00:03:26,565
отправляется в сообщении здесь.

48
00:03:26,565 --> 00:03:29,880
Итак, мы установим некоторые заголовки информации здесь.

49
00:03:29,880 --> 00:03:36,345
Итак, для заголовков, мы создадим новые HttpHeaders здесь,

50
00:03:36,345 --> 00:03:39,060
и в новом HttpHeaders,

51
00:03:39,060 --> 00:03:43,050
давайте настроим заголовок как

52
00:03:43,050 --> 00:03:49,940
Content-Type приложения типа JSON.

53
00:03:49,940 --> 00:03:56,135
Итак, мы указываем на наш сервер, что входящее сообщение запроса

54
00:03:56,135 --> 00:03:58,730
содержит информацию в виде

55
00:03:58,730 --> 00:04:02,840
объект json в теле входящего сообщения запроса.

56
00:04:02,840 --> 00:04:04,865
Таким образом, сервер сможет извлечь

57
00:04:04,865 --> 00:04:09,165
информацию о блюде из тела сообщения, разобрать его,

58
00:04:09,165 --> 00:04:13,200
, а затем сможет сохранить измененное блюдо на сервер,

59
00:04:13,200 --> 00:04:19,260
, а затем отправить обратно обновленную информацию о блюде со стороны сервера.

60
00:04:19,260 --> 00:04:22,025
Теперь, как только мы настроили параметры здесь,

61
00:04:22,025 --> 00:04:24,295
то мы будем использовать

62
00:04:24,295 --> 00:04:29,990
HTTP-клиент, а затем

63
00:04:29,990 --> 00:04:36,030
сделать положить, который, очевидно, несет блюдо в теле сообщения,

64
00:04:36,030 --> 00:04:53,520
, а затем мы будем указывать baseURL+блюда и +dish.id.

65
00:04:53,520 --> 00:04:57,775
baseURL+'dishes/ '+ dish.id.

66
00:04:57,775 --> 00:05:01,130
Итак, из ваших знаний REST API,

67
00:05:01,130 --> 00:05:05,960
вы увидите, почему мы делаем операцию ввода в эту конечную точку.

68
00:05:05,960 --> 00:05:09,500
Тогда второй параметр является сам блюдо, который мы

69
00:05:09,500 --> 00:05:13,990
получаем как входящий параметр в метод putDish,

70
00:05:13,990 --> 00:05:23,770
, а затем третий параметр является httpOptions, которые мы только что создали некоторое время назад.

71
00:05:23,770 --> 00:05:26,790
Затем, как только мы получим это,

72
00:05:26,790 --> 00:05:29,775
, то мы сможем передать

73
00:05:29,775 --> 00:05:37,405
любую ошибку в наш метод handleError услышать, вот и все.

74
00:05:37,405 --> 00:05:43,550
Таким образом, этот вызов put на стороне сервера позволит

75
00:05:43,550 --> 00:05:46,880
информация о блюде быть постоянными на стороне сервера, а затем сервер

76
00:05:46,880 --> 00:05:50,430
вернет обновленную информацию о блюде обратно нам,

77
00:05:50,430 --> 00:05:55,805
, а затем мы вернем это обратно к нашему компоненту

78
00:05:55,805 --> 00:06:01,705
, где компонент может затем использовать это для визуализировать обновленную информацию о блюде.

79
00:06:01,705 --> 00:06:04,835
Итак, это модификация, которую мы делаем в сервисе Блюда.

80
00:06:04,835 --> 00:06:08,220
Теперь перейдите в компонент dishdetail,

81
00:06:08,450 --> 00:06:11,130
в компоненте dishdetail,

82
00:06:11,130 --> 00:06:18,185
позвольте мне ввести еще одну переменную здесь

83
00:06:18,185 --> 00:06:21,590
называется dishcopy, которая будет содержать

84
00:06:21,590 --> 00:06:26,570
копию измененного блюда до тех пор, пока она не будет отправлена на сервер.

85
00:06:26,570 --> 00:06:29,890
Таким образом, дискокопия будет содержать модифицированное блюдо.

86
00:06:29,890 --> 00:06:33,875
Итак, заходить в параметры маршрута здесь.

87
00:06:33,875 --> 00:06:41,305
Итак, что мы делаем, это в любое время, когда информация о блюде изменяется здесь в параметрах маршрута,

88
00:06:41,305 --> 00:06:46,355
также наряду с сохранением информации о блюде в этом.dish,

89
00:06:46,355 --> 00:06:52,470
Я также сохраню копию в

90
00:06:52,470 --> 00:06:55,980
discopy также так, что как Блюдо и

91
00:06:55,980 --> 00:07:01,460
discopy содержат точную копию того же Блюда здесь.

92
00:07:01,460 --> 00:07:04,370
Итак, это модификация, которую мы сделаем здесь.

93
00:07:04,370 --> 00:07:06,990
Теперь, в методе onSubmit,

94
00:07:06,990 --> 00:07:09,665
поэтому здесь у нас есть метод onSubmit здесь,

95
00:07:09,665 --> 00:07:13,310
где мы изменяем объект здесь.

96
00:07:13,310 --> 00:07:20,220
Итак, здесь вы заметите, что мы изначально толкали комментарий к объекту Dish здесь,

97
00:07:20,220 --> 00:07:24,945
вместо этого, мы теперь будем нажимать комментарий к объекту dishcopy.

98
00:07:24,945 --> 00:07:29,405
Причина, по которой я делаю это, заключается в том, что я хочу сначала изменить объект dishcopy,

99
00:07:29,405 --> 00:07:32,285
затем я хочу опубликовать это на сервере,

100
00:07:32,285 --> 00:07:35,060
, а затем, когда сервер отвечает с

101
00:07:35,060 --> 00:07:37,850
информацию об измененном блюде на стороне сервера,

102
00:07:37,850 --> 00:07:41,715
, тогда я буду сохранять эту информацию в блюдо здесь.

103
00:07:41,715 --> 00:07:44,750
Итак, после выполнения discopy здесь,

104
00:07:44,750 --> 00:07:54,735
тогда мы скажем это.dishService.putDish,

105
00:07:54,735 --> 00:07:57,900
, а затем мы поставим putDish

106
00:07:57,900 --> 00:08:04,250
discopy в качестве параметра

107
00:08:04,250 --> 00:08:09,110
, потому что discopy содержит измененную версию блюда здесь.

108
00:08:09,110 --> 00:08:10,955
Итак, мы скажем dishcopy,

109
00:08:10,955 --> 00:08:16,600
, а затем, когда мы получим ответ со стороны сервера так,

110
00:08:16,600 --> 00:08:22,255
в подписке, мы скажем Блюдо и прямо там,

111
00:08:22,255 --> 00:08:26,655
мы будем обрабатывать входящее блюдо здесь.

112
00:08:26,655 --> 00:08:31,855
Итак, здесь, мы скажем, подписаться Блюдо, а затем мы скажем,

113
00:08:31,855 --> 00:08:36,435
это.диш равен блюду здесь,

114
00:08:36,435 --> 00:08:45,910
и ради полноты,

115
00:08:45,910 --> 00:08:49,380
я также сохраняю ту же информацию в дископии здесь.

116
00:08:49,380 --> 00:08:52,320
Теперь, если есть ошибка,

117
00:08:52,320 --> 00:08:54,120
тогда придется handleError.

118
00:08:54,120 --> 00:08:57,625
Итак, чтобы handleError, мы скажем,

119
00:08:57,625 --> 00:09:03,080
errmess, а затем в этот момент мы установим, что this.dish равным null,

120
00:09:03,080 --> 00:09:07,040
, а затем это discopy также равно null, потому что прямо сейчас блюдо не является действительным,

121
00:09:07,040 --> 00:09:27,755
и тогда мы скажем это.errMess равно rater любой errmess, вот и все.

122
00:09:27,755 --> 00:09:31,445
Это модификация, которую мы собираемся внести в метод onSubmit.

123
00:09:31,445 --> 00:09:34,695
Таким образом, используя это.dishService.putDish метод,

124
00:09:34,695 --> 00:09:38,500
мы отправляем в обновленном dishcopy здесь,

125
00:09:38,500 --> 00:09:39,685
не блюдо здесь,

126
00:09:39,685 --> 00:09:43,965
, а затем, когда сервер отвечает нам с измененным блюдом,

127
00:09:43,965 --> 00:09:47,605
в этот момент, мы будем сохранять информацию в this.dish.

128
00:09:47,605 --> 00:09:49,025
Так что в этот момент

129
00:09:49,025 --> 00:09:54,590
наш пользовательский интерфейс будет обновлен с обновленной версией в Dish,

130
00:09:54,590 --> 00:09:57,560
Я также сохраняю ту же информацию в dishcopy,

131
00:09:57,560 --> 00:09:59,180
, а затем, если я столкнусь с ошибкой,

132
00:09:59,180 --> 00:10:02,585
, то я установлю это.dish на null, а это.dishcopy на null

133
00:10:02,585 --> 00:10:06,680
, а затем настрою сообщение об ошибке надлежащим образом здесь.

134
00:10:06,680 --> 00:10:09,980
Так вот и все. Давайте сохраним изменения, а затем пойдем и

135
00:10:09,980 --> 00:10:14,100
взглянем на наше приложение в браузере.

136
00:10:14,230 --> 00:10:19,050
Сохраняя изменения, вернемся в браузер.

137
00:10:19,050 --> 00:10:27,785
Зайдите в браузер, давайте теперь перейдем в меню, а затем перейдем к определенному блюду здесь.

138
00:10:27,785 --> 00:10:30,245
Для конкретного Блюда

139
00:10:30,245 --> 00:10:32,685
давайте оставим комментарий здесь.

140
00:10:32,685 --> 00:10:41,870
Итак, позвольте мне опубликовать здесь комментарий с рейтингом здесь.

141
00:10:44,430 --> 00:10:48,815
Итак, как вы видите, как комментарий становится действительным,

142
00:10:48,815 --> 00:10:52,370
предварительный просмотр комментария отображается там.

143
00:10:52,370 --> 00:10:54,950
Давайте теперь представим этот комментарий.

144
00:10:54,950 --> 00:10:56,520
Когда вы отправляете комментарий,

145
00:10:56,520 --> 00:11:02,160
вы сразу увидите, что комментарий только что был опубликован в моем списке Посуда.

146
00:11:02,160 --> 00:11:05,645
Теперь, раньше, если вы обновите представление,

147
00:11:05,645 --> 00:11:07,880
, то этот комментарий исчезнет.

148
00:11:07,880 --> 00:11:13,250
Позвольте мне теперь обновить представление, и тогда вы заметите, что комментарий все равно

149
00:11:13,250 --> 00:11:18,630
будет частью списка Посуда здесь.

150
00:11:18,630 --> 00:11:20,190
Итак, как вы можете видеть здесь,

151
00:11:20,190 --> 00:11:22,310
комментарий все еще существует здесь.

152
00:11:22,310 --> 00:11:27,530
Чтобы еще раз показать вам, что комментарий действительно был сохранен на стороне сервера,

153
00:11:27,530 --> 00:11:31,440
пойдем и посмотрим на журнал сервера в терминале.

154
00:11:31,440 --> 00:11:33,810
Возвращаясь к терминалам,

155
00:11:33,810 --> 00:11:36,710
мы увидим, что в журнале терминала

156
00:11:36,710 --> 00:11:41,910
вы видите новый метод PUT /dishes/0.

157
00:11:41,910 --> 00:11:45,950
Итак, это показывает, что измененное блюдо

158
00:11:45,950 --> 00:11:50,050
было сохранено обратно на сервер прямо там и после этого,

159
00:11:50,050 --> 00:11:53,170
, конечно, мы получили блюда, обновив

160
00:11:53,170 --> 00:11:59,485
пользовательский интерфейс, и поэтому мы снова извлекаем информацию о блюдах со стороны сервера.

161
00:11:59,485 --> 00:12:03,640
Таким образом, это показывает, что мы можем использовать

162
00:12:03,640 --> 00:12:08,580
операцию HTTP PUT, чтобы сохранить измененное блюдо на сервере,

163
00:12:08,580 --> 00:12:10,810
, а затем, когда мы получаем обновленное блюдо,

164
00:12:10,810 --> 00:12:14,025
мы можем обновить пользовательский интерфейс соответственно.

165
00:12:14,025 --> 00:12:17,240
С этим мы завершаем это упражнение.

166
00:12:17,240 --> 00:12:21,380
Это хорошее время для вас, чтобы сделать GET commit с сообщением,

167
00:12:21,380 --> 00:12:24,300
сохранение изменений на этом сервере.