Form HTTP(DELETE, PUT) 템플릿상속
html 폼 전송은 form태그의 속성에 method를 추가하여 GET이나 POST요청을 보낼 수 있다.
하지만 PUT와 DELETE 요청은 불가능하다.
DELETE요청은 ajax를 PUT요청은 method-overrid를 활용해서 문제를 해결해보자.
👉 AJAX (DELETE요청)
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
jquert CDN을 추가하고 그 아래에 script태그를 생성해서 ajax명령을 작성한다.
<script>
$('.delete').click(function(){
$.ajax({
method : 'DELETE',
url : '/delete',
data : { _id : e.target.dataset.id }
}).done((req)=>{
$(this).parent('li').fadeOut();
})
});
</script>
e.target
은 지금 클릭한 요소를 뜻한다.
dataset.id
는 요소에 data-id 속성이 있으면 그 값을 반환하는 것이다.
$(this)
는 클릭 이벤트가 동작하는 곳으로 e.target
과 같은 의미다.
삭제요청이 성공하면 done 콜백함수가 동작한다.
this의 부모 요소 중 <li>
를 fadeOut
API로 부드럽게 사라지는 효과를 줄 수 있다.
이제 요청을 맞이하는 응답을 app.js에 작성해주자.
주의할 것은 ajax로 요청을 보내면 숫자 자료가 문자화가 되는 경우가 있다.
서버에서는 다시 문자로 변환된 데이터를 paserInt
를 사용하여 다시 정수형으로 바꿔줄 수 있다.
app.delete('/delete', (req, res)=>{
req.body._id = parseInt(req.body._id)
db.collection('post').deleteOne(req.body, (err, req)=>{
console.log('삭제완료')
})
res.sendStatus(204)
});
req.body
는 { _id : e.target.dataset.id }
를 담고있다.
이때 value는 아까 말했듯 숫자가 아니라 문자로 변환되어 할당되었다. 따라서 value의 형태만 정수로 바꿔서 다시 저장해준다.
mongodb모듈의 deleteOne은 인자로 받은 것과 조건이 일치하는 데이터 하나를 삭제한다.
삭제가 완료되면 정상적으로 다음 콜백함수가 실행된다.
👉 Method-override (PUT요청)
수정 작업을 하려면 put요청을 보내야하지만 HTML에서는 put요청을 보낼 수가 없다.
method-override를 사용해서 put요청을 흉내낼 수 있다.
npm i method-override
npm을 사용해서 method-override 모듈을 설치한다.
import methodOverride from "method-override"
app.use(methodOverride('_method'))
이코드를 app.js 상단에 추가해주면 put요청을 흉내내는 html의 form요청을 서버가 속아준다.
<form action="/add?_method=PUT" method="POST">
<input>
</form>
html은 action에 쿼리스트링으로 put요청을 흉내낸다고 명시해줌으로써 가짜 put요청을 보내게 된다.
이제 서버가 put요청을 받고 db작업을 해주는 코드만 작성하면 된다.
app.put('/edit', function(req, res){
db.collection('post').updateOne( {_id : parseInt(req.body.id) }, {$set : { 제목 : req.body.title , 날짜 : req.body.date }},
()=>{
console.log('수정완료')
res.redirect('/list')
});
});
보다시피 mongodb의 API는 직관적이다. updateOne의 동작은 예상하는 것처럼 하나의 데이터를 업데이트해준다.
첫번째 인자는 데이터를 구분할 수 있는 pk를 object로 전달해주고 두번재는 update할 내용들을 object로 전달해주면 된다.
👉 템플릿 상속
<header>
나 <footer>
그리고 <nav>
같은 것들은 html파일에 공통적으로 작성된다.
개발자들은 필요없는 반복작업을 싫어한다!
따라서 반복작업을 없애려는 많은 기술들이 나왔고 이 역시 마찬가지로 해결방법이 존재한다.
views폴더 안에 상속될 html 파일을 만들자.
그리고 ejs파일에 <%- include('상속파일이름.html') %>
을 작성해주면 html의 코드들이 저 코드 한문장으로 표현이 된다.
Author And Source
이 문제에 관하여(Form HTTP(DELETE, PUT) 템플릿상속), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@c-on/Form-HTTPDELETE-PUT-템플릿상속저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)