MongoDB - 수정하기 PUT요청 (updateOne)

수정하기 기능 만들어 봅시다.

앞부분은 상세페이지에서 했던 거랑 똑같습니다.

 

1. /edit/아무입력 로 접속하면 띄울 페이지를 만듭니다.

app.get("/edit/:id", (요청, 응답) => {
      return 응답.render("edit.ejs");
});

 

2. url에 입력된 파라미터와 일치하는 데이터를 찾습니다.

app.get("/edit/:id", (요청, 응답) => {

  db.collection("post").findOne({ _id: parseInt(요청.params.id) }, (에러, 결과) => {

=> 문자열로 저장되기 때문에 parseInt로 int형으로 바꿔줍니다.
      return 응답.render("edit.ejs", { post: 결과 });
=> 찾은 데이터를 post 변수에 저장하여 edit.ejs 파일에 넘겨주고 렌더링합니다.

  });

});

 

 

3. 이상한 페이지로 접속했다면 404를 띄우도록 합니다. 

app.get("/edit/:id", (요청, 응답) => {
  db.collection("post").findOne({ _id: parseInt(요청.params.id) }, (에러, 결과) => {
    if (결과) {
      return 응답.render("edit.ejs", { post: 결과 });
    }
    응답.render("edit404.ejs");
  });

});

 

 

 

4. 이제 input 에 데이터 값을 넣어주어 수정하기 전 원본 데이터를 볼 수 있도록 합니다.

이거를

이렇게 이미 채워지도록 하는겁니다.

 

value의 값에 ejs 문법을 이용해 찾은 데이터를 뿌려줍니다.

=> value="<%= 찾은데이터저장한변수명 %>"

          <input value="<%= post.제목 %>" type="text" class="form-control" name="title" />

          <input value="<%= post.날짜 %>" type="text" class="form-control" name="date" />

 

 

 

 

---

 

이제 본론입니다.

PUT 요청을 해보자

 

1. 기본 셋팅입니다.

html5 에는 GET과 POST요청만 있기 때문에 수정을 위한 PUT이나 삭제를 위한 DELETE 요청이 없습니다.

=> PUT 기능을 이용하기 위해서는 라이브러리를 설치합니다.

$ npm i method-override

 

server.js 상단에 코드를 추가합니다.

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

 

form의 action에 ?_method=PUT 코드를 추가합니다.

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

 

 

 

2. PUT 을 이용합니다.

app.put("/edit", (요청, 응답) => {

  db.collection("post").updateOne({ _id: 0 }, { $set: { 제목: 0, 날짜: 0 } }, (에러, 결과) => {});

=> post collection에서 {_id:0}데이터 찾아주세요 / $set 해주세요 / callback해주세요. 라는 뜻

 

  $set 연산자는 없으면 추가하고, 있다면 업데이트 합니다.

ex) { _id: 13 } 인 데이터 찾아서, 이 데이터의 {제목:수정전} 을 {제목:수정후} 로 바꿔주세요.

});

 

 

 

3. form에서 id는 어떻게 전송받아요.

=> input을 하나 더 만들어서 display: none을 해버리면 이용자에게는 보이지 않도록 id를 전송할 수 있습니다.

          <input value="<%= post._id %>" type="text" name="id" style="display: none" />

 

name에 저장된 id, 제목, 날짜 데이터를 요청.body로 각각 가져옵니다.

app.put("/edit", (요청, 응답) => {

  db.collection("post").updateOne({ _id: parseInt(요청.body.id) }, { $set: { 제목: 요청.body.title, 날짜: 요청.body.date} }, (에러, 결과) => { });

수정 잘 됩니다.

 

 

 

 

4. 응답.redirect("/보낼주소") 로 유저를 다시 list 페이지로 보냅니다.

app.put("/edit", (요청, 응답) => {

  db.collection("post").updateOne({ _id: parseInt(요청.body.id) }, { $set: { 제목: 요청.body.title, 날짜: 요청.body.date } }, (에러, 결과) => {

    console.log("수정 성공");

    응답.redirect("/list");

  });

});

=> 수정을 완료했으면 다시 list 페이지로 보내기