[Node.js/MongoDB] Post 데이터 넘기기

코딩애플님의 Node.js, MongoDB로 2시간 만에 빠르게 웹서비스 만들기 강의를 듣고 복습의 목적으로 작성하였습니다

Post

//index.js
const express = require('express')
const app = express()
const port = 3001

app.get('/',(req,res)=>{
    res.sendFile(__dirname+'/index.html');
})
app.get('/write',(req,res)=>{
    res.sendFile(__dirname+'/write.html');
})
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

<!-- index.html -->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Home</title>
</head>
<body>
<nav class="nav nav-pills flex-column flex-sm-row">
    <a class="flex-sm-fill text-sm-center nav-link active" href="#">Home</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">TODO</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">Write</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">etc</a>
</nav>
<h4>Home</h4>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>

<!-- write.html -->
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>
<body>
<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Home</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">TODO</a>
  <a class="flex-sm-fill text-sm-center nav-link active" href="#">Write</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">etc</a>
</nav>
<h4>Write</h4>
<div class="container mt-3">
  <form>
    <div class="form-group">
      <label>오늘의 할일</label>
      <input type="text" class="form-control" name="title">
    </div>
    <div class="form-group">
      <label>날짜</label>
      <input type="text" class="form-control" name="date">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>

다음코드를 사용했습니다

bootstrap사용했습니다 사용 방법은 아래 링크를 확인해 주세요

https://leewang31.tistory.com/239

write.html의 from에 다음코드를 적어 줍니다.

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

action으로 경로를 정하고, method로 crud(get, post, put, delete...)를 정합니다

form태그 안에 출력을할 submit기능의 button이 필요합니다.

<button type="submit">Submit</button>

index.js로 돌아갑니다.

post로 보내준 데이터를 확인하기 위해 body-parser를 다운 받아야 합니다.

npm i body-parser

설치가 끝나고 서버js에 다음 코드를 작성해줍니다.

const bodyParser= require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))

post를 받는 경로는 /add이기 떄문에 아래 코드로 데이터가 잘 넘어 오는지 확인 합니다

app.post('/add', function(req, res){
    console.log(req.body);
    res.send('전송완료')
});

req,body라는게 보입니다.

req는 요청입니다.

post로 요청한 데이터가 req에 저장되어 있습니다.

req중 body에 해당 데이터가 저장됩니다. 여기서 말하는 데이터는 hrml에서 input태그 안에 있는 내용을 말합니다.

해당 데이터는 input의 name을 키가 된 모습으로 객체의 형태를 갖게 됩니다.

<input type="text" class="form-control" name="date">

http://localhost:3001/write에서 각각의 input에 내용을 적겠습니다.

저작자표시 (새창열림)

'백엔드 > node' 카테고리의 다른 글

[Node.js/MongoDB] MongoDB에 데이터 저장하기 (0)	2022.12.15
[Node.js/MongoDB] MongoDB 세팅 (무료호스팅) (0)	2022.12.15
[Node.js/MongoDB] Html파일 전송하기 (0)	2022.12.14
[Node.js/MongoDB] nodemon (0)	2022.12.14
[Node.js/MongoDB] Express와 get으로 읽기 (0)	2022.12.14

Post

'백엔드 > node' 카테고리의 다른 글

티스토리툴바