1
00:00:01,450 --> 00:00:03,480
‫Kursleiter: In diesem Video

2
00:00:03,480 --> 00:00:07,408
‫werden wir also lernen, wie man einige Variablen

3
00:00:07,408 --> 00:00:11,563
‫aus der URL parst, um die Produktseite erstellen zu können.

4
00:00:13,320 --> 00:00:15,690
‫Denken Sie also daran, wie

5
00:00:15,690 --> 00:00:18,733
‫ich gleich am Anfang das URL-Modul importiert

6
00:00:20,120 --> 00:00:22,080
‫habe, also dieses hier,

7
00:00:22,080 --> 00:00:26,663
‫um Variablen direkt von der URL aus parsen zu können.

8
00:00:28,420 --> 00:00:33,420
‫Okay. Lassen Sie uns also

9
00:00:34,040 --> 00:00:35,990
‫als ersten

10
00:00:38,100 --> 00:00:42,080
‫Schritt noch einmal "req. url" an die Konsole und

11
00:00:44,250 --> 00:00:47,970
‫dann eine andere Sache, die ich protokollieren möchte, ist eigentlich...

12
00:00:51,070 --> 00:00:55,843
‫das Ergebnis der Verwendung von "url. parse" auf dieser URL.

13
00:00:58,780 --> 00:01:03,290
‫Auch hier besteht Parsen darin, die Variablen aus der

14
00:01:03,290 --> 00:01:05,703
‫URL heraus zu parsen.

15
00:01:06,710 --> 00:01:08,590
‫Also so etwas.

16
00:01:08,590 --> 00:01:13,410
‫Was wir also wollen, ist "id = 0", richtig, denn im

17
00:01:13,410 --> 00:01:17,970
‫Moment ist die "req. url" ist all das, also

18
00:01:17,970 --> 00:01:19,480
‫diese gesamte

19
00:01:19,480 --> 00:01:22,310
‫URL, und natürlich haben wir

20
00:01:22,310 --> 00:01:24,190
‫keine Route dafür.

21
00:01:24,190 --> 00:01:29,190
‫Nichts hier in dieser Art von Routern, die wir hier haben, stimmt

22
00:01:30,510 --> 00:01:33,750
‫also tatsächlich mit dieser gesamten URL überein.

23
00:01:33,750 --> 00:01:35,797
‫Deshalb erhalten wir "Seite nicht gefunden! „Und

24
00:01:36,910 --> 00:01:40,663
‫deshalb müssen wir hier auch einiges ändern.

25
00:01:43,240 --> 00:01:46,620
‫Okay, lassen Sie mich die URL hier analysieren, damit Sie sich

26
00:01:46,620 --> 00:01:48,380
‫das Ergebnis ansehen können, um

27
00:01:48,380 --> 00:01:51,090
‫zu sehen, was als nächstes zu tun ist.

28
00:01:51,090 --> 00:01:54,800
‫Ich muss hier auch "true" an diese Parse-Funktion übergeben, um

29
00:01:54,800 --> 00:01:58,430
‫die Abfrage tatsächlich in ein Objekt zu parsen.

30
00:01:58,430 --> 00:02:02,260
‫Also mit Abfrage meine ich diesen Teil hier.

31
00:02:02,260 --> 00:02:05,163
‫Okay, das wird als Abfragezeichenfolge bezeichnet, in

32
00:02:06,270 --> 00:02:10,480
‫Ordnung, und das ist es, was wir effektiv parsen, diesen

33
00:02:10,480 --> 00:02:12,363
‫Teil der URL.

34
00:02:14,260 --> 00:02:15,600
‫Starten Sie es also

35
00:02:17,810 --> 00:02:21,463
‫neu und werfen wir einen Blick auf die Protokolle, die wir erhalten.

36
00:02:23,490 --> 00:02:26,420
‫Zuerst ist also die "req. url" und das

37
00:02:26,420 --> 00:02:29,510
‫haben wir erwartet, richtig, und hier ist

38
00:02:29,510 --> 00:02:33,133
‫das Ergebnis von "url. parse" Also erhalten

39
00:02:34,810 --> 00:02:38,030
‫wir hier das Abfrageobjekt, und hier

40
00:02:38,030 --> 00:02:41,130
‫haben wir ein nettes Objekt, das

41
00:02:41,130 --> 00:02:44,760
‫uns mitteilt, dass id 0 ist, richtig,

42
00:02:44,760 --> 00:02:46,950
‫das ist also schön.

43
00:02:46,950 --> 00:02:49,400
‫Und dann, direkt darunter, haben wir

44
00:02:49,400 --> 00:02:51,620
‫tatsächlich das zweite Stück, das

45
00:02:51,620 --> 00:02:55,380
‫wir brauchen, und das ist nur der Pfadname, okay.

46
00:02:55,380 --> 00:02:58,183
‫Unsere Route verwendet also diesen Pfadnamen,

47
00:02:58,183 --> 00:03:02,000
‫also nur "/product", und dann müssen wir die Abfrage

48
00:03:02,000 --> 00:03:05,810
‫kennen, um entsprechend auf die ID 0 zu antworten.

49
00:03:05,810 --> 00:03:07,670
‫In diesem Fall also

50
00:03:07,670 --> 00:03:11,063
‫zum Beispiel das Laden des Avocado-Produkts, das das erste ist.

51
00:03:11,959 --> 00:03:14,440
‫Aber wenn es zum

52
00:03:14,440 --> 00:03:19,070
‫Beispiel Nummer zwei war, dann diesen Brokkoli laden, richtig.

53
00:03:19,070 --> 00:03:21,770
‫Diese Abfrage und dieser Pfadname

54
00:03:21,770 --> 00:03:23,943
‫werden wir dafür verwenden.

55
00:03:25,860 --> 00:03:29,740
‫Diese brauchen wir also nicht mehr.

56
00:03:29,740 --> 00:03:33,010
‫Wir möchten jetzt auch nichts in der

57
00:03:33,010 --> 00:03:35,530
‫Konsole protokollieren, da wir stattdessen

58
00:03:35,530 --> 00:03:38,630
‫zwei Variablen erstellen möchten, die Abfrage und

59
00:03:39,690 --> 00:03:40,723
‫...

60
00:03:41,679 --> 00:03:43,150
‫Pfadname.

61
00:03:43,150 --> 00:03:46,903
‫Und das können wir mit den Stacks, der Strukturierung.

62
00:03:49,200 --> 00:03:51,560
‫Ich hoffe also, dass Sie

63
00:03:51,560 --> 00:03:56,560
‫mit dieser Syntax hier vertraut sind, und so funktioniert sie tatsächlich.

64
00:03:57,380 --> 00:04:02,380
‫Dieses Objekt hier hat also eine Abfrage und einen Pfadnamen.

65
00:04:02,780 --> 00:04:04,880
‫Wenn Sie also diese

66
00:04:04,880 --> 00:04:07,521
‫Strukturierung so verwenden, mit diesen genauen

67
00:04:07,521 --> 00:04:10,050
‫Eigenschaftsnamen, muss es tatsächlich so sein.

68
00:04:10,050 --> 00:04:12,150
‫Mit diesen beiden genauen

69
00:04:12,150 --> 00:04:15,000
‫Eigenschaftsnamen erstellt es also diese beiden

70
00:04:15,000 --> 00:04:18,254
‫Variablen, eine namens query und eine namens

71
00:04:18,254 --> 00:04:22,230
‫pathname, mit genau den Werten, die wir hier haben.

72
00:04:22,230 --> 00:04:24,300
‫Die Abfrage lautet also

73
00:04:24,300 --> 00:04:28,113
‫diese und der Pfadname lautet in diesem Fall "/product".

74
00:04:29,580 --> 00:04:31,880
‫Toll. Jetzt muss ich

75
00:04:31,880 --> 00:04:34,733
‫nur noch weitermachen und das hier durch dieses ersetzen.

76
00:04:41,370 --> 00:04:42,203
‫Gut.

77
00:04:45,572 --> 00:04:47,100
‫Lassen Sie uns diese

78
00:04:47,100 --> 00:04:51,080
‫löschen und nur um sicherzustellen, dass wir die Abfrage tatsächlich in der

79
00:04:51,080 --> 00:04:53,933
‫Konsole protokollieren, falls wir uns auf der Produktseite befinden.

80
00:04:55,597 --> 00:04:59,373
‫"Konsole. log" das Abfrageobjekt.

81
00:05:05,070 --> 00:05:07,800
‫Und jetzt finden wir die Seite

82
00:05:10,110 --> 00:05:13,360
‫wieder und müssen auch mit dieser ID 0 abfragen.

83
00:05:13,360 --> 00:05:15,350
‫So perfekt. Jetzt können

84
00:05:15,350 --> 00:05:18,350
‫wir diese Seite mit unserer Vorlage erstellen.

85
00:05:18,350 --> 00:05:19,923
‫Und das

86
00:05:19,923 --> 00:05:23,710
‫sollte sehr einfach sein, eigentlich viel einfacher als die

87
00:05:23,710 --> 00:05:25,480
‫Übersichtsseite, denn hier müssen

88
00:05:25,480 --> 00:05:28,000
‫wir keine dieser verrückten Schleifen hier

89
00:05:28,000 --> 00:05:30,500
‫drüben machen, weil es eine einfache

90
00:05:30,500 --> 00:05:33,543
‫Vorlage gibt, wir müssen nur alles ersetzen.

91
00:05:36,040 --> 00:05:39,860
‫Lassen Sie uns also im ersten Schritt herausfinden,

92
00:05:39,860 --> 00:05:42,903
‫welches Produkt wir anzeigen möchten.

93
00:05:46,910 --> 00:05:50,130
‫Ich erstelle also eine Variable

94
00:05:50,130 --> 00:05:54,080
‫namens product, die dem Datenobjekt an der

95
00:05:56,770 --> 00:06:00,827
‫Position "query. Ich würde. „Okay,

96
00:06:02,680 --> 00:06:04,080
‫macht das Sinn?

97
00:06:04,080 --> 00:06:06,570
‫Das Datenobjekt ist also ein Array, und

98
00:06:06,570 --> 00:06:09,950
‫wir werden dann das Element an der Position abrufen, die

99
00:06:09,950 --> 00:06:13,010
‫von der Abfrage kommt. Ich würde.

100
00:06:13,010 --> 00:06:15,130
‫Also, wenn es null ist, dann ist es

101
00:06:15,130 --> 00:06:17,663
‫Element null, wenn es zwei ist, ist es Element Nummer zwei.

102
00:06:19,170 --> 00:06:21,389
‫Okay, und das ist

103
00:06:21,389 --> 00:06:26,389
‫die einfachste Möglichkeit, ein Element basierend auf einer Abfragezeichenfolge abzurufen.

104
00:06:26,520 --> 00:06:28,120
‫Eine andere Sache, die

105
00:06:28,120 --> 00:06:32,493
‫wir jetzt tun müssen, ist, genau denselben Head hierher zu bekommen,

106
00:06:36,800 --> 00:06:39,990
‫okay, und schließlich erstellen wir einfach unsere Ausgabe.

107
00:06:43,196 --> 00:06:46,279
‫Die Ausgabe ist also einfach replaceTemplate,

108
00:06:49,383 --> 00:06:51,898
‫und der HTML-Code, den

109
00:06:51,898 --> 00:06:55,981
‫wir übergeben müssen, ist tempOverview oder eigentlich tempProduct, und

110
00:06:58,340 --> 00:07:01,257
‫was wir übergeben, ist das Produkt.

111
00:07:03,960 --> 00:07:05,003
‫Und das ist es!

112
00:07:08,230 --> 00:07:12,330
‫Jetzt senden wir einfach die Ausgabe als Ergebnis oder

113
00:07:12,330 --> 00:07:15,850
‫eigentlich als Antwort, und das war's.

114
00:07:15,850 --> 00:07:18,900
‫Also macht dieser Teil hier Sinn, oder?

115
00:07:18,900 --> 00:07:22,550
‫Auch hier erwartet replaceTemplate, dass wir eine

116
00:07:22,550 --> 00:07:25,513
‫Vorlage und ein Produkt einfügen.

117
00:07:26,350 --> 00:07:30,223
‫Ein Produkt ist also ein Objekt mit all diesen Eigenschaften.

118
00:07:31,250 --> 00:07:33,610
‫Und so kommt das Produkt direkt

119
00:07:33,610 --> 00:07:35,223
‫aus diesem Datenobjekt hierher.

120
00:07:36,720 --> 00:07:40,463
‫Also übergeben wir in replaceTemplate das Template product,

121
00:07:41,670 --> 00:07:45,140
‫also dieses, das wir gleich zu Beginn

122
00:07:45,140 --> 00:07:48,703
‫aus der Datei geladen haben, und dann product.

123
00:07:49,760 --> 00:07:53,920
‫Wie ich bereits erwähnt habe, natürlich diejenige, die aus dem Array kommt.

124
00:07:53,920 --> 00:07:56,450
‫Und das sollte es eigentlich auch sein.

125
00:07:56,450 --> 00:07:58,560
‫Wenn die Vorlage also korrekt ist,

126
00:07:58,560 --> 00:08:00,640
‫sollte dies jetzt funktionieren.

127
00:08:00,640 --> 00:08:02,763
‫Also, starten wir den Server neu,

128
00:08:04,000 --> 00:08:05,229
‫laden wir

129
00:08:05,229 --> 00:08:07,673
‫ihn neu und tatsächlich geht es los.

130
00:08:08,760 --> 00:08:11,810
‫Also, das ist toll, das

131
00:08:11,810 --> 00:08:14,609
‫freut mich sehr, wenn

132
00:08:14,609 --> 00:08:18,633
‫so etwas funktioniert, schön, alles ist perfekt.

133
00:08:19,930 --> 00:08:24,020
‫Auch diese Zurück-Taste, oh das geht nicht.

134
00:08:24,020 --> 00:08:29,020
‫Okay. Daher müssen wir hier die HTML-Vorlage ändern.

135
00:08:30,490 --> 00:08:34,703
‫Also wo ist das? Es ist im Produkt,

136
00:08:35,660 --> 00:08:39,490
‫und dieser Link hier, wo ist das, ah.

137
00:08:39,490 --> 00:08:42,440
‫Ja, es zeigt im Grunde nirgendwo

138
00:08:42,440 --> 00:08:46,347
‫hin, und was wir wollen, ist, zur Übersicht zurückzukehren, richtig.

139
00:08:50,460 --> 00:08:53,933
‫Starten Sie den Server neu, laden Sie diese Seite

140
00:08:55,110 --> 00:08:57,543
‫neu und jetzt funktioniert es.

141
00:08:59,200 --> 00:09:01,940
‫Probieren wir es ohne den Bio-Patch aus, und

142
00:09:01,940 --> 00:09:03,910
‫tatsächlich ist er nicht hier.

143
00:09:03,910 --> 00:09:05,970
‫Früher war es und jetzt ist es weg.

144
00:09:05,970 --> 00:09:07,900
‫Und all dieses Zeug hier

145
00:09:07,900 --> 00:09:12,803
‫ist natürlich dynamisch und kommt aus dieser JSON-Datei. Ja.

146
00:09:15,090 --> 00:09:17,650
‫Das alles funktioniert also. Wunderschönen.

147
00:09:17,650 --> 00:09:20,160
‫Das ist wirklich ganz toll.

148
00:09:20,160 --> 00:09:25,150
‫Und unser Projekt, so können wir jetzt sagen, ist tatsächlich abgeschlossen.

149
00:09:25,150 --> 00:09:28,450
‫Nur noch eine kleine Sache, die ich tun möchte,

150
00:09:28,450 --> 00:09:32,740
‫nämlich Ihnen ein paar nette Dinge zu zeigen, die wir tun können.

151
00:09:32,740 --> 00:09:35,740
‫Aber abgesehen davon funktioniert unser Projekt.

152
00:09:35,740 --> 00:09:39,135
‫Herzlichen Glückwunsch, du hast gerade deinen ersten wirklich

153
00:09:39,135 --> 00:09:43,430
‫cool aussehenden Knoten fertiggestellt. js-Projekt.

154
00:09:43,430 --> 00:09:45,520
‫Und es war nicht so schwer, oder?

155
00:09:45,520 --> 00:09:47,550
‫Ich meine, einige der

156
00:09:47,550 --> 00:09:52,550
‫Dinge, die wir gemacht haben, beziehen sich eher auf die JavaScript-Programmierung im Allgemeinen

157
00:09:52,670 --> 00:09:56,910
‫und nicht so sehr auf Knoten. js selbst, oder?

158
00:09:56,910 --> 00:10:01,370
‫Also solche Sachen hier, die vielleicht etwas verwirrend waren, aber

159
00:10:01,370 --> 00:10:04,180
‫am Ende des Tages ist

160
00:10:04,180 --> 00:10:07,010
‫das wirklich nur normales JavaScript, oder?

161
00:10:07,010 --> 00:10:09,060
‫Die Funktionalität ist also wieder da,

162
00:10:09,060 --> 00:10:11,740
‫es gibt nur noch eine kleine Sache, die ich

163
00:10:11,740 --> 00:10:15,283
‫im nächsten Video machen möchte, und wenn Sie diese erreichen, werde ich

164
00:10:15,283 --> 00:10:17,083
‫Ihnen sagen, was das ist.