Express MongoDB 수정 구현

edit를 하기위해선 역시나 ejs를 사용해야 한다.

우선 편집하는기 위해서는 입력창과 같은 내용에서 db의 내용을 가져와서 거기에 수정을 해야한다.
그렇기 때문에 wirte.html내용을 그대로 가져온다.

여기서 고민해 봐야 하는것은 _id에 맞는 사이트를 열어야하는데 하나씩 만들수야 있지만 그건 비효율적이기 때문에 파라미터에 따라서 열리도록 하는 것을 :id로 설정할수있다.

그러면 /edit/:id라고 경로가 지정됬다면 나머지는 비슷하게 될것이다.

app.get('/edit/:id', function(req, res){
	db.collecion('post').findOne({_id : parseInt(req.params.id)}, function(error, result){
    	if(error){ return res.status(400). send({Message : "편집 실패 했습니다."})}
        res.render('edit.ejs', { posts : result })
    })
})

여기서 res.status(400)은 http 코드를 참고하면된다
https://developer.mozilla.org/ko/docs/Web/HTTP/Status
params를 이용하여 파라미터의 id를 출력하여 db에서 일치하는 객체를 찾고 그 결과를 posts로 받는것으로 완료되었다.

이제 form란에 input을 수정한다.
우선 이곳에 내용을 적기위해서는 value값을 넣어주면 가능하다

<input value="11111" type="text" class="form-control" name="Date">

제대로 적용이 됫다는걸 확인햇다면 이제 다른것과 똑같이 추출하여 넣어주면된다

input value="<%= posts.Title %>" type="text" class="form-control" name="Title">
<input value="<%= posts.Date %>" type="text" class="form-control" name="Date">

자 이제 모든것은 준비가 되었다. 그런데 이제 한가지를 고민해봐야 한다.
데이터 수정을 할때는 POST가 아닌 PUT을 사용하는데 html에서 PUT이 가능하던가?
정답은 아니다.
그렇기 때문에 method-override를 설치한다

npm install method-override

server.js 내용 추가

const methodOverride = require('method-override');

app.use(methodOverride('_method'))

그리고 이제 form에 다음과 같은 내용을 추가해준다

<form action="/edit?_method=PUT" method="POST" class="mt-4 container">

이제 이렇게 되면 데이터를 받고 데이터를 수정하는데에 필요한 정보를 모두 넣었다.
하지만 여기서 한가지 문제점이 생긴다.
그건 바로 데이터를 수정하여 업데이트 할때 db와 매치를 해야하는데 그것을 할수있는 내용이 없기때문이다.
그렇기 때문에 posts._id를 출력하는데 사용자는 모르게 해야한다.
그래서 style="display:none;"을 사용하여 출력을 제거한다.

<input type="text" value="<%= posts._id %>" class=" form-control" name="id" style="display: none;">

결과는 다음과 같아진다.

<form action="/edit/<%= posts._id $>?_method=PUT" method="POST" class="mt-4 container">
  <div class="form-group">
  	<input type="text" value="<%= posts._id %>" class=" form-control" name="id" style="display: none;">
   	<label>Title</label>
    <input value="<%= posts.Title %>" type="text" class="form-control" name="Title">
  </div>
  <div class="form-group">
    <label>Date</label>
    <input value="<%= posts.Date %>" type="text" class="form-control" name="Date">
  </div>
  <button type="submit" class="btn btn-outline-secondary" >수정</button>
</form>

이런식으로 하면 다음과 같은 결과가 나온다.

그리고 이제 put요청에 대한 API를 설정은 다음과 같아진다.

app.put('/edit/:id', funtion() 블라블라

다음은 내가 실제로 적용한 API이다.

app.put('/edit', function(req, res){
    id = parseInt(req.body.id)
    db.collection('post').updateOne({ _id : id}, {$set : {title : req.body.Title, Date : req.body.Date}}, function(error, result){
        res.status(200).send({ Message : '성공했습니다.'})
        if(error) {return res.status(400).send({ Message : "실패했습니다."})}
    }).done(function(){
        res.send("<p>수정이 완료되었습니다. 5초 후에 화면이 전환됩니다.</p>" + 
        "<script>setTimeout(function() { location.href='/list'; }, 500);</script>");
    })
})