1
00:00:00,480 --> 00:00:05,460
このレッスンでは、キャンプアプリを続行していきます。ユーザーが新しいキャンプ場を送信する機能や機能を追加します。

2
00:00:05,460 --> 00:00:09,070
 

3
00:00:09,270 --> 00:00:10,990
それで、私たちがやるべきことがいくつかあります。

4
00:00:11,010 --> 00:00:15,540
最初は、新しいキャンプ場を実際に作成する投稿経路を設定して配列に追加します。

5
00:00:15,540 --> 00:00:16,130
 

6
00:00:16,290 --> 00:00:21,600
 

7
00:00:21,600 --> 00:00:27,030
 

8
00:00:27,030 --> 00:00:29,760
次に、本文パーサーを追加して、正しくインポートされて構成されていることを確認してから、フォームを作成し、ユーザーが実際にそのPOST要求を送信できるフォームのルートを作成するための2つのステップがあります。

9
00:00:29,760 --> 00:00:30,840
だから私たちはそれに着きます。

10
00:00:30,840 --> 00:00:32,720
ポストルートを設定することから始めます。

11
00:00:32,760 --> 00:00:40,950
 

12
00:00:40,950 --> 00:00:49,350
 

13
00:00:49,410 --> 00:00:53,380
だから私はまだV-1にいます。私はポストドラフトで実際にはい広告を開くつもりです。私はちょうどそれを底でやっています。私はポストを上げるつもりで何かをするよりもスラッシュの新しいキャンプ場やキャンプグラウンドのように私は実際にスラッシュキャンプ場をするつもりです。

14
00:00:53,670 --> 00:00:59,550
 

15
00:00:59,580 --> 00:01:05,310
 

16
00:01:05,310 --> 00:01:09,800
それはあなたとまったく同じですRLあなたがゲットルートのために持っているのと同じように、一つはGEDであり、一つは投稿であり、私たちは同じ事務局実際には異なるルートがあります。

17
00:01:09,810 --> 00:01:10,920
はい、その一部です。

18
00:01:10,920 --> 00:01:14,310
これは実際に私たちがどのようにルートであるかについてのすべての規約の一部です。

19
00:01:14,360 --> 00:01:16,260
私たちは、私たちがどのように名前を挙げているかに多くの自由を持っています。

20
00:01:16,380 --> 00:01:20,580
しかし実際には残りのコンベンションがあり、今後のビデオでこれに戻ってくるつもりです。

21
00:01:20,580 --> 00:01:21,200
 

22
00:01:21,330 --> 00:01:26,370
 

23
00:01:27,180 --> 00:01:33,120
しかし、私が今言いたいのは、私たちのルートが休憩と呼ばれるこのコンベンションに従うようにすることです。あなたがキャンプ場をスラッシュしなければならないすべてのキャンプ場を示すページがあるとき。

24
00:01:33,120 --> 00:01:38,740
私たちが新しいキャンプ場を作ることができるページやルートを持っているときは、あなたはキャンプグラウンドをまっすぐにする必要があります。

25
00:01:39,490 --> 00:01:40,990
 

26
00:01:41,340 --> 00:01:42,780
しかし、それは投稿要求でなければなりません。

27
00:01:42,780 --> 00:01:47,370
それは大会ですが、これは友達のためにこれをやっているなら、私たちが従うべきフォーマットです。

28
00:01:47,410 --> 00:01:53,460
スラッシュの友人には、新しい友達を作るためのポストリクエストを送信するポストとして、すべての友人とスラッシュの友人が表示されます。

29
00:01:53,460 --> 00:01:56,170
 

30
00:01:56,580 --> 00:01:58,470
だから我々はそれを使ってより多くの練習をするでしょう。

31
00:01:58,470 --> 00:02:01,040
これは非常に最初の紹介です。

32
00:02:01,110 --> 00:02:05,940
しかし、実際には7つの異なる経路があり、この残りのコンベンションに従って安心しています。後ほど見ていきます。

33
00:02:05,940 --> 00:02:07,120
 

34
00:02:07,470 --> 00:02:16,710
 

35
00:02:16,770 --> 00:02:29,140
そこで私たちがやりたいことは、フォームからデータを取得してキャンプグラウンドアレイに追加する2つのことです。次に、キャンプ場ページへのアクセスをこのルートに戻したいと考えています。

36
00:02:30,630 --> 00:02:38,400
だから私たちはACT UPのポストをセットアップしています。ここであなたはポストルートをヒットし、郵便配達員でテストすることができます。

37
00:02:38,850 --> 00:02:40,630
 

38
00:02:40,770 --> 00:02:47,690
だから私はちょうど郵便配達員に戻ってここにユーロをコピーして、私たちがテストをしているルートは、私たちがリクエストを出したら、ポストとしてキャンプグラウンドをスラッシュしています。

39
00:02:48,120 --> 00:02:52,220
 

40
00:02:52,460 --> 00:02:57,780
Tim Lを起動していないので、実際には問題ではありません。ここで見ているSSはエラーページです。

41
00:02:57,780 --> 00:02:59,300
私たちのサーバがH

42
00:02:59,430 --> 00:03:02,460
クラウド9が私たちに与えるこのエラーページ。

43
00:03:02,460 --> 00:03:04,800
だから私たちはサーバーを起動する必要があります。

44
00:03:05,530 --> 00:03:11,440
今戻って同じGETリクエストをすると、画像とH個のリストが表示されます。

45
00:03:11,820 --> 00:03:17,130
ポストリクエストを行うと、ポストドラフトをヒットさせるちょっとしたメッセージが表示されます。

46
00:03:17,360 --> 00:03:22,800
OKだから、postmanと一緒に行うことは、postルートとして動作していることを証明しています。次に行うのは、body

47
00:03:22,800 --> 00:03:25,140
parserをインストールすることです。

48
00:03:25,260 --> 00:03:36,600
だから私たちは、NPMのボディダッシュパーサーダッシュダッシュをインストールする必要がありますし、私たちはここで私たちのボディパーツをインポートするでしょうボディDeschパーサーと保存を必要とする等しいです。

49
00:03:37,230 --> 00:03:43,910
 

50
00:03:43,910 --> 00:03:46,190
そして、私たちはpoddyパーサを使うようにexpressに伝える必要があります。

51
00:03:46,260 --> 00:03:54,990
だから、オディパーサーを使ってやってみましょう。そして、塗られていないドットユーロをしてオブジェクトを渡す必要があります。私たちがする必要があるのは、拡張コランを追加することです。

52
00:03:54,990 --> 00:03:59,680
 

53
00:03:59,980 --> 00:04:04,470
覚えておいてください。これは、覚えているだけでなく、コピーして貼り付けて保存することができます。

54
00:04:04,470 --> 00:04:07,290
 

55
00:04:07,290 --> 00:04:13,050
そして今、私たちは身体の部分が整えられており、私たちの後を走って動作するかどうかを知ることができます。

56
00:04:13,050 --> 00:04:15,370
 

57
00:04:15,390 --> 00:04:17,490
ここでフォームに注目しましょう。

58
00:04:17,520 --> 00:04:24,180
私が示したことの前に、友達リストと同じページにフォームがある友だちアプリですが、これはここで取り上げるアプローチではありません。

59
00:04:24,180 --> 00:04:27,080
 

60
00:04:27,090 --> 00:04:31,530
むしろフォームを実際に表示する完全な別個のページとルートを用意します。

61
00:04:31,770 --> 00:04:34,610
それは新しいキャンプ場を作るためのフォームになります。

62
00:04:34,680 --> 00:04:41,280
そして、あなたはポストリクエストを送信するフォームを提出し、投稿としてキャンプ場をスラッシュしてから、私たちはキャンプ場にリダイレクトされます。

63
00:04:41,280 --> 00:04:44,070
 

64
00:04:44,070 --> 00:04:48,930
だから別のページを作って、別のルートが必要なことをやってみましょう。そして、私たちはここの下に、あるいはその間に、本当に重要ではありません。

65
00:04:49,440 --> 00:04:53,430
 

66
00:04:53,670 --> 00:04:57,900
そして、これは新しいスラッシュキャンプ場が削られます。

67
00:04:58,260 --> 00:05:02,860
もう一度、これは私たちが望む何でもよいが、これは安らかな大会である。

68
00:05:02,880 --> 00:05:06,010
これは従来の名前の3番目です。

69
00:05:06,060 --> 00:05:12,120
 

70
00:05:12,120 --> 00:05:18,210
 

71
00:05:18,210 --> 00:05:25,960
 

72
00:05:25,960 --> 00:05:33,400
最初の1つはスラッシュキャンプ場だったので、あなたは新しいキャンプ場を作ってから新しいキャンプグラウンドスラッシュを作ることができる道です。これを肉体にしましょう。必要なのは、データや何かを渡す必要のないフォームをレンダリングするだけです。それで、rezレンダリングを行い、フォームは新しいフォームを呼び出すだけです。

73
00:05:33,400 --> 00:05:36,720
 

74
00:05:36,970 --> 00:05:38,460
はい、そうです。

75
00:05:39,090 --> 00:05:40,340
そして安全です。

76
00:05:40,360 --> 00:05:44,290
今ここのviewディレクトリに戻り、そのテンプレートを作成します。

77
00:05:44,410 --> 00:05:47,760
だからタッチビューは新しいスラッシュ。

78
00:05:47,880 --> 00:05:48,440
はい。

79
00:05:48,730 --> 00:05:54,530
そして、そのテンプレートを開き、テンプレートの中に追加します。

80
00:05:54,540 --> 00:06:04,900
それぞれのキャンプ場を作成してフォームタグにフォームタグを追加してアクションを取る必要があり、メソッドと覚えのメソッドが必要で、メソッドがポストで、アクションがキャンプグラウンドをスラッシュにする必要がありますここに。

81
00:06:04,900 --> 00:06:13,900
 

82
00:06:13,900 --> 00:06:18,380
 

83
00:06:18,550 --> 00:06:20,820
ポスト・スラッシュ・キャンプ場をアップする。

84
00:06:20,860 --> 00:06:24,850
ここでフォームデータを取得してcampground配列に追加します。

85
00:06:25,090 --> 00:06:27,540
そして、内部には2つの異なる入力が必要です。

86
00:06:27,640 --> 00:06:34,570
テキストとプレースホルダーは単に名前になるので、最初のタイプはタイプです。

87
00:06:35,290 --> 00:06:39,600
そして、2番目のものはプレースホルダは画像です。

88
00:06:39,710 --> 00:06:45,470
そして、ちょうどそれをやってみましょう.Typeeがテキストに行くようにしておきましょう。次に、ボタンをクリックして送信して保存してください。そして、これらの両方にname属性が必要です。ちょうど名前に等しい。

89
00:06:45,460 --> 00:06:54,280
 

90
00:06:54,280 --> 00:06:59,320
 

91
00:06:59,320 --> 00:07:07,180
そして、ここでは名前がimageと同じになるようにし、リクエストのAbatiからデータを取得するために、このルートの代わりにこのname属性を使用します。

92
00:07:07,180 --> 00:07:09,580
 

93
00:07:09,620 --> 00:07:10,370
それをする前に

94
00:07:10,390 --> 00:07:12,760
このフォームが正しく表示されるようにしましょう。

95
00:07:12,850 --> 00:07:21,880
サーバーを始動し、このルートを訪れて、キャンプ場を新しくスラッシュにする必要があります。私たちはフォームを優れたものにします。

96
00:07:21,970 --> 00:07:25,870
 

97
00:07:25,880 --> 00:07:28,160
私たちはそのブートストラップ・スタイリングのどれも得ていません。

98
00:07:28,390 --> 00:07:33,090
それほど多くはないように見えますが、私たちのレイアウトは含まれていないので、私たちはそれを得ていません。

99
00:07:33,160 --> 00:07:36,990
ヘッダーとフッターはありません。

100
00:07:37,420 --> 00:07:47,680
それでは、ParshallのスラッシュHetterをインクルードして、この行をここにコピーし、Parshallのスラッシュフッターを追加しましょう。

101
00:07:47,680 --> 00:07:50,130
 

102
00:07:51,040 --> 00:07:54,360
サーバーを再起動します。

103
00:07:54,380 --> 00:07:59,290
今、私たちは美しいブートストラップを取得し、ヘッダーファイルとフッターもここに配置しています。

104
00:08:00,460 --> 00:08:04,870
 

105
00:08:04,880 --> 00:08:11,440
そして、これをテストして正しいルートに行くのか、ここに何かを入力して提出するだけで、ポストルートを打つことができます。これは、フォームが私たちのコードがキャンプグラウンドを破棄するリクエストを提出していることを意味します。

106
00:08:11,440 --> 00:08:13,430
 

107
00:08:13,570 --> 00:08:15,290
そして、我々はこの赤いスタートを解決しています。

108
00:08:15,580 --> 00:08:20,590
しかし、これを送るのではなく、実際にこのロジックを追加してこの作業をしたいと考えています。

109
00:08:20,750 --> 00:08:26,240
そして私たちが身体の要求を使用してフォームからデータを取得してから、私たちはボディーカムの名前を要求し、身体イメージを要求し、それらを変数に保存します。

110
00:08:26,260 --> 00:08:31,550
 

111
00:08:31,570 --> 00:08:36,060
これまでの名前とvarの画像。

112
00:08:36,350 --> 00:08:41,830
そして私たちがやりたいことは新しいキャンプ場を私たちの配列に押し込むことです。

113
00:08:42,040 --> 00:08:47,590
そして、それが機能するためには、これを移動して、それが適切なものの中にないようにしなければなりません。

114
00:08:47,600 --> 00:08:52,240
私たちはちょうどそれを上に置くだろうし、それはどこに滞在するつもりはありません。

115
00:08:52,250 --> 00:08:54,690
私たちはすぐにデータベースに移行していることを覚えておいてください。

116
00:08:55,000 --> 00:08:59,790
しかし今のところ、私たちはこのポストルートの内部にアクセスできるようにそれを上にしています。

117
00:09:00,080 --> 00:09:01,460
コールバック関数内。

118
00:09:01,880 --> 00:09:05,130
だから私たちは新しいキャンプ場をキャンプ場のアレイに押し込むつもりです。

119
00:09:05,430 --> 00:09:08,950
キャンプ場がプッシュアップして、オブジェクトを押し込む必要があります。

120
00:09:09,080 --> 00:09:11,310
だから私は変数で新しいオブジェクトを作るつもりです。

121
00:09:11,360 --> 00:09:15,570
だから私はそれをvarの新しいキャンプ場と呼ぶつもりです。

122
00:09:15,590 --> 00:09:24,350
 

123
00:09:24,350 --> 00:09:31,550
 

124
00:09:31,540 --> 00:09:33,580
それはオブジェクトであり、名前は名前と同じであり、画像は画像と等しいので、ここでこの形式と一致するか、名前と画像があります。最後に保存するように新しいキャンプ場をプッシュするだけです。

125
00:09:33,740 --> 00:09:36,890
そして、キャンプ場のページにリダイレクトしましょう。

126
00:09:37,060 --> 00:09:37,960
そうなるでしょう。

127
00:09:38,000 --> 00:09:47,270
RAZはキャンプ場をスラッシュにリダイレクトします。はい、キャンプ場を削る必要があります。

128
00:09:47,380 --> 00:09:51,310
しかし、リダイレクトを行うとき、デフォルトはgetリクエストとしてリダイレクトされます。

129
00:09:51,380 --> 00:09:53,630
 

130
00:09:57,400 --> 00:10:01,140
だから私たちは保存し、それをテストしてみましょうリフレッシュ新しいキャンプ場に追加してみましょう。

131
00:10:01,210 --> 00:10:08,820
私たちはちょうどこのデイジー山と呼ぶでしょう、私たちはイメージを必要としています、私はここでこれをコピーします。

132
00:10:09,080 --> 00:10:10,520
戻る。

133
00:10:10,850 --> 00:10:12,640
ヒット提出する。

134
00:10:13,270 --> 00:10:17,060
そして、それがうまくいっているかどうかを知るためには、下にスクロールする必要があります。

135
00:10:17,090 --> 00:10:18,700
美しいデイジー山。

136
00:10:18,700 --> 00:10:20,240
かなり見事な光景。

137
00:10:20,230 --> 00:10:22,200
戻っていくつかのことを見直そう。

138
00:10:22,210 --> 00:10:23,620
私たちがしたことはたくさんあります。

139
00:10:23,620 --> 00:10:26,170
最初に私が育てたいのは、私たちが作ったルートです。

140
00:10:26,170 --> 00:10:33,790
だから私たちは実際には、実際には、私たちがすべてのキャンプ場をスラッシュキャンプ場に同じ局を持っていることを示すキャンプ場を削って取得しています。

141
00:10:33,790 --> 00:10:35,480
 

142
00:10:35,600 --> 00:10:40,370
そして、それは新しいキャンプ場を作ってスラッシュキャンプ場をリダイレクトするという論理を実際に行うところです。

143
00:10:40,900 --> 00:10:44,520
そして、アムトラックは、スラッシュしたキャンプ場を新しいものにする。

144
00:10:44,650 --> 00:10:46,330
それがフォームを示しています。

145
00:10:46,690 --> 00:10:55,070
 

146
00:10:55,070 --> 00:11:01,490
 

147
00:11:01,820 --> 00:11:03,930
キャンプ場をスラッシュしてキャンプ場をスラッシュしてキャンプ場をスラッシュキャンプ場にリダイレクトし、キャンプ場を使用してすべてのキャンプ場を表示します。

148
00:11:04,740 --> 00:11:07,490
間違いなく複雑な流れです。

149
00:11:07,540 --> 00:11:11,360
動く部分がたくさんありますが、これは我々が多く従うレシピです。

150
00:11:11,410 --> 00:11:13,910
だから私たちはどこかでリクエストを送信するためのフォームを持っています。

151
00:11:14,050 --> 00:11:16,990
そしてそのポストルートの内部でフォームデータを取ります。

152
00:11:17,020 --> 00:11:20,530
私たちはそれを使って何かをしてから、別の場所にリダイレクトします。

153
00:11:20,530 --> 00:11:24,570
したがって、ポストルートがあなたを別のルートにリダイレクトするのは本当に典型的です。

154
00:11:25,070 --> 00:11:28,140
私たちがすべき最後のことは、キャンプグラウンドのテンプレートを開くことです。

155
00:11:28,610 --> 00:11:37,930
 

156
00:11:37,930 --> 00:11:48,790
 

157
00:11:48,910 --> 00:11:51,250
だから、C9でスラッシュキャンプグラウンドを使って、単純なリンクを上に追加して、Trefの同等のスラッシュキャンプ場を新しいスラッシュで開始するための固定タグと、内側のテキストが同じように新しいキャンプ場を追加する私たちは救うでしょう。

158
00:11:51,350 --> 00:11:59,300
その後、サーバーを再起動して、ここに戻ってランディングページやキャンプ場のページに戻りましょう。私には申し訳ありませんが、新しいキャンプ場を追加しました。

159
00:11:59,290 --> 00:12:02,390
 

160
00:12:02,530 --> 00:12:07,040
それをクリックすると、キャンプ場のページが開き、新しいキャンプ場を追加できます。

161
00:12:07,270 --> 00:12:12,080
戻るボタンを追加して、すべてのキャンプ場を表示することができます。

162
00:12:12,380 --> 00:12:17,980
下の新しいテンプレートでは、ここに独自のアンカータグを追加します。

163
00:12:18,120 --> 00:12:26,650
ドラフトはスラッシュキャンプ場と同じでなければなりません。これはサーバーの再起動または再起動を指示するだけです。

164
00:12:26,770 --> 00:12:32,320
彼女の新鮮なキャンプ場で新鮮な最後の1回戻る。

165
00:12:32,530 --> 00:12:35,900
これで、次の動画に正しくリンクが設定されました。

166
00:12:35,920 --> 00:12:37,970
ここでは基本的なスタイリングに焦点を当てます。