1
00:00:01,450 --> 00:00:03,480
‫Instructeur : Dans cette

2
00:00:03,480 --> 00:00:07,408
‫vidéo, nous allons donc apprendre à analyser certaines variables

3
00:00:07,408 --> 00:00:11,563
‫de l'URL afin de pouvoir créer la page du produit.

4
00:00:13,320 --> 00:00:15,690
‫Alors rappelez-vous comment dès le

5
00:00:15,690 --> 00:00:18,733
‫début j'ai importé le module URL, donc

6
00:00:20,120 --> 00:00:22,080
‫celui-ci ici, afin

7
00:00:22,080 --> 00:00:26,663
‫de pouvoir analyser les variables directement à partir de l'URL.

8
00:00:28,420 --> 00:00:33,420
‫D'accord. Donc, dans un premier temps,

9
00:00:34,040 --> 00:00:35,990
‫enregistrons une

10
00:00:38,100 --> 00:00:42,080
‫fois de plus "req. url" à la console, puis

11
00:00:44,250 --> 00:00:47,970
‫une autre chose que je souhaite enregistrer est en fait ...

12
00:00:51,070 --> 00:00:55,843
‫le résultat de l'utilisation de "url. parse" sur cette URL.

13
00:00:58,780 --> 00:01:03,290
‫Donc, encore une fois, l'analyse consiste essentiellement à analyser les

14
00:01:03,290 --> 00:01:05,703
‫variables hors de l'URL.

15
00:01:06,710 --> 00:01:08,590
‫Donc, quelque chose comme ça.

16
00:01:08,590 --> 00:01:13,410
‫Donc, ce que nous voulons, c'est "id = 0", c'est vrai, car

17
00:01:13,410 --> 00:01:17,970
‫pour le moment, le "req. url" est tout cela, donc

18
00:01:17,970 --> 00:01:19,480
‫toute cette

19
00:01:19,480 --> 00:01:22,310
‫URL, et bien sûr, nous n'avons

20
00:01:22,310 --> 00:01:24,190
‫aucune route pour cela.

21
00:01:24,190 --> 00:01:29,190
‫Donc rien ici dans ce genre de routeurs que nous avons ici, ne

22
00:01:30,510 --> 00:01:33,750
‫correspond en fait à cette URL entière.

23
00:01:33,750 --> 00:01:35,797
‫C'est pourquoi nous obtenons « Page non trouvée ! " Et

24
00:01:36,910 --> 00:01:40,663
‫c'est aussi pour ça qu'on doit changer quelques trucs ici.

25
00:01:43,240 --> 00:01:46,620
‫D'accord, laissez-moi analyser l'URL ici, afin que vous puissiez jeter

26
00:01:46,620 --> 00:01:48,380
‫un œil au résultat

27
00:01:48,380 --> 00:01:51,090
‫pour voir ce que nous devons faire ensuite.

28
00:01:51,090 --> 00:01:54,800
‫Je dois également passer "true" ici dans cette fonction d'analyse

29
00:01:54,800 --> 00:01:58,430
‫afin d'analyser réellement la requête dans un objet.

30
00:01:58,430 --> 00:02:02,260
‫Donc, avec requête, je veux dire cette partie ici.

31
00:02:02,260 --> 00:02:05,163
‫D'accord, c'est ce qu'on appelle la chaîne

32
00:02:06,270 --> 00:02:10,480
‫de requête, d'accord, et c'est donc ce que nous analysons efficacement,

33
00:02:10,480 --> 00:02:12,363
‫cette partie de l'URL.

34
00:02:14,260 --> 00:02:15,600
‫Alors redémarrez-le

35
00:02:17,810 --> 00:02:21,463
‫et examinons simplement les journaux que nous obtenons.

36
00:02:23,490 --> 00:02:26,420
‫Donc, le premier est le "req. url" et c'est ce

37
00:02:26,420 --> 00:02:29,510
‫à quoi nous nous attendions, n'est-ce pas, et voici

38
00:02:29,510 --> 00:02:33,133
‫le résultat de faire "url. parse" Donc nous

39
00:02:34,810 --> 00:02:38,030
‫obtenons l'objet de requête ici, et donc

40
00:02:38,030 --> 00:02:41,130
‫ici, nous avons un bel objet

41
00:02:41,130 --> 00:02:44,760
‫qui nous dit que l'identifiant est 0, c'est

42
00:02:44,760 --> 00:02:46,950
‫ça, donc c'est beau.

43
00:02:46,950 --> 00:02:49,400
‫Et puis, juste en dessous, nous avons

44
00:02:49,400 --> 00:02:51,620
‫en fait la deuxième pièce dont

45
00:02:51,620 --> 00:02:55,380
‫nous avons besoin, qui est juste le nom de chemin, d'accord.

46
00:02:55,380 --> 00:02:58,183
‫Ainsi, notre itinéraire utilise ce chemin

47
00:02:58,183 --> 00:03:02,000
‫d'accès, donc juste "/produit", puis nous devons connaître la requête

48
00:03:02,000 --> 00:03:05,810
‫afin de répondre en conséquence à l'ID de 0.

49
00:03:05,810 --> 00:03:07,670
‫Donc dans ce cas, par

50
00:03:07,670 --> 00:03:11,063
‫exemple, le chargement du produit avocat, qui est le premier.

51
00:03:11,959 --> 00:03:14,440
‫Mais si c'était le

52
00:03:14,440 --> 00:03:19,070
‫numéro deux, par exemple, alors charger ce brocoli, c'est bien.

53
00:03:19,070 --> 00:03:21,770
‫Et donc cette requête et ce chemin d'accès sont ce

54
00:03:21,770 --> 00:03:23,943
‫que nous allons utiliser pour faire cela.

55
00:03:25,860 --> 00:03:29,740
‫Donc, celui-ci nous n'avons plus besoin.

56
00:03:29,740 --> 00:03:33,010
‫Nous ne voulons pas non plus enregistrer quoi que ce soit

57
00:03:33,010 --> 00:03:35,530
‫dans la console maintenant car ce que nous

58
00:03:35,530 --> 00:03:38,630
‫voulons faire à la place est de créer deux variables, appelées

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

60
00:03:41,679 --> 00:03:43,150
‫nom de chemin.

61
00:03:43,150 --> 00:03:46,903
‫Et nous pouvons le faire en utilisant les piles, la structuration.

62
00:03:49,200 --> 00:03:51,560
‫Donc, encore une fois, j'espère

63
00:03:51,560 --> 00:03:56,560
‫que vous connaissez cette syntaxe ici, et c'est ainsi que cela fonctionne réellement.

64
00:03:57,380 --> 00:04:02,380
‫Donc, cet objet ici, il a une requête et un nom de chemin.

65
00:04:02,780 --> 00:04:04,880
‫Donc, en utilisant cette structuration

66
00:04:04,880 --> 00:04:07,521
‫comme celle-ci, avec ces noms de propriétés exacts,

67
00:04:07,521 --> 00:04:10,050
‫en fait, cela doit être comme ça.

68
00:04:10,050 --> 00:04:12,150
‫Ainsi, avec ces deux

69
00:04:12,150 --> 00:04:15,000
‫noms de propriété exacts, il créera

70
00:04:15,000 --> 00:04:18,254
‫ces deux variables, l'une appelée query et l'autre

71
00:04:18,254 --> 00:04:22,230
‫appelée pathname, avec exactement les valeurs que nous avons ici.

72
00:04:22,230 --> 00:04:24,300
‫La requête sera donc

73
00:04:24,300 --> 00:04:28,113
‫celle-ci et le chemin sera "/product", dans ce cas.

74
00:04:29,580 --> 00:04:31,880
‫Super. Maintenant, tout ce que j'ai

75
00:04:31,880 --> 00:04:34,733
‫à faire est d'aller de l'avant et de remplacer celui-ci ici par celui-ci.

76
00:04:41,370 --> 00:04:42,203
‫D'accord.

77
00:04:45,572 --> 00:04:47,100
‫Supprimons celui-ci, et pour

78
00:04:47,100 --> 00:04:51,080
‫nous assurer que nous enregistrons réellement la requête dans la console au

79
00:04:51,080 --> 00:04:53,933
‫cas où nous serions sur la page du produit.

80
00:04:55,597 --> 00:04:59,373
‫"console. log" l'objet de requête.

81
00:05:05,070 --> 00:05:07,800
‫Et maintenant, nous revenons à la recherche de

82
00:05:10,110 --> 00:05:13,360
‫la page et nous devons également interroger avec cet identifiant 0.

83
00:05:13,360 --> 00:05:15,350
‫Tellement parfait. Alors maintenant, nous

84
00:05:15,350 --> 00:05:18,350
‫sommes prêts à créer cette page en utilisant notre modèle.

85
00:05:18,350 --> 00:05:19,923
‫Et cela devrait être

86
00:05:19,923 --> 00:05:23,710
‫très simple, en fait beaucoup plus simple que la page de présentation,

87
00:05:23,710 --> 00:05:25,480
‫car ici nous n'avons pas

88
00:05:25,480 --> 00:05:28,000
‫à faire ces boucles folles ici car il

89
00:05:28,000 --> 00:05:30,500
‫y a un modèle simple, tout ce

90
00:05:30,500 --> 00:05:33,543
‫que nous avons à faire est de tout remplacer.

91
00:05:36,040 --> 00:05:39,860
‫Donc, dans la première étape, déterminons en fait quel

92
00:05:39,860 --> 00:05:42,903
‫est le produit que nous voulons afficher.

93
00:05:46,910 --> 00:05:50,130
‫Je crée donc une variable appelée product, et

94
00:05:50,130 --> 00:05:54,080
‫qui sera égale à l'objet de données à la

95
00:05:56,770 --> 00:06:00,827
‫position "query. identifiant. « D'accord,

96
00:06:02,680 --> 00:06:04,080
‫c'est logique ?

97
00:06:04,080 --> 00:06:06,570
‫L'objet de données est donc un tableau,

98
00:06:06,570 --> 00:06:09,950
‫et nous allons ensuite récupérer l'élément à la position qui

99
00:06:09,950 --> 00:06:13,010
‫provient de la requête. identifiant.

100
00:06:13,010 --> 00:06:15,130
‫Donc, si c'est zéro, alors c'est

101
00:06:15,130 --> 00:06:17,663
‫l'élément zéro, si c'est deux, c'est l'élément numéro deux.

102
00:06:19,170 --> 00:06:21,389
‫D'accord, et c'est donc le

103
00:06:21,389 --> 00:06:26,389
‫moyen le plus simple de récupérer un élément basé sur une chaîne de requête.

104
00:06:26,520 --> 00:06:28,120
‫Maintenant, une autre chose

105
00:06:28,120 --> 00:06:32,493
‫que nous devons faire est d'obtenir exactement la même tête ici,

106
00:06:36,800 --> 00:06:39,990
‫d'accord, et enfin nous créons simplement notre sortie.

107
00:06:43,196 --> 00:06:46,279
‫Ainsi, la sortie est simplement replaceTemplate, et le

108
00:06:49,383 --> 00:06:51,898
‫code HTML que nous devons

109
00:06:51,898 --> 00:06:55,981
‫transmettre est le tempOverview, ou en fait le tempProduct, et

110
00:06:58,340 --> 00:07:01,257
‫ce que nous transmettons est le produit.

111
00:07:03,960 --> 00:07:05,003
‫Et c'est tout!

112
00:07:08,230 --> 00:07:12,330
‫Maintenant, nous envoyons simplement la sortie comme résultat, ou

113
00:07:12,330 --> 00:07:15,850
‫comme réponse en fait, et c'est tout.

114
00:07:15,850 --> 00:07:18,900
‫Donc, cette partie ici a du sens, n'est-ce pas ?

115
00:07:18,900 --> 00:07:22,550
‫Donc, encore une fois, replaceTemplate s'attend à ce que

116
00:07:22,550 --> 00:07:25,513
‫nous mettions un modèle et un produit.

117
00:07:26,350 --> 00:07:30,223
‫Un produit est donc un objet avec toutes ces propriétés.

118
00:07:31,250 --> 00:07:33,610
‫Et donc ce produit vient ici directement de

119
00:07:33,610 --> 00:07:35,223
‫cet objet de données.

120
00:07:36,720 --> 00:07:40,463
‫Ainsi, dans replaceTemplate, nous passons le modèle product,

121
00:07:41,670 --> 00:07:45,140
‫donc celui-ci, que nous avons chargé à

122
00:07:45,140 --> 00:07:48,703
‫partir du fichier dès le début, puis product.

123
00:07:49,760 --> 00:07:53,920
‫Comme je l'ai mentionné, bien sûr, celui venant du tableau.

124
00:07:53,920 --> 00:07:56,450
‫Et donc ça devrait être ça.

125
00:07:56,450 --> 00:07:58,560
‫Donc, si le modèle est correct,

126
00:07:58,560 --> 00:08:00,640
‫cela devrait fonctionner maintenant.

127
00:08:00,640 --> 00:08:02,763
‫Alors, redémarrons le serveur,

128
00:08:04,000 --> 00:08:05,229
‫rechargeons-le,

129
00:08:05,229 --> 00:08:07,673
‫et effectivement, c'est parti.

130
00:08:08,760 --> 00:08:11,810
‫Alors, c'est super, ça me fait

131
00:08:11,810 --> 00:08:14,609
‫vraiment plaisir, quand ce genre

132
00:08:14,609 --> 00:08:18,633
‫de trucs marche comme ça, magnifique, tout est parfait.

133
00:08:19,930 --> 00:08:24,020
‫Aussi ce bouton de retour, oh ça ne marche pas.

134
00:08:24,020 --> 00:08:29,020
‫D'accord. Nous devons donc changer le modèle HTML ici.

135
00:08:30,490 --> 00:08:34,703
‫Alors où est-ce ? C'est dans le

136
00:08:35,660 --> 00:08:39,490
‫produit, et ce lien ici, où est-ce, ah.

137
00:08:39,490 --> 00:08:42,440
‫Oui, cela ne pointe nulle part en gros, et

138
00:08:42,440 --> 00:08:46,347
‫ce que nous voulons, c'est revenir à la vue d'ensemble, n'est-ce pas.

139
00:08:50,460 --> 00:08:53,933
‫Redémarrez le serveur, rechargez cette page,

140
00:08:55,110 --> 00:08:57,543
‫et maintenant, cela fonctionne.

141
00:08:59,200 --> 00:09:01,940
‫Essayons sans le patch bio, et effectivement,

142
00:09:01,940 --> 00:09:03,910
‫ce n'est pas là.

143
00:09:03,910 --> 00:09:05,970
‫Avant c'était, et maintenant c'est parti.

144
00:09:05,970 --> 00:09:07,900
‫Et tous ces éléments ici sont

145
00:09:07,900 --> 00:09:12,803
‫bien sûr dynamiques et proviennent de ce fichier JSON. Oui.

146
00:09:15,090 --> 00:09:17,650
‫Donc tout cela fonctionne. Beau.

147
00:09:17,650 --> 00:09:20,160
‫C'est vraiment très bien.

148
00:09:20,160 --> 00:09:25,150
‫Et notre projet, on peut le dire maintenant, est en fait terminé.

149
00:09:25,150 --> 00:09:28,450
‫Juste une autre petite chose que je veux faire, qui

150
00:09:28,450 --> 00:09:32,740
‫est juste de vous montrer quelque chose de gentil que nous pouvons faire.

151
00:09:32,740 --> 00:09:35,740
‫Mais à part ça, notre projet fonctionne.

152
00:09:35,740 --> 00:09:39,135
‫Alors félicitations, vous venez de terminer votre tout

153
00:09:39,135 --> 00:09:43,430
‫premier nœud vraiment cool. projet js.

154
00:09:43,430 --> 00:09:45,520
‫Et ce n'était pas si difficile, non ?

155
00:09:45,520 --> 00:09:47,550
‫Je veux dire, certaines

156
00:09:47,550 --> 00:09:52,550
‫des choses que nous avons faites sont plus liées à la programmation JavaScript en

157
00:09:52,670 --> 00:09:56,910
‫général, et pas tellement à node. js lui-même, non?

158
00:09:56,910 --> 00:10:01,370
‫Donc des trucs comme ça ici, ce qui était peut-être un peu déroutant, mais encore

159
00:10:01,370 --> 00:10:04,180
‫une fois à la fin de la journée,

160
00:10:04,180 --> 00:10:07,010
‫ce n'est vraiment que du JavaScript normal, n'est-ce pas ?

161
00:10:07,010 --> 00:10:09,060
‫Donc, encore une fois, la fonctionnalité est

162
00:10:09,060 --> 00:10:11,740
‫là, il y a juste une autre petite chose que

163
00:10:11,740 --> 00:10:15,283
‫je veux faire dans la prochaine vidéo, et quand vous l'atteindrez, je

164
00:10:15,283 --> 00:10:17,083
‫vous dirai ce que c'est.