POST요청(form)

버튼을 누르면 form에 입력한 제목과 날짜를 서버로 전달해보자.

그럴려면 form 에 들어가야하는 요소가 있는데,

<form action="/add" method="POST">

method는 정보를 어떤 형태로 전달할건지 정한다.(GET,POST있음)

action은 경로를 설정한다. 

즉, /add경로로 POST요청을 한다.

 

이제 server.js에 작성해보자.

//어떤 사람이 /add경로로 POST요청을하면...
//??를 해주세요
app.post('/add', function(요청, 응답){
    응답.send('전송완료')
});

이렇게 적어주고, form태그에 내용을 입력하고 버튼을 누르면 화면에 전송완료 글씨가 생긴다.

그러면 이때, input에 적은 정보는 어디로간걸까?

정보들은 요청이란 파라미터에 저장된다. 근데 쉽게 꺼내쓰려면 body-parser라는 라이브러리를 이용해야한다. 

express라이브러리에 포함되어 있으니 따로 다운받을 필요가 없다.

//const bodyParser = require('body-parser');
//app.use(bodyParser.urlencoded({extended : true})); 4
//express가 아닐 때

app.use(express.urlencoded({extended : true}));
//express일 때

상단에 이렇게 써주면 된다. 

그 다음, form데이터의 경우 input들에 name을 써주어야 한다.

<div class="mb-3">
          <label for="exampleInputEmail1" class="form-label">오늘의 할일</label>
          <input class="form-control"  placeholder="오늘의 할일" name="title">
</div>
<div class="mb-3">
          <label for="exampleInputPassword1" class="form-label">세부내용</label>
          <input style="height: 150px;" class="form-control"  placeholder="세부내용" name="date">
</div>

이런 식으로, 각각 input태그마다 이름을 써준다. 

이제, input태그의 title을 서버로 전달한걸 확인해주려고

app.post('/add', function(요청, 응답){
    응답.send('전송완료');
    console.log(요청.body.title);
});

이렇게 적고 title input에 적고 버튼을 누르면 콘솔창에 입력한 값이 나오게 된다. 

즉, 요청.body는

 

이렇게 오브젝트 형태로 저장된다. 따라서 요청.body.title 혹은 요청.body.date로 꺼내서 사용할 수 있다.

 

이제 이런 데이터를 DB에 저장하면 된다. RESTAPI를 배우고 해보자