이전에 Nodejs로 글 작성하는 방법을 글로 남겼고, 이젠 내가 작성한 글을 볼 수 있어야한다.
먼저 내가 list 페이지에 글 목록들이 나오도록 만들어 두었다.
여기서 제목을 클릭하면 detail 페이지로 링크가 연결되게 할거다.
근데 detail.ejs파일은 당연히 한 개 일거고, 무슨 제목을 클릭하든 똑같은 detail.ejs파일이 보일 것이다.
그래서 url 구성을 /detail/글 아이디 로 만들어주고 해당 아이디에 맞는 데이터를 그 페이지로 보내주게 되면 딱 맞을 것 같다.
url 파라미터
url 파라미터는 간단하다.
/detail/:입력하고싶은거
이렇게 해주면 된다
물론 /detail/:입력1/:입력2/:입력3
이렇게 여러 개가 가능하다.
나는 해당 글의 id를 url 파라미터로 넘겨줄것이다.
먼저 server.js 파일에서
app.get('/detail/:id', async (req , resp)=>{
try{
let id = req.params
let result = await db.collection('post').findOne({ _id :
new ObjectId(id) })
console.log(result);
if(result == null){
resp.status(404).send('Not Found!')
}else{
resp.render('detail.ejs', {post : result});
}
}catch(e){
console.log(e)
resp.status(404).send('Not Found!!');
}
})
- req.params로 해당 url 파라미터에 입력되는 값을 가져와서 변수에 넣어두었다.
- 그래서 db에서 해당 url 파라미터와 같은 값을 가진 데이터를 가져와서 result라는 변수에 담아두었다.
- 근데 유저가 이상한 아이디 값을 입력하게 되면 result 변수는 당연히 null이 담기게 되므로 if 문으로 예외를 처리해두었다.
- 또한 url파라미터에 이상한 값을 입력을 방지하기 위해 try catch 문으로 예외를 처리해두었다.
근데 위에 코드에 보이는 ObjectId는 const { ObjectId } = require('mongodb') 이렇게 따로 셋팅이 필요하다
링크를 연결하자
list.ejs파일에서 제목을 클릭하면 해당 링크로 이동할 수 있도록 링크를 연결하자
server.js
app.get('/list', async (req, resp) =>{
let result = await db.collection('post').find().toArray();
resp.render('list.ejs', {posts : result })
})
list.ejs
<div class="white-bg">
<% for(let i = 0; i < posts.length; i++){ %>
<div class="list-box">
<h4>
<a href="/detail/<%= posts[i]._id %>"><%= posts[i].title %></a>
</h4>
<p><%= posts[i].content %></p>
</div>
<% } %>
</div>db에서 가져온 게시물들의 고유 아이디를 가지고 있을 것이고, 해당 게시물의 아이디를 가지고 a태그로 링크를 연결해주었다.
detail.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>list</title>
<link href="/main.css" rel="stylesheet">
</head>
<body class="grey-bg">
<%- include('nav.ejs') %>
<div class="detail-bg">
<h4><%= post.title %></h4>
<p><%= post.content %></p>
</div>
</body>
</html>그러고 detail.ejs에서 해당 데이터 값을 출력하면 끝
ha lee :)