[wetube] #3.7~#3.10

📃 結果
ビデオのアップロードと編集をサポート
📃 n/a.ターゲット

ビデオ詳細画面

ビデオ削除修正をアップロードできます.

📃 プロセス
動画をアップロード
全体の過程で、私たちはビデオをアップロードすることができますが、リンクが破られたため、この問題を解決することはできません.
まず、ビデオアップロードのパスを変更し、ビデオ/フォルダを削除し、ミドルウェアで「ビデオ/」ではなく「アップロード/ビデオ/」に変更します.const multerVideo = multer({dest: "uploads/videos/"});ここで注意したいのは、それを「/uploads/video/」と書くと、パソコンのrootにuploadsフォルダがあります.パスを間違えないように注意しましょう.
mongo dbが無効なデータを削除する可能性があります

$mongo

$use <db_name>
>switched to db db_name

$show colloections
>Videos

$db.video.remove({})

このアドレスが取得されたが、404エラーが発生した.アップロードするルートがないので、アップロードに関するルーターが追加されます.

//middleware
...
app.use("/uploads", express.static("uploads"));
app.use(cookieParser());
... 
app.use(routes.users, userRouter);
app.use(routes.videos, videoRouter);

expressは、/uploadsに接続されている場合にディレクトリからファイルを送信するミドルウェア関数です.static()を使用して、「アップロード」というディレクトリにアクセスします.
次に、あるサーバでfileを処理します.1台のサーバを操作するには問題が多すぎます.たとえば、ユーザーが非常に大きなファイルをサーバにアップロードすると、サーバがブロックされ、他のユーザーもサーバにアクセスできない可能性があります.このような方法で愚かな問題を処理するのは多すぎる.これらの手順はstatic fileの使用がクールであることを示している.
user fileをWebサイトに保存せず、サーバに新しいバージョンが表示された場合は、古いサーバに別れを告げ、新しいサーバにリダイレクトするだけです.この講座の最後に、そうします.
静的フィールドは主にfront-endで使用されるjavascriptまたはcssフラグファイルです.
Getting Video by ID
自宅で動画をクリックしたときに表示されるVideo Detailページを作成します.
ビデオとタイトルのクリック率の説明が画面に表示されます.
クリックしたビデオのidを知っておく必要があります.routeの「/:id」でインポートします.これはurlから情報を取得する唯一の方法です.パラメータにid値が含まれていることは、console.log(req.params);によって決定される.
findByIdを使用してビデオ変数に挿入し、id、title、descriptionをテンプレートに渡します.
存在しないurlに移動すると、エラーがホームページにリダイレクトされます.

export const postEditVideo = async(req, res) =>{
    const{
        params: {id},
        body: {title, description}
    } = req;
    try{
      await Video.findByIdAndUpdate({id},{title, description});
      res.redirect(routes.videoDetail);
    } catch(error){
        res.redirect(routes.home);
    }
};

上記のコードを使用して、テンプレートにビデオ変数に含まれるタイトル、クリック率、説明を表示します.
ビデオの修正

editVideo: id => {
      if(id){
        return `/videos/${id}/edit`;
      } else {
        return EDIT_VIDEO;
      }
    },

routes.editVideoはstring関数ではありません.
ビデオを変更すると、新しいファイルはアップロードされるのではなく、アップロードされた現在のファイルを更新して、現在のタイトルと説明を取得します.

export const getEditVideo = async(req,res) =>{
    const{
        params: {id}
    } = req;
    try{
        const video = await Video.findById(id);
        res.render("editVideo",{pageTitle: `Edit ${video.title}`,video}); 
        //pagetitle은 edit 그리고 editVide.pug 비디오를 넘겨줌
    } catch(error){
        res.redirect(routes.home);
    }
};

export const postEditVideo = async(req, res) =>{
    const{
        params: {id},
        body: {title, description}
    } = req;
    try{
      await Video.findByIdAndUpdate({_id:id},{title, description});
      res.redirect(routes.videoDetail(id));
    } catch(error){
        res.redirect(routes.home);
    }
};

editVideo.ビデオオブジェクトをpugに渡します.

//editVideo.pug
 .fotm-container 
            form(action=routes.editVideo(video.id), method="post")
                input(type="text",  placeholder="Title", name="title", value=video.title)
                textarea(name="description", placeholder="Description")=video.description
                input(type="submit", value="Update Video")
            a.form-container__link.form-container__link--delete(href=`/videos${routes.deleteVideo}`) Delete Video

ビデオの削除

export const deleteVideo = async(req, res) =>{
    const{
        params: {id}
    } = req;
    try{
        await Video.findOneAndRemove({_id: id});
    } catch(error){
       
    }
    res.redirect(routes.home);
};

誰かがビデオを削除するとurlに移動して対応するビデオを削除します.
ビデオを削除するにはGETだけでいいです.
📃 完全なコード