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の構文、絶対パス、相対パスの概念を少し説明してください.