1
00:00:03,740 --> 00:00:11,475
Chúng tôi đã thấy việc sử dụng các hoạt động HTTP get trong hai bài tập trước đó,

2
00:00:11,475 --> 00:00:14,310
nơi chúng tôi sẽ có thể đi và lấy dữ liệu từ

3
00:00:14,310 --> 00:00:17,505
máy chủ và sử dụng nó trong ứng dụng Angular của chúng tôi.

4
00:00:17,505 --> 00:00:23,159
Nhưng có những tình huống mà bạn muốn có thể đăng dữ liệu mới lên máy chủ,

5
00:00:23,159 --> 00:00:26,160
hoặc sửa đổi dữ liệu hiện có trên máy chủ,

6
00:00:26,160 --> 00:00:27,950
hoặc thậm chí xóa dữ liệu.

7
00:00:27,950 --> 00:00:30,480
Vì vậy, đó là nơi mà các bài đăng,

8
00:00:30,480 --> 00:00:35,895
đặt, và xóa các hoạt động của HTTP cho phép chúng tôi thực hiện điều này.

9
00:00:35,895 --> 00:00:41,540
Trong bài tập này, chúng ta sẽ xem xét việc sử dụng các hoạt động put từ

10
00:00:41,540 --> 00:00:48,735
HTTP client cho phép chúng ta sửa đổi một món ăn hiện có ở phía máy chủ.

11
00:00:48,735 --> 00:00:50,715
Bây giờ, tại sao chúng ta cần phải làm điều đó?

12
00:00:50,715 --> 00:00:53,500
Bạn thấy rằng trong một trong các bài tập trước đó,

13
00:00:53,500 --> 00:00:57,230
chúng tôi cho phép người dùng đăng bình luận lên một món ăn,

14
00:00:57,230 --> 00:01:01,825
và sau đó chúng tôi đã có thể chèn chú thích vào đối tượng Dish.

15
00:01:01,825 --> 00:01:08,160
Bây giờ, chúng tôi muốn tiếp tục thông tin món ăn này lên máy chủ,

16
00:01:08,160 --> 00:01:10,570
món ăn được sửa đổi vào máy chủ.

17
00:01:10,570 --> 00:01:15,955
Đây là nơi mà việc sử dụng các hoạt động HTTP PUT đến để giải cứu của chúng tôi.

18
00:01:15,955 --> 00:01:18,345
Vì vậy, bằng cách sử dụng thao tác HTTP PUT,

19
00:01:18,345 --> 00:01:23,360
chúng tôi có thể gửi Dish sửa đổi trở lại máy chủ và sau đó sửa đổi

20
00:01:23,360 --> 00:01:26,750
thông tin Dish hiện có trên máy chủ để

21
00:01:26,750 --> 00:01:31,460
nhận xét mới được thêm vào có thể được duy trì ở phía máy chủ.

22
00:01:31,460 --> 00:01:35,899
Qua đó, khi thông tin được lấy vào một ngày sau đó,

23
00:01:35,899 --> 00:01:41,770
nhận xét mới được thêm vào sẽ có mặt ở đó như là một phần của thông tin Dish.

24
00:01:41,770 --> 00:01:44,770
Vì vậy, đây là những gì chúng ta sẽ khám phá trong bài tập này,

25
00:01:44,770 --> 00:01:48,225
nơi chúng ta sẽ xem xét lưu các thay đổi vào máy chủ.

26
00:01:48,225 --> 00:01:50,280
Vậy làm thế nào để chúng ta làm điều này?

27
00:01:50,280 --> 00:01:53,625
Hãy khám phá điều này trong bài tập.

28
00:01:53,625 --> 00:01:58,730
Để cho phép chúng tôi có thể lưu các thay đổi cho Dish vào máy chủ,

29
00:01:58,730 --> 00:02:02,765
hãy để tôi giới thiệu một phương pháp mới vào dịch vụ Dish ở đây.

30
00:02:02,765 --> 00:02:09,040
Bây giờ, chúng ta sẽ thêm một phương pháp mới được gọi là PutDish vào máy chủ.

31
00:02:09,040 --> 00:02:11,335
Vì vậy, phương pháp PutDish hoạt động như thế nào?

32
00:02:11,335 --> 00:02:17,920
Vì vậy, hãy để tôi giới thiệu các phương pháp PutDish ở đây mà rõ ràng nhận được các món ăn sửa đổi

33
00:02:17,920 --> 00:02:25,370
như tham số của nó và sau đó nó sẽ trả lại một quan sát của loại Dish.

34
00:02:25,370 --> 00:02:29,980
Vì vậy, điều này sẽ trả lại Dish đã được đưa vào phía máy chủ.

35
00:02:29,980 --> 00:02:33,690
Bây giờ, một khi Dish được sửa đổi ở phía máy chủ,

36
00:02:33,690 --> 00:02:36,735
thông tin Dish được sửa đổi sẽ được máy chủ gửi trở lại,

37
00:02:36,735 --> 00:02:39,275
và sau đó Dish được sửa đổi này sẽ được chuyển

38
00:02:39,275 --> 00:02:42,330
lại cho client để client có thể tích hợp nó,

39
00:02:42,330 --> 00:02:48,605
và sau đó cập nhật giao diện người dùng để phản ánh sự thay đổi cho Dish.

40
00:02:48,605 --> 00:02:52,010
Bây giờ, rõ ràng, chúng tôi không muốn phản ánh sự thay đổi đối với

41
00:02:52,010 --> 00:02:57,300
giao diện người dùng cho đến khi thông tin Dish được lưu ở phía máy chủ.

42
00:02:57,300 --> 00:03:00,245
Vì vậy, đó là nơi chúng tôi sẽ sử dụng

43
00:03:00,245 --> 00:03:05,265
phương pháp PutDish mà chúng tôi giới thiệu vào dịch vụ Dish.

44
00:03:05,265 --> 00:03:07,730
Vì vậy, làm thế nào để chúng ta thiết kế phương pháp PutDish?

45
00:03:07,730 --> 00:03:15,785
Vì vậy, điều đầu tiên mà chúng ta cần làm là thiết lập một số tùy chọn HTTP để chúng tôi thông báo cho

46
00:03:15,785 --> 00:03:21,975
máy chủ về những gì

47
00:03:21,975 --> 00:03:26,565
đang được gửi trong tin nhắn ở đây.

48
00:03:26,565 --> 00:03:29,880
Vì vậy, chúng tôi sẽ thiết lập một số thông tin tiêu đề ở đây.

49
00:03:29,880 --> 00:03:36,345
Vì vậy, đối với các tiêu đề, chúng tôi sẽ thiết lập HttpHEaders

50
00:03:36,345 --> 00:03:39,060
mới ở đây, và trong HttpHEaders mới,

51
00:03:39,060 --> 00:03:43,050
chúng ta hãy thiết lập các tiêu đề như

52
00:03:43,050 --> 00:03:49,940
Content-Type của loại ứng dụng JSON.

53
00:03:49,940 --> 00:03:56,135
Vì vậy, chúng tôi đang chỉ định cho máy chủ của chúng tôi rằng thông điệp yêu cầu đến

54
00:03:56,135 --> 00:03:58,730
chứa thông tin dưới dạng

55
00:03:58,730 --> 00:04:02,840
một đối tượng json trong cơ thể của thông điệp yêu cầu đến.

56
00:04:02,840 --> 00:04:04,865
Vì vậy, máy chủ sẽ có thể trích xuất

57
00:04:04,865 --> 00:04:09,165
thông tin Dish từ cơ thể của tin nhắn, phân tích nó,

58
00:04:09,165 --> 00:04:13,200
và sau đó có thể tồn tại Dish sửa đổi đến máy chủ,

59
00:04:13,200 --> 00:04:19,260
và sau đó gửi lại thông tin Dish Cập Nhật từ phía máy chủ.

60
00:04:19,260 --> 00:04:22,025
Bây giờ, một khi chúng tôi đã thiết lập các tùy chọn ở đây,

61
00:04:22,025 --> 00:04:24,295
sau đó chúng tôi sẽ sử dụng

62
00:04:24,295 --> 00:04:29,990
HTTP client và sau đó

63
00:04:29,990 --> 00:04:36,030
làm một put mà rõ ràng mang Dish trong cơ thể của thông điệp,

64
00:04:36,030 --> 00:04:47,385
và sau đó chúng tôi sẽ chỉ định Baseurl+dishes và +dish.id.

65
00:04:47,385 --> 00:04:53,520
vì vậy, đó là URL mà chúng tôi đang gửi các hoạt động put như vậy,

66
00:04:53,520 --> 00:04:57,775
Baseurl+'Dishes/ '+ dish.id.

67
00:04:57,775 --> 00:05:01,130
vì vậy, từ kiến thức REST API của

68
00:05:01,130 --> 00:05:05,960
bạn, bạn sẽ thấy lý do tại sao chúng tôi thực hiện một thao tác put đến điểm kết thúc này.

69
00:05:05,960 --> 00:05:09,500
Sau đó, tham số thứ hai là Dish chính nó mà chúng tôi

70
00:05:09,500 --> 00:05:13,990
nhận được như là tham số đến phương pháp PutDish,

71
00:05:13,990 --> 00:05:23,770
và sau đó tham số thứ ba là HttpPoptions mà chúng tôi chỉ cần thiết lập một thời gian ngắn trước đây.

72
00:05:23,770 --> 00:05:26,790
Sau đó, một khi chúng tôi có được điều

73
00:05:26,790 --> 00:05:29,775
đó, sau đó chúng tôi sẽ có thể đường ống

74
00:05:29,775 --> 00:05:37,405
bất kỳ lỗi để phương pháp HandleError của chúng tôi nghe, đó là nó.

75
00:05:37,405 --> 00:05:43,550
Vì vậy, cuộc gọi này để đặt trên phía máy chủ sẽ cho phép

76
00:05:43,550 --> 00:05:46,880
thông tin Dish được liên tục ở phía máy chủ và sau đó máy chủ

77
00:05:46,880 --> 00:05:50,430
sẽ trả lại thông tin món ăn được cập nhật trở lại cho chúng tôi,

78
00:05:50,430 --> 00:05:55,805
và sau đó chúng tôi sẽ trả lại rằng trở lại thành phần của chúng tôi,

79
00:05:55,805 --> 00:06:01,705
nơi các thành phần sau đó có thể sử dụng đó để hiển thị thông tin Dish cập nhật.

80
00:06:01,705 --> 00:06:04,835
Vì vậy, đây là sửa đổi mà chúng tôi làm cho dịch vụ Dish.

81
00:06:04,835 --> 00:06:08,220
Bây giờ, đi vào thành phần dishdetail,

82
00:06:08,450 --> 00:06:11,130
trong thành phần dishdetail,

83
00:06:11,130 --> 00:06:18,185
để tôi giới thiệu thêm một biến ở đây

84
00:06:18,185 --> 00:06:21,590
gọi là dishcopy mà sẽ giữ

85
00:06:21,590 --> 00:06:26,570
một bản sao của Dish sửa đổi cho đến khi nó được đăng lên máy chủ.

86
00:06:26,570 --> 00:06:29,890
Vì vậy, đĩa rửa chén sẽ chứa các món ăn đã được sửa đổi.

87
00:06:29,890 --> 00:06:33,875
Vì vậy, đi vào các thông số tuyến đường ở đây.

88
00:06:33,875 --> 00:06:41,305
Vì vậy, những gì chúng tôi làm là bất cứ lúc nào các thông tin Dish được sửa đổi ở đây trong

89
00:06:41,305 --> 00:06:46,355
các thông số tuyến đường, cũng cùng với lưu thông tin món ăn này này.dish,

90
00:06:46,355 --> 00:06:52,470
tôi cũng sẽ lưu một

91
00:06:52,470 --> 00:06:55,980
bản sao vào đĩa cũng để cả Dish và

92
00:06:55,980 --> 00:07:01,460
dishcopy chứa bản sao chính xác của cùng một Dish ở đây.

93
00:07:01,460 --> 00:07:04,370
Vì vậy, đó là sửa đổi mà chúng tôi sẽ làm ở đây.

94
00:07:04,370 --> 00:07:06,990
Bây giờ, trong phương pháp onSubmit,

95
00:07:06,990 --> 00:07:09,665
vì vậy ở đây chúng tôi có phương pháp onSubmit ở đây,

96
00:07:09,665 --> 00:07:13,310
nơi chúng tôi đang sửa đổi các đối tượng ở đây.

97
00:07:13,310 --> 00:07:20,220
Vì vậy, ở đây, bạn nhận thấy rằng chúng tôi đã ban đầu đẩy bình luận cho đối tượng Dish ở đây

98
00:07:20,220 --> 00:07:24,945
, thay vào đó, chúng tôi sẽ đẩy bình luận cho đối tượng dishcopy.

99
00:07:24,945 --> 00:07:29,405
Lý do tại sao tôi đang làm điều này là tôi muốn đầu tiên sửa đổi đối tượng dishcopy,

100
00:07:29,405 --> 00:07:32,285
sau đó tôi muốn đăng nó lên máy chủ,

101
00:07:32,285 --> 00:07:35,060
và sau đó khi máy chủ trả lời lại với

102
00:07:35,060 --> 00:07:37,850
các thông tin món ăn sửa đổi về phía máy chủ,

103
00:07:37,850 --> 00:07:41,715
sau đó tôi sẽ tiếp tục thông tin đó vào Dish ở đây.

104
00:07:41,715 --> 00:07:44,750
Vì vậy, sau khi thực hiện các dishcopy ở đây,

105
00:07:44,750 --> 00:07:54,735
sau đó chúng tôi sẽ nói này.Dishservice.Putdish,

106
00:07:54,735 --> 00:07:57,900
và sau đó chúng tôi sẽ cung cấp cho PutDish

107
00:07:57,900 --> 00:08:04,250
các dishcopy như là tham số

108
00:08:04,250 --> 00:08:09,110
bởi vì dishcopy chứa phiên bản sửa đổi của món ăn ở đây.

109
00:08:09,110 --> 00:08:10,955
Vì vậy, chúng tôi sẽ nói dishcopy,

110
00:08:10,955 --> 00:08:16,600
và sau đó khi chúng tôi nhận được trả lời từ phía máy chủ như vậy,

111
00:08:16,600 --> 00:08:22,255
trong đăng ký, chúng tôi sẽ nói Dish và ngay tại đó,

112
00:08:22,255 --> 00:08:26,655
chúng tôi sẽ xử lý các Dish đến đây.

113
00:08:26,655 --> 00:08:31,855
Vì vậy, trong đây, chúng tôi sẽ nói đăng ký Dish và sau đó chúng tôi sẽ nói,

114
00:08:31,855 --> 00:08:36,435
này.dish tương đương với món ăn ở đây,

115
00:08:36,435 --> 00:08:45,910
và vì lợi ích của sự hoàn chỉnh,

116
00:08:45,910 --> 00:08:49,380
tôi cũng sẽ duy trì cùng một thông tin vào đĩa đơn ở đây.

117
00:08:49,380 --> 00:08:52,320
Bây giờ, nếu có một lỗi,

118
00:08:52,320 --> 00:08:54,120
sau đó sẽ phải xử lý lỗi.

119
00:08:54,120 --> 00:08:57,625
Vì vậy, để HandleError, chúng tôi sẽ nói,

120
00:08:57,625 --> 00:09:03,080
errmess, và sau đó tại thời điểm

121
00:09:03,080 --> 00:09:07,040
đó, chúng tôi sẽ thiết lập điều này.dish để null,

122
00:09:07,040 --> 00:09:14,330
và sau đó bản sao này cũng để null bởi vì ngay bây giờ các món ăn là không hợp lệ,

123
00:09:14,330 --> 00:09:19,595
và sau đó chúng tôi sẽ nói này.Ermess là

124
00:09:19,595 --> 00:09:27,755
bất kỳ errmess, đó là nó.

125
00:09:27,755 --> 00:09:31,445
Đó là sửa đổi mà chúng ta sẽ thực hiện cho phương pháp onSubmit.

126
00:09:31,445 --> 00:09:34,695
Vì vậy, bằng cách sử dụng phương pháp này.Dishservice.putdish,

127
00:09:34,695 --> 00:09:38,500
chúng tôi đang gửi trong bản sao được cập nhật ở đây,

128
00:09:38,500 --> 00:09:39,685
không phải là Dish ở đây,

129
00:09:39,685 --> 00:09:43,965
và sau đó khi máy chủ trả lời lại cho chúng tôi với Dish sửa đổi

130
00:09:43,965 --> 00:09:47,605
, tại thời điểm đó, chúng tôi sẽ tiếp tục thông tin vào này.dish.

131
00:09:47,605 --> 00:09:49,025
Vì vậy, tại thời điểm đó,

132
00:09:49,025 --> 00:09:54,590
giao diện người dùng của chúng tôi sẽ được cập nhật với phiên bản cập nhật để Dish,

133
00:09:54,590 --> 00:09:57,560
tôi cũng vẫn tồn tại cùng một thông tin để dishcopy,

134
00:09:57,560 --> 00:09:59,180
và sau đó nếu tôi gặp phải một lỗi,

135
00:09:59,180 --> 00:10:02,585
sau đó tôi sẽ thiết lập này.dish để null và this.dishcopy để null

136
00:10:02,585 --> 00:10:06,680
và sau đó thiết lập các thông báo lỗi một cách thích hợp ở đây.

137
00:10:06,680 --> 00:10:09,980
Vậy là vậy. Hãy lưu các thay đổi và sau đó

138
00:10:09,980 --> 00:10:14,100
đi và xem ứng dụng của chúng tôi trong trình duyệt.

139
00:10:14,230 --> 00:10:19,050
Lưu các thay đổi, chúng ta hãy quay lại trình duyệt.

140
00:10:19,050 --> 00:10:27,785
Đi vào trình duyệt, bây giờ chúng ta hãy vào menu và sau đó đi đến một món ăn cụ thể ở đây.

141
00:10:27,785 --> 00:10:30,245
Đối với món ăn cụ thể,

142
00:10:30,245 --> 00:10:32,685
chúng ta hãy đăng bình luận ở đây.

143
00:10:32,685 --> 00:10:41,870
Vì vậy, hãy để tôi đăng một bình luận ở đây với một đánh giá ở đây.

144
00:10:44,430 --> 00:10:48,815
Vì vậy, như bạn thấy, khi nhận xét trở nên hợp lệ,

145
00:10:48,815 --> 00:10:52,370
bản xem trước của nhận xét xuất hiện ở đó.

146
00:10:52,370 --> 00:10:54,950
Bây giờ chúng ta hãy gửi bình luận này.

147
00:10:54,950 --> 00:10:56,520
Khi bạn gửi bình luận,

148
00:10:56,520 --> 00:11:02,160
bạn sẽ ngay lập tức thấy rằng bình luận vừa được đăng vào danh sách món ăn của tôi.

149
00:11:02,160 --> 00:11:05,645
Bây giờ, trước đó, nếu bạn làm mới chế độ xem,

150
00:11:05,645 --> 00:11:07,880
thì nhận xét này sẽ biến mất.

151
00:11:07,880 --> 00:11:13,250
Bây giờ hãy để tôi làm mới chế độ xem và sau đó bạn sẽ nhận thấy rằng bình luận

152
00:11:13,250 --> 00:11:18,630
sẽ vẫn là một phần của danh sách các món ăn ở đây.

153
00:11:18,630 --> 00:11:20,190
Vì vậy, như bạn có thể thấy ở đây,

154
00:11:20,190 --> 00:11:22,310
bình luận vẫn còn tồn tại ở đây.

155
00:11:22,310 --> 00:11:27,530
Để tiếp tục cho bạn thấy rằng thực sự bình luận đã được tồn tại ở phía máy chủ,

156
00:11:27,530 --> 00:11:31,440
chúng ta hãy đi và nhìn vào nhật ký của máy chủ trong thiết bị đầu cuối.

157
00:11:31,440 --> 00:11:33,810
Quay trở lại các thiết bị đầu cuối,

158
00:11:33,810 --> 00:11:36,710
bây giờ chúng ta sẽ thấy rằng trong nhật ký của thiết bị đầu cuối,

159
00:11:36,710 --> 00:11:41,910
bạn thấy một phương pháp PUT /dishes/0 mới.

160
00:11:41,910 --> 00:11:45,950
Vì vậy, điều đó cho thấy rằng Dish

161
00:11:45,950 --> 00:11:50,050
đã được sửa đổi đã được duy trì trở lại máy chủ ngay tại đó và sau đó,

162
00:11:50,050 --> 00:11:53,170
tất nhiên chúng tôi đã có các món ăn bằng cách làm mới

163
00:11:53,170 --> 00:11:55,975
giao diện người dùng và vì vậy đó là lý do tại sao chúng tôi đang

164
00:11:55,975 --> 00:11:59,485
lấy thông tin món ăn một lần nữa từ phía máy chủ.

165
00:11:59,485 --> 00:12:03,640
Vì vậy, điều này cho thấy rằng chúng ta có thể sử dụng

166
00:12:03,640 --> 00:12:08,580
các hoạt động HTTP PUT để duy trì Dish sửa đổi vào máy chủ,

167
00:12:08,580 --> 00:12:10,810
và sau đó khi chúng tôi nhận được các món ăn cập nhật,

168
00:12:10,810 --> 00:12:14,025
chúng tôi có thể cập nhật giao diện người dùng tương ứng.

169
00:12:14,025 --> 00:12:17,240
Với điều này, chúng tôi hoàn thành bài tập này.

170
00:12:17,240 --> 00:12:21,380
Đây là thời điểm tốt để bạn thực hiện một GET cam kết với tin nhắn,

171
00:12:21,380 --> 00:12:24,300
lưu các thay đổi vào máy chủ này.