1
00:00:01,210 --> 00:00:02,310
‫Dozent: Lassen Sie

2
00:00:02,310 --> 00:00:05,453
‫uns nun lernen, wie statische Dateien mit Express bereitgestellt werden.

3
00:00:06,960 --> 00:00:10,060
‫Was meine ich nun eigentlich mit statischen Dateien?

4
00:00:10,060 --> 00:00:13,710
‫Nun, es sind die Dateien, die sich in unserem Dateisystem befinden, auf

5
00:00:13,710 --> 00:00:16,810
‫die wir derzeit nicht über alle Routen zugreifen können.

6
00:00:16,810 --> 00:00:20,160
‫So haben wir zum Beispiel diese Übersicht. html-Datei hier

7
00:00:20,160 --> 00:00:21,850
‫in unserem öffentlichen Ordner.

8
00:00:21,850 --> 00:00:25,000
‫Aber im Moment können wir nicht mit einem

9
00:00:25,000 --> 00:00:26,700
‫Browser darauf zugreifen, oder?

10
00:00:26,700 --> 00:00:29,630
‫Und das gleiche für diese Bilddateien, die wir

11
00:00:29,630 --> 00:00:32,500
‫hier haben, oder die CSS- oder Javascript-Dateien.

12
00:00:32,500 --> 00:00:34,770
‫Lassen Sie mich Ihnen das

13
00:00:34,770 --> 00:00:37,373
‫zeigen und diesmal tatsächlich den Browser verwenden.

14
00:00:38,470 --> 00:00:41,060
‫Im Moment kopiere ich diese URL hierher, um

15
00:00:41,060 --> 00:00:42,700
‫Ihnen zu zeigen, dass

16
00:00:42,700 --> 00:00:45,110
‫es funktioniert, natürlich auch im Browser.

17
00:00:45,110 --> 00:00:48,210
‫Okay, das ist also unser unformatiertes Ergebnis hier, von

18
00:00:48,210 --> 00:00:49,460
‫der gleichen Route.

19
00:00:49,460 --> 00:00:52,716
‫Aber sagen wir, wir wollen tatsächlich auf die HTML-Datei zugreifen, über

20
00:00:52,716 --> 00:00:54,570
‫die ich gerade gesprochen habe.

21
00:00:54,570 --> 00:00:56,700
‫So können wir natürlich nicht

22
00:00:57,770 --> 00:00:59,943
‫nur öffentlich schreiben und dann zum

23
00:01:01,730 --> 00:01:03,670
‫Beispiel Übersicht. html, oder?

24
00:01:03,670 --> 00:01:06,197
‫Darauf können wir im Moment nicht zugreifen.

25
00:01:06,197 --> 00:01:09,500
‫Und das liegt einfach daran, dass wir für diese

26
00:01:09,500 --> 00:01:11,850
‫URL keine Route definiert haben, oder?

27
00:01:11,850 --> 00:01:16,333
‫Wir haben keinen Handler, der dieser Route zugeordnet ist.

28
00:01:17,450 --> 00:01:19,780
‫Wenn wir also tatsächlich auf etwas

29
00:01:19,780 --> 00:01:21,460
‫von unserem Dateisystem zugreifen

30
00:01:21,460 --> 00:01:24,043
‫möchten, müssen wir eine integrierte Express-Middleware verwenden.

31
00:01:25,740 --> 00:01:28,120
‫Lassen Sie mich Ihnen jetzt zeigen, wie wir das tun können.

32
00:01:28,120 --> 00:01:31,603
‫Zum Beispiel nach diesem.

33
00:01:34,190 --> 00:01:38,110
‫In diesem Abschnitt sprechen wir eigentlich nur über eine API, sodass

34
00:01:38,110 --> 00:01:41,140
‫wir eigentlich keine statischen Dateien wie Bilder oder

35
00:01:41,140 --> 00:01:44,660
‫HTML bereitstellen müssen, also was ich Ihnen gerade gezeigt habe.

36
00:01:44,660 --> 00:01:46,590
‫Da dieser Abschnitt jedoch eine

37
00:01:46,590 --> 00:01:48,350
‫Einführung in Express im

38
00:01:48,350 --> 00:01:52,253
‫Allgemeinen ist, wollte ich Ihnen diesen Inhalt trotzdem schnell zeigen.

39
00:01:53,330 --> 00:01:56,360
‫Wie ich bereits sagte, müssen wir

40
00:01:56,360 --> 00:01:59,380
‫nur eine einfache integrierte Middleware verwenden,

41
00:01:59,380 --> 00:02:01,090
‫die so funktioniert.

42
00:02:01,090 --> 00:02:05,160
‫Express dot static, weil wir statische Dateien bereitstellen möchten, daher ist

43
00:02:05,160 --> 00:02:07,500
‫dies ein naheliegender Name dafür.

44
00:02:07,500 --> 00:02:10,170
‫Hier übergeben wir also das Verzeichnis, aus

45
00:02:10,170 --> 00:02:12,490
‫dem wir statische Dateien bereitstellen möchten.

46
00:02:12,490 --> 00:02:15,200
‫Und in diesem Fall verwende ich das öffentliche Verzeichnis.

47
00:02:15,200 --> 00:02:18,910
‫Also dieser Ordner hier, in dem wir diese HTML-Dateien haben, okay?

48
00:02:18,910 --> 00:02:21,490
‫Und tatsächlich verwenden

49
00:02:21,490 --> 00:02:26,490
‫wir hier eine Vorlagenzeichenfolge, damit ich die dirname-Variable

50
00:02:26,520 --> 00:02:30,470
‫verwenden kann, dann Schrägstrich und öffentlich.

51
00:02:30,470 --> 00:02:33,214
‫Speichern Sie es und kehren Sie zum Browser zurück.

52
00:02:33,214 --> 00:02:37,130
‫Dann können wir diese Übersicht öffnen. html.

53
00:02:37,130 --> 00:02:40,200
‫Jetzt wird es in dieser URL hier nicht funktionieren.

54
00:02:40,200 --> 00:02:42,540
‫Es muss tatsächlich so sein.

55
00:02:42,540 --> 00:02:46,290
‫Also ohne die Öffentlichkeit, nur /Übersicht. html.

56
00:02:46,290 --> 00:02:48,650
‫Mal sehen, und es funktioniert tatsächlich.

57
00:02:48,650 --> 00:02:49,483
‫Okay.

58
00:02:49,483 --> 00:02:50,430
‫Nun, warum ist das so?

59
00:02:50,430 --> 00:02:53,700
‫Warum brauchen wir den öffentlichen Ordner hier in der URL nicht?

60
00:02:53,700 --> 00:02:56,650
‫Nun, einfach weil, wenn wir eine URL öffnen, die

61
00:02:56,650 --> 00:02:58,780
‫es in keiner unserer Routen finden

62
00:02:58,780 --> 00:03:02,480
‫kann, es dann in diesem öffentlichen Ordner sucht, den wir definiert haben.

63
00:03:02,480 --> 00:03:05,620
‫Und es legt diesen Ordner auf das Stammverzeichnis fest.

64
00:03:05,620 --> 00:03:08,210
‫Okay, nehmen wir an, das Stammverzeichnis ist

65
00:03:08,210 --> 00:03:09,730
‫jetzt unser öffentlicher Ordner.

66
00:03:09,730 --> 00:03:12,740
‫Also das hier, und dann ist die Übersicht drin.

67
00:03:12,740 --> 00:03:15,003
‫Und deshalb haben wir darauf zugegriffen.

68
00:03:16,020 --> 00:03:18,530
‫Da haben wir zum Beispiel auch Bilder.

69
00:03:18,530 --> 00:03:23,530
‫Nehmen wir an, wir wollen ein Bild und dann diesen Pin hier öffnen.

70
00:03:23,640 --> 00:03:25,053
‫Und das können wir.

71
00:03:26,980 --> 00:03:27,853
‫Also

72
00:03:29,620 --> 00:03:33,200
‫Bild, PNG anstecken und los gehts.

73
00:03:33,200 --> 00:03:34,490
‫Hier ist das Bild.

74
00:03:34,490 --> 00:03:38,830
‫Was wir jetzt nicht tun können, ist dies, weil dies keine Datei ist.

75
00:03:38,830 --> 00:03:41,060
‫Dies sieht aus wie eine normale

76
00:03:41,060 --> 00:03:44,960
‫Route, und Express versucht daher tatsächlich, einen Route-Handler für diese zu

77
00:03:44,960 --> 00:03:47,070
‫finden, was jedoch nicht möglich ist,

78
00:03:47,070 --> 00:03:49,100
‫da Sie nichts definiert haben.

79
00:03:49,100 --> 00:03:49,933
‫Gut?

80
00:03:49,933 --> 00:03:52,440
‫Es funktioniert also wirklich nur für statische Dateien.

81
00:03:52,440 --> 00:03:56,330
‫In diesem Fall geht es wiederum nicht in eine neue Route, sondern stellt

82
00:03:56,330 --> 00:03:58,790
‫einfach die Datei bereit, die wir aus dem

83
00:03:58,790 --> 00:04:00,280
‫öffentlichen Ordner oder in

84
00:04:00,280 --> 00:04:04,043
‫dem Ordner, den wir hier in dieser Middleware angegeben haben, bereitgestellt haben.

85
00:04:05,420 --> 00:04:09,480
‫Werfen Sie nun einen Blick auf die Konsole hier und sehen Sie sich alle Anfragen

86
00:04:09,480 --> 00:04:12,660
‫an, die tatsächlich ausgeführt wurden, als wir diese Seite öffnen.

87
00:04:12,660 --> 00:04:15,690
‫Lassen Sie uns dies jetzt hier klären, damit wir alle Anfragen

88
00:04:15,690 --> 00:04:18,090
‫sehen, die tatsächlich nur von dieser Übersichtsseite stammen.

89
00:04:19,090 --> 00:04:23,870
‫Also schreiben wir nochmal Übersicht. html hier.

90
00:04:23,870 --> 00:04:25,696
‫Und diese Bilder hier

91
00:04:25,696 --> 00:04:28,810
‫sind kaputt und das liegt daran, dass dieser HTML-Code nicht

92
00:04:28,810 --> 00:04:30,720
‫so bereitgestellt werden soll, in Ordnung?

93
00:04:30,720 --> 00:04:32,320
‫Ich benutze es jetzt nur

94
00:04:32,320 --> 00:04:34,223
‫hier, damit wir visuelles Feedback bekommen.

95
00:04:35,271 --> 00:04:38,423
‫Der Inhalt hier interessiert mich überhaupt nicht.

96
00:04:39,980 --> 00:04:42,800
‫Sehen Sie sich nun alle Anfragen an, die

97
00:04:42,800 --> 00:04:44,950
‫für alle Assets durchgeführt wurden.

98
00:04:44,950 --> 00:04:46,580
‫Wie ich gleich zu

99
00:04:46,580 --> 00:04:49,600
‫Beginn sagte, erhält unser Server für jedes Stück, das

100
00:04:49,600 --> 00:04:52,360
‫Teil der Website ist, tatsächlich eine separate Anfrage.

101
00:04:52,360 --> 00:04:55,070
‫Und Sie sehen hier, dass die meisten von ihnen diesen 404 bekommen.

102
00:04:55,070 --> 00:04:59,260
‫Deshalb werden die Links dann auf der Webseite unterbrochen, einfach weil Express

103
00:04:59,260 --> 00:05:02,270
‫sie in diesem Ordner nicht finden kann.

104
00:05:02,270 --> 00:05:04,090
‫Aber auch das ist hier nicht der Punkt.

105
00:05:04,090 --> 00:05:05,650
‫Was ich Ihnen nur zeigen

106
00:05:05,650 --> 00:05:07,496
‫wollte, ist, wie wir statische Dateien

107
00:05:07,496 --> 00:05:10,806
‫aus einem Ordner und nicht aus einer Route heraus bereitstellen können.

108
00:05:10,806 --> 00:05:11,950
‫Gut.

109
00:05:11,950 --> 00:05:15,840
‫Damit ist die grundlegende Einführung in Express abgeschlossen.

110
00:05:15,840 --> 00:05:17,300
‫In den nächsten

111
00:05:17,300 --> 00:05:19,266
‫beiden Videos werden wir über sogenannte

112
00:05:19,266 --> 00:05:22,573
‫Umgebungsvariablen sprechen und ESlint auch im mündlichen VS-Code einrichten.