본문 바로가기
[스파르타 코딩클럽]/비개발자를 위한, 웹개발 종합반

팬명록 -POST-

by 수민띠 2023. 2. 26.

응원 게시하기 API 만들기(POST)

데이터 명세

요청 정보: URL= /guestbook, 요청 방식 = POST

클라(fetch) → 서버(flask) : name, comment

서버(flask) → 클라(fetch) : 메시지 ex) 응원 완료!

 

클라이언트와 서버 연결 확인하기

버튼을 눌러 서버에 요청을 보내고, 응답이 오면 연결 완료

 

서버 만들기

step1. name, comment 정보를 받았다고 가정하고 코드 짜기

step2. name, comment데이터 변수에 저장

step3. DB에 저장하기

step4. 클라이언트에게 보낼 메시지 작성

@app.route("/guestbook", methods=["POST"])
def guestbook_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']

    doc = {
       'name':name_receive,
       'comment':comment_receive
    }
    db.fan.insert_one(doc)
    
    return jsonify({'msg': '응원 완료!'})

 

클라이언트 만들기

step1. 서버에 요청하는 버튼 찾기 및 원하는 데이터가 어떤 input태그에 담겼는지, id값은 무엇인지 확인

step2. 서버로 보낼 데이터(name, comment) 준비해서 formData에 넣기

step3. 자연스러움을 위한 새로고침 코드 넣기

window.location.reload();

 

function save_comment() {
      let name = $('#name').val();
      let comment = $('#comment').val();

      let formData = new FormData();
      formData.append("name_give", name);
      formData.append("comment_give", comment);

      fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
        alert(data["msg"]);
        window.location.reload();
      });
    }

 

 

동작 테스트

웹페이지에서 입력한 데이터가 DB에 저장되었는지 확인하기

전체 코드

app.py

더보기 
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

from pymongo import MongoClient
client = MongoClient('몽고DB주소')
db = client.dbsparta


@app.route('/')
def home():
   return render_template('index.html')

@app.route("/guestbook", methods=["POST"])
def guestbook_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']

    doc = {
        'name':name_receive,
        'comment':comment_receive
        }
    db.fan.insert_one(doc)
    
    return jsonify({'msg': '응원 완료!'})

@app.route("/guestbook", methods=["GET"])
def guestbook_get():
    return jsonify({'msg': 'GET 연결 완료!'})

if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

 index.html

더보기 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>

  <title>초미니홈피 - 팬명록</title>

  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap"
    rel="stylesheet" />
  <style>
    * {
      font-family: "Noto Serif KR", serif;
    }

    .mypic {
      width: 100%;
      height: 300px;

      background-image: linear-gradient(0deg,
          rgba(0, 0, 0, 0.5),
          rgba(0, 0, 0, 0.5)),
        url("https://cdn.topstarnews.net/news/photo/201807/456143_108614_510.jpg");
      background-position: center 30%;
      background-size: cover;

      color: white;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .mypost {
      width: 95%;
      max-width: 500px;
      margin: 20px auto 20px auto;

      box-shadow: 0px 0px 3px 0px black;
      padding: 20px;
    }

    .mypost>button {
      margin-top: 15px;
    }

    .mycards {
      width: 95%;
      max-width: 500px;
      margin: auto;
    }

    .mycards>.card {
      margin-top: 10px;
      margin-bottom: 10px;
    }
  </style>
  <script>
    $(document).ready(function () {
      set_temp();
      show_comment();
    });
    function set_temp() {
      fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
        let temp = data['temp'];
        $('#temp').text(temp);
      });
    }
    function save_comment() {
      let name = $('#name').val();
      let comment = $('#comment').val();

      let formData = new FormData();
      formData.append("name_give", name);
      formData.append("comment_give", comment);

      fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
        alert(data["msg"]);
        window.location.reload();
      });
    }
    function show_comment() {
      fetch('/guestbook').then((res) => res.json()).then((data) => {
        alert(data["msg"])
      })
    }
  </script>
</head>

<body>
  <div class="mypic">
    <h1>십센치(10cm) 팬명록</h1>
    <p>현재기온: <span id="temp">36</span>도</p>
  </div>
  <div class="mypost">
    <div class="form-floating mb-3">
      <input type="text" class="form-control" id="name" placeholder="url" />
      <label for="floatingInput">닉네임</label>
    </div>
    <div class="form-floating">
      <textarea class="form-control" placeholder="Leave a comment here" id="comment" style="height: 100px"></textarea>
      <label for="floatingTextarea2">응원댓글</label>
    </div>
    <button onclick="save_comment()" type="button" class="btn btn-dark">
      댓글 남기기
    </button>
  </div>
  <div class="mycards" id="comment-list">
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>새로운 앨범 너무 멋져요!</p>
          <footer class="blockquote-footer">호빵맨</footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>새로운 앨범 너무 멋져요!</p>
          <footer class="blockquote-footer">호빵맨</footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>새로운 앨범 너무 멋져요!</p>
          <footer class="blockquote-footer">호빵맨</footer>
        </blockquote>
      </div>
    </div>
  </div>
</body>

</html>

'[스파르타 코딩클럽] > 비개발자를 위한, 웹개발 종합반' 카테고리의 다른 글

팬명록 -GET-  (0) 2023.02.26
팬명록 -세팅/조각 기능/뼈대 준비-  (0) 2023.02.26
프로젝트 버킷리스트 -GET-  (0) 2023.02.26
버킷리스트 -POST-  (0) 2023.02.26
버킷리스트 - 세팅/뼈대 준비-  (0) 2023.02.26

관련글

티스토리툴바