YouTubeクローン#5-1 MongoDB:Prolog(1)

1757 ワード
モンゴル漢韓対訳辞典 youtube mongo 講義 テキストリンク

Preview


🔖 コース:6.0～6.1
本物のデータベース(以下dbと略す)を処理する前に、偽dbを使用します.
サーバからデータをロードし、Webページで使用する方法について説明します.

レッスン内容


例1


簡単な例でビデオリストを作成します.
各映画リストのtitleをクリックすると、その映画のidをparamのリンクに移動しようとします.
そのため、少なくともtitleとidを有するビデオのデータが必要です.
  • 偽db
    • を生成する.
  • 偽dbは、対応するテンプレート
    • に送信される.
  • テンプレートからビデオリスト
    • を作成する.
  • titleをクリックしたときに移動するリンクを設定します🌟
    ここから新しいPugルールを学ぶことができます.
    リンクを設定する方法は2つあります.
    • 1)JavaScriptテンプレート文字列の使用
    a(href=`/videos/${dbObj.id}`)=dbObj.title
    復習!
    pug templateでjsを使用するには、次の2つの方法があります.
    .
    (1)使用#{}:主に他のコンテキストがない場合
    (2)backtic ${}:主に異なるコンテキスト間にjsを埋め込む場合
    2)Pugの+構文を使う
    a(href="/videos/" + dbObj.id)=dbObj.title
    2つ目の例では、see controllerを使用してビデオを表示するシーンが得られます.
    この過程でparamsの使い方を試してみましょう.

    例2

    // 가짜 video db, "videos"

const videos = [{
	title: First video,
    genre: ...,
    .
    .
    id: 1,
}, {
   title: Second video,
   .
   .
   id: 2,
}, { ... } ];


// localhost:4000/videos/:id 로 가면 띄울 템플렛: see

export const see = (req, res) => {
	const id = req.params.id;
	const video =  videos[id-1];
    return res.send(`Watch ${video.title}`);
}

    追加学習

  • pugの+構文
  • es 6の構文
  • 絶対経路と相対経路絶対経路vs.相対経路🌟 
    • href="/edit" => localhost:4000/edit
href="edit" => localhost:4000/videos/edit

// 앞에 붙이는 / 하나가 경로를 완전히 바꿀 수 있다.

// 참고로
	&rarr: right arrow symbol
	&larr: left arrow symbol

    サマリ

  • Mongoで本物のdbを処理する前に、偽dbを使用してどのような仕事をするかを大体理解する時間がありました.
  • では、pugとes 6の構文、絶対パス、相対パスの概念を少し説明してください.
    • バブルと選択のソート
    レイアウトを中央に配置