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

버킷리스트 -POST-

by 수민띠 2023. 2. 26.

버킷리스트 기록 API 만들기(POST)

데이터 명세

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

클라(fetch) → 서버(flask) : bucket

서버(flask) → 클라(fetch) : 메시지 ex) 저장 완료

 

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

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

 

서버 만들기

step1. bucket 정보를 받았다고 가정하고 코드 짜기

step2. bucket데이터 변수에 저장

step3. DB에 저장하기

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

@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form['bucket_give']
    doc = {
        'bucket' : bucket_receive
    }
    db.bucket.insert_one(doc)
    print(bucket_receive)
    return jsonify({'msg': '저장 완료'})

 

클라이언트 만들기

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

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

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

window.location.reload();

 

function save_bucket() {
      let bucket = $('#bucket').val()

      let formData = new FormData();
      formData.append("bucket_give", bucket);

      fetch('/bucket', { method: "POST", body: formData, }).then((response) => response.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("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form['bucket_give']
    doc = {
        'bucket' : bucket_receive
    }
    db.bucket.insert_one(doc)
    print(bucket_receive)
    return jsonify({'msg': 'POST 연결 완료!'})
    
@app.route("/bucket", methods=["GET"])
def bucket_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>

  <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet" />

  <title>인생 버킷리스트</title>

  <style>
    * {
      font-family: "Gowun Dodum", sans-serif;
    }

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

      background-image: linear-gradient(0deg,
          rgba(0, 0, 0, 0.5),
          rgba(0, 0, 0, 0.5)),
        url("https://images.unsplash.com/photo-1601024445121-e5b82f020549?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80");
      background-position: center;
      background-size: cover;

      color: white;

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

    .mypic>h1 {
      font-size: 30px;
    }

    .mybox {
      width: 95%;
      max-width: 700px;
      padding: 20px;
      box-shadow: 0px 0px 10px 0px lightblue;
      margin: 20px auto;
    }

    .mybucket {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .mybucket>input {
      width: 70%;
    }

    .mybox>li {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      margin-bottom: 10px;
      min-height: 48px;
    }

    .mybox>li>h2 {
      max-width: 75%;
      font-size: 20px;
      font-weight: 500;
      margin-right: auto;
      margin-bottom: 0px;
    }

    .mybox>li>h2.done {
      text-decoration: line-through;
    }
  </style>
  <script>
    $(document).ready(function () {
      show_bucket();
    });
    function show_bucket() {
      fetch('/bucket').then(res => res.json()).then(data => {
        console.log(data)
        alert(data["msg"]);
      })
    }

    function save_bucket() {
      let bucket = $('#bucket').val()

      let formData = new FormData();
      formData.append("bucket_give", bucket);

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

  </script>
</head>

<body>
  <div class="mypic">
    <h1>나의 버킷리스트</h1>
  </div>
  <div class="mybox">
    <div class="mybucket">
      <input id="bucket" class="form-control" type="text" placeholder="이루고 싶은 것을 입력하세요" />
      <button onclick="save_bucket()" type="button" class="btn btn-outline-primary">기록하기</button>
    </div>
  </div>
  <div class="mybox" id="bucket-list">
    <li>
      <h2>✅ 호주에서 스카이다이빙 하기</h2>
      <button onclick="done_bucket(5)" type="button" class="btn btn-outline-primary">완료!</button>
    </li>
    <li>
      <h2 class="done">✅ 호주에서 스카이다이빙 하기</h2>
    </li>
    <li>
      <h2>✅ 호주에서 스카이다이빙 하기</h2>
      <button type="button" class="btn btn-outline-primary">완료!</button>
    </li>
  </div>
</body>

</html>

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

팬명록 -세팅/조각 기능/뼈대 준비-  (0) 2023.02.26
프로젝트 버킷리스트 -GET-  (0) 2023.02.26
버킷리스트 - 세팅/뼈대 준비-  (0) 2023.02.26
AWS가입하기  (0) 2023.02.26
스파르타피디아 - GET -  (2) 2023.02.26

관련글

티스토리툴바