[Express] Form get

header.pug

.header__column

form(action=route.search, method="get")

input(type="text", placeholder="Search by term...", name="term")

유튜브 처럼 헤더에 form 태그를 추가했다.

submit시에 route.search url로 넘어가고 method는 get방식

그리고 데이터 속성의 이름은 term이다.

이제 URL을 요청하면

query라는 속성에 입력값이 저장되어진다.

videoController.js

export const search = (req, res) => {

//const searchingBy = req.query.term;

const { query : {term : searchingBy } } = req;

res.render("search", { pageTitle: "Search", searchingBy : searchingBy });

Controller에 다음과 같이 추가했다.

첫번째로 볼 것은

//const searchingBy = req.query.term; 

를 통해서 form에서 데이터를 받았다는 점

두번째로는

const { query : {term : searchingBy } } = req;

ES6문법에 따라 다음과 같이 사용 될 수있다.

마지막으로 searchBy를 렌더링하는 곳의 데이터로 보냈다는점

search.pug

extends layouts/main

block content

.search__header

h3 Searching for: #{searchingBy}