06. CRUD - 글 수정기능 만들기

상세페이지 안에 들어가서 글을 수정할 수 있는 기능을 만들어보자.

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에서 이미 몇번째 글인지 알려주는 index 정보값을 가지고 있는 상태다.

 

<a href="/update?index={{index}}">수정하기</a>

이 index값을 수정페이지로 넘어갈때 query 값으로 넘겨준다.

 

app.get('/update',(req,res)=>{
  console.log('수정한다!',req.query)
})

query값을 잘 받고있는지 확인!

 

 

 

---

받은 쿼리값을 바탕으로 수정페이지를 구성하자.

app.get('/update',(req,res)=>{
  const index = req.query.index;
  
  //기존 정보 배열을 test으로 넣음
  const test = list.list
  
  //인덱스값을 추출해서 view에 넣음
  const view = test[index-1]
  
  //board폴더 안 update파일 실행하면서 다음 데이터도 전달함
  res.render('board/update',{
    index:index,
    data:view
  })
})

 

 

수정페이지 html

<ul>
    <li>
      제목 : {{data.subject}}
    </li>
    <li>
      작성자 : {{data.username}}
    </li>
    <li>
      작성일 : {{data.date}}
    </li>
</ul>
<a href="/update?index={{index}}">수정하기</a>

 

---

게시물 데이터 수정해서 다시 게시글에 띄우기

app.post('/update',(req,res)=>{
  const index = req.body.index
  const item = {
    subject:req.body.subject,
    username:req.body.username,
    date:req.body.date,
  }

  console.log(list.list[index-1])
  
  //받은 인덱스 값으로 배열에 있는 값을 덮어씌우기를 한다.
  list.list[index-1] = item
  console.log('수정!')
  
  //수정된 값으로 갈 수 있도록 redirect
  res.redirect(`/view?index=${index}`)
})

 

 

---

view.html에 삭제기능, 목록으로 가기 기능 추가

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

<a href="/update?index={{index}}">수정하기</a>

<a href="/list">목록</a>

<form method="post" action="/delete">
    <input type="hidden" name="index" value="{{loop.index}}">
    <input type="submit" value="삭제">
</form>