[Wetube] 임시데이터를 이용해 동영상 업로드 시 URL에 ID값 반환하기/post,get method

1. 결과물

사용자가 비디오를 업로드 할 경우, 새로운 ID(fake)를 반환 후, 사용자가 업로드 한 ID를 가진 video detail페이지로 리다이렉트한다.

2. 목표

• GET,POST 메소드에 대해 안다.

• Upload 페이지 view 구현

  • 파일업로드 기능/제목/설명/제출 form 구현

3. 코드

controller/videoController.js

import routes from "../routes";
import video from "../models/video";

...

export const getUpload = (req, res) => {
	res.render("Upload", { pageTitle: "Upload" });
};

export const postUpload = (req, res) => {
	const {
		body: { file, title, description },
	} = req;
	res.redirect(routes.videoDetail(3526666));
};
// TO DO: upload and save video

export const videoDetail = (req, res) => {
	res.render("VideoDetail", { pageTitle: "video Detail" });
};

...
export const editVideo = (req, res) =>
	res.render("editVideo", { pageTitle: "edit video" });

db.js내 FakeID값을 입력 / 파일 upload 시, 해당 ID값을 가진 videoDetail url로 리다이렉트된다. 

router/videoRouter.js

import express from "express";
import routes from "../routes.js";
import {
	postUpload,
	getUpload,
	videoDetail,
	deleteVideo,
} from "../controllers/videoController";

const videoRouter = express.Router();

videoRouter.get(routes.upload, getUpload);
videoRouter.post(routes.upload, postUpload);
videoRouter.get(routes.videoDetail(), videoDetail);
videoRouter.get(routes.deleteVideo, deleteVideo);

export default videoRouter;

videoRouter.get(routes.upload, getUpload);

해당 router내 upload 경로 진입 시, 컨트롤러 파일 내 getUpload를 받아온다.

videoRouter.post(routes.upload, postUpload);

해당 router내 upload 경로 진입 시, 컨트롤러 파일 내 postUpload 를 전송한다.

mixins/video.pug

mixin videoBlock(video = {})
    .videoBlock
        a(href=routes.videoDetail(video.id))
            video.videoBlock__thumbnail(src=video.videoFile, controls=true)
            h4.videoBlock__title=video.title
            h6.videoBlock__views=video.view

 

views/header.pug

extends layouts/main.pug

block content
    .form-container
        form(action=`/videos${routes.upload}`, method="post")
            label(for="file") Video File
            input(type="file", id="file", name="file", required=true)
            input(type="text", placeholder="Title", name="title", required=true)
            textarea(name="description", placeholder="Description", required=true)
            input(type="submit", value="Upload Video")

4. 배운점

HTTP method (post/get)

get method : 서버 내의 데이터 등을 가져와 보여주는 역할

• 특정한 리소스(서버 내 데이터 등)으로부터 데이터를 요청한다.

• 게시판 내 글 목록 불러오기

• url 내 쿼리스트링으로 작성된 것은 get 메소드를 사용한 것이다.

post method : 생성/업로드 한 리소스를 서버나 데이터로 보낸다.

• post 메소드로 작성된 코드는 브라우저에 history를 남기지않음(보안성)

• 게시판 내 글 작성하기

참고:

HTTP Methods GET vs POST

HTTP Methods GET vs POST

 

5. 에러 수정

없음