[Node.js] 글 수정 기능 추가하기

edit 페이지를 추가하고 기존의 글을 수정할 수 있게 만들어보자.

 

---

우선 edit.ejs파일부터 만든다.

app.get('/edit/:id',function(req,res){
    db.collection('post').findOne({_id:parseInt(req.params.id)},function(에러,결과){
        res.render('edit.ejs',{data: 결과})
    })
})

상세페이지를 만들었을 때와 마찬가지로,

경로 뒤에 id값을 파라미터로 받아서, 해당 글을 수정하는 페이지가 보이게 하자.

 

/edit/:id 경로로 get 요청을 하면, DB에서 _id값이 (파라미터)id와 일치하는 데이터를 찾아 edit.ejs로 보내 렌더링한다.

 

<%- include('nav.html') %>

    <h4><%=data._id%>번 글 수정하기</h4>
    <div class="container mt-4">

        <form action="/edit?_method=PUT" method="POST">
            <input type="text" name="id" style="display:none" value="<%=data._id %>"">
            <!-- 안보이는 form태그를 만들어 id값을 서버에 전송 -->
            <div class="form-group">
                <label>오늘의 할 일</label>
                <input type="text" class="form-control" name="title" value="<%= data.title %>">
            </div>
            <div class="form-group">
                <label>Due date</label>
                <input type="text" class="form-control" name="date" value="<%= data.date %>">
            </div>

            <button type="submit" class="btn btn-outline-primary">저장하기</button>
        </form>
    </div>

이것은 edit.ejs파일의 일부이다.

write.ejs파일을 약간만 수정해서 사용했다.

 

input태그에는 수정하기 전 기존의값이 미리 입력되어있도록 하기위해서 value="<%= data.title %>" 과 같이 설정해주었다.

form태그의 method에 PUT을 입력하고싶지만.. html에서 PUT요청을 할 수 없다.

그래서 method-override라는 라이브러리를 설치해 사용해야 한다.

 

npm install method-override

터미널에 다음과 같이 입력 한 후

 

const methodOverride = require('method-override');
app.use(methodOverride('_method'));

서버에 다음과 같은 코드를 추가한다.

 

이후에

<form action="/edit?_method=PUT" method="POST">

다시 edit.ejs파일로 돌아와서, form태그 안 action으로

"/경로?_method=PUT"을 적어주면 PUT요청을 할 수 있다.

---

app.put('/edit',function(req,res){
    // console.log(req.body);
    db.collection('post').updateOne({_id:parseInt(req.body.id)},{$set:{title:req.body.title,date: req.body.date}},function(에러,결과){
        // console.log('완료했어');
        res.redirect('/list')
    })
})

다시 서버로 돌아와서,

/edit경로로 put요청이 들어왔을 때 요청을 처리해주는 코드를 작성한다.

db에서 updateOne메소드를 사용하여 id가 일치하는 데이터를 요청에 들어온 값으로 변경해주고,

(참고: 요청에 id값이 포함되게 하기 위해서, edit.ejs파일의 form태그 안에 input태그를 하나 더 추가하여 id값을 넣어놓고, 이 태그를 display:none으로 설정하여 보이지 않게 하였다.)

redirect로 다시 /list로 돌아가게 했다.