さて、このビデオでは、Yelpキャンプのアプリケーションから始める予定です。これについては、このコースの残りの部分で取り上げます。
基本的な設定を始めることから始めます。
明示的なアプリケーションを取得し、我々の最初のいくつかのルートとテンプレートを持っている。
しかし、私たちが話をする前に、ここでワークフローを説明したいと思います。
どの時点でもコードを見ることができるようにしておきたいと思います。
だから、私は別のフォルダで作業するつもりです。
だから私はyelpのキャンプディレクトリを持っているし、Yelpキャンプの代わりに私は別のバージョンを追加するつもりです。
あなたはこれをする必要はありません。
続行して別のバージョンを作成する場合は、1つのバージョンだけを継続的に追加することができます。
私はいつもバージョンを指摘しますが、目標は、バージョン2とバージョン3の間で追加したものを振り返りたい場合、バージョン2とバージョン3のディレクトリを開き、それらを比較することができます。
それでは、ここから始めましょう。
私たちがやろうとしていることは、基本的なアプリケーションがExpressとそれぞれをインストールするように設定されています。私たちはviewsディレクトリを取得し、次に2つの異なるルートを追加します。
だから、私たちは基本的にYelpキャンプへの歓迎のようなホームページを持っているつもりです。
ここでは、私たちが何をしているかについての少しの宣伝があります。
ここにサインアップボタンがあります。
実際にはまだ動作しない連絡先リンクがあります。
そしてそこから、私たちのデータベースのキャンプ場をすべて一覧表示するアプリケーションのメインページとなるキャンプ場ページを作成します。まだデータベースはありません。
だから、ちょうど我々が友人のアレイを持っていた友人と最後のビデオでやったように、キャンプ場の配列になるだろう。
すぐに私たちは新しいデータベースに移行します。現在、キャンプ場には2つの異なる情報があります。
コースの終わりまでにキャンプグラウンドには10〜15の異なる部分がありますが、今のところサケ・クリークやデューイ・ポイントのような名前だけでなく、私たちのキャンプ場の名前が何であれ、それを表示したり、イメージはちょうどaur
lになります。
だから行きましょう。
まずNPMを実行してから、ここに入力して再度入力します。
これをカムv1と呼ぶことにします。
私はエントリーポイントのようなものを作ります。
そしてそこに行く。
著者を作成してEnterキーを押します。
もう1回。
OK。
次に、NPMのインストールExpressとyesを実行しましょう。
ダッシュダッシュを保存します。
私はあなたにこれをまだ示していませんが、一度に複数のパッケージをインストールしたい場合は、スペースで区切ります。
パッケージスタブJasonを見ると、SJSがあることがわかります。
それでは、アプリケーションを作成しましょう。
はい、それを開いてここには、エクスプレスが必要な現時点ではかなり快適なはずの基本的なエクスプレスインポートが追加されています。
そして、app変数は、実行されているexpress関数と等しくなります。そして、ジャンプしてオプトアウトします。これもあなたが今プロセスに精通している必要があります。
Ian
VIポートはEMV IPとコールバックを処理し、ここでYelpキャンプが開始されたことを示す領事ログを作成します。
ちょうどそのようなキャンプサーバーを作って保存しましょう。
さあ、ここに戻り、ランディングページを追加してみましょう。
ほとんどのアプリケーションと同様に、ランディングページは正しいパスにあります。
だから、フラッシュを取得するアプリを追加するだけで、赤いスタート送信から始まり、問題が解決するかどうかを確認します。すぐにリンク先ページに送信して保存してから、開始しますサーバーはキャンプサーバーが起動したことを確認してから、戻ってルートパスを更新します。
OK。
そして私たちは私たちが探しているすべての応答を得ます。
今度はテンプレートを設定して、ディレクトリ・ビューを作成するニュース・ディレクトリを作成し、viewsディレクトリ内の各ユーザーが着陸する着陸テンプレートを作成します。
はい、そこに行きます。
そして、それを使ってスラッシュ・ランディングを開きます。ここには非常に単純なマークアップを入れます。
ランディングページをクリックしてここで行うと、段落を置くことができます。
Oprahキャンプへようこそ。
もちろん、これはすべて変更され、コース終了時には非常に異なったスタイルになります。
しかし、今のところ私たちは物事が働いていることを確認したいだけです。
次にAPTに戻ってみましょう。
はい。
そして、最初に行うのは、これを変更して残りのレンダリングをレンダリングすることです。点を外します。
はい。
そしてそれをするために、私はJにするためにアプリセットビューエンジンを追加する必要があります S. そして、私たちは書く必要はありません。
E. J. ここではサーバーの再起動を保存します。
ジェームズ・リフレッシュとランディング・ページ・テンプレートを取得しました。
すばらしいです。
次に、キャンプ場のルートを作ろう。
だから我々は取得するアプリを持っているし、オーロラはキャンプ場をスラッシュする必要があり、これは私たちが今持っているすべてのキャンプ場を示す必要があります我々は何も持っていない。
しかし、私たちはまもなくこれを保存するようにリクエストして応答します。
そして、覚えているキャンプグラウンドアレイを定義する必要があります。
次の大きな変化は、データベースを追加し、私たちのキャンプ場をデータベースに保存することです。今はアレイであり、各キャンプ場には名前とイメージがあります。
だから、このように見えるだろう。
または、配列があり、配列の各項目がオブジェクトです。
そしてそれぞれが名前を持っていて、名前がサーモンクリークであると言うと、私は最近キャンプに行きました。それからイメージして、そのGWWイメージがどんなものであれ、HTPのようなイメージのURLになります。
そこに行く。
それから私たちはこれらの配列を持っていきます。
だからコースの最後までに10の異なるキャンプ場100があるかもしれない。
それぞれの名前は名前とイメージを持ち、最終的には緯度と経度の都市と州の住所容量の季節性などのさまざまな属性を持ちますが、単純な名前とイメージを開始しています。
Apter Yesに戻ってみましょう。
私たちがやろうとしているのは、配列を見つけて、ここでこれを行うことから始めることができます。これまではキャンプグラウンドと呼んでいます。
そして、配列の内部に入り、いくつかのスターターオブジェクトを持つことになるので、これをちょっとだけフォーマットしてください。
そして、最初のものは名前を持っていて、私はセモンクリークと一緒に行くつもりです。
あなたは何かを作ってイメージを持ってくることができ、私は戻ってきてイメージを記入します。
そして、次は、Granitesの丘、それからもう1つのパトロールコール山羊の胸に呼ぶ別のサイトを作ります。
大丈夫。
だから3つのキャンプ場は3つの完全に架空の名前と画像です。
私は実際にいくつかの創造的なコモンズの写真を使用するつもりですので、私は問題に遭遇しません。
これらは、私が実際に訪れたキャンプサイトのどれにも対応するつもりはありませんが、ここでいくつかのイメージを選んでいます。
これで始めましょう。
だから私はここに戻ってきて、それは山羊の休息になるだろうというイメージをコピーするつもりです。
何故なの。
それから私たちはもう一度戻ってきます。私はここでこれをとっていきます。
彼をRLにコピーしてください。これはSalmon Creekになります。
私たちはもう1つ必要です。私はこれを取るだけです。
もちろん、これは実際にキャンプ場ではありませんが、それはここのポイントの横にあります。
あなたが気にしているなら、あなたは実際のキャンプサイトのイメージで本当のキャンプサイト名を使用することをお勧めします。
あなたがキャンプを嫌っているのであれば、私はこれが何人かの人々を疎外させるかもしれないと心配しましたが、キャンプは嫌いなのですが、あなたはこのアプリケーションを他のものに簡単に変えることができます。
私たちがそれを終えると、あなたはそれをイベントアプリにすることができますパーティーのアプリケーションレストランのレビューサイト何かのようなものですが、私はコースの終わりまでそれを行うことをお勧めしますので、名前と異なる変数我々は持っています。
だからキャンプ場今日のために今は偽のキャンプ場を保存して、配列のさまざまな要素の間に追加またはカンマを確実に保存します。
そこに行くと、テンプレートのレンダリングをレンダリングすることから始まり、それはキャンプ場と呼ばれることになり、まだデータを渡すつもりはありません。
テンプレートが正しく機能していることを確認するだけです。
今、私たちはサーバーのタッチを停止する必要があります。 J.
私たちはそれを開きます。
それはそのようなもので、ここではH1を追加します。
これはキャンプ場のページであり、保存して、サーバーを起動したときにそのページが表示されていることを確認して、更新してキャンプ場をスラッシュにしてみましょう。
これはキャンプ場のページです。
そして、私たちがここにいる間に、いくつかの点滅を追加するといいでしょう。
そこで、すべてのキャンプ場を表示し、それを行うリンク先ページにリンクを追加し、貸出テンプレートに移動する必要があり、ref属性のアンカータグの一番下にATFが必要ですスラッシュキャンプ場。
そして私はちょうどあなたがすべてのキャンプ場を言い、キャンプ場のサーバーリフレッシュビューを再起動することを保存すると、キャンプ場ページに私たちを連れて行くようになります。
さて、今度は、キャンプ場を通ってレンダリングの残りの部分にデータを渡してから、すべてをループして各イメージを表示して、テンプレートの各名前を更新してみましょうその2番目の引数をここに追加します。これは、渡すすべてのデータのオブジェクトで、私たちはキャンプグラウンドという名前でキャンプ場で渡します。
だからこれが私たちが渡しているデータであることを覚えておいてください。これが私たちに与えたい名前です。
これを私たちが望むものと呼ぶことができますが、同じことを彼らが見ることは一般的です。
だから私たちは今すぐ保存してテンプレートに戻ります。私たちはこのキャンプ場をやるだけで始まり、何かを見たらオブジェクトオブジェクトのように見えます。
正しく実行した場合は、サーバを再起動するか、Rigaudに3つのオブジェクトがある配列をリフレッシュしてデータを渡したことがわかります。
それでは、各タイトルまたは各名前と画像をループして表示しましょう。
だから私はここでこれらの括弧を保つだろうが、私は等号を取り除き、我々はそれぞれのために行うだろう。
だからそれはそれぞれのキャンプ場になり、その無名関数をコールバックに渡し、私たちはそれをキャンプグラウンドと呼びます。そして、ここでenterを押してから、戻ってきて、正しい閉じたEjayを追加する必要があります。大括弧で囲んでください
OK。
だから、キャンプ場を通ってループして、それぞれのために何をしたいのかを最初に表示するだけです。
だから我々は味方から始める。
何故なの。
そして、私たちは単に私たちのEをします。 J.
sは等号で表示され、すべてが何らかのスペースを作って、何が起きているのかが少し分かりやすくなっています。
そして、私たちはYキャンプ場の中に展示するつもりです。
ドットの名前は、すべてのスペースを節約します。
ここでページを読み込み、これを更新して、3つのキャンプグラウンド名を取得しましょう。
私がやりたい最後のことは、画像を表示することです。
だから私たちはここに戻り、同盟国ではなく、これを変更して各キャンプ場ごとにdivタグがあるようにしましょう。
divタグにhが表示されます。
キャンプグラウンド名で4をしましょう。その下にイメージタグを入れましょう。
そして、私たちがする必要があることは、あなたがELASであればどんなものであれ、キャンプグラウンドからイメージを入れようとしているにもかかわらず、イメージをソースと引用符で囲むことです。
これらのEjayが括弧の中に必要です。
だから私たちは引用符の中でそれをしなければなりません。これは私の生徒の何人かに最初は少し混乱させます。そのイメージはすでに文字列です。
そして、あなたはここに見ることができますが、私たちがこれを取ってテンプレートに加えるとき、それらの引用符はそれに伴って来ないことを忘れないでください。
テキストとして追加されたばかりです。
だから、このHTPコロンは、その周りに引用符が必要なものをスラッシュのように見えるでしょう。
だから私たちはEjazタグを引用符の中に追加していることを確認する必要があります。
OK。
だから私たちがしたいことは、キャンプ場のイメージがイメージを使用していることを確認することです。
そこに行く。
私はA-Gです。私たちはまったく同じ方法でここに綴られており、私はサーバを再起動するのを止めます。
戻ってページをリフレッシュし、3つの画像を持つ3つのキャンプ場を取得しましょう。
大丈夫です。
このビデオで私がしたいことは、私たちの2つのルートの基本的な構造を設定することでした。
私たちがやるべきことをすべて実行したことを確認するために戻ってみましょう。
だから、私たちはすべてのキャンプ場を記載したキャンプ場のページでそれを行いました。
また、各キャンプ場には名前とイメージがあります。
大丈夫