nodejs express CRUD 만들기 2(READ)

SMALL

nodejs express로 db에서 데이터 읽어오기

리스트 페이지에 있는 데이터를 클릭했을 때, 상세 페이지로 접근하는 기능을

구현하기 위해서는, 상세 페이지에 접근 했을 때, 해당되는 데이터를 db에서 읽어와야한다.

리스트페이지
리스트페이지에서는 페이지에 접근했을 때 post에 대한 모든 데이터를 가져온다.
그에 따라서 상세페이지로 접근할 수 있는 a태그의 href속성에 ejs문법을 활용하여
값을 입력하였다. <a href="/detail/<%= posts[i]._id %>"><%= posts[i].title %></a>
```
<!doctype html>
<html>
```

게시물 리스트 <%- include('nav.ejs') %>

<% for (let i = 0; i < posts.length; i++) { %>

<%= posts[i].title %> ✏️ 🗑️

<%= posts[i].content %>

<% } %>

```

리스트페이지 서버코드

app.get('/list', async (req, res) => {
try {
  let result = await db.collection('post').find().toArray();
  res.render('list', { posts: result });
} catch (err) {
  console.log('데이터베이스 오류:', err);
  res.status(500).send('서버 오류');
}
});

상세페이지
상세페이지는 리스트페이지를 통해서 접근하게 되는데
해당 경로는 리스트페이지의 상세페이지 접근을 위한 uri를 통해서
/list/랜덤문자 의 형태로 되어있다.
아래 서버 코드를 확인해보면 get요청을 /detail/:id 경로로로 요청이 들어왔을 때,
라는 코드를 작성해놓았는데, 구조적으로 같은 경로를 한번에 처리하고자 할 때 :를 통해서 처리한다.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>게시물 리스트</title>
    <link rel="stylesheet" href="/main.css" />
  </head>
  <body class="grey-bg">
    <%- include('nav.ejs') %>

    <div class="detail-bg">
      <h4><%= result.title %></h4>
      <p><%= result.content %></p>
    </div>
  </body>
</html>

상세페이지 서버코드

app.get('/detail/:id', async (req, res) => {
try {
  const postId = req.params.id;
  const post = await db.collection('post').findOne({ _id: new ObjectId(postId) });
  if (post) {
    res.render('detail', { result: post });
  } else {
    res.status(404).send('게시물을 찾을 수 없습니다.');
  }
} catch (err) {
  console.log('데이터베이스 오류:', err);
  res.status(500).send('서버 오류');
}
});

LIST

'Node.js' 카테고리의 다른 글

nodejs express CRUD 만들기 4(DELETE) (0)	2024.08.06
nodejs express CRUD 만들기 3(UPDATE) (0)	2024.08.06
nodejs express CRUD 만들기 1(CREATE) (0)	2024.08.06
express로 만든 서버에 mongoDB연동 + 데이터 화면에 출력 하기 (0)	2024.08.02
express 라이브러리 이용해서 서버 만들기 (0)	2024.08.01

간카레

nodejs express CRUD 만들기 2(READ)

<%= posts[i].title %> ✏️ 🗑️

'Node.js' 카테고리의 다른 글

티스토리툴바

nodejs express CRUD 만들기 2(READ)

<%= posts[i].title %> ✏️ 🗑️

'Node.js' 카테고리의 다른 글

'Node.js' Related Articles

티스토리툴바