views 개발 기초
안녕하세요.
고코더 입니다.
이전 시간에 라우터를 생성 하였습니다.
이제 라우터와 맵핑하여 프론트에게 보여줄
뷰단을 생성 해보겠습니다.
● 1. ejs 파일 만들기
● 1-1. views 폴더에서 new 그리고 file을 누릅니다.
● 1-2. 그리고 form.ejs 로 입력하고 확인을 누릅니다.
● 1-3. ejs 안에 내용을 아래처럼 채우겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <title>기본 예제 테스트</title> </head> <body> <h1>이름</h1> <p> <%= name %></p> <h1>블로그</h1> <p> <%= blog %></p> <h1>홈페이지</h1> <p> <%= homepage %></p> </body> </html> | cs |
● 2. 라우터 파일 form.js 수정 하기
● 2-1. 그리고 전 시간에 개발하였던 form.js 를 수정 해보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 | var express = require('express'); var router = express.Router(); router.get('/', function (req, res, next) { res.render('form', { name: 'Lee Jin Hyun', blog: 'gocoder.tistory.com', homepage: 'gocoder.net' }); }); module.exports = router; | cs |
● 2-2. 해당 라우터에 해당 URI로 접근 경로를 적는 곳입니다.
get, post로 받을 수 있습니다.
router.get('/',
● 2-3. 변수에 데이터를 담아 views에 render 해주는 역할을 합니다. ejs 안에 <%%> 태그안에 담길 변수입니다.
name: 'Lee Jin Hyun',
blog: 'gocoder.tistory.com',
homepage: 'gocoder.net'
● 3. 결과 화면
으로 브라우저로 접속해보세요.
라우터에 변수명에 담긴 내용들이 제대로 출력 되었습니다.
마무리
더 쉬운 구조에 MVC 패턴 입니다.
'IT_Developers > Node.js' 카테고리의 다른 글
| Node.js - Mysql 설치방법 / CMD / webstorm 설치방법 (0) | 2019.07.31 |
|---|---|
| Node.js - form 전송 post로 받아 josn으로 출력/ 기본 예제 (2) | 2019.07.31 |
| Node.js - routes 기본 생성 예제 (0) | 2019.07.29 |
| Node.js - nodemon 설치, 실행방법 / webstorm 연동 (2) | 2019.07.29 |
| Node.js - Webstorm으로 express 프로젝트 ejs로 생성하기 (0) | 2019.07.29 |
댓글