[node.js] ejs로 DB에 저장한 데이터 html에 넣기

서버와 클라이언트

 

>> 서버와 클라이언트 관계

 - 클라이언트가 서버로 요청(request)보냄

 - 서버는 요청을 처리

 - 처리 후 클라이언트에 응답(response)보냄

서버에게 주도권있어서 서버가 정해준대로 클라이언트가 따라감

 

클라이언트 - req(요청)

서버 - res(응답)

 

 

---

 

만약 /list 페이지로 접속했을때 DB에 저장된 데이터들을 꺼내서 보여주고 싶으면?

ejs 라이브러리 사용

*ejs - html을 쓰기 쉽게 도와주는 라이브러리

 

 

 

ejs

 

1. 라이브러리 설치

npm install ejs

 

 

2. server.js 파일 상단에 코드 작성

app.set('view engine','ejs');

 

 

3. list.html을 list.ejs로 이름 바꾸고

views 폴더를 만들어서 그 *안에 넣기

* ejs는 중간중간에 <%= %> 를 사용해서 서버데이터를 집어넣을 수 있음

 

 

 

 

서버에서 .html말고 .ejs파일 보내주는 방법

 

app.get('/list',function(req,res){
	res.render('ejs파일이름'); //views 폴더 안에 넣었지만 파일이름만 넣기
})

* html 보낼때는 sendFile, ejs 보낼때는 render!!

 

 

 

ejs에 서버에 있는 데이터 집어 넣기

 

1. DB에서 데이터 찾아주세요

db.collection('post').find( ) ;

db.collection('post').findeOne( ); 

 

우리는 post 콜렉션에 저장된 모든 데이터를 가져와야 하므로 toArray( ) 사용

app.get('/list',function(req,res){
	db.collection('post').find().toArray(function(에러,결과){  // 모든 데이터 꺼내주세요
	console.log(결과);
    	res.render('ejs파일이름');
	});
})

.find( ).toArray( )라고 적으면 post콜렉션에 있는 모든 데이터를 array 자료형으로 가져올 수 있음 *toArray() 안에 콜백함수!

결과=>데이터이므로 결과를 console.log 해보기

 

 

 

2. 찾은 결과를 ejs 파일에 넣어주기

app.get('/add',function(req,res){
	db.collection('post').find().toArray(function(에러,결과){  // 모든 데이터 꺼내주세요
	console.log(결과);
    	res.render('파일이름.ejs', {데이터이름 작명:결과}); //ejs파일에서 작명으로 결과 출력함
	});
});

위에서는 데이터 이름을 posts로 작명함

 

 

 

3. ejs 파일 가서 서버데이터 출력하기

ejs파일에서는 <%=작명한 이름 %> 사용해서 데이터 출력할 수 있음

서버에 저장된 데이터는 array 자료형이므로

인덱스 + 키값 으로 원하는 데이터 가져올 수 있음

 

 

 

4. 데이터 너무 많아서 반복문 써야될 때 

for(var i =0; i<반복시킬 횟수; i++){반복할 코드}

ejs에서는 반복문 쓰는 방법도 다름

반복문 괄호를 <% %>로 감싸야 함 *반복문 쓸땐 '=' 빼도됨!

반복문은 데이터의 갯수(데이터의 길이)만큼 돌리면 되므로 posts.length!