More Practice # 02

Upload Videoをクリックすると、post requesrが/video/upload URLに送信されます.
そしてvideoRouter.jsにrouteを作りました.videoRouter.route("/upload").get(getUpload).post(postUpload);このセクションでは、post requestについて説明します.controllerもあります.controllerただ一つのことをします.videoController.jsから

export const postUpload = (req, res) => {
  // here we will add a video to the videos array.
  return res.redirect("/");
};

この部分です.
それはそれをホームページにリダイレクトすることです.今はそれしかしていませんが、後で交換してあげます.upload videoをクリックした瞬間、現在のurlでpost requestを送信します.
希望さえあれば、いくらでも変えられる.例えば、actionpost requestの他のサイトに送信することもできます.

    form(method="POST", action="/videos/upload")

しかし、私はそんなことはしません.videos/.. とget requestは現在所有しているので
url(/video/upload)で受信するので、post requestを行う必要はありません.
しかし、actionを使用したい場合は、現在使用しているurlを入力することができます.
ただし、これはデフォルト(デフォルト)です.私は気にしないから、置いておきましょう.覚えるためです.
今はactionを押すだけでホームページに戻ることができます.
正確には、サイトはupload videoではありません.
ウェブサイトを変えただけです.
直接皆さんにページを見せるのではなくrenderで皆さんにcontrollerを見せました
では、まずbrowserは/ビデオ/アップロードです.redirectはあなたをそこに送ります.そしてbrowserはbrowserにどこかに行くように伝えた.
だからcontrollerは2つの場所に行きます.
1つはbrowser/video/uploadで、
もう一つはbrowserがホームページin/に行きます.post requestからget requestを取得するにはどうすればいいですか?inputから

export const postEdit = (req, res) => {
  const { id } = req.params;
  const { title } = req.body;
  videos[id - 1].title = title;
  return res.redirect(`/videos/${id}`);
};

dataを使用することにより、videoController.jsにおいてユーザによって記述されたreq.bodyを得ることができる.
ユーザは、inputによって作成されたdataを得ることができる.今からinputを作ろう

export const postUpload = (req, res) => {
  console.log(req.body);
  return res.redirect("/");
};

更新後、dataが新しい名前で作成され、console.log(req.body)であることが確認されます.
がらんとしたupload videoに名前を付けなかったからです.
名前を指定します.console.logから

        input(name="title", placeholder="Title", requried, type="text")

その後、もう一度試してみると、inputと命名されたと判断できます.
今やるべきことは、新しいビデオを作って、そのビデオをビデオ配列に入れることです.

export const postUpload = (req, res) => {
  const { title } = req.body;
  const newVideo = {
    title,
    rating: 0,
    comments: 0,
    createdAt: "just now",
    views: 0,
    id: videos.length + 1,
  };
  videos.push(newVideo);

ビデオ構造は元の構造で再現される.
今やっているのは実際のupload.pugではなく、あまり気にする必要はありません.
これは正常に動作していることのみを確認する作業です.

const { title } = req.body;
const newVideo = {
title,

このように書くと、JavaScriptはconsole.logを自分で適用します.databasetitleに新しいビデオを入れる機能を備えています.
ここで何があったんですか. videos.push(newVideo);が/vidoes/upload urlに送信されます.
では、arrayのpost requestと呼びます.
現在、postUploadにはfunctionがあるので、inputから名前(title)でデータを受信することができる.
その後、newVideoと呼ばれる新しいnameが作成され、偽のデータです.
このreq.body万は本物のプレイヤーが入力する内容になります.
その後、実際には存在しないobjectに新しいビデオが追加される.
そしてtitleをホームに戻します.databaseはホームページに戻り、browserbrowserを呼び出します.
そのため、もう1つのビデオを追加すると、trendingが実行され、controllerが使用されます.trending(テンプレート)がvideosに設定されている場合、homeには合計4つのビデオがあります.
今更新して確認します.
そうすると、renderまで作り直すと、新しい動画が追加されます.
もちろん、新しいビデオでも名前を変更できます.ただし、これまでサーバが再起動された場合
もちろん新しいビデオはありません.これまでメモリからデータを受信していません
保存するものを持ってくるからです.