method-override를 통한 PUT 요청

Jinno·2022년 8월 10일
1

Express

목록 보기
9/11
  • HTML form tag에서는 POST, GET 방식만 지원
  • DELETE, PUT을 사용하기 위해서는 AJAX를 사용 또는 method-override 라이브러리 사용


1. method-override 라이브러리 설치
npm install method-override


2. index.js 설정

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


3. form tag에서 PUT요청 사용

<form action="/edit?_method=PUT" method="POST">
  • form tag의 action="/edit?_method=PUT"을 입력하고, method="POST"로
  • 그러면 edit 경로로 PUT요청을 해줌
  • tag의 method는 POST로 입력되어 있지만, action에서 PUT으로 override함
<form action="/edit?_method=PUT" method="POST">
        <div class="form-group">
          <input type="text" name="id", value="<%=post._id%>", style="display: none;">
          <label>할일</label>
          <input type="text" class="form-control" name="title" value="<%=post.name%>">
        </div>
        <div class="form-group">
          <label>날짜</label>
          <input type="text" class="form-control" name="date" value="<%=post.date%>"">
        </div>
        <button type="submit" class="btn btn-outline-secondary">Submit</button>
</form> 


4. index.js에서 처리

//GET으로 들어올때
app.get('/edit/:id', function(req,res){
    db.collection('post').findOne({_id: parseInt(req.params.id)}, function(error, result){
        console.log(result)
        res.render('edit.ejs', {post: result})
    })
})

//PUT으로 들어올때
app.put('/edit', function(req,res){
    db.collection('post').updateOne({_id: parseInt(req.body.id)}, {$set: {name:req.body.title, date:req.body.date}}, function(error, result){
        console.log('수정완료')
        res.redirect('/list')        
    })    
})
profile
Innovation, 기록용

0개의 댓글