nodejs+express 서버에 게시글 수정 요청하기

1. 개요

이번엔 게시글 상세 페이지에서

수정 버튼을 누르면 수정 페이지로 넘어가고,

수정 페이지에서 서버로 수정 요청을 해볼거임

 

서버에 수정 요청을 할때는 PUT 요청을 해야 함

우리는 할 일을 생성할때

<form style="margin: 20px" action="/add" method="POST">

form 태그에다가 이렇게 action과 method를 설정해줬음

 

근데 HTML에서는 POST와 GET요청만 가능하기 때문에

PUT 요청은 HTML에서 바로 할 수 없음

 

그럼 뭐 어떻게 해야할까?

 

2. method-override

HTML에서도 꼼수로 PUT요청 할 수 있는데

라이브러리를 하나 설치해야 함

npm install method-override

설치 다 했으면 server.js에 아래 코드 추가해야 함

// method-override 사용 설정
const methodOverride = require('method-override')
app.use(methodOverride('_method'))

이 코드는 method-override 라이브러리를 사용하겠다는 뜻입니당

 

3. 코드 작성

(1) server.js

// /edit/:id로 요청 오면 GET 처리 가능
app.get('/edit/:id', function(요청,응답){
    db.collection('post').findOne({_id : parseInt(요청.params.id)}, function(에러, 결과){
        console.log(결과);
        // post라는 변수에 DB에서 찾은 데이터를 집어넣음
        응답.render('edit.ejs', {post : 결과})
    });
})

// /edit으로 요청 오면 PUT 처리 가능
app.put('/edit', function(요청, 응답){
    // 특정 데이터를 찾아서 변경할 데이터로 SET(update역할)해주면 됨
    // 요청.body.id는 body태그에서 name이 id인 값을 가져오는 거임
    db.collection('post').updateOne({_id : parseInt(요청.body.id)}, { $set : { 제목: 요청.body.title, 날짜 : 요청.body.date}}, function(에러, 결과){
        console.log('수정 완료');
        // 수정 완료시 /list로 보내줌
        응답.redirect('/list')
    });
})

일단 두가지 기능을 만들건데

우선은 특정 글에서 수정 버튼을 누르면

'/edit/글번호' 라는 URL로 GET 요청을 받을거임

그담에 edit.ejs파일을 렌더링 해줄겨

 

 두번째 기능은

수정 페이지에서 수정작업을 완료하면

'/edit' 라는 URL로 PUT 요청을 받을거임

그럼 HTML문서에서 데이터를 찾아올 수 있는

body-parser 라이브러리를 이용해서 해당 글번호를 가져옴

 

참고로 이미 edit.ejs에다가

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

이렇게 input 태그와 value, name 옵션을 이용해서 해당 게시글의 id값을 넣어두었음

 

자 그럼 해당 글번호를 가져왔으니 DB에다가 수정 요청을 보내야 함

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

db의 post라는 collection에다가 updateOne 요청을 보냄(데이터 수정 요청)

updateOne에는 2개의 파라미터를 넣어줘야 하는데

첫번째 파라미터에는 바꿀 데이터의 인식 값을 넣어줌

여기서는 body-parser로 찾아온 id값이 되겠슴

 

두번째는 $set을 이용해 DB에다가 연산해줄 값을 넣어줌

쉽게 말하면 뭘로 바꿀지 넣어주는 거임

우리는 제목과 날짜를 수정하겠다고 코드를 짜볼게여

 

그담에는 콜백함수 넣어주면 됨

참고로

redirect옵션으로 해당 작업이 끝난 뒤 어떤 페이지로 이동시켜줄지 정할 수 있음