[Node+MongoDB]글 작성기능1(POST 요청)

우선 글 작성을 위하여

1. 글 작성 페이지에 글을 써서 서버로 전송
2. 서버에서 글을 검사
3. 이상없는 경우 DB에 저장

위 세 가지 기능이 필요하다.

1. 글 작성 페이지에 글을 써서 서버로 전송

1. 우선 views 폴더 아래에 write.ejs를 만들어 아래와같이 작성해주고,
   
   form태그 내부에 데이터 전달을 위해 input태그와 button태그를 넣어준다.
   이 때, button태그에 type으로 submit을 넣어주고,
   해당 버튼을 클릭하면 실행되는 action과 method를 form태그에 아래와같이 추가해준다.

<form class="form-box" action="/URL~~" method="POST">

이런 식으로

하지만 input에 name속성을 넣어주지 않으면 해당 데이터가 넘어가지 않기 때문에 name속성도 추가해준다.
(이전에 DB에 데이터를 title과 content로 작성해주었기 때문에 name에 title과 content를 넣어주었다.)

+) write.css연결도 해주자!

2. server.js에 /write로 들어오면 해당 html이 보일 수 있도록 GET처리

app.get("/write", (요청, 응답) => {
  응답.render("write.ejs");
});

2. 서버에서 글을 출력해보기

1. server.js에서 POST요청을 처리해주는 코드 작성하는데, 출력을 해보기 위해 서버코드 상단에

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

해당 코드를 추가한 다음,

2. 아래 POST요청 코드를 작성하며
   console.log(요청.body);를 넣어보자.
   (콘솔창에 .body를 해보기 위해 앞의 코드를 추가한 것)
   

이후 write페이지로 들어가 글을 작성 및 전송해보면

콘솔창에 object 형식으로 잘 나타난다.

3. 글을 DB에 저장

db.collection('post')와 insertOne()을 활용하여

app.post("/add", (요청, 응답) => {
  console.log(요청.body);
  db.collection("post").insertOne({
    title: 요청.body.title,
    content: 요청.body.content,
  });
});

아까 ejs파일의 input태그에 name속성으로 작성해줬던 이름을 req.body.이름이런 식으로 해서 title과 content에 넣어주었다.

이후, 다시 아래처럼 글을 작성하여

전송버튼을 누른 후 vscode의 콘솔창과 몽고DB에서 데이터가 잘 들어갔는지 확인해보면

콘솔창에도 잘 뜨고

DB에도 데이터가 잘 들어가있는 모습을 확인할 수 있었다