[Node.js + MongoDB + ejs]글 작성기능 만들기(post요청,insertOne,예외 처리)

서버에 뭔가 요청하려면 정확히 URL과 method를 기입해야함
<form> 태그에 URL과 method 기입란이 있음

<form action="/URL~" method="post">
	<butten>버튼</butten>
</form>

이런식으로 <form>태그 안에 action="/URL~" 과 method="POST" 를 쓰면 끝

이제 폼태그안에있던 전송버튼누르면 /어쩌구 URL로 POST요청이 갑니다.

 

 

첫째 . html이나 ejs파일에 글작성 란을 만든다

<form action="/add" method="POST"> //add라는 url로 post요청 보낸다는뜻
   <h4>글쓰기</h4>
    <input name="title"> //name="작명" 속성에 DB에 저장할 이름 작명
    <input name="content"> //name="작명" 속성에 DB에 저장할 이름 작명
    <button type="submit">전송</button>
</form>

서버로 전달하고 싶으면 <input>에다가 전부 name = "  " 속성을 열어서 아무거나 영어로 작명해주면 됩니다. 

<form class="form-box" action="/posting" method="POST">
   <h4>인풋박스제목</h4>
   <input name="title">
   <input name="text">
   <button type="submit">전송</button>
</form>

<form> : 폼태그는 html에서 인풋박스 만들때 쓰는거임

form(폼)안에다 인풋박스 만들어야 서버에 전송하기 편함

action="/ULR~~" : URL내용은 서버파일 에서 사용할 URL

name="이름" : input박스에는 DB에 어떤이름 으로 저장할지 name을 지정해줘야함

 method="POST" : 서버에 post 요청 할꺼란 뜻임

 

 

위 내용 에서 인풋태그에 유저가 적어서 전송한 내용을 보고싶으면

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

//서버파일 상단 쯤에 이런거 추가합시다. 
//원래 유저가 데이터를 보내면 그걸 꺼내쓰는 코드가 좀 귀찮게 되어있는데
//그걸 요청.body로 쉽게 꺼내쓸 수 있게 도와주는 코드입니다.

 

 

둘째 . 서버파일.js에서 post요청을받을 API를 만들어야함

html이나 ejs파일에 /URL과 서버파일의 /URL이 일치하게 해야함

app.post('/URL', async (요청, 응답) => {
  await db.collection('post').insertOne({ title : 요청.body.title, content : 요청.body.content })
  응답.redirect('/list')
})

 

해석해보면

app.post('/add', async (요청, 응답) => {   await db.collection('post').insertOne({ title : 요청.body.title, content : 요청.body.content })   응답.redirect('/list') })

app.post()	post 요청이 오면
'/add'	/add 라는 url로 (참고로 add말고도 아무렇게나 작명 가능)
async |  await	async = await을 쓰기위한거 await = 실행될때까지 기다리란뜻
db.collection('post')	DB의 컬렉션이름 중에 post라는 이름을가진 컬렉션에 가서
.insertOne({     title : 요청.body.title, content : 요청.body.content })	하나를 삽입해라 ({ 괄호안에는 인풋태그로 받은내용 연결 })
응답.redirect('/list')	유저에게 응답해준다 rebirect('/URL') = URL로 이동하라고

/add 라는 url로 post요청이 오면 DB에 컬랙션리스트중에 POST라는 이름 가진 컬렉션에 하나 삽입하라
그리고 /list 라는 페이지로 이동하게끔 응답을 줘라 이런뜻임

 

 

셋째 . 글을 잘썼는지 검열하거나 걸러내는 기능

유저가 제목을 안적고 글을 전송하는 이런상황을 검열할려면

자바스크립트의 if문 을 사용하면 됩니다.

app.post('/add', async (요청, 응답) => {
  if (요청.body.title == '') {
    응답.send('제목안적었는데')
  } else {
    await db.collection('post').insertOne({ title : 요청.body.title, content : 요청.body.content })
    응답.redirect('/list') 
  }
})

해석해보면

app.post('/add', async (요청, 응답) => {   if (요청.body.title == '') {     여기는 알럿박스나 특정페이지로 이동시키거나 하는 코드 적는곳   } else {     await db.collection('post').insertOne({ title : 요청.body.title, content : 요청.body.content })     응답.redirect('/list')    } })

if 만약에 요청 >>요청.body.title == ' ' << 이게 빈칸으란뜻

else 아니면 정상실행 하라 원래코드를