このレッスンでは、キャンプアプリを続行していきます。ユーザーが新しいキャンプ場を送信する機能や機能を追加します。
それで、私たちがやるべきことがいくつかあります。
最初は、新しいキャンプ場を実際に作成する投稿経路を設定して配列に追加します。
次に、本文パーサーを追加して、正しくインポートされて構成されていることを確認してから、フォームを作成し、ユーザーが実際にそのPOST要求を送信できるフォームのルートを作成するための2つのステップがあります。
だから私たちはそれに着きます。
ポストルートを設定することから始めます。
だから私はまだV-1にいます。私はポストドラフトで実際にはい広告を開くつもりです。私はちょうどそれを底でやっています。私はポストを上げるつもりで何かをするよりもスラッシュの新しいキャンプ場やキャンプグラウンドのように私は実際にスラッシュキャンプ場をするつもりです。
それはあなたとまったく同じですRLあなたがゲットルートのために持っているのと同じように、一つはGEDであり、一つは投稿であり、私たちは同じ事務局実際には異なるルートがあります。
はい、その一部です。
これは実際に私たちがどのようにルートであるかについてのすべての規約の一部です。
私たちは、私たちがどのように名前を挙げているかに多くの自由を持っています。
しかし実際には残りのコンベンションがあり、今後のビデオでこれに戻ってくるつもりです。
しかし、私が今言いたいのは、私たちのルートが休憩と呼ばれるこのコンベンションに従うようにすることです。あなたがキャンプ場をスラッシュしなければならないすべてのキャンプ場を示すページがあるとき。
私たちが新しいキャンプ場を作ることができるページやルートを持っているときは、あなたはキャンプグラウンドをまっすぐにする必要があります。
しかし、それは投稿要求でなければなりません。
それは大会ですが、これは友達のためにこれをやっているなら、私たちが従うべきフォーマットです。
スラッシュの友人には、新しい友達を作るためのポストリクエストを送信するポストとして、すべての友人とスラッシュの友人が表示されます。
だから我々はそれを使ってより多くの練習をするでしょう。
これは非常に最初の紹介です。
しかし、実際には7つの異なる経路があり、この残りのコンベンションに従って安心しています。後ほど見ていきます。
そこで私たちがやりたいことは、フォームからデータを取得してキャンプグラウンドアレイに追加する2つのことです。次に、キャンプ場ページへのアクセスをこのルートに戻したいと考えています。
だから私たちはACT UPのポストをセットアップしています。ここであなたはポストルートをヒットし、郵便配達員でテストすることができます。
だから私はちょうど郵便配達員に戻ってここにユーロをコピーして、私たちがテストをしているルートは、私たちがリクエストを出したら、ポストとしてキャンプグラウンドをスラッシュしています。
Tim Lを起動していないので、実際には問題ではありません。ここで見ているSSはエラーページです。
私たちのサーバがH
クラウド9が私たちに与えるこのエラーページ。
だから私たちはサーバーを起動する必要があります。
今戻って同じGETリクエストをすると、画像とH個のリストが表示されます。
ポストリクエストを行うと、ポストドラフトをヒットさせるちょっとしたメッセージが表示されます。
OKだから、postmanと一緒に行うことは、postルートとして動作していることを証明しています。次に行うのは、body
parserをインストールすることです。
だから私たちは、NPMのボディダッシュパーサーダッシュダッシュをインストールする必要がありますし、私たちはここで私たちのボディパーツをインポートするでしょうボディDeschパーサーと保存を必要とする等しいです。
そして、私たちはpoddyパーサを使うようにexpressに伝える必要があります。
だから、オディパーサーを使ってやってみましょう。そして、塗られていないドットユーロをしてオブジェクトを渡す必要があります。私たちがする必要があるのは、拡張コランを追加することです。
覚えておいてください。これは、覚えているだけでなく、コピーして貼り付けて保存することができます。
そして今、私たちは身体の部分が整えられており、私たちの後を走って動作するかどうかを知ることができます。
ここでフォームに注目しましょう。
私が示したことの前に、友達リストと同じページにフォームがある友だちアプリですが、これはここで取り上げるアプローチではありません。
むしろフォームを実際に表示する完全な別個のページとルートを用意します。
それは新しいキャンプ場を作るためのフォームになります。
そして、あなたはポストリクエストを送信するフォームを提出し、投稿としてキャンプ場をスラッシュしてから、私たちはキャンプ場にリダイレクトされます。
だから別のページを作って、別のルートが必要なことをやってみましょう。そして、私たちはここの下に、あるいはその間に、本当に重要ではありません。
そして、これは新しいスラッシュキャンプ場が削られます。
もう一度、これは私たちが望む何でもよいが、これは安らかな大会である。
これは従来の名前の3番目です。
最初の1つはスラッシュキャンプ場だったので、あなたは新しいキャンプ場を作ってから新しいキャンプグラウンドスラッシュを作ることができる道です。これを肉体にしましょう。必要なのは、データや何かを渡す必要のないフォームをレンダリングするだけです。それで、rezレンダリングを行い、フォームは新しいフォームを呼び出すだけです。
はい、そうです。
そして安全です。
今ここのviewディレクトリに戻り、そのテンプレートを作成します。
だからタッチビューは新しいスラッシュ。
はい。
そして、そのテンプレートを開き、テンプレートの中に追加します。
それぞれのキャンプ場を作成してフォームタグにフォームタグを追加してアクションを取る必要があり、メソッドと覚えのメソッドが必要で、メソッドがポストで、アクションがキャンプグラウンドをスラッシュにする必要がありますここに。
ポスト・スラッシュ・キャンプ場をアップする。
ここでフォームデータを取得してcampground配列に追加します。
そして、内部には2つの異なる入力が必要です。
テキストとプレースホルダーは単に名前になるので、最初のタイプはタイプです。
そして、2番目のものはプレースホルダは画像です。
そして、ちょうどそれをやってみましょう.Typeeがテキストに行くようにしておきましょう。次に、ボタンをクリックして送信して保存してください。そして、これらの両方にname属性が必要です。ちょうど名前に等しい。
そして、ここでは名前がimageと同じになるようにし、リクエストのAbatiからデータを取得するために、このルートの代わりにこのname属性を使用します。
それをする前に
このフォームが正しく表示されるようにしましょう。
サーバーを始動し、このルートを訪れて、キャンプ場を新しくスラッシュにする必要があります。私たちはフォームを優れたものにします。
私たちはそのブートストラップ・スタイリングのどれも得ていません。
それほど多くはないように見えますが、私たちのレイアウトは含まれていないので、私たちはそれを得ていません。
ヘッダーとフッターはありません。
それでは、ParshallのスラッシュHetterをインクルードして、この行をここにコピーし、Parshallのスラッシュフッターを追加しましょう。
サーバーを再起動します。
今、私たちは美しいブートストラップを取得し、ヘッダーファイルとフッターもここに配置しています。
そして、これをテストして正しいルートに行くのか、ここに何かを入力して提出するだけで、ポストルートを打つことができます。これは、フォームが私たちのコードがキャンプグラウンドを破棄するリクエストを提出していることを意味します。
そして、我々はこの赤いスタートを解決しています。
しかし、これを送るのではなく、実際にこのロジックを追加してこの作業をしたいと考えています。
そして私たちが身体の要求を使用してフォームからデータを取得してから、私たちはボディーカムの名前を要求し、身体イメージを要求し、それらを変数に保存します。
これまでの名前とvarの画像。
そして私たちがやりたいことは新しいキャンプ場を私たちの配列に押し込むことです。
そして、それが機能するためには、これを移動して、それが適切なものの中にないようにしなければなりません。
私たちはちょうどそれを上に置くだろうし、それはどこに滞在するつもりはありません。
私たちはすぐにデータベースに移行していることを覚えておいてください。
しかし今のところ、私たちはこのポストルートの内部にアクセスできるようにそれを上にしています。
コールバック関数内。
だから私たちは新しいキャンプ場をキャンプ場のアレイに押し込むつもりです。
キャンプ場がプッシュアップして、オブジェクトを押し込む必要があります。
だから私は変数で新しいオブジェクトを作るつもりです。
だから私はそれをvarの新しいキャンプ場と呼ぶつもりです。
それはオブジェクトであり、名前は名前と同じであり、画像は画像と等しいので、ここでこの形式と一致するか、名前と画像があります。最後に保存するように新しいキャンプ場をプッシュするだけです。
そして、キャンプ場のページにリダイレクトしましょう。
そうなるでしょう。
RAZはキャンプ場をスラッシュにリダイレクトします。はい、キャンプ場を削る必要があります。
しかし、リダイレクトを行うとき、デフォルトはgetリクエストとしてリダイレクトされます。
だから私たちは保存し、それをテストしてみましょうリフレッシュ新しいキャンプ場に追加してみましょう。
私たちはちょうどこのデイジー山と呼ぶでしょう、私たちはイメージを必要としています、私はここでこれをコピーします。
戻る。
ヒット提出する。
そして、それがうまくいっているかどうかを知るためには、下にスクロールする必要があります。
美しいデイジー山。
かなり見事な光景。
戻っていくつかのことを見直そう。
私たちがしたことはたくさんあります。
最初に私が育てたいのは、私たちが作ったルートです。
だから私たちは実際には、実際には、私たちがすべてのキャンプ場をスラッシュキャンプ場に同じ局を持っていることを示すキャンプ場を削って取得しています。
そして、それは新しいキャンプ場を作ってスラッシュキャンプ場をリダイレクトするという論理を実際に行うところです。
そして、アムトラックは、スラッシュしたキャンプ場を新しいものにする。
それがフォームを示しています。
キャンプ場をスラッシュしてキャンプ場をスラッシュしてキャンプ場をスラッシュキャンプ場にリダイレクトし、キャンプ場を使用してすべてのキャンプ場を表示します。
間違いなく複雑な流れです。
動く部分がたくさんありますが、これは我々が多く従うレシピです。
だから私たちはどこかでリクエストを送信するためのフォームを持っています。
そしてそのポストルートの内部でフォームデータを取ります。
私たちはそれを使って何かをしてから、別の場所にリダイレクトします。
したがって、ポストルートがあなたを別のルートにリダイレクトするのは本当に典型的です。
私たちがすべき最後のことは、キャンプグラウンドのテンプレートを開くことです。
だから、C9でスラッシュキャンプグラウンドを使って、単純なリンクを上に追加して、Trefの同等のスラッシュキャンプ場を新しいスラッシュで開始するための固定タグと、内側のテキストが同じように新しいキャンプ場を追加する私たちは救うでしょう。
その後、サーバーを再起動して、ここに戻ってランディングページやキャンプ場のページに戻りましょう。私には申し訳ありませんが、新しいキャンプ場を追加しました。
それをクリックすると、キャンプ場のページが開き、新しいキャンプ場を追加できます。
戻るボタンを追加して、すべてのキャンプ場を表示することができます。
下の新しいテンプレートでは、ここに独自のアンカータグを追加します。
ドラフトはスラッシュキャンプ場と同じでなければなりません。これはサーバーの再起動または再起動を指示するだけです。
彼女の新鮮なキャンプ場で新鮮な最後の1回戻る。
これで、次の動画に正しくリンクが設定されました。
ここでは基本的なスタイリングに焦点を当てます。