1
00:00:03,680 --> 00:00:07,640
Để tiếp tục phát triển ứng dụng của chúng

2
00:00:07,640 --> 00:00:11,025
tôi, chúng tôi muốn thiết lập một máy chủ đơn giản

3
00:00:11,025 --> 00:00:14,890
sẽ phục vụ dữ liệu của chúng tôi được yêu cầu bởi ứng dụng của chúng tôi.

4
00:00:14,890 --> 00:00:18,440
Cho đến nay, chúng tôi vẫn chưa học được đủ về cách

5
00:00:18,440 --> 00:00:22,090
chúng tôi có thể thiết lập một máy chủ sẽ phục vụ một API REST.

6
00:00:22,090 --> 00:00:26,410
Thay vào đó, chúng tôi sẽ sử dụng một mô-đun nút đơn giản gọi là json-server,

7
00:00:26,410 --> 00:00:32,990
giúp chúng tôi nhanh chóng thiết lập một máy chủ đơn giản sẽ phục vụ dữ liệu được cung cấp

8
00:00:32,990 --> 00:00:36,230
cho nó dưới dạng một tập tin JSON và cũng

9
00:00:36,230 --> 00:00:39,600
phục vụ lên hình ảnh có thể được yêu cầu bởi ứng dụng của chúng tôi.

10
00:00:39,600 --> 00:00:41,020
Vì vậy, để bắt đầu,

11
00:00:41,020 --> 00:00:45,450
chúng ta hãy tiến hành để cài đặt mô-đun nút json-server,

12
00:00:45,450 --> 00:00:50,285
và sau đó, thiết lập json-server của chúng tôi trong bài tập này.

13
00:00:50,285 --> 00:00:53,945
Để bắt đầu, hãy truy cập vị trí thuận tiện của

14
00:00:53,945 --> 00:00:57,550
bạn trên máy tính của bạn và tạo một thư mục có tên json-server.

15
00:00:57,550 --> 00:01:01,820
Lý do tại sao tôi tạo thư mục này là tôi có thể lưu trữ tất cả các tập

16
00:01:01,820 --> 00:01:06,170
tin được yêu cầu bởi json-server của tôi vào thư mục cụ thể này.

17
00:01:06,170 --> 00:01:15,290
Sau đó, chúng tôi sẽ cài đặt mô-đun npm json-server như một mô-đun MPM toàn cầu.

18
00:01:15,290 --> 00:01:16,620
Vì vậy, để làm điều đó,

19
00:01:16,620 --> 00:01:20,305
tại dấu nhắc trong thiết bị đầu cuối của bạn,

20
00:01:20,305 --> 00:01:27,430
gõ npm cài đặt trừ g json-server,

21
00:01:27,430 --> 00:01:30,575
và sau đó để hoàn thành

22
00:01:30,575 --> 00:01:34,820
việc cài đặt mô-đun npm json-server như một mô-đun toàn cầu.

23
00:01:34,820 --> 00:01:39,525
Bây giờ, trong trường hợp bạn đang làm điều này trên Linux hoặc máy Mac,

24
00:01:39,525 --> 00:01:43,530
hãy chắc chắn sử dụng sudo ở phía trước của nó.

25
00:01:46,460 --> 00:01:49,520
Khi quá trình cài đặt hoàn tất,

26
00:01:49,520 --> 00:01:53,545
hãy chuyển đến hướng dẫn để thiết lập json-server,

27
00:01:53,545 --> 00:01:56,935
và ở đó, chúng tôi cung cấp một tệp có tên là db.json.

28
00:01:56,935 --> 00:02:01,040
Tải về tập tin này và đặt tên nó là db.json và di

29
00:02:01,040 --> 00:02:05,525
chuyển tập tin này vào thư mục json-server mà bạn đã tạo trong bước trước đó.

30
00:02:05,525 --> 00:02:10,490
Bây giờ bạn thấy rằng tôi đã tải về các

31
00:02:10,490 --> 00:02:15,500
tập tin db.json và sau đó di chuyển tập tin db.json đó vào thư mục json-server.

32
00:02:15,500 --> 00:02:18,830
Ngoài ra, tôi cũng đã tạo ra một thư mục khác,

33
00:02:18,830 --> 00:02:21,690
bên trong thư mục json-server, được đặt tên là public.

34
00:02:21,690 --> 00:02:26,375
Bây giờ, bất cứ điều gì chúng tôi đặt trong thư mục công cộng này sẽ được cung cấp bởi

35
00:02:26,375 --> 00:02:33,630
json-server của chúng tôi như một tài nguyên có thể được tải về từ máy chủ của chúng tôi.

36
00:02:33,630 --> 00:02:40,430
Do đó, json-server của chúng tôi hoạt động như một máy chủ web tĩnh đơn giản có thể giúp chúng tôi

37
00:02:40,430 --> 00:02:46,770
phục vụ bất kỳ tài nguyên nào như hình ảnh hoặc thậm chí cả một trang web.

38
00:02:46,770 --> 00:02:50,300
Nếu bạn muốn, bạn có thể sao chép nó vào thư mục công cộng và làm cho nó

39
00:02:50,300 --> 00:02:56,925
có sẵn để được phục vụ bởi json-server và xem trong một trình duyệt.

40
00:02:56,925 --> 00:02:59,650
Tiếp theo, một lần nữa, đi đến các hướng dẫn,

41
00:02:59,650 --> 00:03:03,915
và sau đó tải về tên tập tin zip này images.zip,

42
00:03:03,915 --> 00:03:05,570
và sau đó giải nén tập tin này,

43
00:03:05,570 --> 00:03:08,490
và sau đó bạn sẽ có được một thư mục có tên là hình ảnh, trong

44
00:03:08,490 --> 00:03:13,880
đó có một tập hợp các hình ảnh PNG mà chúng tôi sẽ sử dụng trong ứng dụng của chúng tôi.

45
00:03:13,880 --> 00:03:16,470
Vì vậy, một khi thư mục hình ảnh đã sẵn sàng,

46
00:03:16,470 --> 00:03:19,160
di chuyển thư mục hình ảnh đó vào thư mục công cộng mà chúng tôi

47
00:03:19,160 --> 00:03:22,665
vừa tạo ra trong thư mục json-server.

48
00:03:22,665 --> 00:03:24,485
Đi đến thư mục của chúng tôi,

49
00:03:24,485 --> 00:03:26,420
bạn sẽ thấy rằng bên trong thư mục công cộng,

50
00:03:26,420 --> 00:03:31,070
tôi đã di chuyển thư mục con hình ảnh vào thư mục công cộng ở đây,

51
00:03:31,070 --> 00:03:36,510
và điều này chứa tất cả các hình ảnh sẽ hữu ích cho ứng dụng của tôi.

52
00:03:36,510 --> 00:03:39,125
Để khởi động json-server của bạn,

53
00:03:39,125 --> 00:03:43,470
hãy vào thư mục json-server trong thiết bị đầu cuối của bạn và tại dấu nhắc,

54
00:03:43,470 --> 00:03:50,665
gõ json-server và trừ đi xem db.json.

55
00:03:50,665 --> 00:03:54,650
Lý do sử dụng cờ đồng hồ

56
00:03:54,650 --> 00:03:58,610
này là json-server này sẽ giữ một chiếc đồng hồ trên tệp bb.json,

57
00:03:58,610 --> 00:04:01,279
và bất cứ khi nào tệp db.json được sửa đổi,

58
00:04:01,279 --> 00:04:07,810
nó sẽ tải lại tệp db.json và bắt đầu phục vụ dữ liệu sửa đổi từ máy chủ.

59
00:04:07,810 --> 00:04:13,280
Ngoài ra, chúng ta cũng có thể đưa ra một lá cờ trừ d với một giá trị

60
00:04:13,280 --> 00:04:15,035
, ví dụ, 2.000,

61
00:04:15,035 --> 00:04:19,430
có nghĩa là khi máy chủ nhận được một yêu cầu,

62
00:04:19,430 --> 00:04:25,380
nó sẽ phục vụ dữ liệu trở lại cho requester sau một sự chậm trễ 2 giây.

63
00:04:25,380 --> 00:04:31,880
Bây giờ, điều này sẽ được sử dụng để mô phỏng sự chậm trễ trong việc truy cập một máy chủ qua Internet.

64
00:04:31,880 --> 00:04:35,270
Vì vậy, đó là lý do tại sao tôi cũng sẽ đề nghị sử dụng

65
00:04:35,270 --> 00:04:39,255
cờ trừ d 2.000 cho json-server.

66
00:04:39,255 --> 00:04:41,390
Vì vậy, chúng ta hãy bắt đầu json-server của chúng tôi,

67
00:04:41,390 --> 00:04:44,735
và sau đó bạn sẽ nhận thấy rằng json-server khởi động

68
00:04:44,735 --> 00:04:49,680
và tuyên bố tất cả các tài nguyên có sẵn từ json-server.

69
00:04:49,680 --> 00:04:57,825
Vì vậy, bạn có thể thấy rằng nó có một tập hợp các tài nguyên có sẵn tại tất cả các URL này.

70
00:04:57,825 --> 00:05:02,300
Ngoài ra, máy chủ tĩnh công cộng phục vụ

71
00:05:02,300 --> 00:05:07,825
dữ liệu tĩnh có sẵn tại URL này, localhost:3000.

72
00:05:07,825 --> 00:05:13,445
Bây giờ, bạn có thể vào bất kỳ trình duyệt nào và sau đó nếu bạn gõ vào

73
00:05:13,445 --> 00:05:20,515
localhost:3000 và slash món ăn,

74
00:05:20,515 --> 00:05:27,020
bạn sẽ thấy rằng điều này sẽ bắt đầu phục vụ dữ liệu của chúng tôi dưới dạng mảng JSON ở đây.

75
00:05:27,020 --> 00:05:30,530
Vì vậy, điều này sẽ hữu ích cho ứng dụng của chúng tôi.

76
00:05:30,530 --> 00:05:37,395
Tương tự như vậy, bạn có thể nhập các nhà lãnh đạo,

77
00:05:37,395 --> 00:05:39,110
và bạn sẽ thấy, một lần nữa,

78
00:05:39,110 --> 00:05:41,095
dữ liệu được phục vụ và như vậy.

79
00:05:41,095 --> 00:05:45,760
Nếu bạn gõ vào localhost:3000,

80
00:05:45,760 --> 00:05:48,665
bạn sẽ thấy rằng máy chủ sẽ phục vụ lên

81
00:05:48,665 --> 00:05:53,395
dữ liệu như một máy chủ tĩnh và sau đó hiện tại, nó trống.

82
00:05:53,395 --> 00:05:57,860
Bây giờ, nếu bạn muốn truy cập vào các hình ảnh có sẵn từ máy chủ,

83
00:05:57,860 --> 00:06:06,520
tôi chỉ có thể gõ hình ảnh và gõ vào tên của một tập tin PNG,

84
00:06:06,520 --> 00:06:10,020
và sau đó bạn sẽ thấy rằng nó sẽ phục vụ lên hình ảnh tương ứng.

85
00:06:10,020 --> 00:06:12,570
Bây giờ, điều này rất hữu ích cho chúng tôi,

86
00:06:12,570 --> 00:06:16,170
khi chúng tôi phát triển ứng dụng của chúng tôi trong khóa học này.

87
00:06:16,170 --> 00:06:19,169
Với điều này, chúng tôi hoàn thành bài tập này,

88
00:06:19,169 --> 00:06:24,560
nơi chúng tôi đã thiết lập một máy chủ đơn giản gọi là json-server để phục vụ

89
00:06:24,560 --> 00:06:30,850
dữ liệu và hỗ trợ một API REST mà chúng tôi có thể truy cập từ ứng dụng của chúng tôi.