rhanziy

node.js - method-override 라이브러리 PUT 구현 본문

Node.js

node.js - method-override 라이브러리 PUT 구현

rhanziy 2023. 3. 20. 14:05

 

/edit/게시물id url 접속 시 올렸던 게시물 수정페이지를 구현해보자.

server.js 코드

app.get('/edit/:id', function(요청, 응답){
  db.collection('post').findOne({ _id : parseInt(요청.params.id) }, function(에러, 결과){
    응답.render('edit.ejs', { post : 결과 })
  })

 

edit.ejs에서 PUT을 구현해야하는데 PUT과 DELETE는 html에서 구현못한다.

그러므로 이번엔 method-override 라이브러리를 사용해봅시다 ^0^

npm install method-override

 

server.js 상단에 코드 2줄 추가

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

 

그리고 app.put 구현코드 db엔 updateOne()함수로 접근한다.

app.put('/edit', function(요청, 응답){
  db.collection('post').updateOne( {_id : ??}, {$set : { 제목 : ??, 날짜 : ?? }}, function(){
    console.log('수정완료')
  });
});

 

 

그러려면 edit.ejs에서 요청 값을 넘겨줘야겠죠.

id값을 몰래 숨겨서 server.js에 넘겨주자

<form action="/edit?_method=PUT" method="POST">
  <input value="<%= post._id %>" name="id" style="display : none">
  나머지 어쩌구~
  // server.js에서 input 태그의 name속성 이름으로 접근할 수 있다.
</form>

 

app.put('/edit', (req, res)=>{
    db.collection('post').updateOne({ _id: parseInt(req.body.id) }, 
    { $set : { title: req.body.title, date : req.body.date} },
    function(){
        console.log('수정완료') 
        res.redirect('/list')
    });
})

 

반복되는 parseInt작업과 수정이 완료되면 /list로 연결까지. req.body.title < 의 title은 

edit.ejs파일의 input태그 안 name속성 이름이다.

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

 

form태그안의 입력값들을 요청.body.속성이름으로 가져올 수 있지.

Comments