DB에 저장한 데이터를 꺼내와 사용해보자.
앞서서... DB에 데이터를 저장했었다
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
.
.
.
app.post('/add', function (req, res) {
res.send('전송완료')
//console.log(req.body.title)
db.collection('post').insertOne({'title':req.body.title,'date':req.body.date},function(에러,결과){
console.log(저장완);
})
})
이전에
서버 코드를 짜기 위해 express 라이브러리를 설치했고
bodyParser를 설치해서 데이터를 가져오기 쉽게 했다.
그리고 /write페이지에서 form에 데이터를 입력하고 submit을 하면
/add로 이동하게되는데,(action=/add)
/add에서 post요청이 발생하면 해당 내용을 제어할 수 있게
server.js파일에서 app.post메소드를 사용했다.
이 때 db.collection('콜렉션 명').insertOne({데이터},function(에러,결과){});
메소드로 db에 데이터를 저장해놓았다.
DB에서 데이터를 가져와 사용하기
우선 db에서 가져온 데이터로 html파일을 쉽게 만들기 위해서
ejs를 사용했다.
(ejs를 npm install ejs로 설치하고
app.set('view engine','ejs');
서버 코드 맨 위에 이 코드를 추가함)
그리고 /list라는 페이지를 만들고, 여기다가 DB에서 가져온 데이터를 보여줄 것이기 때문에
app.get('/list',function(){})을 썼다.
app.get('/list',function(req,res){
db.collection('post').find().toArray(function(에러,결과){
console.log(결과);
res.render('list.ejs', {posts: 결과});
});
//디비에서 데이터 다 꺼내기
})
앞서 db에 저장할 때는 db.collection('콜렉션명').insertOne() 메소드를 사용했다면
이번에는 db의 모든 데이터를 꺼내기 위하여 db.collection('콜렉션명').find() 메소드를 사용했다.
그리고 찾은 값을 Array형으로 변환하기 위해 toArray()메소드를 사용하였다.
마지막 메소드 안 콜백함수의 인자로 에러,결과가 있는데
결과값이 '결과'변수에 있게 된다.
이제 list.ejs파일에 이 변수를 사용할 수 있게 보내는데,
res.render('list.ejs', {posts: 결과}); 라고 작성해서
결과값이 list.ejs 파일에서 posts라는 변수명으로 사용되도록 하였다.
이제 list.ejs파일로 가 보자.
내용은 여느 html파일과 동일한데 확장자명만 .ejs가 된다.
<div class="container mt-4">
<p>서버에서 가져온 내용</p>
<% for(let i=0;i<posts.length;i++){ %>
<div class="card mt-2">
<h5 class="card-header">할 일</h5>
<div class="card-body">
<h4>제목: <%= posts[i].title%>
</h4>
<p>마감일 : <%=posts[i].date %>
</p>
</div>
</div>
<%} %>
</div>
이 코드는 list.ejs의 중간부분만 뗀 것이다.
posts라는 변수에 db에서 가져온 값들이 담겨있다.
반복문을 사용하였는데,
반복문은 JS에서 사용가능한 것이므로
양 끝을 <% %>로 감싸서 반복문이 작동할 수 있도록 하였고,
가져온 posts변수를 사용하는 부분은 <%= posts...%>로 작성해야했다.
'웹개발 > Node.js' 카테고리의 다른 글
[Node.js] 글 삭제 기능 만들기 (0) | 2023.02.19 |
---|---|
[Node.js] [MongoDB] 게시물에 번호달기(.updateOne) (0) | 2023.02.16 |
[Node.js] POST요청/ form 데이터 서버로 전송하기 (0) | 2023.02.13 |
[Node.js] nodemon 사용하기 (0) | 2023.02.13 |
[Node.js] GET 요청 처리하기 / GET 요청시 HTML파일 보내는 법 (0) | 2023.02.13 |
댓글