04. CRUD - 상세페이지 만들기

상세페이지 틀 만들기

제목을 클릭하면 상세페이지로 갈 수 있게 만들고 싶으므로, 제목에 링크를 걸겠다.

 {% for item in list %}
    <tr>
        <td>{{loop.index}}</td>
        <td>
            <a href="/view?index={{loop.index}}">{{item.subject}}</a>
        </td>
        <td>{{item.username}}</td>
        <td>{{item.date}}</td>
    </tr>
{% endfor %}

 

 

상세페이지인 view.html도 만든다.

<ul>
    <li>
	    제목 : 
    </li>
    <li>
    	작성자 : 
    </li>
    <li>
    	작성일 : 
    </li>
</ul>

잘 작동하고 있다.

 

 

---

데이터 끌어오기

 {% for item in list %}
    <tr>
        <td>{{loop.index}}</td>
        <td>
            <a href="/view?index={{loop.index}}">{{item.subject}}</a>
        </td>
        <td>{{item.username}}</td>
        <td>{{item.date}}</td>
    </tr>
{% endfor %}

여기서 우리가 주소로 이동한것뿐만 아니라, 주소에다가 query 값을 보낸 것을 알아야한다.

이동한 주소를 잘 보면 http://localhost:3000/view?index=1 라고 되어있는걸 기억하자.

https://hancoco.tistory.com/11

[211229] url, uri, form

 

 

우리는 이 query값을 받아와서 사용할 것이다.

app.get('/view',(req,res)=>{
	//query값 확인
  console.log(req.query)
  
  //index에 값을 넣음.
  const index = req.query.index
  
  //list안의 배열을 test에 넣음
  const test = list.list
  
  //view에 배열test의 index-1번째 값을 넣음
  //첫번째 순서는 배열의 0번째인걸 생각하자.
  const view = test[index-1]
  
  //값 확인
  console.log(view)
  
  res.render('board/view')
})

값이 잘 나오고 있는걸 확인할 수 있다.

 

 

---

값도 잘 나오는걸 확인했으니, 가져온 값을 상세페이지에 띄우자.

server.js에서 data란 이름으로 수정한 view 배열을 보내고, index값도 보냈다.

app.get('/view',(req,res)=>{
  const index = req.query.index
  const test = list.list
  const view = test[index-1]

  res.render('board/view',{
    data:view,
    index:index
  })
})

 

view.html에서 data 데이터를 받도록 Djang 문법을 사용한다.

<ul>
    <li>
        제목 : {{data.subject}}
    </li>
    <li>
        작성자 : {{data.username}}
    </li>
    <li>
        작성일 : {{data.date}}
    </li>
</ul>

 

잘 나온다.