<Express.js> search form

홈 화면에 검색창을 만들어보려고 하는데요. 유저가 검색한 내용을 받아와야 겠죠. 받아오기 위해 video를 검색하는 form을 만들고 검색한 내용을 결과 페이지에 전달해보겠습니다.

project

youtube
  |views
   *|main.pug
   *|search.pug
  |controllers
   *|videoController.js  

main.pug

• action
  form읜 결과를 보낼 주소
• method
  method를 get으로 하면 form 내용이 url에 query로 추가됩니다. query는 ?뒤에 아래와 같이 붙습니다.
  ex) url/?name1=value1&name2=value
• input name
  해당 값이 의미하는 바를 적어주면 됩니다.

extends layouts/main

block content
  form(action=routes.search, method="get")
    input(type="text", placeholder="search by term", name="term") 

우리가 input에 "minseok"이라고 입력하면 페이지는 localhost:3000/search?term="minseok으로 보내게 됩니다.
만약에 보내는 정보가 여러개라면 localhost:3000/search?name1=value1&name2=value2로 보내게 됩니다.

videoController.js

우리가 search 페이지에 get method로 요청했으므로 term에 대한 정보는 req.query 객체에 담겨있습니다. ?뒤에 오는 내용을 우리는 query라고 부릅니다. 검색 결과창에 검색어를 띄우기 위해서는 req.query.term을 탬플릿에 전달해주어야합니다.

app.get(routes.search, (req, res) =>{
  const {query:{term}} = req;
  res.render("search", {term});
})

search.pug

search template으로 전달된 term 변수를 탬플릿에 띄워보겠습니다.

extends ./layouts/main

block content
	.search__header Searching for #{term}
		

이번 시간에는 search form을 만들고 form을 통해 검색 정보를 보내고 최종적으로 검색 결과창에서 정보를 받아 탬플릿에 띄우는 작업까지 해보았습니다.