Node.js로 웹서비스 만들기 16일차

게시글 수정하는 페이지를 만들어보자

 

게시글 작성하는 페이지와 상세페이지 기능을 잘 응용하면 간단하게 만들 수 있다.

 

//server.js
app.get('/edit/:id', function(request, response){
    db.collection('post').findOne({_id : parseInt(request.params.id)}, function(error, result){        
        response.render('edit.ejs', { data : result });
    });
    
});

상세페이지와 같이 url에 파라미터를 넘겨서 _id에 따라서 내용을 불러오도록 한다.

 

파라미터는 list.ejs에서 넘긴다.

//list.ejs
<ul class="list-group">

        <% for(var i=0; i<posts.length; i++) { %>
          <li class="list-group-item">            
            <h4>할일 제목 : <a href="/detail/<%= posts[i]._id %>"><%= posts[i].제목 %></a></h4>
            <p>할일 마감날짜 : <%= posts[i].날짜 %></p>
            <button type="button" class="btn btn-danger delete" data-id="<%= posts[i]._id %>">삭제</button>
            <a href="/edit/<%= posts[i]._id %>" class="btn btn-dark edit">수정</a>
          </li>
        <% } %>
        
      </ul>

<a href="/edit/<%= posts[i]._id %>" class="btn btn-dark edit">수정</a> 이 부분이 파라미터 넘기는 부분

 

그리고 edit.ejs 파일에는 다음과 같이 인풋에 value를 넘겨준다.

//edit.ejs
<form>
        <div class="form-group">
          <label for="todo">Todo</label>
          <input type="text" id="todo" class="form-control" name="title" value="<%= data.제목 %>">          
        </div>

        <div class="form-group">
            <label for="dday">Due date</label>
            <input type="text" id="dday" class="form-control" name="date" value="<%= data.날짜 %>">          
          </div>
        
        <button type="submit" class="btn btn-primary" data-id="<%= data._id %>">Submit</button>
      </form>

이제 submit 버튼을 클릭했을 때 서버에 PUT 요청을 하면 됨

...